/* Isolated, interactive app illustration. Marketing layout lives in design-system.css. */
.ritual-demo{background:#f0e8dd;border-radius:28px;padding:28px}.demo-steps{display:flex;gap:10px}.demo-steps button{flex:1;border:1px solid #d2bfb3;background:transparent;border-radius:16px;padding:17px 12px;font:600 16px/1.3 system-ui;color:#35172f;cursor:pointer}.demo-steps button span{display:block;font:italic 22px Georgia;margin-bottom:6px}.demo-steps button[aria-selected=true]{background:#35172f;color:#fffaf0;border-color:#35172f}.demo-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:32px 20px 8px;min-height:460px}.demo-visual{text-align:center}.demo-visual img{display:block;max-width:100%;width:250px;height:270px;object-fit:contain;margin:auto}.demo-visual img.screen{height:410px;width:auto;border-radius:22px;box-shadow:0 12px 24px #35172f18}.demo-visual p{font:700 27px/1.15 Georgia;color:#35172f;margin:12px auto;max-width:290px}.demo-explanation h3{font-size:32px;margin:15px 0}.demo-explanation p{line-height:1.7}.demo-explanation button{cursor:pointer}.demo-steps button:focus-visible{outline:3px solid #af3f20;outline-offset:3px}@media(max-width:650px){.ritual-demo{padding:18px}.demo-steps{gap:6px}.demo-steps button{font-size:13px;padding:12px 6px}.demo-panel{grid-template-columns:1fr;gap:12px;padding:24px 0 0}.demo-explanation{text-align:center}.demo-visual img.screen{height:340px}}@media(prefers-reduced-motion:reduce){.sample-card{transition:none}}


.pick-phone{width:190px;height:410px;margin:auto;background:#fffaf0;border:5px solid #35172f;border-radius:26px;padding:12px 10px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 12px 24px #35172f18}.phone-speaker{width:48px;height:10px;background:#35172f;border-radius:10px}.phone-brand{font:14px Georgia;letter-spacing:1px}.phone-prompt{font:11px system-ui;color:#775d6b}.phone-question-card{width:100%;flex:1;border:5px solid #fffdf7;border-radius:15px;background:#f0e7c9;padding:8px;display:flex;flex-direction:column;justify-content:center}.phone-question-card img{width:100%;height:135px;mix-blend-mode:multiply}.phone-question-card #demo-question{font:700 17px/1.15 Georgia;margin:6px 0 10px}.phone-question-card #demo-genre{font:9px system-ui;text-transform:uppercase;letter-spacing:1px;color:#704b42}.phone-use{display:block;border-radius:20px;background:#35172f;color:#fffaf0;width:100%;font:11px system-ui;padding:10px 0;margin-bottom:5px}@media(max-width:650px){.pick-phone{height:340px;width:157px;gap:8px;padding:9px 7px}.phone-question-card img{height:105px}.phone-question-card #demo-question{font-size:14px}.phone-brand{font-size:11px}.phone-prompt{font-size:9px}.carousel-arrow{width:44px;height:44px}.carousel-arrow.previous{left:6px}.carousel-arrow.next{right:6px}}

/* Shared iPhone geometry across all four preview steps. */
.demo-track .demo-panel{align-items:start;min-height:620px}
.demo-visual .app-preview-frame{width:240px;height:520px;max-width:100%;margin:auto;border:5px solid var(--plum);border-radius:30px;background:var(--cream);overflow:hidden;box-shadow:0 12px 24px #35172f18}
.app-preview-frame .pick-phone,.app-preview-frame .stars-phone{width:100%;height:100%;max-width:100%;border:0;border-radius:0;margin:0;box-shadow:none;box-sizing:border-box}
.demo-visual .app-preview-frame img.screen{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;border:0;border-radius:0;box-shadow:none;margin:0}
.app-preview-frame .star-sky{height:280px}
.demo-explanation{min-height:420px}
#card-sample .sample-app-card{padding:16px 18px 18px;border:2px solid #fffaf0;border-radius:24px;background:#f5e7bd;box-shadow:0 7px 0 #35172f16,0 10px 20px #35172f14;margin:18px auto 24px;max-width:310px}
#card-sample .sample-app-card #sample-art{width:100%;height:190px;margin:0 auto 12px}
#card-sample .sample-app-card h2{font:700 30px/1.12 Georgia,serif;letter-spacing:-.6px;margin:16px 0 24px}
#sample-genre{display:inline-block;padding:5px 16px;border-radius:20px;background:#ffffff40;font-size:12px;color:#75652f;letter-spacing:.5px}
#card-sample .sample-actions{flex-direction:column;align-items:stretch}.sample-finish{border:0;background:transparent;color:var(--muted);min-height:44px;font-size:13px;text-decoration:underline;cursor:pointer}
@media(max-width:650px){.demo-track .demo-panel{min-height:1010px;gap:20px}.demo-visual .app-preview-frame{width:230px;height:498px}.demo-explanation{min-height:460px}.app-preview-frame .pick-phone{width:100%;height:100%}.app-preview-frame .star-sky{height:260px}#card-sample .sample-app-card #sample-art{height:145px}#card-sample .sample-app-card h2{font-size:26px}}

/* Live HTML preview uses native typography sizes; narrow containers reflow, never scale. */
.demo-visual .app-preview-frame{width:390px;height:800px;border-width:4px;border-radius:36px;max-width:100%;box-shadow:none}
.demo-track .demo-panel{min-height:0;grid-template-columns:minmax(0,390px) minmax(0,1fr);gap:32px;padding-inline:0;align-items:center}
.demo-explanation{min-height:0}
.app-preview-frame .pick-phone,.app-preview-frame .stars-phone{display:flex;flex-direction:column;padding:0 20px 12px;gap:0;overflow-y:auto;background:#faf7ed;text-align:center}
.preview-safe-top{height:28px;flex:none}
.app-preview-frame .phone-brand{font:20px Georgia;letter-spacing:2px;padding:12px 0 26px}
.app-preview-frame .phone-question-card{flex:0 0 auto;width:100%;padding:12px 16px 24px;border:0;border-radius:24px;box-shadow:0 6px 0 #35172f12;min-height:410px;justify-content:flex-start;gap:12px}
.app-preview-frame .phone-question-card img{width:100%;height:230px;flex:none;object-fit:contain;mix-blend-mode:darken}
.app-preview-frame .phone-question-card #demo-question{font:700 29px/1.12 Georgia;letter-spacing:0;min-height:0;margin:8px 0 12px}
.app-preview-frame .phone-question-card #demo-genre{font:500 11px system-ui;letter-spacing:.6px;margin-top:auto;padding:5px 14px}
.demo-visual .phone-card-position{font:14px/1.4 system-ui;color:#806a7b;margin:16px 0 10px;max-width:none}
.app-preview-frame .phone-use{font:600 16px/1.3 system-ui;min-height:52px;display:flex;align-items:center;justify-content:center;padding:14px 20px;margin:0 0 28px;box-shadow:none;flex:none}
.app-preview-frame .phone-bottom-nav{display:flex;width:calc(100% + 40px);margin: auto -20px 0;flex:none;padding:8px 12px 5px;min-height:60px;gap:0;border-top:1px solid #35172f14;background:#faf7ed;color:#806a7b}
.app-preview-frame .phone-bottom-nav>span{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;font:400 11px/1.3 system-ui}
.app-preview-frame .phone-bottom-nav svg{width:21px;height:21px;stroke-width:1.6;fill:none}
.app-preview-frame .phone-bottom-nav .is-active{color:#35172f;font-weight:600}
.app-preview-frame .phone-bottom-nav .is-active svg{fill:currentColor}
.app-preview-frame .stars-content{text-align:left;padding-bottom:24px}
.app-preview-frame .stars-phone h4{font:700 28px/1.15 Georgia;margin:0 0 4px}
.app-preview-frame .stars-count{font:17px/1.4 system-ui;color:#35172f}
.app-preview-frame .star-sky{height:210px;margin-top:20px;border-radius:24px;background:linear-gradient(#35172f,#40143b,#6b3859)}
.star-sky::after{content:"";position:absolute;inset:80% -20% -20%;border-radius:50% 50% 0 0;background:#80526e66;pointer-events:none}
.star-sky .star-glyph{position:static;width:30px;height:30px;stroke:#f2d37e;stroke-width:1.4;stroke-dasharray:none;opacity:1;fill:none}
.star-sky .preview-star:nth-of-type(-n+3) .star-glyph{fill:#f2d37e}
.preview-star{display:grid;place-items:center;z-index:1}
.stars-phone #star-message{font:14px/1.4 system-ui;text-align:center;margin:12px 0;min-height:40px;max-width:none}
.preview-milestone{padding:16px;border-radius:18px;background:#fffdf766}
.preview-milestone>div{display:flex;align-items:center;gap:12px}.preview-milestone>div>span{font-size:30px;background:#f2d37e3d;border-radius:12px;padding:6px 12px}
.preview-milestone h5{font:700 20px/1.2 Georgia;margin:0 0 3px}.preview-milestone small{font:12px system-ui}
.preview-milestone progress{display:block;width:100%;height:6px;accent-color:#35172f;margin:16px 0 10px}
.demo-visual .preview-milestone p{display:flex;justify-content:space-between;gap:12px;font:12px/1.3 system-ui;margin:0;color:#806a7b;max-width:none}
.preview-week{display:flex;justify-content:space-between;gap:6px;margin:20px 0}.preview-week>span{display:grid;justify-items:center;gap:6px}.preview-week svg{width:24px;height:24px;fill:none;stroke:#35172f40}.preview-week .earned svg{fill:#f2d37e;stroke:#f2d37e}.preview-week small{font:12px system-ui}
.demo-visual .preview-star-note{font:13px/1.4 system-ui;margin:0;text-align:center;max-width:none}
@media(max-width:1000px){.demo-track .demo-panel{grid-template-columns:minmax(0,1fr);gap:28px}.demo-explanation{text-align:center}.demo-track .demo-panel{padding-top:24px}}
@media(max-width:650px){.ritual-demo{padding:16px 8px}.app-preview-frame .pick-phone,.app-preview-frame .stars-phone{padding-inline:16px}.app-preview-frame .phone-bottom-nav{width:calc(100% + 32px);margin-inline:-16px}.app-preview-frame .phone-question-card{padding-inline:12px}.app-preview-frame .phone-question-card img{height:190px}.app-preview-frame .phone-question-card #demo-question{font-size:29px}.demo-track .demo-panel{min-height:0}.demo-visual .app-preview-frame{height:800px}.preview-milestone{padding:12px}}

.app-preview-frame .pick-phone,.app-preview-frame .stars-phone{overflow:hidden}
.pick-content,.stars-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.pick-content{display:flex;flex-direction:column;align-items:center}
.app-preview-frame .stars-content{padding-top:0}
.app-preview-frame .phone-bottom-nav{margin-top:0}

.star-sky::after{display:none}.star-sky .preview-star:nth-of-type(n+4) .star-glyph{opacity:.35}

.app-preview-frame .stars-phone>.phone-brand{flex:none;text-align:center}.preview-milestone{border:1px solid #f2d37e66;background:#fffdf7}.stars-phone #star-message:empty{display:none}

/* Feedback overlays the sky without moving the milestone or navigation. */
.stars-phone .star-sky #star-message{position:absolute;inset:auto 8px 6px;z-index:2;margin:0;padding:5px 8px;min-height:0;border-radius:8px;background:#35172fe8;color:#faf7ed;font:12px/1.3 system-ui;pointer-events:none}
.preview-milestone .earned-seal{position:static;width:20px;height:20px;flex:none;margin-left:auto;color:#35172f}
.preview-milestone progress{appearance:none;-webkit-appearance:none;border:0;border-radius:3px;overflow:hidden;background:#35172f20;height:4px;margin:10px 0}
.preview-milestone progress::-webkit-progress-bar{background:#35172f20;border-radius:3px}.preview-milestone progress::-webkit-progress-value{background:#35172f;border-radius:3px}.preview-milestone progress::-moz-progress-bar{background:#35172f;border-radius:3px}

.star-sky{position:relative;overflow:hidden}.star-sky>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#e3c374;stroke-width:.6;stroke-dasharray:2 3;opacity:.5}.preview-star{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border:0;background:transparent;color:#f5d788;cursor:pointer;border-radius:50%}.preview-star[aria-pressed=true]{background:#ffffff22}.preview-star:focus-visible{outline:2px solid #fff8ef;outline-offset:0}.phone-bottom-nav>span{flex-direction:column}.phone-bottom-nav svg{stroke:currentColor}.phone-use{color:var(--cream);background:var(--plum)}