/** Shopify CDN: Minification failed

Line 385:149 Unexpected "`"

**/
/* ── page 20: page-19 pieces on page-17's night ── */

:root{--ink2:#F3EBE5;--ink50:rgba(243,235,229,.62);--grey:rgba(255,255,255,.06);--grey2:rgba(255,255,255,.06);--grey3:rgba(255,255,255,.08);--blue:#D4A574}
.container{width:100%;max-width:1340px;margin:0 auto;padding:0 var(--gutter)}
.grad{background:none;color:var(--gold);-webkit-text-fill-color:var(--gold);font-family:var(--serif-italic);font-style:italic}
.eb{color:var(--cream-3)}
.section_na .na_head h2,.insights_h,.section_think h2,.section_claims h2,.sv_head h2{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;color:var(--cream)}/* MN 09-21: fill the line, then wrap where it lands. The kit's h1,h2,h3 text-wrap:balance
   was splitting this into two even lines ("Four things you" / "may have tried.") on phones. */

.section_na .na_head h2{font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:0;text-wrap:wrap}
.na_head .sub,.ins_note,.section_claims .sub{color:var(--cream-3)}
.na_card .cap{color:var(--cream)}







@media(min-width:900px){}
.dslider{position:relative;overflow:hidden}
.arrows{margin-top:1.5rem}
.arrows button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,235,229,.22);background:transparent;color:var(--cream);font-size:20px;line-height:1;cursor:pointer}
.arrows button.is-disabled{opacity:.3;pointer-events:none}/* MN 2026-09-21: the photograph leads, the heading sits under it on ONE line, and the swapping word
   stays inline instead of dropping to a second row */






@media(min-width:900px){


}/* the gold half of the title changes with the item */






@media(min-width:900px){}/* four things you may have tried, built to page 21's card pattern: a contained row, squarer cards at a
   32px radius, the number / title / body scale underneath (MN 2026-09-21) *//* MN 2026-09-21: this section is now page 21's step 1 — a centred heading running straight into the card
   row, no sub-line, and the buy bar steps back over it (see the #satc patch in the JS) so the title, the
   picture and the description under it all fit ONE iPhone screen. Scoped on #instead so nothing here can
   be undone by the older `.na_head` / `.section_na` rules lifted from page 19. *//* tuned so the tallest card (04, the longest body) still clears a 1440x900 laptop: at 104/44/40 its last
   line landed 11 px below the fold */



#instead{padding:88px 0 40px}
#instead .container{display:flex;flex-direction:column;align-items:center}
#instead .na_head{width:100%;max-width:46rem;margin:0 auto;text-align:center}/* page 21's 72px ceiling, but the floor tracks the column so the line stays as big as it can be while
   still fitting on ONE line at phone width (34px at 390, 37px at 440) */

#instead .na_head h2{font-size:clamp(34px,8.6vw,72px);line-height:1.1;letter-spacing:0;text-wrap:wrap}
#instead .na_rail{margin-top:32px}
.na_rail{width:100%;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.nt{display:flex;flex-direction:column;min-width:0}
.nt_sh{position:relative;aspect-ratio:386/399;border-radius:32px;overflow:hidden;background:rgba(243,235,229,.06);margin:0}
.nt_sh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}/* the four names in the corners, page 21's tile pattern in this page's cream and gold */

.nt_sh--names{background:radial-gradient(120% 90% at 50% 0%,rgba(212,165,116,.15),transparent 62%),rgba(243,235,229,.04)}
.nt_ap{position:absolute;display:grid;place-items:center;width:38%;aspect-ratio:1;border-radius:24%;
  background:linear-gradient(160deg,rgba(243,235,229,.12),rgba(243,235,229,.05));
  border:1px solid rgba(243,235,229,.16);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.nt_ap b{font-size:14px;font-weight:600;line-height:1.2;color:var(--cream);text-align:center;padding:0 6px}/* a tile holding a mark: the name stays in the markup for screen readers and as the fallback if the file
   404s (onerror removes the img), but the mark covers it. Marks come in every colour, so the chip is cream. */

.nt_ap--mark{background:#fff;border-color:rgba(243,235,229,.3)}
.nt_ap--mark b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.nt_ap img{position:absolute;inset:16%;width:68%;height:68%;object-fit:contain}
.nt_ap--1{left:6%;top:6%}.nt_ap--2{right:6%;top:6%}.nt_ap--3{left:6%;bottom:6%}.nt_ap--4{right:6%;bottom:6%}
.nt_apc{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream-3);line-height:1.6;text-shadow:0 2px 10px rgba(0,0,0,.85)}/* the real chart, cloned in from the insights rail; the card just gives it room */

.nt_sh--chart{background:#15111f}
.nt_sh--chart .drowsie-chart{position:absolute;left:50%;top:50%;width:393px;max-width:none;
  transform:translate(-50%,-50%) scale(var(--cs,.70));transform-origin:center}/* MN 2026-09-21: the number and the name share one line, which buys back a row of height on the phone */

.nt_hd{display:flex;align-items:baseline;gap:10px;padding-top:18px}
.nt_n{font-size:24px;font-weight:600;letter-spacing:.8px;line-height:1.3;color:var(--cream)}
.nt_t{font-family:var(--sans)!important;font-size:20px;font-weight:600;letter-spacing:.8px;line-height:1.3;color:var(--cream);margin:0}/* MN 2026-09-21: the strike is back on the old line — he liked that distinction — and the Drowsie line is
   now visibly the answer rather than a second grey paragraph: full cream, a size up, behind a gold rule. */

.nt_was{font-size:14px;font-weight:500;letter-spacing:.4px;line-height:1.45;padding-top:12px;color:var(--cream-3);
  text-decoration:line-through;text-decoration-color:rgba(196,120,122,.7)}
.nt_now{font-size:15px;font-weight:500;letter-spacing:.4px;line-height:1.5;margin-top:16px;padding-left:14px;
  color:var(--cream);border-left:2px solid var(--gold)}
.nt_was b{font-weight:700;color:var(--cream-2)}
.nt_now b{font-weight:700;color:var(--gold)}
@media(max-width:1000px){/* the row becomes a swipe rail, as page 21's does, but it stays inside the column */
  
  .na_rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .na_rail::-webkit-scrollbar{display:none}
  .nt{flex:0 0 82%;scroll-snap-align:center}
  .nt_sh{border-radius:24px}/* the one-screen budget on a phone: header clearance, heading, picture, description, nothing else */
  
  #instead{padding:calc(76px + env(safe-area-inset-top)) 0 28px}
  #instead .na_rail{margin-top:24px}
  #instead .nt_n{padding-top:16px}
  #instead .nt_was{padding-top:10px}
  #instead .nt_now{padding-top:8px}
}/* the statement column, page 21's .say in this page's cream (MN 2026-09-21) */

.section_say{padding:140px var(--gutter) 120px;display:flex;flex-direction:column;gap:26px;align-items:center}
.say_p{width:100%;max-width:46rem;margin:0;text-align:center;font-size:clamp(20px,2.3vw,32px);font-weight:500;
  line-height:1.38;color:var(--cream-3)}
.say_p em{font-style:normal;font-weight:600;color:var(--cream)}
@media(max-width:1000px){.section_say{padding:88px var(--gutter) 80px;gap:22px}}/* MN 2026-09-21: the FAQ reads as a list of questions you open, not a wall of answers. Rows are native
   <details>, so the chevron rotation and the open state come free and it works with the keyboard. *//* the lifted section computes padding-top:0 (page 14 had something above it), so the heading ran
   under the fixed header on an #faq anchor jump */


#faq{padding-top:clamp(76px,7vw,112px)}
.faq-list{list-style:none;margin:0;padding:0}
.faq-list li{list-style:none;border-bottom:1px solid rgba(243,235,229,.14)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;
  list-style:none;padding:20px 0;font-size:clamp(1rem,1.5vw,1.15rem);font-weight:600;color:var(--cream)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.faq-list details[open] summary svg{transform:rotate(180deg)}
.faq-list summary:hover span{color:var(--gold)}
.faq-list .a{margin:0;padding:0 40px 22px 0;font-size:1rem;line-height:1.6;color:var(--cream-2)}/* think */

.section_think{padding:7rem 0}
.think_wrap{max-width:46rem;margin:0 auto;text-align:center}
.section_think h2{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1;margin:.6rem 0 1.4rem}/* MN 2026-09-21: the one wall of text is now two short paragraphs with air between them */

.think_p{font-size:clamp(1.1rem,1.6vw,1.375rem);line-height:1.6;color:var(--cream-2);text-align:left;
  display:flex;flex-direction:column;gap:1.1rem}
.think_p span{display:block}
.think_p b{color:var(--gold);font-weight:500}
@media(max-width:767px){.section_think{padding:4.5rem 0}}/* sensing badge */

.section_static.is-sensing .sv_head{height:100vh;justify-content:center}
.section_static.is-sensing .sv_head h2{font-size:clamp(2rem,4.6vw,3.5rem)}
.section_static.is-sensing .sv_cards{display:none}
.glass{position:absolute;right:8%;top:22%;background:rgba(255,255,255,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.28);border-radius:20px;padding:1.1rem 1.4rem;color:#fff;text-align:right;display:grid;gap:.1rem}
.glass b{display:block;font-family:var(--serif);font-weight:400;font-size:2.4rem;line-height:1}
.glass span{font-size:.8rem;opacity:.85}
.glass i{display:block;height:.7rem}
@media(max-width:767px){.glass{right:5%;top:16%;padding:.9rem 1.1rem}.glass b{font-size:1.9rem}}/* insights: the app's own charts */

.section_insights{padding:7rem 0 5rem}
.insights_h{font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:2.5rem;font-weight:400}/* MN 2026-09-22: "None of the homework." was breaking before the last word */

.insights_h{text-wrap:wrap}/* MN 2026-09-22: it split "None of / the homework." Give the gold phrase its own line on a phone so
   it stays whole; desktop already fits both halves on one line. */

@media(max-width:760px){.insights_h .gi{display:block}}
.ins_card.chart{width:393px;max-width:86vw;height:auto;background:transparent;border-radius:0;overflow:visible}/* the line under each chart that says what it is (MN 2026-09-22) */

.ins_cap{margin:14px 2px 0;font-size:.9rem;line-height:1.45;color:var(--cream-3);text-align:left}
.ins_card.chart .drowsie-chart{width:100%}/* the old image-card caption rule pins .cap to the bottom of the card; the sleep-score chart has its own
   .cap under the circle, so undo it for chart cards or the words land inside the ring */

.ins_card.chart .cap{position:static;left:auto;right:auto;bottom:auto;padding:0;background:none}
.section_insights .slider{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 14px;margin:0 calc(-1 * var(--gutter));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.section_insights .slider::-webkit-scrollbar{display:none}
.section_insights .slider>*{flex:none;scroll-snap-align:start;align-self:flex-start}
.section_insights .arrows{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px}
.section_insights .arrows button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(243,235,229,.22);background:transparent;color:var(--cream);font-size:18px;line-height:1;cursor:pointer;padding:0}
.section_insights .arrows .track{width:180px;height:6px;background:rgba(243,235,229,.14);border-radius:6px;position:relative;overflow:hidden;cursor:pointer;touch-action:none}
.section_insights .arrows .track i{position:absolute;left:0;top:0;bottom:0;width:40%;background:var(--rose);border-radius:6px}
.ins_note{font-size:.9rem;margin-top:1.2rem;text-align:center}
.dtrack{gap:1.25rem}
@media(max-width:767px){.section_insights{padding:4.5rem 0 3rem}}/* readings: the app's own drill-down, one real night, pannable */

.section_read{padding:6rem 0 5rem}
.read_h{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:.9rem;font-weight:400}
.read_sub{max-width:40rem;color:var(--cream-3);margin-bottom:2.2rem;font-size:1.02rem;line-height:1.55}
.rd_card{max-width:560px;width:100%;background:rgba(24,16,40,.62);border:1px solid rgba(243,235,229,.12);border-radius:1.4rem;padding:1.1rem 1.1rem 1.2rem}
.rd_top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.rd_top b{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--cream)}
.rd_top span{font-size:.85rem;color:var(--cream-3);font-variant-numeric:tabular-nums}
.rd_bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.8rem}
.rd_bar>button{border:0;background:rgba(93,74,138,.34);color:var(--cream-2);border-radius:999px;padding:.42rem .8rem;font:inherit;font-size:.82rem;cursor:pointer}
.rd_bar>button:disabled{opacity:.35;cursor:default}
.rd_pill{display:inline-flex;align-items:center;gap:.15rem;background:rgba(93,74,138,.34);border-radius:999px;padding:.18rem .3rem}
.rd_pill i{font-style:normal;font-size:.82rem;color:var(--cream-2);min-width:4.6rem;text-align:center;font-variant-numeric:tabular-nums}
.rd_pill button{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--cream);font:inherit;font-size:1rem;line-height:1;cursor:pointer}
.rd_pill button:disabled{opacity:.3;cursor:default}
.rd_stage{position:relative;border-radius:1rem;background:rgba(11,10,20,.55);overflow:hidden}
.rd_stage canvas{display:block;width:100%;height:270px;touch-action:pan-y;cursor:grab}
.rd_stage canvas:active{cursor:grabbing}
.rd_tip{position:absolute;z-index:2;background:rgba(11,10,20,.94);border:1px solid rgba(243,235,229,.18);border-radius:.7rem;padding:.5rem .65rem;font-size:.76rem;line-height:1.35;color:var(--cream);pointer-events:none;white-space:nowrap;transform:translate(-50%,-115%)}
.rd_tip b{color:var(--gold);font-weight:600}
.rd_axis{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;font-size:.72rem;color:var(--cream-3);margin:.5rem .1rem 0;font-variant-numeric:tabular-nums}
.rd_axis .ev{flex:1 1 auto;text-align:center;color:rgba(184,160,208,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd_axis>span:first-child,.rd_axis>span:last-child{flex:none}
.rd_key{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 1rem;padding:0;margin:.8rem 0 0;font-size:.74rem;color:var(--cream-3)}
.rd_key li{display:flex;align-items:center;gap:.35rem}
.rd_key i{width:9px;height:9px;border-radius:50%;display:block}
.rd_key .kb{background:#D4A574}.rd_key .km{background:#b8a0d0;border-radius:1px;width:4px;height:11px}
.rd_key .ko{background:rgba(93,74,138,.75);border-radius:2px;width:12px;height:9px}.rd_key .ks{background:transparent;border-radius:0;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #C4787A}
.rd_sum{margin-top:1rem;border-top:1px solid rgba(243,235,229,.1);padding-top:.9rem}
.rd_sum .eb{margin:0 0 .5rem}
.rd_sum dl{margin:0;display:grid;gap:.4rem}
.rd_sum dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.rd_sum dt{color:var(--cream-3);font-size:.86rem}
.rd_sum dd{margin:0;font-family:var(--serif);font-size:1.05rem;color:var(--cream);text-align:right}
.rd_note{font-size:.74rem;color:var(--cream-3);margin:.9rem 0 0;line-height:1.45}
@media(min-width:1000px){.read_grid{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:4.5rem;align-items:center}
  .read_copy{align-self:center}.read_sub{margin-bottom:0}}
@media(max-width:767px){.section_read{padding:4rem 0 3rem}.rd_stage canvas{height:240px}}/* orb, renamed */

.section_spanos{height:2000px}
.orb b{font-family:var(--serif);font-weight:400;font-size:4rem;letter-spacing:-.01em;color:rgba(30,20,50,.55)}
@media(max-width:767px){.section_spanos{height:1400px}.orb b{font-size:2.4rem}}/* the learn loop */



















@media(max-width:899px){}/* the loop, live: a scrubbed ring around an overhead photo, a card at each of the four points */

.section_ring{position:relative;height:300vh}/* audit #10: was 360vh; the last third held a finished ring */   
.rl_stage{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto auto auto;align-content:center;justify-items:center;row-gap:18px;overflow:hidden;padding:calc(58px + env(safe-area-inset-top)) var(--gutter) calc(84px + env(safe-area-inset-bottom))}
.rl_head{text-align:center;max-width:36rem}
.rl_head .eb{margin:0 0 .4rem}
.rl_head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;color:var(--cream)}
.rl_wrap{position:relative;width:min(88vw,370px);display:grid;grid-template-rows:auto auto;row-gap:18px;justify-items:center}
.rl_ringbox{position:relative;width:min(74vw,296px);aspect-ratio:1}
.rl_photo{position:absolute;left:12%;top:12%;width:76%;height:76%;border-radius:50%;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.rl_photo::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 70px rgba(11,10,20,.8);pointer-events:none}
.rl_photo img{width:100%;height:100%;object-fit:cover;transform:scale(var(--ps,1.06));transition:none;will-change:transform}
.rl_ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.rl_track{fill:none;stroke:rgba(243,235,229,.14);stroke-width:10}
.rl_arc{fill:none;stroke:url(#rlg);stroke-width:10;stroke-linecap:round;filter:url(#rlglow);will-change:stroke-dashoffset}
.rl_headdot{will-change:transform}
.rl_headdot .glow{fill:rgba(212,165,116,.35)}
.rl_headdot .dot{fill:#F3EBE5}
.rl_node .halo{fill:rgba(212,165,116,0);transition:fill .45s ease}
.rl_node .bg{fill:#0B0A14;stroke:rgba(243,235,229,.3);stroke-width:1.5;transition:stroke .45s ease,fill .45s ease}
.rl_node .ic{transform:rotate(90deg)}
.rl_node .ic path,.rl_node .ic circle{fill:none;stroke:rgba(243,235,229,.55);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s ease}
.rl_node.on .halo{fill:rgba(212,165,116,.16)}
.rl_node.on .bg{stroke:var(--gold);fill:rgba(212,165,116,.12)}
.rl_node.on .ic path,.rl_node.on .ic circle{stroke:var(--gold)}
.rl_card{position:absolute;width:100%;background:rgba(11,10,20,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(243,235,229,.14);border-radius:1.1rem;padding:1rem 1.1rem;opacity:0;transform:translateY(10px);transition:opacity .38s cubic-bezier(.25,.46,.45,.94),transform .38s cubic-bezier(.25,.46,.45,.94);pointer-events:none}
.rl_card.on{opacity:1;transform:none}
.rl_card .n{font-family:var(--serif);font-size:.85rem;letter-spacing:.14em;color:var(--gold);margin:0 0 .25rem}
.rl_card h3{font-family:var(--sans);font-weight:600;font-size:1.05rem;color:var(--cream);margin:0 0 .3rem}
.rl_card p{font-size:.95rem;line-height:1.45;color:var(--cream-2);margin:0}
.rl_cards{position:static;display:grid;justify-items:center;width:100%}
.rl_cards .rl_card{position:relative;grid-area:1/1}
.rl_hint{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-3);margin:0;transition:opacity .4s}
.section_ring.moved .rl_hint{opacity:0}
@media(min-width:900px){
  .rl_stage{row-gap:158px}
  .rl_wrap{width:min(36vh,370px);display:block;aspect-ratio:1}
  .rl_ringbox{position:absolute;inset:0;width:auto}
  .rl_card{width:min(30vw,280px)}
  .rl_stage{overflow:visible;padding-bottom:104px}
  .rl_card.is-bottom{top:calc(100% + 10px)}
  .rl_card.is-top{bottom:calc(100% + 10px)}
  .rl_cards{position:static;display:block}
  .rl_cards .rl_card{position:absolute}
  .rl_card.is-top{left:50%;bottom:calc(100% + 18px);transform:translate(-50%,10px)}
  .rl_card.is-top.on{transform:translate(-50%,0)}
  .rl_card.is-right{left:calc(100% + 18px);top:50%;transform:translate(0,calc(-50% + 10px))}
  .rl_card.is-right.on{transform:translate(0,-50%)}
  .rl_card.is-bottom{left:50%;top:calc(100% + 18px);transform:translate(-50%,10px)}
  .rl_card.is-bottom.on{transform:translate(-50%,0)}
  .rl_card.is-left{right:calc(100% + 18px);top:50%;transform:translate(0,calc(-50% + 10px))}
  .rl_card.is-left.on{transform:translate(0,-50%)}
}
@media(prefers-reduced-motion:reduce){.rl_card{position:relative!important;opacity:1!important;transform:none!important;margin:.4rem auto}.rl_cards{position:static;display:grid;gap:.5rem}.section_ring{height:auto}.rl_stage{position:static;height:auto;padding-bottom:3rem}}/* owner reviews: a column flow so each card keeps its own height and none stretch to a row */

.section_reviews{padding:7rem 0}
.rvw_h{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1;text-align:center;color:var(--cream);margin:0 0 3rem}
.rvw_grid{columns:1;column-gap:1.25rem}
.rvw_card{break-inside:avoid;margin:0 0 1.25rem;background:rgba(243,235,229,.05);border:1px solid rgba(243,235,229,.1);border-radius:1.25rem;padding:1.5rem 1.6rem;display:block}
.rvw_s{display:block;color:var(--gold);font-size:.95rem;letter-spacing:.14em;margin-bottom:.8rem}
.rvw_card blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--cream-2)}
.rvw_card figcaption{margin-top:1rem;font-size:.85rem;font-weight:600;letter-spacing:.04em;color:var(--cream-3)}
@media(min-width:720px){.rvw_grid{columns:2}}
@media(min-width:1100px){.rvw_grid{columns:3}}/* MN 2026-09-22: the product page's comparison, brought over to workshop. Its fault there was a 270px
   key column floating in empty space — here the brand marks occupy it, so the row has a left anchor and
   the eye lands on the thing being compared before it reads a word. *//* MN 09-23: close the gap under the hero — this section sits straight after it now */


.section_cmp2{padding:4.5rem 0 7rem}
@media(max-width:860px){.section_cmp2{padding:2.75rem 0 5rem}}
.cmp2_head{max-width:62rem;margin:0 auto 3rem;text-align:center}
.cmp2_head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1;color:var(--cream);margin:0}
.cmp2_sub{margin:1rem auto 0;max-width:46rem;font-size:1.02rem;line-height:1.6;color:var(--cream-3)}
.cmp2_rows{display:flex;flex-direction:column;gap:2px;border-radius:20px;overflow:hidden;max-width:1180px;margin:0 auto}
.cmp2_row{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;
  background:rgba(243,235,229,.05);border:1px solid rgba(243,235,229,.1);padding:26px 28px}
.cmp2_row:first-child{border-radius:20px 20px 0 0}
.cmp2_row:last-child{border-radius:0 0 20px 20px}/* MN 2026-09-22: the marks run in a LINE, not a 2x2 block — they read as a row of things you have tried
   rather than a tile grid competing with the copy. Static flow, so #instead's absolute .nt_ap--n rules
   are overridden here. *//* MN 2026-09-23: the marks were too small to read. Four tiles now SPAN the row (a 4-column grid, not a
   cluster on the left), landscape so wide wordmarks like WHOOP and Withings get the width they need, and
   the logo fills most of its tile. The chip is --chip, off-white rather than paper-white. *//* chip tested cream #F3EBE5 / dawn #E8D5C8 / lavender #E4DCEE / sage #DCE4DE (09-23); dawn is the
   least white and sits with the gold and plum */



.section_cmp2{--chip:#E8D5C8}
.cmp2_marks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;max-width:760px}
.cmp2_marks .nt_ap{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;aspect-ratio:4/3;border-radius:18px;
  background:var(--chip);border:1px solid rgba(243,235,229,.18);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.cmp2_marks .nt_ap b{font-size:13px;line-height:1.15;padding:0 6px;color:#3B2246}
.cmp2_marks .nt_ap img{inset:12% 10%;width:80%;height:76%;object-fit:contain}
.cmp2_b{min-width:0}
.cmp2_k{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.25;color:var(--cream)}
.cmp2_n{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--cream-3)}
.cmp2_k em{font-style:normal}
.cmp2_old{margin:0;font-size:15.5px;line-height:1.5;color:var(--cream-3);
  text-decoration:line-through;text-decoration-color:rgba(196,120,122,.75);text-decoration-thickness:1.5px}
.cmp2_old b{font-weight:600;color:var(--cream-2)}
.cmp2_new{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--cream);border-left:2px solid var(--gold);padding-left:14px}
.cmp2_new b{font-weight:600;color:var(--gold)}
@media(max-width:860px){
  .cmp2_row{gap:16px;padding:22px 20px}
  .cmp2_marks{gap:8px}
  .cmp2_marks .nt_ap{border-radius:12px}
  .cmp2_marks .nt_ap img{inset:10% 7%;width:86%;height:80%}
}/* ══ MN 2026-09-23: howitworks' calm, carried over (confirmed with the Website session, which built it) ══
   1. ONE continuous ground. The moonlit glows move off the sections and onto the body, tiled on three
      different periods (172/118/231vh) so they drift past as you scroll, never line up into bands, and
      no section edge can leave a seam. Each glow's centre sits well inside its tile, which is what stops
      the tile edge showing (Website's gotcha).
   2. Prose reads large, LIGHT and dim: weight 300, line-height 1.45, 62% cream, emphasis in gold italic
      serif rather than bold — the single biggest reason howitworks reads calm and this page read heavy.
   3. One text measure (728px) and the same generous padding on every text section. The gap under the
      hero stays tight — MN closed that on purpose. *//* (09-23 congruence) the ground is drowsie-aura.js now — no page-owned glows */



body>section:not(.f-hero){background-image:none!important;background-color:transparent!important}
body{background:transparent!important}
.section_say .say_p,.think_p,.cmp2_sub{font-weight:300;line-height:1.45;color:rgba(243,235,229,.62)}
.section_say .say_p em{font-family:'Spectral',Georgia,serif;font-style:italic;font-weight:400;font-size:1.08em;color:var(--gold)}
.section_say .say_p,.think_wrap,.cmp2_head{max-width:728px}
.think_p{font-size:clamp(1.15rem,1.9vw,1.6rem)}
.section_say{padding:140px 24px 120px!important;gap:30px}
.section_think{padding:140px 0 120px}
.section_insights,.section_claims,.section_read,.section_reviews{padding-top:136px!important;padding-bottom:120px!important}
@media(max-width:860px){
  .section_say{padding:96px 24px 88px!important}
  .section_think{padding:96px 0 88px}
  .section_insights,.section_claims,.section_read,.section_reviews{padding-top:96px!important;padding-bottom:88px!important}
}/* ══ MN 2026-09-23 — the design audit's fixes (Impeccable + Emil + Taste), numbered as in
   Reports/page20-audit-2026-09-23. Revert point: creative/theme-backups/page.drowsiesleep20.BEFORE-AUDIT-FIXES-2026-09-23.liquid *//* #1 footer: every group open and readable on desktop, no dead toggle */




.oz-foot details summary{pointer-events:none;list-style:none}
.oz-foot details summary::-webkit-details-marker{display:none}
.oz-foot details summary::marker{content:''}/* #3 the night film: 6.6 screens of pinned scroll cut to 3.6 (the beats keep their order and proportions) */

.n12{min-height:460vh}/* #3 its progress bar grows by transform, not width */

.n12__bar i{width:100%;transform:scaleX(var(--p,0));transform-origin:left center}/* #6 the gold words vanished on the light photos: a soft shade behind each heading, no hard edge */

#rested .sv_head,#partner .sv_head{background:linear-gradient(180deg,rgba(11,10,20,.78) 0%,rgba(11,10,20,.5) 62%,rgba(11,10,20,0) 100%);padding-bottom:4rem}
#rested .sv_head .gi,#partner .sv_head .gi{text-shadow:0 2px 16px rgba(0,0,0,.7)}
#rested .sv_head p,#partner .sv_head p{text-shadow:0 1px 10px rgba(0,0,0,.6)}/* #7 + #16 + #21 one button: filled cream pill, no underline, and every buy button answers a press */

/* the kit pins `.h12 .btn{background:transparent!important}/* CONGRUENCE §2: primary buy buttons are rose-deep with white text, as on howitworks */`, so this has to out-rank it */

.pill,#satc a,.close_btn{background:#A85F62!important;color:#fff!important}
.h12 .h12__cta .btn .ic-wrap{background:rgba(255,255,255,.18)!important;color:#fff!important}
.h12 .h12__cta .btn{background:#A85F62!important;color:#fff!important;border-color:transparent!important;text-decoration:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.h12 .btn *,.f-hero .btn *{text-decoration:none}
.btn,.pill,#satc a,.hdr .hdr_cta{transition:transform .16s cubic-bezier(.22,.61,.36,1),opacity .16s ease}
.btn:active,.pill:active,#satc a:active,.hdr .hdr_cta:active{transform:scale(.97)}/* #8 the film's mint green was off-palette: brand sage */

:root{--settle:#8FA89A}/* #9 the DrOS orb: half the scroll, and dimmed so it is not a white flash on a night page */

.section_spanos{height:1100px}
@media(max-width:767px){.section_spanos{height:820px}}
#dros .orb{filter:brightness(.74) saturate(.9)}
#dros .orb b{color:#3B2246;opacity:.9}/* #11 Reduce Motion: the film is a short pin, the orb sits still */

@media(prefers-reduced-motion:reduce){.n12{min-height:220vh}#orb{transform:none!important}}/* #12 targets a finger can hit */

.hdr .hdr_cta{min-height:40px;padding:0 16px;font-size:12px}
.rd_bar button,.rd_pill button{min-width:44px;min-height:44px}
.n12 select{min-height:40px}/* #13 chart text: the plum "mist" lifted to readable, and the phone rail no longer touches the edge */

.ins_card .drowsie-chart{--mist:#A99BCB}
@media(max-width:860px){#inssl{padding-inline:20px;scroll-padding-inline:20px}}/* #15 the FAQ in the page's own voice: big centred heading, one reading width */

#faq .head{text-align:center}
#faq .f-h{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1}
#faq .faq-list{max-width:728px;margin-inline:auto}/* #17 the close sells: the product, proof, a real button, a readable guarantee */

.oz-close{padding:110px 24px 120px}
.oz-close h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.close_img{width:min(420px,78vw);aspect-ratio:1;object-fit:cover;border-radius:24px;margin:0 auto 28px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.close_proof{color:var(--cream-2);font-size:.95rem;letter-spacing:.02em}
.close_proof span{color:var(--gold);letter-spacing:.14em;margin-right:6px}
.close_btn{font-size:1.05rem;padding:18px 40px;min-height:56px}
.oz-close small{display:block;max-width:560px;margin:22px auto 0;font-size:.9rem;line-height:1.55;color:var(--cream-2)}/* #20 six reviews on a phone, the rest behind a button */

.rvw_more{display:none}
@media(max-width:860px){
  .rvw_grid:not(.all) .rvw_card:nth-child(n+7){display:none}
  .rvw_more{display:block;margin:8px auto 0;min-height:48px;padding:0 28px;border-radius:999px;border:1px solid rgba(243,235,229,.35);background:transparent;color:var(--cream);font:500 15px/1 var(--sans)}
}/* #21 one heading scale for section titles (hero, film and the pinned ring keep their own), one card radius */

.section_cmp2 h2,.section_think h2,.insights_h,.section_video .sv_head h2,.read_h,.rvw_h,#faq .f-h,.oz-close h2{font-size:clamp(40px,5.4vw,72px);line-height:1.06}
.rvw_card,.rd_card,.cmp2_rows{border-radius:24px}
.eb{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}/* science — MN 2026-09-21 replaced the whole health-claims block with page 22's "the data underneath"
   tiles, verbatim. These are DATA-VOLUME facts, not accuracy or outcome claims, so nothing here is gated
   by the claims memo. The accent rule above each tile runs the brand's fixed order (rose, gold, lavender,
   sage), exactly as the science page does, so colour never carries the meaning. */


.section_claims{padding:7rem 0}
.section_claims .container{max-width:68rem;text-align:left}
.sc_eyebrow{font-size:13px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);margin:0 0 2.1rem}
.sc_kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 1.5rem}
.sc_tile{border-top:2px solid var(--rose);padding-top:1.1rem}
.sc_tile:nth-child(2){border-top-color:var(--gold)}
.sc_tile:nth-child(3){border-top-color:#B9A0F1}
.sc_tile:nth-child(4){border-top-color:#8FA89A}/* sized so all four values sit on ONE line at four-up; at the science page's 56px "2 million+" wrapped
   here and the labels went ragged (the column is narrower on this page) */

.sc_tile_v{font-family:var(--sans);font-size:clamp(28px,3.1vw,42px);font-weight:600;line-height:1.1;letter-spacing:-.025em;color:var(--cream);margin:0;white-space:nowrap}
.sc_tile_l{margin:.75rem 0 0;font-size:14px;line-height:1.4;color:var(--cream-3);max-width:26ch}
.sc_note{margin:2.5rem 0 0;max-width:68ch;font-size:1rem;line-height:1.65;color:var(--cream-3)}
.sc_note em{font-style:normal;color:var(--cream)}
.section_claims .pill{margin-top:2.2rem}
@media(min-width:900px){.sc_kpi{grid-template-columns:repeat(4,1fr);gap:1.5rem}}
.section_claims h2{font-size:clamp(2rem,4.2vw,3.2rem);margin:.6rem 0 1rem}
@media(max-width:767px){.section_claims{padding:4.5rem 0}}/* app-screen cards: whole screen, on the night */


/* MN 2026-09-21: the cards were crossing the partner video at 25% — drop them below its middle */

#partner .sv_cards{top:auto;bottom:9%}/* MN 2026-09-21: with the cards off, the speaker sat on the very bottom edge of the morning shot and
   the buy bar clipped it. Anchor the frame lower so the unit lifts clear. *//* MN 2026-09-21: both video sections are 200vh with a 100vh sticky item, i.e. a WHOLE extra screen of
   scroll pinned on one picture — that is the "it won't let me past" feeling. Travel cut ~70%: the section
   is 130vh, so only 30vh of scroll happens while the shot is held. */


#rested,#partner{height:130vh}/* and the morning shot is scaled down inside its frame so the whole bed — and the speaker — is in view,
   instead of cover cropping the unit off the bottom edge *//* MN 2026-09-22: full screen again — contain made it far too small. Cover, panned right and down so
   the speaker under the pillow stays in frame instead of being cropped off the corner. */


#rested .sv_bg{object-fit:cover;object-position:76% 72%}
@media(max-width:991px){.sv_cards{bottom:calc(5vh + 74px)}#partner .sv_cards{bottom:calc(5vh + 74px)}}
.dtrack{align-items:flex-start}/* rested: image background */

.section_video img.sv_bg{filter:brightness(.75)}/* the film keeps page 17's spacing */

.oz-night .n12__chapters{margin-top:26px}