#birth-form{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
#birth-form>label,#birth-form>div,#birth-form>fieldset{min-width:0;grid-column:auto}
#birth-form .birth-city-field,#birth-form .field-question,#birth-form .data-notice{grid-column:1/-1}
#birth-form input:not([type=checkbox]):not([type=radio]){display:block;width:100%;margin-top:6px}
#birth-form small{display:block;font-size:12px;line-height:1.6;color:var(--muted);margin-top:6px}
#birth-form .field-error{display:block;color:#ff9c99;font-size:13px;line-height:1.5;margin-top:6px}
#birth-form [aria-invalid=true]{border:2px solid #e45d63}
#city-options{border:1px solid var(--gold);background:#1e3044;max-height:260px;overflow-y:auto;margin-top:6px;border-radius:4px}
#city-options button{display:block;width:100%;border:0;border-bottom:1px solid var(--line);text-align:left;letter-spacing:0;padding:12px}
#city-options button[aria-selected=true]{background:#365052;outline:2px solid var(--gold);outline-offset:-2px}
#city-options p{padding:10px 14px}
#city-confirmed{color:#a6dec1;margin:8px 0;font-size:13px}
#birth-form .city-attribution{font-size:10px;opacity:.8}
#birth-form .unknown-time{display:flex;gap:8px;align-items:center;margin-top:10px}
#birth-form input:disabled{opacity:.45}
#birth-form .data-notice{font-size:12px;margin:0}
#form-generation-status{align-self:center;font-size:13px;color:var(--muted)}
#create-button.is-generating::before{content:"";display:inline-block;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:10px;vertical-align:middle;animation:input-spin .8s linear infinite}
@keyframes input-spin{to{transform:rotate(360deg)}}
.tiers{align-items:stretch;gap:20px}
body[data-view=input] .controls{display:none}
body[data-view=plans] .hero,body[data-view=plans] .create,body[data-view=plans] .book,body[data-view=plans] .report-intro,body[data-view=plans] .toc-toggle,body[data-view=plans] #save,body[data-view=plans] #print,body[data-view=plans] #new-reading{display:none!important}
body[data-view=reading] .plan-heading{display:none}
#plan-flow{padding:24px 0}
#plan-flow>button{margin:0 12px 12px 0}
#plan-continue{background:var(--gold);color:var(--navy)}
#plan-message{color:var(--gold);white-space:pre-wrap}
#plan-message button{display:block;margin-top:12px}
.plan-heading{font:32px/1.4 Georgia,'Batang',serif;margin:12px 0 28px}
.tiers .plan-card{display:flex;flex-direction:column;padding:28px 24px;border:1px solid var(--line);border-radius:8px;letter-spacing:0;text-align:left;transition:border-color .15s,background .15s}
.tiers .plan-card[aria-pressed=true]{border:2px solid var(--gold);padding:27px 23px;background:#23394b;color:var(--ivory)}
.plan-name{font:28px/1.3 Georgia,serif}
.plan-count{font-size:12px;color:var(--muted);margin:10px 0 24px}
.plan-contents{display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.5}
.plan-contents>[role=listitem]{display:block;padding-left:16px;position:relative}
.plan-contents>[role=listitem]::before{content:"·";position:absolute;left:0;color:var(--gold)}
.plan-detail{font-size:12px;color:var(--muted);line-height:1.5;margin-top:24px}
.plan-price{font-size:26px;line-height:1.4;margin-top:auto;padding-top:30px;color:var(--gold)}
body[data-view=reading] .plan-contents,body[data-view=reading] .plan-detail,body[data-view=reading] .plan-price{display:none}
body[data-view=reading] .plan-count{margin-bottom:0}
@media(max-width:700px){.tiers{grid-template-columns:1fr}.tiers .plan-card{padding:24px}.tiers .plan-card[aria-pressed=true]{padding:23px}}
@media(prefers-reduced-motion:reduce){#create-button.is-generating::before{animation:none}}
@media(max-width:700px){#birth-form{grid-template-columns:1fr}#birth-form>*{grid-column:1!important}}

/* MIRAE landing view — spec 7, 2026-09-20 */
body[data-view=input][data-ui-page=input]{--m-ink:#1e2a26;--m-soft:#5b645e;--m-jade:#253e37;--m-paper:#f4efe3;--m-line:#dcd3c0;--ref-ink:#1e2a26;--navy:#1e2a26}
body[data-view=input][data-ui-page=input] #service-page>.hero .eyebrow{font-size:12px;line-height:16px;letter-spacing:.16em;color:var(--m-soft)}
body[data-view=input][data-ui-page=input] #service-page>.hero h1{font-size:32px;line-height:38px;color:var(--m-ink);margin:4px 0 8px}
body[data-view=input][data-ui-page=input] #service-page>.hero .eyebrow{margin-bottom:10px}
body[data-view=input][data-ui-page=input] #service-page>.hero p{margin-bottom:14px}
body[data-view=input][data-ui-page=input] .input-step{margin-top:8px;padding-top:10px;padding-bottom:10px}
body[data-view=input][data-ui-page=input] details.create{padding-top:8px}
body[data-view=input][data-ui-page=input] #birth-form{margin-top:14px}
body[data-view=input][data-ui-page=input] #birth-form .ref-form-group{padding-top:12px}
body[data-view=input][data-ui-page=input] #service-page>.hero p{font-size:17px;line-height:26px;color:var(--m-ink)}
body[data-view=input][data-ui-page=input] #service-page h2,body[data-view=input][data-ui-page=input] #service-page h3{color:var(--m-ink)}
body[data-view=input][data-ui-page=input] #birth-form label,body[data-view=input][data-ui-page=input] #birth-form legend{font-size:15px;line-height:20px;color:var(--m-ink)}
body[data-view=input][data-ui-page=input] #birth-form small,body[data-view=input][data-ui-page=input] #data-notice,body[data-view=input][data-ui-page=input] #create-note{font-size:13px;line-height:18px;color:var(--m-soft)}
body[data-view=input][data-ui-page=input] #create-note{display:block;margin:10px 0 0}
body[data-view=input][data-ui-page=input] #create-button{background:var(--m-jade);color:var(--m-paper);font-size:16px;line-height:20px;font-weight:600}
body[data-view=input][data-ui-page=input] #create-button:hover{background:#1c322c}
body[data-view=input][data-ui-page=input] #create-button:focus-visible,body[data-view=input][data-ui-page=input] #birth-form :focus-visible{outline:2px solid var(--m-jade);outline-offset:2px}
body[data-view=input][data-ui-page=input] #birth-form .calendar-choice label,body[data-view=input][data-ui-page=input] #birth-form .gender-choice label,body[data-view=input][data-ui-page=input] #birth-form .unknown-time,body[data-view=input][data-ui-page=input] #birth-form .calendar-choice label span,body[data-view=input][data-ui-page=input] #birth-form .gender-choice label span,body[data-view=input][data-ui-page=input] #birth-form .unknown-time span{color:var(--m-ink)!important}
body[data-view=input][data-ui-page=input] #birth-form input,body[data-view=input][data-ui-page=input] #birth-form textarea,body[data-view=input][data-ui-page=input] #birth-form select{color:var(--m-ink)}
body[data-view=input][data-ui-page=input] #city-options,body[data-view=input][data-ui-page=input] #city-options [role=option]{color:var(--m-ink)}
body[data-view=input][data-ui-page=input] .preview-note{margin-top:16px}
.saju-peek{position:relative;max-width:320px;margin:0 auto 8px;border:1px solid #d8ccb3;border-radius:10px;background:#f3ebdd;padding:9px;box-shadow:0 5px 14px rgba(60,45,20,.12)}
.saju-peek-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.saju-peek-grid>span{display:grid;justify-items:center;gap:1px;background:#fbf8f1;border:1px solid #dcd3c0;border-radius:7px;padding:4px 2px}
.saju-peek-grid i{font:600 9px/1 Manrope,Arial,sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#5b645e}
.saju-peek-grid b{font:700 19px/1.05 "Noto Serif KR","Libre Baskerville",Georgia,serif}
.saju-peek .e-wood{color:#4e7a48}.saju-peek .e-fire{color:#c0503a}.saju-peek .e-earth{color:#b08a3a}.saju-peek .e-water{color:#2e4a6a}
.saju-peek-seal{position:absolute;right:7px;top:7px;width:20px;height:20px;border-radius:5px;background:#b8432f;color:#f4efe3;display:grid;place-items:center;font:700 9px/1 "Noto Serif KR",serif;transform:rotate(-4deg)}
.saju-peek-veil{display:block;text-align:center;padding-top:7px;font:600 11px/1.3 Manrope,Arial,sans-serif;color:#5b645e}
body[data-view=input][data-ui-page=input] details.lunar{margin-top:12px;border-top:1px solid var(--m-line);padding-top:10px}
body[data-view=input][data-ui-page=input] details.lunar>summary{cursor:pointer;font:600 14px/20px Manrope,Arial,sans-serif;color:var(--m-jade);list-style:none}
body[data-view=input][data-ui-page=input] details.lunar>summary::-webkit-details-marker{display:none}
body[data-view=input][data-ui-page=input] details.lunar>summary::after{content:" \203A"}
body[data-view=input][data-ui-page=input] details.lunar[open]>summary::after{content:" \2304"}
.landing-cta{display:none}
body[data-view=input][data-ui-page=input] .landing-cta:not([hidden]):not([data-typing]){position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;gap:6px;justify-items:center;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(244,239,227,.96);border-top:1px solid var(--m-line);backdrop-filter:blur(6px)}
.landing-cta>button{width:100%;max-width:420px;min-height:52px;border:0;border-radius:10px;background:#253e37;color:#f4efe3;font:600 16px/20px Manrope,Arial,sans-serif;letter-spacing:0}
.landing-cta>span{font:400 13px/18px Manrope,Arial,sans-serif;color:#5b645e}
@media(min-width:1000px){body[data-view=input][data-ui-page=input] #service-page>.hero h1{font-size:44px;line-height:52px}}

/* saju-peek-wide: larger preview on tablet and desktop */
@media(min-width:760px){
.saju-peek{max-width:430px;padding:12px;border-radius:12px}
.saju-peek-grid{gap:8px}
.saju-peek-grid>span{padding:8px 2px;border-radius:8px}
.saju-peek-grid i{font-size:10px}
.saju-peek-grid b{font-size:27px}
.saju-peek-seal{width:26px;height:26px;right:9px;top:9px;font-size:10px}
.saju-peek-veil{padding-top:9px;font-size:12px}
}

/* MIRAE footer & notice — 2026-09-20 */
body[data-view=input][data-ui-page=input] #birth-form #data-notice{max-width:62ch;padding:14px 16px;border-radius:8px;font-size:13px;line-height:20px}
body[data-view=input][data-ui-page=input] #birth-form #create-note{max-width:62ch;padding:0 16px;margin-top:12px;font-size:13px;line-height:20px}
main>footer{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,9fr);grid-auto-flow:row dense;grid-auto-rows:min-content;align-items:start;gap:10px 56px;padding:44px max(5%,24px) 56px;font-size:13px;line-height:22px;color:#5b645e}
main>footer>#footer-title{grid-column:1;grid-row:1;font-size:22px;line-height:1.2;letter-spacing:.26em;color:#1e2a26;margin:0 0 4px}
main>footer>#footer-body{grid-column:2;grid-row:1/span 2;max-width:58ch;margin:0;font-size:13px;line-height:22px}
main>footer>section{grid-column:2;grid-row:3/span 3;max-width:46ch}
main>footer>section p{max-width:46ch;font-size:13px;line-height:22px;margin:0}
main>footer>p:not(#footer-body){grid-column:1;max-width:46ch;margin:0;font-size:13px;line-height:22px}
main>footer>#print{grid-column:1;justify-self:start}
main>footer a{color:#253e37}
@media(max-width:760px){
main>footer{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;padding:36px 20px 44px!important}
main>footer>#footer-title,main>footer>#footer-body,main>footer>#print,main>footer>section,main>footer>p:not(#footer-body){grid-column:1!important;grid-row:auto!important;max-width:none}
main>footer>#footer-body,main>footer>section p,main>footer>p:not(#footer-body),main>footer a{font-size:13px!important;line-height:22px!important}
main>footer>#footer-title{font-size:20px;margin:0 0 2px}
}

/* MIRAE birth date picker — 2026-09-20 */
body[data-view=input][data-ui-page=input] .birth-date-parts{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr);gap:8px;margin-top:4px}
body[data-view=input][data-ui-page=input] #birth-form .ref-form-group{padding-top:8px}
body[data-view=input][data-ui-page=input] #birth-form .ref-form-group h2{margin-bottom:2px}
body[data-view=input][data-ui-page=input] .birth-date-parts select{width:100%;min-height:48px;padding:12px;border:1px solid #9cad9f;border-radius:4px;background:#faf5e9;color:#1e2a26;font-size:16px;line-height:20px}
body[data-view=input][data-ui-page=input] .birth-date-parts select:focus-visible{outline:2px solid #253e37;outline-offset:2px}
body[data-view=input][data-ui-page=input] #birth-form #birthDate.is-hidden-date{position:absolute;width:1px;height:1px;min-height:0;margin:0;padding:0;border:0;opacity:0;pointer-events:none;overflow:hidden}
body[data-view=input][data-ui-page=input] .birth-date-confirm{display:block;margin-top:6px;font-size:13px;line-height:18px;color:#5b645e}
body[data-view=input][data-ui-page=input] .birth-date-field [aria-invalid=true]+.birth-date-parts select{border-color:#e45d63}

/* MIRAE reading screen — spec 9, 2026-09-20 */
.reading-writing{margin:10px 0 0;font:400 14px/22px Manrope,Arial,sans-serif;color:#5b645e}
.reading-skeleton{display:grid;gap:8px;margin:10px 0 4px;max-width:640px}
.reading-skeleton i{display:block;height:10px;border-radius:5px;background:#e3dac6}
.locked-subtopic .locked-chip{display:inline-block;margin:8px 0 0;padding:5px 10px;border:1px solid #dcd3c0;border-radius:999px;background:#f6f2e8;font:600 12px/1 Manrope,Arial,sans-serif;color:#5b645e}
.locked-subtopic .locked-unlock{display:inline-block;margin:10px 0 0 10px;font:600 13px/1 Manrope,Arial,sans-serif;color:#b8432f;text-decoration:underline}
.locked-subtopic h3{color:#5b645e}
@media(prefers-reduced-motion:reduce){.reading-skeleton i{animation:none}}
body[data-view=reading][data-ui-page=reading] .generation-status{flex-wrap:wrap;align-items:baseline;gap:6px 10px}
body[data-view=reading][data-ui-page=reading] #status{flex:1 1 240px;min-width:0;margin:0;font:600 17px/26px Manrope,Arial,sans-serif;color:#1e2a26;font-size:17px}
body[data-view=reading][data-ui-page=reading] #reading-delivery{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:12px 0 0}
body[data-view=reading][data-ui-page=reading] #reading-delivery p{flex:1 1 100%;max-width:640px;margin:0;font:400 14px/22px Manrope,Arial,sans-serif;color:#5b645e}
body[data-view=reading][data-ui-page=reading] #reading-delivery button{flex:0 0 auto;margin:4px 0 0}
body[data-view=reading][data-ui-page=reading] .progress-label[for=generation]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
body[data-view=reading][data-ui-page=reading] #generation{margin-top:18px}
@media(max-width:700px){body[data-view=reading][data-ui-page=reading] #status{flex:1 1 200px;font-size:16px;line-height:24px}}

/* MIRAE reading screen, second pass — spec 12, 2026-09-20 */
body[data-view=reading] .reading-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 18px;padding:2px 0 6px;-webkit-overflow-scrolling:touch}
body[data-view=reading] .reading-chips::-webkit-scrollbar{display:none}
body[data-view=reading] .reading-chips a{flex:0 0 auto;padding:8px 14px;border:1px solid #dcd3c0;border-radius:999px;background:#f6f2e8;font:600 13px/1 Manrope,Arial,sans-serif;color:#253e37;text-decoration:none;white-space:nowrap}
body[data-view=reading] .reading-chips a:hover{border-color:#b3ab93;background:#fbf8f1}
body[data-view=reading] .reading-locked{margin:14px 0 26px;padding:18px 18px 20px;border:1px solid #dcd3c0;border-radius:12px;background:#f6f2e8}
body[data-view=reading] .reading-locked .locked-chip{margin:0}
body[data-view=reading] .reading-locked h3{margin:12px 0 0;font:600 15px/22px Manrope,Arial,sans-serif;color:#1e2a26}
body[data-view=reading] .reading-locked ul{margin:10px 0 0;padding:0 0 0 18px}
body[data-view=reading] .reading-locked li{font:400 15px/24px Manrope,Arial,sans-serif;color:#5b645e}
body[data-view=reading] .reading-locked .locked-unlock{margin:14px 0 0 0}
body[data-view=reading] #facts{display:inline-block;margin:10px 0 0;padding:10px 14px;border:1px solid #dcd3c0;border-radius:10px;background:#f6f2e8;font:600 13px/20px Manrope,Arial,sans-serif;color:#1e2a26;letter-spacing:.02em}
body[data-view=reading] #reading-delivery{margin-top:26px;padding-top:20px;border-top:1px solid #dcd3c0}
@media(max-width:999px){body[data-view=reading][data-reading-chips] .toc-toggle{display:none}}
@media(min-width:1000px){body[data-view=reading] .reading-chips{display:none}}
body .masthead{min-height:76px}

/* MIRAE desktop layout — input screen, spec 14, 2026-09-20 */
body[data-view=input][data-ui-page=input] .input-rail{display:grid;gap:8px;justify-items:center;margin:0 0 6px}
body[data-view=input][data-ui-page=input] .input-rail-note{margin:0;font:500 13px/20px Manrope,Arial,sans-serif;color:#5b645e;text-align:center}
@media(min-width:1000px){
body[data-view=input][data-ui-page=input] #service-page{display:grid;grid-template-columns:minmax(0,560px) minmax(240px,300px);gap:0 40px;align-items:start;justify-content:center;max-width:960px;margin-inline:auto}
body[data-view=input][data-ui-page=input] #service-page>.hero,body[data-view=input][data-ui-page=input] #service-page>.controls,body[data-view=input][data-ui-page=input] #service-page>footer{grid-column:1/-1}
body[data-view=input][data-ui-page=input] #service-page>details.create{grid-column:1;grid-row:2}
body[data-view=input][data-ui-page=input] #service-page>.input-rail{grid-column:2;grid-row:2;position:sticky;top:24px;align-self:start}
body[data-view=input][data-ui-page=input] .input-rail .saju-peek{max-width:296px;margin:0}
body[data-view=input][data-ui-page=input] #birth-form{grid-template-columns:minmax(0,1fr)}
body[data-view=input][data-ui-page=input] #birth-form>*{grid-column:1}
body[data-view=input][data-ui-page=input] .landing-cta{display:none!important}
}

/* MIRAE desktop layout — reading and offer, spec 15, 2026-09-20 */
@media(min-width:1000px){
body[data-view=reading] .book{grid-template-columns:190px minmax(0,1fr) 190px}
body[data-view=reading] .book>.reading-rail{grid-column:3;position:sticky;top:24px;align-self:start;max-height:none;overflow:visible;background:transparent;display:grid;gap:10px}
body[data-view=reading] .book>.reading-rail #reading-delivery{display:grid;gap:8px;margin:0;padding:0;border:0}
body[data-view=reading] .book>.reading-rail #reading-delivery p{flex:none;max-width:none;margin:0;font-size:13px;line-height:20px}
body[data-view=reading] .book>.reading-rail #reading-delivery button{width:100%}
body[data-view=plans] #plan-flow:has(#unlock-offer){max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 36px;align-items:start}
body[data-view=plans] #plan-flow:has(#unlock-offer)>#unlock-offer,body[data-view=plans] #plan-flow:has(#unlock-offer)>#unlock-support{grid-column:1}
body[data-view=plans] #plan-flow:has(#unlock-offer)>#plan-message{grid-column:1/-1}
body[data-view=plans] #plan-flow:has(#unlock-offer)>.unlock-rail{grid-column:2;grid-row:1/span 4;position:sticky;top:24px;align-self:start;display:grid;gap:12px}
body[data-view=plans] #plan-flow:has(#unlock-offer)>.unlock-rail>button{width:100%;margin:0;min-height:52px;background:var(--red,#b8432f);color:#fff;border:0;font-weight:700;border-radius:8px}
body[data-view=plans] #plan-flow:has(#unlock-offer)>.unlock-rail>p{margin:0;text-align:center}
body[data-view=plans] #plan-flow:has(#unlock-offer) .unlock-products{grid-template-columns:minmax(0,1fr);gap:12px;margin:0}
body[data-view=plans] #plan-flow:has(#unlock-offer) .unlock-plan{padding:18px 18px 16px}
body[data-view=plans] #plan-flow:has(#unlock-offer) .unlock-plan:has(.unlock-badge){padding-top:40px}
}
/* the card preview belongs to the input screen only */
body[data-view=plans] .input-rail,body[data-view=reading] .input-rail{display:none!important}
/* MIRAE plans & frame — 2026-09-21 (R3) */
/* The header and the footer take the side edges of the page they sit on.
   .page (plans, samples, library, help) is 1220px with 24px padding: 1172px of content.
   #service-page (input, unlock, reading) is 1180px with 24px padding: 1132px of content.
   The home page keeps its own frame (.m2-header, .m2-footer), already on its 1144px grid. */
body .masthead.account-layout-ready:not(.m2-header),body main>footer:not(.m2-footer){padding-left:max(24px,calc((100% - 1172px)/2));padding-right:max(24px,calc((100% - 1172px)/2))}
body:is([data-ui-page=input],[data-ui-page=plans],[data-ui-page=reading]) .masthead.account-layout-ready:not(.m2-header),body:is([data-ui-page=input],[data-ui-page=plans],[data-ui-page=reading]) main>footer:not(.m2-footer){padding-left:max(24px,calc((100% - 1132px)/2));padding-right:max(24px,calc((100% - 1132px)/2))}
@media(max-width:760px){
 body .masthead.account-layout-ready:not(.m2-header),body main>footer:not(.m2-footer){padding-left:18px!important;padding-right:18px!important}
 body:is([data-ui-page=input],[data-ui-page=plans],[data-ui-page=reading]) .masthead.account-layout-ready:not(.m2-header),body:is([data-ui-page=input],[data-ui-page=plans],[data-ui-page=reading]) main>footer:not(.m2-footer){padding-left:16px!important;padding-right:16px!important}
}
@media(min-width:769px) and (max-width:1100px){body footer.m2-footer{padding-left:32px!important;padding-right:32px!important}}
/* One type family with the page: the heading face for the name, the text face for the rest. */
body .masthead.account-layout-ready:not(.m2-header) .brand{font-family:'Libre Baskerville',Georgia,serif;letter-spacing:.24em}
body .masthead.account-layout-ready:not(.m2-header) .member-bar :is(a,summary,button){font-family:Manrope,Arial,sans-serif}
@media(min-width:1001px){body .masthead.account-layout-ready:not(.m2-header) #ui-nav a,body .masthead.account-layout-ready:not(.m2-header) .member-bar :is(a,summary){font-size:15px}}
body main>footer:not(.m2-footer) :is(#footer-body,p,a,strong){font-size:14px;line-height:1.7}
body main>footer>p a{white-space:nowrap}
@media(max-width:760px){body main>footer:not(.m2-footer) :is(#footer-body,p,a,strong){font-size:14px!important;line-height:1.7!important}}
/* The footer fills the width between those edges: name and links, the note, the business details. */
@media(min-width:1001px){
 body main>footer{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;grid-template-rows:auto auto auto 1fr;column-gap:56px}
 body main>footer>#footer-body{grid-column:2;grid-row:1/span 4;max-width:none}
 body main>footer>section{grid-column:3;grid-row:1/span 4;max-width:none}
 body main>footer>section p{max-width:none}
}
@media(min-width:761px) and (max-width:1000px){
 body main>footer{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);grid-template-rows:auto auto auto 1fr;column-gap:40px}
 body main>footer>#footer-body{grid-column:2;grid-row:1/span 3;max-width:none}
 body main>footer>section{grid-column:2;grid-row:4;max-width:none}
 body main>footer>section p{max-width:none}
}

/* Plans. Each card is a subgrid of the same rows, so a title that wraps to three lines,
   or a note that takes two, moves that row in all three cards and nothing overlaps. */
body[data-ui-page=pricing] #public-page .signup-coupon-offer{max-width:640px;margin:-18px auto 32px;text-align:center;font-size:15px;line-height:1.7;text-wrap:balance}
body[data-ui-page=pricing] #public-page .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(16,auto);column-gap:22px;row-gap:0;align-items:stretch}
body[data-ui-page=pricing] #public-page .plans>.plan{grid-row:span 16;display:grid;grid-template-rows:subgrid;row-gap:0;align-content:start;margin:0;padding:24px;background:#f5efdf;border:1px solid #ccd2c4;border-radius:3px;box-shadow:none;color:#193e48}
body[data-ui-page=pricing] #public-page .plans>.plan>*{margin:0;min-height:0;box-sizing:border-box}
body[data-ui-page=pricing] #public-page .plans>.plan>.ref-product-art{height:112px;margin:0 0 20px}
body[data-ui-page=pricing] #public-page .plans>.plan>.eyebrow{margin:0 0 10px}
body[data-ui-page=pricing] #public-page .plans>.plan>h2{font:400 clamp(22px,2.1vw,28px)/1.22 'Libre Baskerville',Georgia,serif;color:#193e48;margin:0 0 14px;text-wrap:balance}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-description{font-size:16px;line-height:1.65;color:#193e48;margin:0 0 20px}
body[data-ui-page=pricing] #public-page .plans>.plan>.price{font:400 30px/1.3 Georgia,serif;color:#193e48;margin:0 0 2px}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-total-note{font-size:13px;line-height:1.6;color:#50676a;margin:0 0 18px}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-scope{grid-row:span 5;display:grid;grid-template-rows:subgrid;row-gap:0;margin:0;border-top:1px solid #adbbb1}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-scope>div{height:auto;min-height:0;padding:12px 0;border-bottom:1px solid #ced7cc}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-scope dt{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#58716d;margin:0 0 4px}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-scope dd{margin:0;font-size:15px;line-height:1.45;color:#193e48}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-chapters{margin:6px 0 0;font-size:14px}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-chapters>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:0;list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:#126958}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-chapters>summary::-webkit-details-marker{display:none}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-chapters>summary::after{content:'+';font-size:20px;font-weight:400;line-height:1}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-chapters[open]>summary::after{content:'\2212'}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-chapters ol{margin:4px 0 8px;padding-left:22px;line-height:1.5}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-chapters li{margin:0 0 6px}
body[data-ui-page=pricing] #public-page .plans>.plan>.paid-delivery-note{font-size:13px;line-height:1.6;color:#50676a;margin:10px 0 0}
body[data-ui-page=pricing] #public-page .plans>.plan>button{width:100%;min-height:52px;margin:16px 0 0}
body[data-ui-page=pricing] #public-page .unified-payment-note{text-align:center}
body[data-ui-page=pricing] #public-page .plan-samples{max-width:none;margin:6px auto 0;text-align:center;font-size:14px}
@media(max-width:899px){
 body[data-ui-page=pricing] #public-page .plans{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:22px;max-width:620px;margin-inline:auto}
 body[data-ui-page=pricing] #public-page .plans>.plan{grid-row:auto;display:flex;flex-direction:column}
 body[data-ui-page=pricing] #public-page .plans>.plan>.plan-scope{display:block}
 body[data-ui-page=pricing] #public-page .plans>.plan>h2{font-size:26px}
}
@media(max-width:760px){
 body[data-ui-page=pricing] #public-page .signup-coupon-offer{margin:-10px auto 24px;font-size:14px}
 body[data-ui-page=pricing] #public-page .plans>.plan{padding:20px}
 body[data-ui-page=pricing] #public-page .plans>.plan>.ref-product-art{height:96px;margin-bottom:16px}
 body[data-ui-page=pricing] #public-page .plans>.plan>h2{font-size:24px}
}
/* MIRAE plans — 2026-09-21 (R4): a question on every card, a page to read, a name at the top */
body[data-ui-page=pricing] #public-page .plans{grid-template-rows:repeat(17,auto)}
body[data-ui-page=pricing] #public-page .plans>.plan{grid-row:span 17;position:relative}
body[data-ui-page=pricing] #public-page .plans>.plan>h2{font-size:clamp(21px,1.9vw,25px);line-height:1.3}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-badge{position:absolute;top:14px;right:14px;margin:0;font:600 11px/1 Manrope,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#f6f2e8;background:#253e37;border-radius:2px;padding:6px 8px;z-index:1}
body[data-ui-page=pricing] #public-page .plans>.plan[data-plan=DELUXE]{border-color:#253e37;box-shadow:inset 0 3px #253e37}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-sample{margin:0;font-size:14px;border-top:1px solid #ced7cc}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-sample>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:0;list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:#126958}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-sample>summary::-webkit-details-marker{display:none}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-sample>summary::after{content:'+';font-size:20px;font-weight:400;line-height:1}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-sample[open]>summary::after{content:'\2212'}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-sample p{margin:0 0 10px;line-height:1.6;color:#193e48}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-sample .small{font-size:12px;color:#50676a}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-sample .sample-idea{font:400 17px/1.45 'Libre Baskerville',Georgia,serif}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-sample a{display:inline-block;margin:2px 0 10px;font-weight:600}
body[data-ui-page=pricing] #public-page .plans>.plan>.plan-scope dd span{font-style:italic}
body[data-ui-page=pricing] #public-page .plan-for{max-width:none;margin:-8px 0 20px;text-align:center;font-size:15px;color:#193e48}
body[data-ui-page=pricing] #public-page .plan-for span{font-style:italic}
body[data-ui-page=pricing] #public-page .plan-for+.signup-coupon-offer{margin-top:0}
body[data-ui-page=pricing] #public-page .signup-coupon-offer b{font-weight:700;color:#B8432F}
@media(max-width:899px){body[data-ui-page=pricing] #public-page .plans>.plan>h2{font-size:24px}}
@media(max-width:760px){body[data-ui-page=pricing] #public-page .plans>.plan>h2{font-size:22px}}
/* MIRAE reading screen — 2026-09-21 (R8) */
/* a one-chapter reading is a page, not a book: no contents, no bookmarks, no chapter arrows */
body[data-view=reading][data-reading-single="1"] #reading-nav,body[data-view=reading][data-reading-single="1"] .toc-toggle,body[data-view=reading][data-reading-single="1"] .chapter .tools,body[data-view=reading][data-reading-single="1"] .reading-chips{display:none!important}
@media(min-width:1000px){body[data-view=reading][data-reading-single="1"] .book{grid-template-columns:minmax(0,1fr) 190px}body[data-view=reading][data-reading-single="1"] .book>.reading-rail{grid-column:2}}
/* the rest of the life-theme chapter, in one line under the part the reader has */
body[data-view=reading] .life-rest{margin-top:22px;padding-top:16px;border-top:1px solid #e1d9c6}
body[data-view=reading] .life-rest .life-rest-note{margin:0;font:400 14px/1.6 Manrope,Arial,sans-serif;color:#5b645e}
body[data-view=reading] .life-rest .locked-unlock{margin:8px 0 0}
/* the invitation written from the chart (same shape as the card page) */
body[data-view=reading] .reading-basic{margin:22px 0 26px;padding:24px 22px 22px;background:#f6f2e8;border:1px solid #dcd3c0;border-radius:12px}
body[data-view=reading] .reading-basic .eyebrow{margin:0 0 6px;font-size:12px}
body[data-view=reading] .reading-basic h3{margin:0 0 6px;font:400 24px/1.35 'Libre Baskerville',Georgia,serif;color:#1e2a26}
body[data-view=reading] .reading-basic .hook-list{list-style:none;margin:4px 0 18px;padding:0}
body[data-view=reading] .reading-basic .hook-list li{display:grid;gap:3px;padding:12px 0;border-top:1px solid #e1d9c6;line-height:1.55}
body[data-view=reading] .reading-basic .hook-list li:first-child{border-top:0;padding-top:4px}
body[data-view=reading] .reading-basic .hook-fact{font:400 17px/1.45 'Libre Baskerville',Georgia,serif;color:#1f2a26}
body[data-view=reading] .reading-basic .hook-next{font:400 14px/1.5 Manrope,Arial,sans-serif;color:#4c5a55}
body[data-view=reading] .reading-basic .hook-next b{font-weight:600;color:#253E37}
body[data-view=reading] .reading-basic .hook-next i{display:inline-block;font:600 10px/1 Manrope,Arial,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#B8432F;border:1px solid #d9b3aa;border-radius:2px;padding:3px 5px;margin-left:6px;vertical-align:1px}
body[data-view=reading] .reading-basic .hook-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
body[data-view=reading] .reading-basic .hook-actions .primary{font-size:15px;padding:13px 20px;background:#B8432F;border-color:#B8432F;color:#fff}
body[data-view=reading] .reading-basic .hook-actions a.link{font:600 14px/1.4 Manrope,Arial,sans-serif;color:#253E37;text-decoration:underline;text-underline-offset:3px}
body[data-view=reading] .reading-basic .hook-note{margin:12px 0 0;font:400 12.5px/1.6 Manrope,Arial,sans-serif;color:#6f6a5e;max-width:none}
body[data-view=reading] .reading-basic .hook-note span{color:#B8432F;font-weight:600}
/* a reading that cannot be opened shows one sentence, not the machinery */
body[data-view=reading][data-reading-error="1"] #question,body[data-view=reading][data-reading-error="1"] #facts,body[data-view=reading][data-reading-error="1"] .plan-context,body[data-view=reading][data-reading-error="1"] #status-loader,body[data-view=reading][data-reading-error="1"] #plan-legend,body[data-view=reading][data-reading-error="1"] #volume,body[data-view=reading][data-reading-error="1"] #stages,body[data-view=reading][data-reading-error="1"] .tiers,body[data-view=reading][data-reading-error="1"] #save,body[data-view=reading][data-reading-error="1"] #viewing-plan,body[data-view=reading][data-reading-error="1"] .book,body[data-view=reading][data-reading-error="1"] .toc-toggle,body[data-view=reading][data-reading-error="1"] #generation,body[data-view=reading][data-reading-error="1"] #generation-label{display:none!important}
body[data-view=reading][data-reading-error="1"] #status a{margin-left:4px;font-weight:600}
body[data-view=reading] #retry-failed:not([hidden]){display:inline-flex;margin:10px 0 0;min-height:44px;align-items:center;padding:10px 18px;background:#253E37;color:#F6F2E8;border:1px solid #253E37;border-radius:3px;font:600 14px/1.3 Manrope,Arial,sans-serif;cursor:pointer}

/* while a payment is being verified, only the verification line shows — 2026-09-22 (R10) */
body[data-view=plans][data-payment-verify="1"] .controls>.tiers,body[data-view=plans][data-payment-verify="1"] .controls>.plan-heading,body[data-view=plans][data-payment-verify="1"] #plan-flow>button,body[data-view=plans][data-payment-verify="1"] #plan-flow>p:not(#plan-message),body[data-view=plans][data-payment-verify="1"] #plan-flow>#unlock-support{display:none!important}
body[data-view=plans][data-payment-verify="1"] #plan-message{font:400 18px/1.6 Manrope,Arial,sans-serif;margin:24px 0}
body[data-view=plans][data-payment-verify="1"] #plan-message button{display:inline-flex;margin:12px 0 0;min-height:44px;align-items:center;padding:10px 18px}
/* the plan rail never clips its own pay button: no inner scroll, and it only sticks when the viewport is tall enough to show all of it */
body[data-view=plans] #plan-flow:has(#unlock-offer)>.unlock-rail{max-height:none!important;overflow:visible!important}
@media(max-height:1100px){body[data-view=plans] #plan-flow:has(#unlock-offer)>.unlock-rail{position:static}}
/* the return notice sits under the title, where it is read first */
body[data-view=plans] #unlock-offer>#plan-message{margin:6px 0 16px;font-weight:600;color:#8a5a12}
/* the member coupon sits in the plan rail, right above the pay button — 2026-09-22 (R12) */
body[data-view=plans] .unlock-rail>#member-coupon-box{margin:0;padding:14px 16px 12px;border:1px solid var(--green,#253E37);border-left-width:4px;border-radius:8px;background:#fff}
body[data-view=plans] .unlock-rail>#member-coupon-box>p{margin:0 0 6px;font-size:14px;line-height:1.45;text-align:left}
body[data-view=plans] .unlock-rail>#member-coupon-box>p:first-child{font-weight:700;color:var(--green,#253E37)}
body[data-view=plans] .unlock-rail>#member-coupon-box>label{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:15px;font-weight:600;cursor:pointer}
body[data-view=plans] .unlock-rail>#member-coupon-box>label input{width:18px;height:18px;margin:0;accent-color:var(--red,#b8432f)}
body[data-view=plans] .unlock-rail>#member-coupon-box>#member-coupon-status{font-size:13px;color:#6f6a5e}
body[data-view=plans] .unlock-rail>#member-coupon-box>#member-coupon-total{margin:0;font-size:16px}
body[data-view=plans] .unlock-rail>#member-coupon-box>#member-coupon-total strong{color:var(--red,#b8432f)}
body[data-view=plans] .unlock-rail>#member-coupon-box>button{margin:8px 0 0;min-height:40px;padding:6px 10px;font-size:13px;background:transparent;border:1px solid var(--red,#b8432f);color:var(--red,#b8432f);border-radius:6px}
/* a plan card shows the price the member will actually pay */
.unlock-plan b s{font-weight:400;color:#8a857a;margin-right:6px}
.unlock-plan.coupon-on b{color:var(--red,#b8432f)}
.unlock-plan .coupon-tag{display:block;margin:2px 0 4px;font:600 12px/1.3 Manrope,Arial,sans-serif;color:var(--red,#b8432f);letter-spacing:.02em}
/* under 1000px the plan rail is not the old reading sidebar: no navy box (style.css `aside{background:#1d3040}`), the pay button is the same red as on desktop, and the note is readable */
@media(max-width:999px){
body[data-view=plans] #plan-flow:has(#unlock-offer)>.unlock-rail{background:transparent;color:inherit;padding:0;margin:8px 0 24px;display:grid;gap:12px}
body[data-view=plans] #plan-flow:has(#unlock-offer)>.unlock-rail>button{width:100%;margin:0;min-height:52px;background:var(--red,#b8432f);color:#fff;border:0;font-weight:700;border-radius:8px}
body[data-view=plans] #plan-flow:has(#unlock-offer)>.unlock-rail>p{margin:0;text-align:center;font-size:13px;color:#6f6a5e}
}
/* the line under the coupon that points at the payment page's code field — 2026-09-22 (R13) */
body[data-view=plans] .unlock-rail>#member-coupon-box>#member-coupon-alt{margin:8px 0 0;font-size:12px;line-height:1.45;color:#6f6a5e}
/* while a payment is being verified the coupon panel has nothing to say — 2026-09-22 (R14) */
body[data-view=plans][data-payment-verify="1"] #member-coupon-box{display:none!important}
/* R30: missing fields stand out; the calendar choice is open; the assumed birthplace is explained */
body[data-view=input][data-ui-page=input] #birth-form .field-error{color:#b8432f}
#birth-form fieldset[aria-invalid=true]{border:2px solid #e45d63;border-radius:4px;padding:8px 10px}
body[data-view=input][data-ui-page=input] #birth-form .calendar-choice.calendar-open{margin-top:0;padding-top:0;border-top:0}
/* R32: empty helper lines under the date take no room */
body[data-view=input][data-ui-page=input] #birth-form .birth-date-field #birth-date-confirm:empty,body[data-view=input][data-ui-page=input] #birth-form .birth-date-field #date-format:empty,body[data-view=input][data-ui-page=input] #birth-form .birth-date-field #error-birthDate:empty{display:none}
/* R31: the calendar row on the date row's grid — Solar · Lunar · Leap month under Month · Day · Year */
body[data-view=input][data-ui-page=input] #birth-form .calendar-choice.calendar-open{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr);gap:8px;align-items:stretch}
body[data-view=input][data-ui-page=input] #birth-form .calendar-choice.calendar-open>legend{grid-column:1/-1!important;width:100%;margin:0 0 4px}
body[data-view=input][data-ui-page=input] #birth-form .calendar-choice.calendar-open>label{grid-column:auto!important;grid-row:auto!important;width:auto;min-width:0;flex:none;margin:0;min-height:48px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-view=input][data-ui-page=input] #birth-form .calendar-choice.calendar-open>label span{overflow:hidden;text-overflow:ellipsis}
body[data-view=input][data-ui-page=input] #birth-form .calendar-choice.calendar-open>small{grid-column:1/-1!important;width:100%;margin:4px 0 0}
@media(max-width:480px){body[data-view=input][data-ui-page=input] #birth-form .calendar-choice.calendar-open>label{white-space:normal;overflow:visible;text-overflow:clip;font-size:14px;line-height:1.15;padding:0 6px;gap:6px}body[data-view=input][data-ui-page=input] #birth-form .calendar-choice.calendar-open>label span{overflow:visible;text-overflow:clip;font-size:14px;line-height:1.15}}
body[data-view=input][data-ui-page=input] #birth-form .city-assumed{display:block;margin-top:8px;padding:10px 12px;border-left:3px solid #B8432F;background:#fbf5ee;font-size:13px;line-height:1.55;color:#4c5a55}