/* Scroll-led education design. Existing checkout styles remain in membership.css. */
.header{position:sticky;top:0;z-index:20;background:#f5f3f0ed;backdrop-filter:blur(16px);min-height:80px;border-bottom:1px solid #1112}
.header .wordmark{font-size:32px}.header .nav-link{display:flex;font-size:12px}
.intro{min-height:calc(100svh - 122px);padding-block:64px 72px;align-items:center;gap:8%}
.intro h1{font-size:clamp(70px,7.6vw,112px);letter-spacing:-.035em;line-height:.94}.intro .lead{font-size:16px;line-height:1.8;max-width:390px}
.intro .brand-art{min-height:520px;aspect-ratio:4/5}.intro .brand-art img{object-position:61% center}
.eyebrow{font-size:12px;letter-spacing:.16em}.text-link{font-size:12px}.intro .text-link{gap:28px}
.brow-story{height:280svh;position:relative;background:#e9e6e1}
.brow-stage{position:sticky;top:80px;height:calc(100svh - 80px);min-height:530px;overflow:hidden;display:flex;align-items:center;flex-direction:column;padding:55px 24px 32px}
.brow-stage .eyebrow{margin:0;text-align:center}.brow-stage h2{text-align:center;font-size:clamp(58px,6.2vw,90px);margin:24px 0 0;z-index:1}
.brow-stage canvas{position:absolute;left:0;top:28%;width:100%;height:54%;pointer-events:none}
.brow-caption{position:absolute;bottom:9%;text-align:center;max-width:340px;font-size:16px;line-height:1.7;color:#595650;padding-inline:12px;margin:0}
.brow-progress{position:absolute;bottom:28px;display:flex;gap:26px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.brow-progress span{opacity:.35;transition:opacity .3s}.brow-progress span.active{opacity:1}
.brow-fallback{position:absolute;top:40%;font:italic 64px Valentino,serif}.brow-stage:has(canvas[data-ready]) .brow-fallback{display:none}
.chapter-intro{text-align:center;padding:110px 24px 65px}.chapter-intro h2{font-size:clamp(60px,6vw,86px)}.chapter-intro>p:last-child{font-size:16px;color:var(--muted);max-width:420px;margin:24px auto 0}
.feature-chapter{max-width:1280px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10%;padding:56px 7% 110px}
.chapter-copy .chapter-index{font-size:12px;letter-spacing:.13em;display:block;border-top:1px solid var(--line);padding-top:20px;margin-bottom:36px}
.chapter-copy h2{font-size:clamp(52px,5vw,72px)}.chapter-copy>p{font-size:16px;line-height:1.8;max-width:360px;color:var(--muted)}.chapter-copy .chapter-note{font-size:12px;margin-top:28px;letter-spacing:.07em;color:var(--ink)}
.app-stage{background:#e9e6e1;min-height:590px;padding:36px 30px;display:flex;align-items:center;justify-content:center;position:relative}
.app-screen{background:#fff;width:290px;max-width:100%;min-height:490px;box-shadow:0 25px 55px #29272317;border:1px solid #1112;padding:23px 20px 0;position:relative;overflow:hidden;font-family:Arial,sans-serif}
.app-wordmark{font:italic 24px Valentino,serif;text-align:center;border-bottom:1px solid #1112;padding-bottom:15px;margin-bottom:20px}.app-screen h3{font:normal 37px/1 Valentino,serif;margin:14px 0}.app-screen .app-kicker{font-size:10px;letter-spacing:.13em;text-transform:uppercase}.app-image{height:165px;width:100%;object-fit:cover;object-position:60% 35%;filter:grayscale(1)}
.app-screen p{font-size:12px;line-height:1.6;color:#666}.app-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #1112;padding:15px 0;font-size:12px}.app-row span:first-child{color:#777;font-size:10px}.app-row b{font-weight:400;flex:1}.app-row i{font-style:normal;color:#777}.app-bottom{display:flex;justify-content:space-around;border-top:1px solid #1112;margin:16px -20px 0;padding:15px 8px;font-size:10px}.app-bottom .selected{border-bottom:1px solid #111;padding-bottom:4px}
.app-tabs{display:flex;gap:14px;font-size:11px;margin:20px 0}.app-tabs span:first-child{border-bottom:1px solid;padding-bottom:6px}.library-card{background:#e9e6e1;padding:19px;margin-bottom:12px}.library-card h4{font:30px/1.1 Valentino,serif;margin:10px 0}.library-card p{margin:0}.library-card.dark{background:#292723;color:#fff}.library-card.dark p{color:#d8d3cc}.app-progress{height:2px;background:#ddd;margin:18px 0 10px}.app-progress:before{content:'';display:block;width:42%;height:100%;background:#111}.app-continue{background:#111;color:white;font-size:12px;padding:12px;margin:18px 0}.screen-caption{font-size:11px;text-align:center;color:#777;letter-spacing:.06em;margin:14px 0 0}
.feature-chapter.reverse .chapter-copy{order:2}.feature-chapter.reverse .app-stage{order:1}.member-benefit{text-align:center;background:#111;color:#f5f3f0;padding:86px 24px}.member-benefit h2{font-size:clamp(62px,7vw,96px);margin:20px 0}.member-benefit p:last-child{max-width:430px;margin:0 auto;color:#c5c2bd;font-size:16px;line-height:1.8}
.membership{padding-block:100px;align-items:center;max-width:1280px}.benefits h2{font-size:clamp(58px,5vw,76px)}.section-intro{font-size:16px;line-height:1.8}.feature-list h3{font-size:16px}.feature-list p{font-size:14px}.price-card{width:100%;margin:0}.price-card p,.fine-print,.card-foot{font-size:12px}.billing-toggle button{font-size:14px}.currency-label select{font-size:14px}.card-description{font-size:16px!important}.faq{max-width:1280px;padding-block:90px}.faq h2{font-size:60px}summary{font-size:16px;min-height:72px}details p{font-size:15px}.closing{padding:70px 24px}.closing p{font-size:68px}footer{padding-bottom:36px}footer>a:last-child{font-size:12px}
.reveal{opacity:1;transform:none}.motion-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.3,1)}.motion-ready .reveal.is-visible{opacity:1;transform:none}
@media(max-width:800px){.header{min-height:70px;padding:16px 22px;justify-content:space-between}.header .wordmark{font-size:27px}.header .nav-link{position:static;font-size:11px;min-height:40px;letter-spacing:0}.header .nav-link span{margin-left:10px}.intro{padding:42px 24px 44px;gap:34px;min-height:0}.intro h1{font-size:76px}.intro .lead{max-width:350px}.intro .brand-art{min-height:350px;aspect-ratio:1.2}.intro .brand-art img{object-position:60% 42%}.brow-stage{top:70px;height:calc(100svh - 70px);padding-top:42px;min-height:460px}.brow-story{height:245svh}.brow-stage h2{font-size:62px}.brow-stage canvas{top:30%;height:45%}.brow-caption{bottom:12%;font-size:15px;max-width:300px}.brow-progress{gap:24px;font-size:11px}.chapter-intro{padding:76px 24px 30px}.chapter-intro h2{font-size:62px}.feature-chapter{grid-template-columns:1fr;gap:26px;padding:30px 24px 66px}.feature-chapter.reverse .chapter-copy,.feature-chapter.reverse .app-stage{order:initial}.chapter-copy h2{font-size:56px;margin-bottom:20px}.chapter-copy .chapter-index{margin-bottom:26px}.chapter-copy>p{max-width:440px}.chapter-copy .chapter-note{margin-top:20px}.app-stage{min-height:560px;padding:30px 24px}.app-screen{width:290px}.member-benefit{padding:66px 24px}.membership{padding:70px 24px;gap:38px}.price-card{order:initial;padding:24px}.benefits h2{font-size:60px}.faq{padding:65px 24px;gap:20px}.faq h2{font-size:55px}.closing p{font-size:60px}.staging-banner{font-size:11px;padding:8px 16px}.art-top{font-size:10px}.fine-print{text-align:left}html{scroll-padding-top:90px}}
@media(max-width:360px){.header{padding-inline:16px}.header .wordmark{font-size:24px}.header .nav-link{font-size:10px}.intro h1{font-size:64px}.brow-stage h2{font-size:54px}.intro,.feature-chapter,.membership,.faq{padding-inline:20px}.app-stage{padding-inline:18px}.app-screen{padding-inline:16px}.app-bottom{margin-inline:-16px}.chapter-intro h2,.benefits h2{font-size:54px}}
.member-benefit em{color:inherit}
#page-pigment{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:1}
.intro{padding-block:36px 44px;min-height:0}.intro .brand-art{min-height:440px;aspect-ratio:1.1}
.brow-story{height:170svh;background:transparent}.brow-stage{height:75svh;min-height:460px;padding-top:24px}.brow-stage h2{margin-top:16px;font-size:clamp(54px,5.8vw,80px)}.brow-stage canvas{top:27%;height:51%}.brow-caption{bottom:9%;font-size:15px}.brow-progress{bottom:12px}
.chapter-intro{padding-block:48px 20px}.feature-chapter{padding-block:32px 52px}.membership{padding-block:64px}.faq{padding-block:56px}.closing{padding-block:44px}
.craft-interlude{position:relative;isolation:isolate;min-height:620px;height:88svh;max-height:820px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:38px 24px 30px;background:#e9e6e180;margin:0 0 30px}
.interlude-copy{position:relative;z-index:1;pointer-events:none}.interlude-copy .eyebrow{margin-bottom:18px}.interlude-copy h2{font-size:clamp(56px,5.5vw,80px);margin:0}.craft-interlude canvas{position:absolute;top:42%;width:100%;height:50%;left:0}.interlude-caption{font-size:15px;color:var(--muted);position:relative;z-index:1;margin:0}.macro-interlude{background:#dedbd76b}
.app-reveal{min-width:0}.app-stage{perspective:1100px;overflow:hidden;background:#e9e6e1b3}.app-screen{transform-origin:50% 85%;will-change:auto}
.motion-ready .app-reveal .app-screen{opacity:0;transform:translate3d(0,90px,0) rotateX(12deg) rotateZ(-5deg) scale(.87);transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .65s ease;}
.motion-ready .app-reveal.is-visible .app-screen{opacity:1;transform:translate3d(0,0,0) rotateX(0) rotateZ(0) scale(1)}
.motion-ready .reverse .app-reveal .app-screen{transform:translate3d(40px,65px,0) rotateY(-13deg) rotateZ(5deg) scale(.88)}.motion-ready .reverse .app-reveal.is-visible .app-screen{transform:translate3d(0,0,0) rotateY(0) rotateZ(0) scale(1)}
.motion-ready .app-reveal .app-image{transform:scale(1.13);transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}.motion-ready .app-reveal.is-visible .app-image{transform:scale(1)}
.motion-ready .app-reveal .app-row,.motion-ready .app-reveal .library-card,.motion-ready .app-reveal .app-continue{opacity:0;transform:translateY(18px);transition:opacity .65s ease .35s,transform .85s cubic-bezier(.16,1,.3,1) .35s}.motion-ready .app-reveal.is-visible .app-row,.motion-ready .app-reveal.is-visible .library-card,.motion-ready .app-reveal.is-visible .app-continue{opacity:1;transform:translateY(0)}.motion-ready .app-reveal .app-row:nth-of-type(even),.motion-ready .app-reveal .library-card:nth-of-type(even){transition-delay:.5s}
@media(max-width:800px){.intro{padding-block:28px 32px;gap:24px}.intro .brand-art{min-height:300px}.brow-story{height:155svh}.brow-stage{height:72svh;min-height:420px;padding-top:22px}.brow-stage h2{font-size:54px}.brow-stage canvas{top:29%;height:45%}.brow-caption{font-size:14px;bottom:10%;line-height:1.5}.brow-progress{font-size:10px;gap:18px}.chapter-intro{padding-block:38px 14px}.feature-chapter{padding-block:24px 36px;gap:20px}.chapter-copy .chapter-index{margin-bottom:20px}.app-stage{min-height:530px;padding-block:24px}.craft-interlude{height:77svh;min-height:490px;max-height:660px;padding:28px 22px 24px;margin-bottom:12px}.interlude-copy h2{font-size:58px}.interlude-copy .eyebrow{font-size:11px;margin-bottom:15px}.interlude-caption{font-size:14px}.member-benefit{padding-block:48px}.membership{padding-block:48px}.faq{padding-block:44px}.closing{padding-block:38px}}
@media(max-width:360px){.brow-stage h2{font-size:48px}.interlude-copy h2{font-size:52px}}
@media(prefers-reduced-motion:reduce){#page-pigment{display:none}.motion-ready .app-reveal .app-screen,.motion-ready .reverse .app-reveal .app-screen,.motion-ready .app-reveal .app-image,.motion-ready .app-reveal .app-row,.motion-ready .app-reveal .library-card,.motion-ready .app-reveal .app-continue{opacity:1;transform:none;transition:none}.craft-interlude{height:580px}}
@media(prefers-reduced-motion:reduce){.brow-story{height:auto}.brow-stage{position:relative;top:0;height:650px;max-height:90svh}.reveal,.motion-ready .reveal{opacity:1;transform:none;transition:none}.brow-progress{display:none}html{scroll-behavior:auto}}

/* Pigment stays on the paper layer; content and opaque media sit above it. */
body{isolation:isolate}main,footer,.staging-banner{position:relative;z-index:1}
.app-stage{background:#e9e6e1}.craft-interlude{background:transparent}.macro-interlude{background:transparent}

/* The artwork stays in document flow: no pinning or empty scroll runway. */
.brow-story{height:auto}
.brow-stage{position:relative;top:0;height:auto;min-height:0;max-height:none;padding:30px 24px;overflow:visible;gap:0}
.brow-stage h2{margin:16px 0 0}
.brow-stage canvas{position:relative;inset:auto;width:100%;height:clamp(180px,24vw,300px);flex:none;display:block;margin:8px 0}
.brow-caption{position:static;bottom:auto;max-width:360px;margin:8px 0 0}
.brow-progress{position:static;bottom:auto;margin-top:22px}
@media(max-width:800px){.brow-stage{padding:24px 20px}.brow-stage canvas{height:180px;margin:4px 0}.brow-caption{margin-top:4px}.brow-progress{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.brow-stage{height:auto;min-height:0;max-height:none}.brow-progress{display:none}}

/* Astra cursor reference: an 80svh cue moving with the document. */
.brow-stage canvas{height:80svh;width:calc(100% + 48px);max-width:none;margin:0 -24px}
@media(max-width:800px){.brow-stage canvas{height:80svh;width:calc(100% + 40px);margin:0 -20px}}
@media(prefers-reduced-motion:reduce){.brow-stage canvas{height:clamp(180px,32vw,420px)}}

/* The pigment study shares the page's existing particle field. */
.pigment-art{grid-column:1/-1;order:3;position:relative;width:100%;margin:0;height:70svh;min-height:420px;max-height:680px;pointer-events:none}
.pigment-art canvas{display:block;width:100%;height:100%}
.pigment-art figcaption{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:16px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media(max-width:800px){.pigment-art{height:65svh;min-height:390px}.pigment-art figcaption{font-size:9px;letter-spacing:.08em}.pigment-note{display:none}}
@media(prefers-reduced-motion:reduce){.pigment-art{height:440px;min-height:0}}

/* A second grid row needs a fixed row gap; percentage gaps overflow its section. */
.feature-chapter:has(.pigment-art){row-gap:36px}

/* Stable animation geometry while a mobile browser toolbar opens/closes. */
.animation-viewport{position:fixed;width:0;height:100svh;visibility:hidden;pointer-events:none;contain:strict}
@media(pointer:coarse){#page-pigment{height:100lvh}}

/* Keep the footer actions together when they move below the credit. */
footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;margin:0 5%;padding:30px 0 36px}
footer .footer-credit{font-size:11px;line-height:1.5;letter-spacing:.08em}
footer .footer-links{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px 32px;font-size:12px;line-height:1.5}
footer .footer-links a,footer .footer-links button{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
footer .footer-links button{appearance:none;border:0;background:none;padding:0;font:inherit;cursor:pointer}
.faq .faq-account-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:640px){footer{grid-template-columns:1fr;align-items:start;gap:16px;margin:0 6%;padding:26px 0 34px}footer .footer-links{justify-content:flex-start;gap:12px 26px}}
@media(max-width:599px){footer{margin:0 16px}}