/* Unpinned document flow after Literature Classics. */
.flow-awareness,.flow-split,.rotation-page,.utility-page{position:relative;min-height:calc(100svh - var(--s4-nav,60px));padding:64px 6%;box-sizing:border-box;background:#fff;scroll-margin-top:var(--s4-nav,60px)}
.flow-awareness .timer-heading{position:static;transform:none;width:auto;margin:0 auto 48px;text-align:center;opacity:1}
.flow-awareness h2{font-size:clamp(28px,3.2vw,44px);line-height:1.13;letter-spacing:-.045em;color:#253b2d;margin:0}.flow-awareness h2 span{color:#619578}
.awareness-body{position:relative;max-width:1280px;margin:auto;display:grid;grid-template-columns:1fr minmax(260px,440px) 1fr;align-items:center;gap:28px}
.flow-phone{position:relative;width:100%;aspect-ratio:1;isolation:isolate}.flow-phone>img{display:block;width:100%;height:100%;object-fit:contain}.flow-feed{position:absolute;inset:0;pointer-events:none}.awareness-body>.flow-phone{grid-column:2;grid-row:1}
.awareness-body .ritual-mechanism{display:contents}.awareness-body .ritual-mechanism li{position:static;transform:none;display:flex;flex-direction:column;align-items:center;text-align:center;width:auto;gap:20px}.awareness-body .ritual-mechanism li:first-child{grid-column:1;grid-row:1}.awareness-body .ritual-mechanism li:last-child{grid-column:3;grid-row:1}
.flow-awareness .step-number,.flow-split .step-number{display:none}.flow-awareness h3,.flow-split h3{font-size:clamp(23px,2.3vw,32px);line-height:1.15;margin:0 0 18px;letter-spacing:-.035em;color:#324237}.flow-awareness p,.flow-split p{font-size:clamp(14px,1.3vw,18px);line-height:1.6;color:#6d796f;margin:0}.flow-awareness p{text-align:justify;hyphens:auto}.flow-awareness .callout-icon,.flow-split .callout-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:#f5f8f4;color:#619578;border-radius:20px}.flow-awareness .callout-icon svg,.flow-split .callout-icon svg{width:36px;height:36px}
.flow-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:7%;padding-inline:max(6%,calc((100% - 1180px)/2));}.goal-phone-column{min-width:0}.goal-phone-column .flow-phone{max-width:440px;margin:auto}.flow-split .goal-copy{position:static;transform:none;width:auto;opacity:1;max-width:500px}.flow-split .goal-copy h2{font-size:clamp(28px,3.3vw,46px);margin:0 0 38px}.flow-split .usage-choices{position:static;display:flex;flex-direction:column;gap:32px;margin:0;padding:0;list-style:none}.flow-split .usage-choices li{display:flex;align-items:flex-start;gap:18px}.flow-split .callout-icon{flex-shrink:0;width:46px;height:46px;border-radius:14px}.flow-split .callout-icon svg{width:28px;height:28px}.flow-split h3{font-size:clamp(21px,2vw,28px);margin-bottom:12px}
.flow-split .awareness-legend{position:static;transform:none;width:100%;max-width:440px;margin:22px auto 0;opacity:1}.flow-split .color-key{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding:16px 18px;border:1px solid #e1e7df;border-radius:18px;background:#fbfcfa;font-size:11px;color:#778274}.color-key span{display:flex;align-items:center;gap:7px;white-space:normal}.color-key i{flex:0 0 7px;width:7px;height:7px;border-radius:50%}.color-key .green{background:#59bd85}.color-key .yellow{background:#e9be46}.color-key .red{background:#df7771}.color-key .white{background:white;border:1px solid #bdc5bd}
.rotation-page{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding-block:42px}.rotation-page .turn-headline{padding:0;width:100%;opacity:1;visibility:visible}.rotation-visual{width:min(70vw,54svh,540px);aspect-ratio:1}.motion-host{position:relative;isolation:isolate}.motion-host>img,.motion-host>canvas{display:block;width:100%;height:100%;object-fit:contain}.motion-host>canvas{position:absolute;inset:0}.motion-host.motion-ready>img{visibility:hidden}.rotation-page .turn-buy{margin:0;min-height:44px;pointer-events:auto}.utility-page{display:grid;grid-template-columns:1fr 1.6fr;align-items:center;gap:4%;max-width:1440px;margin:auto}.utility-page .utility-copy{display:block;position:static;opacity:1;pointer-events:auto;max-width:440px}.utility-page .utility-visual{width:100%;aspect-ratio:1}.mini-screen{background:#dbdbd9!important}.mini-screen canvas{background-color:#dbdbd9}.art-options img{mix-blend-mode:normal}
@media(max-width:700px){
 .flow-awareness,.flow-split,.utility-page{padding:42px 6%}.flow-awareness .timer-heading{margin-bottom:24px}.awareness-body{grid-template-columns:1fr 1fr;gap:28px 22px}.awareness-body>.flow-phone{grid-column:1/-1;grid-row:1;width:min(78vw,360px);margin:auto}.awareness-body .ritual-mechanism li:first-child{grid-column:1;grid-row:2}.awareness-body .ritual-mechanism li:last-child{grid-column:2;grid-row:2}.awareness-body .ritual-mechanism li{gap:14px}.flow-awareness h3{font-size:23px;min-height:53px;margin-bottom:12px}.flow-awareness p{font-size:13px;line-height:1.55;text-align:left}.flow-awareness .callout-icon{width:48px;height:48px;border-radius:15px}.flow-awareness .callout-icon svg{width:29px;height:29px}
 .flow-split{gap:6%;padding-inline:5%;grid-template-columns:44% 50%}.flow-split .goal-copy h2{font-size:27px;line-height:1.13;margin-bottom:28px}.flow-split .usage-choices{gap:28px}.flow-split .usage-choices li{flex-direction:column;gap:10px}.flow-split h3{font-size:20px;margin-bottom:10px}.flow-split p{font-size:12px;line-height:1.5}.flow-split .callout-icon{width:32px;height:32px;border-radius:10px}.flow-split .callout-icon svg{width:23px;height:23px}.flow-split .color-key{grid-template-columns:1fr;padding:13px 10px;font-size:9px;gap:11px}.flow-split .awareness-legend{margin-top:18px}.rotation-page{padding:42px 5%;gap:22px}.rotation-visual{width:min(88vw,50svh)}.utility-page{grid-template-columns:1fr;gap:22px;text-align:center}.utility-page .utility-copy{margin:auto}.utility-page .utility-visual{width:min(100%,500px);margin:auto}.utility-description,.utility-detail{margin-inline:auto}.utility-page .utility-detail{margin-top:20px}
}
@media(max-height:600px) and (min-width:701px){.flow-awareness,.flow-split{padding-block:32px}.flow-awareness .timer-heading{margin-bottom:20px}.awareness-body{grid-template-columns:1fr minmax(180px,290px) 1fr}.rotation-page{min-height:600px}.utility-page{padding-block:24px}}
.flow-phone{aspect-ratio:614/901}.awareness-body>.flow-phone{width:min(100%,300px);margin:auto}.goal-phone-column .flow-phone{max-width:280px}.flow-phone>img{width:100%;height:100%}@media(max-width:700px){.awareness-body>.flow-phone{width:min(62vw,225px)}.goal-phone-column .flow-phone{width:100%}}
.flow-split .usage-choices{opacity:1;visibility:visible;inset:auto;transform:none;width:100%;height:auto;align-items:stretch}.flow-split .usage-choices li{height:auto;max-width:none;justify-content:flex-start;text-align:left;flex-direction:row}.flow-split .usage-choices li>div{min-height:0;flex:1;min-width:0}.flow-awareness .ritual-mechanism li{height:auto}.flow-awareness .ritual-mechanism li>div{min-height:0}.flow-awareness .callout-icon{flex-basis:auto;flex-shrink:0;height:64px}.flow-split .callout-icon{flex-basis:46px;flex-shrink:0}.flow-split .awareness-legend{padding:0;border:0;background:none;max-width:100%}
@media(max-width:700px){.flow-split .usage-choices li{flex-direction:column}.flow-split .callout-icon{flex-basis:32px}.flow-awareness .callout-icon{height:48px}}
.flow-awareness .timer-heading h2{display:block;grid-template-columns:none}.flow-awareness .timer-heading h2 span{display:inline}.flow-awareness .timer-heading h2 br{display:block}
/* Pin only while the centered phone finishes its front-to-back rotation. */
.rotation-page{display:block;padding:0;height:calc(190svh - var(--s4-nav,60px));min-height:0}.rotation-stage{position:sticky;top:var(--s4-nav,60px);height:calc(100svh - var(--s4-nav,60px));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px 5%;box-sizing:border-box;overflow:hidden}.rotation-stage .rotation-visual{width:min(70vw,calc(100svh - var(--s4-nav,60px) - 220px),540px)}.rotation-stage .turn-headline{flex:0 0 auto}.rotation-stage .turn-buy{flex:0 0 auto}.rotation-stage #hero-title{font-size:clamp(22px,3vw,42px)}
@media(max-width:700px){.rotation-stage{gap:20px;padding:20px 5%}.rotation-stage .rotation-visual{width:min(88vw,calc(100svh - var(--s4-nav,60px) - 190px))}.rotation-stage #hero-title{font-size:24px}}
@media(max-height:500px) and (min-width:701px){.rotation-stage{gap:12px;padding:12px 5%}.rotation-stage #hero-title{font-size:22px}.rotation-stage .rotation-visual{width:calc(100svh - var(--s4-nav,60px) - 140px)}}
@media(prefers-reduced-motion:reduce){.rotation-page{height:auto}.rotation-stage{position:static;min-height:calc(100svh - var(--s4-nav,60px));height:auto;overflow:visible}}

/* Compact included accessories and the founder's preorder offer. */
.flow-split .optimize-word{color:#619578}
.utility-included{border-top:1px solid #dce5dd;margin-top:26px;padding-top:20px;max-width:330px}.included-heading{font-size:12px;font-weight:600;letter-spacing:.035em;color:#647367;margin:0 0 14px}.included-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}.included-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;background:#f6f8f4;border:1px solid #e3e9df;border-radius:16px;padding:10px;color:#314e3d}.included-tile svg{width:78px;height:64px;margin-bottom:7px}.included-tile>span{font-size:13px;font-weight:550}.included-tile small{font-size:10px;color:#6b8370;margin-top:4px}
.preorder-price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:8px 12px;margin:15px 0 0;font-size:20px;line-height:1.25}.preorder-price del{color:#8b938c;text-decoration-thickness:1.5px}.preorder-price strong{color:#38674c;font-weight:650;font-size:25px}.preorder-price>span{flex-basis:100%;font-size:11px;color:#66776a}.preorder-price-note{font-size:10px;color:#869087;margin:6px 0 0}
@media(max-width:700px){.utility-included{margin:22px auto 0;max-width:280px}.included-tile svg{width:66px;height:54px}.included-tile>span{font-size:12px}.preorder-price{margin-top:11px;gap:5px 10px;font-size:18px}.preorder-price strong{font-size:23px}.flow-split .goal-copy h2{font-size:clamp(24px,6.4vw,27px)}}

/* Tighten the desktop hero handoff; portrait/mobile keeps its existing full-screen layout. */
@media(min-width:1001px) and (min-height:601px),(min-width:701px) and (min-aspect-ratio:1001/1000) and (min-height:601px){
 .hero{height:min(80svh,760px);min-height:480px;z-index:1}
 .scroll-middle.story:not(.is-static){margin-top:calc(-1*clamp(32px,calc((100svh - var(--s4-nav,60px) - 500px)/2 - 32px),210px))}
}

/* Restore the timer guide directly below the awareness phone. */
.flow-awareness .timer-heading{transform:translateY(16px)}
.flow-awareness .awareness-legend{position:static;transform:none;grid-column:2;grid-row:2;width:100%;max-width:440px;justify-self:center;opacity:1;padding:0;border:0;background:none}
.flow-awareness .color-key{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:0;padding:16px 18px;border:1px solid #e1e7df;border-radius:18px;background:#fbfcfa;font-size:11px;color:#778274}
@media(max-width:700px){.flow-awareness .timer-heading{transform:translateY(8px)}.flow-awareness .awareness-legend{grid-column:1/-1;grid-row:2;max-width:360px}.awareness-body .ritual-mechanism li:first-child,.awareness-body .ritual-mechanism li:last-child{grid-row:3}.flow-awareness .color-key{font-size:10px;gap:12px;padding:14px 16px}}
@media(max-height:600px) and (min-width:701px){.flow-awareness .timer-heading{transform:translateY(7px)}}

/* Share the goal-page layout, mirrored, while retaining the X feed and live timer. */
.flow-mirrored .goal-copy{grid-column:1;grid-row:1;justify-self:end;width:100%}
.flow-mirrored .goal-phone-column{grid-column:2;grid-row:1}
.flow-mirrored .goal-copy h2{line-height:1.1;width:fit-content;max-width:100%;margin-left:auto}
.flow-mirrored h3{min-height:0}
.flow-mirrored p{text-align:left;hyphens:none}
.flow-mirrored .callout-icon{height:46px;flex-basis:46px}
.flow-mirrored .awareness-legend{grid-column:auto;grid-row:auto;max-width:100%;margin:22px auto 0}
@media(max-width:700px){
 .flow-mirrored{grid-template-columns:50% 44%}
 .flow-mirrored .goal-copy h2{line-height:1.13}
 .flow-mirrored .callout-icon{height:32px;flex-basis:32px}
 .flow-mirrored .awareness-legend{margin-top:18px}
 .flow-mirrored .color-key{grid-template-columns:1fr;font-size:9px;gap:11px;padding:13px 10px}
}

/* Mirror the visible text group, not the unused width of its grid column. */
@media(min-width:701px){
 .flow-mirrored .usage-choices li{justify-content:flex-end}
 .flow-mirrored .usage-choices li>div{max-width:260px}
}