/* Fit each composition to its content and available viewport. Animation poses stay unchanged. */
html{scroll-snap-type:none}
.scroll-middle.story:not(.is-static){height:calc(660svh - var(--s4-nav,65px)*.3)}
.closing-transition.is-enhanced{height:calc(436svh - var(--s4-nav,65px)*.3)}
.story .sticky,.closing-stage{--story-stacked:0}
.hero{min-height:0;height:calc(100svh - var(--s4-nav,65px));padding-top:24px;padding-bottom:24px}
.hero-visual{max-height:100%;padding-bottom:0}
.scroll-middle:not(.is-static) .timer-heading{top:var(--aware-title-top,8%)}
.scroll-middle:not(.is-static) .ritual-steps{top:var(--aware-center,55%);bottom:auto;height:var(--aware-group-height,45%);transform:translateY(-50%);align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:4%;left:6%;right:6%}
.scroll-middle:not(.is-static) .ritual-steps li{height:auto;width:100%;gap:14px}
.scroll-middle:not(.is-static) .ritual-steps li>div{min-height:0}
.scroll-middle:not(.is-static) .ritual-steps .step-number{display:none}
.scroll-middle:not(.is-static) .awareness-legend{top:var(--aware-legend-top,85%);bottom:auto}
.closing-transition.is-enhanced .turn-headline{top:var(--turn-heading-top,12%)}
@media(max-width:1000px) and (max-aspect-ratio:1/1){
 .story .sticky,.closing-stage{--story-stacked:1}
 .hero{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-content:center;gap:16px;padding:clamp(18px,4svh,40px) 6% 16px;min-height:0}
 .hero-copy{text-align:center;align-self:center}
 .hero-copy .opening-title{font-size:clamp(28px,6.8vw,46px);max-width:620px;margin-inline:auto}
 .hero-copy #hero-hook{font-size:clamp(13px,2.8vw,18px);margin:18px auto 0;max-width:550px}
 .hero-copy .hero-compatibility{font-size:clamp(12px,2.5vw,17px);margin:12px auto 0;max-width:550px}
 .hero-visual{width:100%;height:100%;min-height:0;max-height:520px;align-self:center}
 .scroll-middle:not(.is-static) .copy-stack{left:6%;top:0;width:88%;max-width:none;height:100%}
 .scroll-middle:not(.is-static) .feature-benefits{max-width:none;width:100%}
 .scroll-middle .copy-stack .feature-benefits h2{font-size:clamp(24px,5.8vw,36px);max-width:650px;margin-bottom:10px}
 .scroll-middle .copy-stack .feature-benefits .feature-subheading{font-size:clamp(13px,2.7vw,17px);margin-bottom:14px;max-width:none}
 .feature-benefit-list{font-size:clamp(12px,2.5vw,15px);gap:7px;line-height:1.4}
 .feature-options{margin-top:16px;padding-top:12px}
 .scroll-middle .copy-stack .feature-benefits .feature-row-label{font-size:12px;margin-bottom:10px}
 .feature-tiles{gap:6px}.feature-tiles li{min-height:48px;font-size:10px;gap:4px}.feature-tiles svg{width:22px;height:22px}
 .screen-previews{max-width:420px;gap:8px}.screen-previews>li{font-size:10px}.screen-previews button>span{margin-top:7px}
 .art-options{max-width:540px;margin-top:10px}.art-options button{font-size:9px}.art-options img{max-height:48px}.art-options .art-count{font-size:10px}
 .scroll-middle .feature-options .art-cue{max-width:420px;margin-right:0!important}
 .scroll-middle:not(.is-static) .intention-beat{text-align:center;width:100%;left:0}
 .scroll-middle .intention-beat h2{font-size:clamp(28px,6vw,40px)}
 .scroll-middle .intention-beat p{font-size:clamp(15px,3vw,20px);max-width:430px;margin:12px auto 0}
 .scroll-middle:not(.is-static) .timer-heading h2{font-size:clamp(28px,6.5vw,42px)}
 .scroll-middle:not(.is-static) .timer-anchor{width:31%;height:46%}
 .scroll-middle:not(.is-static) .ritual-steps{left:4%;right:4%;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:3%}
 .scroll-middle:not(.is-static) .ritual-steps .callout-icon{width:48px;height:48px;flex-basis:48px;border-radius:15px}
 .scroll-middle:not(.is-static) .ritual-steps .callout-icon svg{width:32px;height:32px}
 .scroll-middle:not(.is-static) .ritual-steps h3{font-size:clamp(16px,3.8vw,25px);margin-bottom:8px}
 .scroll-middle:not(.is-static) .ritual-steps p{font-size:clamp(11px,2.5vw,15px);line-height:1.4}
 .scroll-middle:not(.is-static) .awareness-legend{width:max-content;max-width:92%;padding:10px 13px;border-radius:18px}
 .scroll-middle:not(.is-static) .awareness-legend .color-key{display:grid;grid-template-columns:1fr 1fr;font-size:10px;gap:8px 16px}
 .closing-transition.is-enhanced .utility-copy{left:7%;width:86%;max-width:none;top:var(--utility-copy-top,10%);text-align:center}
 .utility-copy h2{font-size:clamp(28px,6vw,40px);margin-bottom:12px}.utility-copy h2 br{display:block}
 .utility-description{margin:auto;font-size:14px;max-width:350px}.utility-detail{font-size:11px;padding:0;border:0;margin:12px auto 0}
 .turn-headline #hero-title,.turn-headline #hero-title .hero-title-lead{font-size:clamp(22px,5.6vw,34px)}
}
@media(max-width:700px) and (max-height:740px) and (orientation:portrait){
 .hero{padding-top:18px;gap:8px}.hero-copy .opening-title{font-size:clamp(26px,7vw,32px)}
 .hero-copy #hero-hook{margin-top:12px}.hero-copy .hero-compatibility{margin-top:8px}
 .scroll-middle .copy-stack .feature-benefits h2{font-size:23px;margin-bottom:7px}
 .scroll-middle .copy-stack .feature-benefits .feature-subheading{font-size:12px;margin-bottom:9px}
 .feature-benefit-list{font-size:11px;gap:4px}.feature-options{margin-top:10px;padding-top:9px}
 .feature-tiles li{min-height:38px;font-size:8px;gap:2px}.feature-tiles svg{width:18px;height:18px}
 .screen-previews{max-width:280px}.screen-previews>li{font-size:8px}.screen-previews canvas{max-height:70px}
 .art-options{gap:4px}.art-options button{font-size:8px}.art-options img{max-height:28px}.art-options span{min-height:20px}
 .scroll-middle .feature-options .art-cue{max-width:280px}
 .scroll-middle:not(.is-static) .timer-heading h2{font-size:28px}
 .scroll-middle:not(.is-static) .ritual-steps li{gap:9px}
 .scroll-middle:not(.is-static) .ritual-steps .callout-icon{width:38px;height:38px;flex-basis:38px}
 .scroll-middle:not(.is-static) .ritual-steps .callout-icon svg{width:27px;height:27px}
 .scroll-middle:not(.is-static) .ritual-steps h3{font-size:16px}.scroll-middle:not(.is-static) .ritual-steps p{font-size:10px}
 .scroll-middle:not(.is-static) .awareness-legend .color-key{font-size:9px}
}
/* Short landscape windows keep a two-column composition instead of stacking. */
@media(max-height:550px) and (orientation:landscape){
 .hero{grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:20px;padding:16px 5%;min-height:0}
 .hero-copy{text-align:left;align-self:center}.hero-copy .opening-title{font-size:clamp(25px,4vw,34px)}
 .hero-copy #hero-hook{font-size:12px;margin-top:12px}.hero-copy .hero-compatibility{font-size:11px;margin-top:10px}
 .scroll-middle .copy-stack{left:5%;width:43%;top:5%;max-width:none}
 .scroll-middle .copy-stack .feature-benefits h2{font-size:22px;margin-bottom:7px}
 .scroll-middle .copy-stack .feature-benefits .feature-subheading{font-size:11px;margin-bottom:8px}
 .feature-benefit-list{font-size:10px;gap:3px}.feature-options{margin-top:8px;padding-top:7px}
 .scroll-middle .copy-stack .feature-benefits .feature-row-label{font-size:10px;margin-bottom:6px}
 .feature-tiles li{min-height:31px;font-size:8px;gap:1px}.feature-tiles svg{width:15px;height:15px}.feature-tiles{gap:4px}
 .screen-previews{max-width:270px}.screen-previews canvas{max-height:60px}.screen-previews>li{font-size:8px}.screen-previews button>span{margin-top:4px}
 .art-options{margin-top:4px;gap:4px}.art-options img{max-height:21px}.art-options button{font-size:7px;padding:2px}.art-options span{min-height:18px;margin-top:3px}
 .scroll-middle .feature-options .art-cue{font-size:9px!important;max-width:270px}.art-cue svg{height:16px}
 .scroll-middle:not(.is-static) .timer-heading h2{font-size:24px}
 .scroll-middle:not(.is-static) .timer-anchor{width:22%;height:48%}
 .scroll-middle:not(.is-static) .ritual-steps{left:10%;right:10%;gap:7%}
 .scroll-middle:not(.is-static) .ritual-steps li{gap:5px}.scroll-middle:not(.is-static) .ritual-steps h3{font-size:18px;margin-bottom:5px}.scroll-middle:not(.is-static) .ritual-steps p{font-size:11px}
 .scroll-middle:not(.is-static) .ritual-steps .callout-icon{width:30px;height:30px;flex-basis:30px}.scroll-middle:not(.is-static) .ritual-steps .callout-icon svg{width:22px;height:22px}
 .scroll-middle:not(.is-static) .awareness-legend{padding:6px 12px}.scroll-middle:not(.is-static) .awareness-legend .color-key{font-size:9px}
 .closing-transition.is-enhanced .utility-copy{left:6%;top:20%;width:35%;text-align:left}.utility-copy h2{font-size:27px}.utility-description{font-size:12px}.utility-detail{font-size:10px}
 .turn-headline #hero-title,.turn-headline #hero-title .hero-title-lead{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.closing-transition.is-enhanced{height:auto}}
@media(max-width:1000px) and (max-aspect-ratio:1/1){
 .hero{grid-template-rows:auto minmax(0,min(48svh,440px));align-content:center}
 .scroll-middle:not(.is-static) .copy-stack,.scroll-middle:not(.is-static) .feature{transform:none}
 .scroll-middle:not(.is-static) .timer-anchor{width:38%;height:48%}
 .scroll-middle:not(.is-static) .ritual-steps{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr);gap:3%}
}
@media(max-width:700px) and (max-height:740px) and (orientation:portrait){
 .hero{grid-template-rows:auto minmax(0,1fr)}
 .screen-previews canvas{max-height:56px}.screen-previews{max-width:260px}
 .art-options img{max-height:22px}.art-options button{padding:2px}.art-options span{min-height:18px;margin-top:3px}
 .scroll-middle .feature-options .art-cue{max-width:260px}
 .scroll-middle:not(.is-static) .timer-anchor{width:34%;height:46%}
}
@media(max-width:1000px) and (max-aspect-ratio:1/1){
 .closing-transition.is-enhanced .closing-composition{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,min(42svh,440px));height:auto;gap:28px 14px;max-width:700px;align-items:center}
 .closing-transition.is-enhanced .closing-copy{grid-column:1/-1;grid-row:1;transform:none!important}
 .closing-transition.is-enhanced .closing-copy h2{max-width:600px;margin:auto}
 .closing-transition.is-enhanced .closing-copy .closing-intention{margin:16px 0 22px}
 .closing-transition.is-enhanced .closing-phone,.closing-transition.is-enhanced .closing-device{grid-row:2;height:100%;max-height:none;aspect-ratio:auto;padding:0;display:block}
 .closing-transition.is-enhanced .closing-phone iframe,.closing-transition.is-enhanced .closing-device iframe{height:100%;aspect-ratio:auto}
}
@media(max-width:1000px) and (orientation:landscape){.hero-copy .opening-title{font-size:clamp(27px,4vw,38px)}}
@media(max-height:550px) and (orientation:landscape){
 .closing-transition.is-enhanced .closing{padding:18px 4%}
 .closing-transition.is-enhanced .closing-composition{height:100%;grid-template-columns:1fr 1.2fr 1fr;grid-template-rows:minmax(0,1fr);align-items:center;gap:12px}
 .closing-transition.is-enhanced .closing-copy{grid-column:2;grid-row:1;transform:none!important;padding:0}
 .closing-transition.is-enhanced .closing-copy h2{font-size:27px}
 .closing-transition.is-enhanced .closing-copy .closing-intention{font-size:13px;margin:14px 0 18px}
 .closing-transition.is-enhanced .closing-order .preorder{min-width:0;font-size:12px;min-height:40px;padding:10px 14px;gap:14px}
 .closing-transition.is-enhanced .closing-phone,.closing-transition.is-enhanced .closing-device{grid-row:1;height:100%;max-height:none;aspect-ratio:auto;padding:0;display:block;align-self:center}
 .closing-transition.is-enhanced .closing-phone iframe,.closing-transition.is-enhanced .closing-device iframe{height:100%;aspect-ratio:auto}
}

/* Titles center on the phone body, not the asymmetric phone-plus-timer bounds.
   Side columns center in their actual remaining space, at every viewport width. */
.scroll-middle.story:not(.is-static){height:calc(100svh - var(--s4-nav,65px) + (560svh + var(--s4-nav,65px)*.7)*1.0354375)}
.closing-transition.is-enhanced{height:calc(100svh - var(--s4-nav,65px) + (336svh + var(--s4-nav,65px)*.7)*0.8551020408163265)}
.scroll-middle:not(.is-static) .ritual-steps{left:0;right:0;display:block}
.scroll-middle:not(.is-static) .ritual-steps li{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--side-left-width);max-width:none}
.scroll-middle:not(.is-static) .ritual-steps li:first-child{left:var(--side-left-center)}
.scroll-middle:not(.is-static) .ritual-steps li:last-child{left:var(--side-right-center);width:var(--side-right-width)}
.scroll-middle:not(.is-static) .ritual-mechanism{opacity:var(--mechanism-alpha,1)}
.scroll-middle:not(.is-static) .usage-choices{opacity:var(--choice-alpha,0)}
.closing-intro.scroll-middle .ritual-mechanism{opacity:0}
.closing-intro.scroll-middle .usage-choices{opacity:1}
@media(prefers-reduced-motion:reduce){.closing-transition.is-enhanced{height:auto}}
/* Image-only art choices; category names remain accessible on each button. */
.art-options button{position:relative;min-width:0;max-width:100%;padding:0;display:block;aspect-ratio:1/1;overflow:hidden}
.art-options button img{display:block;width:100%;height:100%;max-height:none;min-width:0;max-width:100%;object-fit:cover;border-radius:inherit;aspect-ratio:auto}
.art-options .art-library-note{grid-column:1/-1;margin-top:5px;min-width:0;color:#68786c;text-align:left;font-size:11px;line-height:1.45}
.art-options .art-library-note strong{display:block;font-size:inherit;font-weight:500}
.art-options .art-library-note span{display:block;min-height:0;margin-top:3px;font-size:inherit;line-height:inherit;overflow-wrap:normal}
@media(max-height:740px){.art-options .art-library-note{font-size:9px;margin-top:3px}}
.scroll-middle .intention-beat p{max-width:100%;overflow-wrap:normal}

/* A quiet typographic emphasis, without motion or additional font downloads. */
.hero-copy .opening-title .calm-word{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;color:#63816e;letter-spacing:-.035em}
.inky-nav .inky-tagline{display:block!important;white-space:normal;max-width:100%}

.hero-copy .opening-title{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.035em;line-height:1.12}
.hero-copy #hero-hook{font-weight:400;line-height:1.65}
.explore-features{display:inline-flex;align-items:center;gap:18px;margin-top:44px;padding:12px 19px;border:1px solid #bdcdc0;border-radius:28px;background:#f1f5f0;color:#355c45;font:400 14px/1.3 -apple-system,BlinkMacSystemFont,Arial,sans-serif;text-decoration:none}
.explore-features:hover{background:#e6eee4}.explore-features:focus-visible{outline:2px solid #52785e;outline-offset:4px}
#features{scroll-margin-top:calc(var(--s4-nav,65px) + 20px)}
@media(max-height:740px){.explore-features{margin-top:32px;padding:10px 16px;font-size:12px}}

.scroll-middle .copy-stack #features h2{font-size:calc(clamp(30px,3.1vw,46px) - 3px)}
.feature-scroll-cue{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 18px;color:#738177;font:400 11px/1.4 -apple-system,BlinkMacSystemFont,Arial,sans-serif;letter-spacing:0}
@media(max-height:740px) and (min-width:701px){.scroll-middle .copy-stack #features h2{font-size:26px}}
@media(max-width:1000px) and (max-aspect-ratio:1/1){.scroll-middle .copy-stack #features h2{font-size:calc(clamp(24px,5.8vw,36px) - 3px)}.feature-scroll-cue{justify-content:flex-start;margin-bottom:14px;font-size:10px}}
@media(max-width:700px) and (max-height:740px) and (orientation:portrait){.scroll-middle .copy-stack #features h2{font-size:21px}.feature-scroll-cue{margin-bottom:10px}}
@media(max-height:550px) and (orientation:landscape){.scroll-middle .copy-stack #features h2{font-size:20px}.feature-scroll-cue{margin-bottom:9px;font-size:10px}}