/* Vivid Iris + Mint accents. Existing geometry, dark surfaces and native captures stay intact. */
:root{--iris-hover:#b08cff;--mint:#41d6a4;--rose:#ed7890;--sky:#78a5ff;--gold:#d8ad62;--soft-green:var(--mint);--soft-red:var(--rose);--soft-blue:var(--sky);--soft-gold:var(--gold)}
.underlined svg{stroke:var(--soft-green)}.hero .sparkle{stroke:var(--soft-red)}.hero .loop{stroke:var(--soft-blue)}.closing-heart{stroke:var(--soft-red)}.demo-rule span{background:var(--soft-green)}.demo-spark{stroke:var(--soft-gold)}.note-groceries b{color:var(--soft-green)}.note-coffee b{color:var(--soft-red)}
.intro-layout{grid-template-columns:3fr 1fr;max-width:920px}.intro h2{font-size:54px}.intro .large-copy{max-width:560px}.way-heading h2,.budget-section h2,.faq-section h2{margin-top:0}.hero-stage{margin-top:65px}.hero-phone{box-shadow:0 20px 50px #0004}.phone img{background:#080808}.closing h2{margin-top:0}
/* The full story stays pinned. Each deliberate scroll advances one chapter. */
.tour{padding:20px 0 0}.tour-heading{padding:0 0 35px}.tour-heading h2{font-size:54px;letter-spacing:-2.8px}.tour-scroll-hint{display:flex;gap:12px;align-items:center;color:#9e98a7;font-size:12px;margin-top:22px}.tour-scroll-hint>span{color:var(--iris);font-size:20px}
.tour-track{--tour-step:100svh;height:calc(var(--tour-step) * 5);position:relative;overflow-anchor:none}
.tour-layout{height:var(--tour-step);position:sticky;top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:76px;align-items:center;padding:28px 0;isolation:isolate}
.tour-layout:focus:not(:focus-visible){outline:none}.tour-chapters{grid-column:1;grid-row:1;display:grid;min-width:0}.tour-chapter{grid-area:1 / 1;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(calc(8px * var(--step-direction,1)));transition:opacity .22s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility .22s}.tour-chapter.is-current{visibility:visible;opacity:1;pointer-events:auto;transform:none}.chapter-content{max-width:440px}.chapter-content h3{font-size:clamp(37px,4vw,56px);line-height:1.06;letter-spacing:-2.6px;font-weight:550;margin:0 0 26px}.chapter-content>p{font-size:17px;line-height:1.7;color:#beb9c5;max-width:400px}.chapter-content>p.chapter-detail{font-size:13px;color:#938c9d;margin-top:23px;line-height:1.75;max-width:375px}
.tour-visual{grid-column:2;grid-row:1;height:100%;min-height:0}.tour-stage{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:0;background:transparent;box-shadow:none;border:0;border-radius:0}
.tour-phone{height:min(690px,calc(100% - 104px));width:auto;max-width:100%;aspect-ratio:1206 / 2622;flex:none;border-radius:38px;padding:5px;box-shadow:0 24px 55px #0005;background:#2c2c30;border:1px solid #5a5860}
.phone-display{position:relative;width:100%;height:100%;overflow:hidden;border-radius:32px;background:#080808}.tour-phone .tour-screen{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;border-radius:0;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s;background:#080808;z-index:0}.tour-phone .tour-screen.is-active{opacity:1;visibility:visible;z-index:1}
.expand-image{margin:0;min-height:30px;padding:4px 0;font-size:10px;border:0;color:#aaa2b6}.expand-image:hover{color:#eee9f6}.tour-progress{display:flex;justify-content:center;gap:2px;flex:none;margin:0}.tour-progress a{min-height:40px;padding:0 13px;display:grid;place-items:center;border-radius:24px;color:#958d9f;font-size:10px;transition:color .2s,background .2s}.tour-progress a[aria-current]{background:#b7a4ff1a;color:#d4c5f2}.tour-progress a:hover{color:#eee9f6;background:#b7a4ff10}
.cash-legend{display:flex;gap:24px;margin-top:22px;font-size:12px;color:#b7a9bd}.cash-legend>span{display:flex;align-items:center;gap:8px}.cash-dot{display:inline-block;width:6px;height:6px;border-radius:50%}.income-dot{background:var(--soft-green)}.expense-dot{background:var(--soft-red)}.close-dialog{min-width:44px;min-height:44px}dialog>img{height:auto}
@media(max-width:1100px){.tour-layout{gap:40px}.tour-heading h2{font-size:48px}.chapter-content h3{font-size:44px;letter-spacing:-2px}.chapter-content>p{font-size:15px}.chapter-content>p.chapter-detail{font-size:12px}.tour-progress a{padding:0 9px}.intro h2{font-size:48px}}
@media(max-width:760px){
 .intro-layout{display:block}.intro h2{font-size:39px}.tour{padding-top:10px}.tour-heading{padding-bottom:24px}.tour-heading h2{font-size:39px;letter-spacing:-2px}.tour-scroll-hint{font-size:11px;margin-top:18px}
 .tour-layout{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:16px;padding:20px 0 10px}.tour-chapters{grid-column:1;grid-row:1}.chapter-content{max-width:540px}.chapter-content h3{font-size:30px;letter-spacing:-1.5px;line-height:1.07;margin:0 0 12px}.chapter-content>p{font-size:13px;line-height:1.55;max-width:520px}.chapter-content>p.chapter-detail{font-size:11px;margin-top:10px;line-height:1.5;max-width:520px}.cash-legend{font-size:10px;margin-top:10px}
 .tour-visual{grid-column:1;grid-row:2;width:100%;height:100%}.tour-stage{gap:5px;max-width:none;justify-content:center}.tour-phone{height:calc(100% - 76px);max-height:440px;border-radius:26px;padding:4px}.phone-display{border-radius:21px}.tour-progress a{min-height:36px;padding:0 13px;font-size:9px}.expand-image{min-height:30px;font-size:9px}
}
@media(max-width:390px){.intro h2{font-size:35px}.tour-heading h2{font-size:35px}.tour-layout{gap:10px;padding-top:14px}.chapter-content h3{font-size:27px}.chapter-content>p{font-size:12px}.chapter-content>p.chapter-detail{font-size:10px}.tour-progress a{padding:0 10px}.tour-phone{border-radius:23px;padding:3px}.phone-display{border-radius:19px}}
/* On short/zoomed viewports, leave enough space and use normal page scrolling. */
@media(max-height:580px){.tour-track{--tour-step:640px}.tour-layout{position:sticky}.tour-phone{max-height:480px}}
@media(prefers-reduced-motion:reduce){.tour-chapter,.tour-screen,.tour-progress a{transition:none!important;transform:none!important}}

/* Color-only emphasis across the existing components. */
.primary{background-color:var(--iris)}
.primary:hover{background-color:var(--iris-hover)}
.site-header .button.small{color:var(--iris-hover);border-color:#9d70ff80}
.site-header .button.small:hover{color:var(--iris-hover);border-color:var(--iris)}
.tour-progress a[aria-current]{background-color:var(--iris);color:var(--ink)}
.tour-progress a[aria-current]:hover{background-color:var(--iris-hover);color:var(--ink)}
.tour-progress a:not([aria-current]):hover{background-color:#9d70ff20;color:var(--iris-hover)}
.expand-image{color:var(--iris)}
.expand-image:hover{color:var(--iris-hover)}
input[type=range]{accent-color:var(--mint)}
.mode-control .selected,.freely-stamp{background-color:var(--iris);color:var(--ink)}
.mode-features span{color:var(--iris-hover)}
.mode-kicker,.margin-note,.faq-section .handwritten{color:var(--mint)}
summary span,details p a{color:var(--iris)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline-color:var(--mint)}
::selection{background:var(--iris);color:var(--ink)}