/* Two distinct directions share a quiet, full page field and a closing wordmark. */
.fluid-percolation{--paper:#f7f7f2;--ink:#141610;--muted:#484c42;--line:#d4d7cd;background:var(--paper)}
.fluid-percolation .growth-plane{position:fixed;inset:0;width:100%;height:100%;mix-blend-mode:multiply}
.fluid-percolation .growth-plane canvas,.fluid-percolation .growth-plane img{object-fit:cover;image-rendering:auto}
.fluid-percolation header{height:100px}
.fluid-percolation header .wordmark{font-size:19px;font-weight:700;letter-spacing:-.065em}
.fluid-percolation header .wordmark,.fluid-percolation nav{background:none;box-shadow:none}
.fluid-percolation .versions-link{display:none}
.fluid-percolation .hero h1,.fluid-percolation .chapter h2{text-shadow:none;color:var(--ink)}
.fluid-percolation .hero-detail,.fluid-percolation .chapter-title h2,.fluid-percolation .chapter-body,.fluid-percolation .practice h2,.fluid-percolation .practice>p{background:none;box-shadow:none;padding:0}
body[data-version=refined] .hero{min-height:100svh;padding:150px var(--gutter) 95px;gap:40px;justify-content:center;text-align:center}
body[data-version=refined] .hero h1{font-size:clamp(70px,7.55vw,140px);font-weight:500;letter-spacing:-.067em;line-height:1.045;max-width:1440px}
body[data-version=refined] .hero-detail{max-width:465px}
body[data-version=refined] .hero .text-action{margin-top:0}
.fluid-percolation .hero-description{font-size:17px;line-height:1.65;letter-spacing:-.018em;color:var(--ink)}
.fluid-percolation .text-action{font-size:14px;gap:34px;margin-top:27px}
.fluid-percolation .chapter{opacity:var(--copy-opacity,1);transform:translateY(var(--copy-shift,0));background:transparent}
.fluid-percolation .chapter h2{font-size:clamp(46px,5.4vw,87px);font-weight:500;letter-spacing:-.065em}
.fluid-percolation .context h2{font-size:clamp(46px,4.2vw,72px)}
.fluid-percolation .chapter h2 em{font:inherit;letter-spacing:inherit}
.fluid-percolation .context{display:grid;grid-template-columns:1.3fr 1fr;align-content:center;align-items:start;gap:45px 10vw;min-height:110svh;padding-top:110px;padding-bottom:60px}
.fluid-percolation .chapter-body{max-width:375px;padding-top:8px}
.fluid-percolation .chapter p{font-size:18px;color:var(--ink)}
.fluid-percolation .chapter p.secondary{font-size:15px;margin-top:25px;color:var(--muted)}
.refined-connections{grid-column:1/-1;width:min(1040px,100%);height:430px;margin:5px auto 0}
.fluid-percolation .practice{min-height:95svh;padding-block:100px;gap:34px}
.fluid-percolation .practice>p{max-width:525px}
.fluid-percolation .practice .closing-line{font-size:14px;margin-top:34px}
.fluid-percolation .growth-rest{height:55svh}
.fluid-percolation .conversation{min-height:65svh;background:var(--paper)}
.fluid-percolation .conversation h2{font-size:clamp(60px,6.8vw,112px);font-weight:500}
.fluid-percolation .conversation h2 em{font:inherit;letter-spacing:inherit}
body[data-version=percolate] .hero{padding:0 4.4vw 5vh;gap:22px}
body[data-version=percolate] .hero h1{font-family:Geist,Arial,sans-serif;font-size:15.1vw;line-height:1;font-weight:700;letter-spacing:-.065em}
body[data-version=percolate] .hero-description{font-size:clamp(11px,1vw,17px);font-weight:500;letter-spacing:.15em}
body[data-version=percolate] .brand-baseline{border-color:#a8ada0;font-size:11px}
.fluid-percolation .brand-footer{display:block;padding:35px 3.4vw 24px;overflow:hidden;color:var(--ink);background:var(--paper);border-color:var(--line)}
.footer-meta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:1vw;font-size:12px}
.footer-role{font-size:11px;letter-spacing:.10em;max-width:320px;line-height:1.5}
.footer-links{display:flex;gap:28px;align-items:center}
.footer-links a,.footer-links button{padding:8px 0;border-bottom:1px solid transparent}
.footer-links a:hover,.footer-links button:hover{border-color:currentColor}
.footer-brand{position:relative;display:block;width:100%;margin-top:90px;line-height:.9;transform:translateY(var(--brand-shift,20px));opacity:var(--brand-opacity,1);overflow:hidden}
.footer-brand-text{display:block;font-size:15.1vw;font-weight:700;letter-spacing:-.065em;line-height:1;text-align:center;color:var(--ink)}
.footer-brand canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;mix-blend-mode:multiply}
.footer-brand.ready canvas{opacity:1}
.footer-brand.ready .footer-brand-text{visibility:hidden}
.footer-baseline{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:25px 1vw 0;padding-top:18px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
html[data-card-preview] body[data-version=refined] .story>.hero{padding:75px var(--gutter);height:100svh}
html[data-card-preview] body[data-version=percolate] .story>.hero{padding:0 4.4vw 5vh}
@media(max-width:900px){.fluid-percolation .context{gap:36px 5vw}.fluid-percolation .chapter-body{max-width:300px}.fluid-percolation .chapter h2{font-size:6vw}.refined-connections{height:360px}.footer-role{max-width:230px;font-size:10px}.footer-links{gap:20px}}
@media(max-width:650px){.fluid-percolation header{height:82px}.fluid-percolation header .wordmark{font-size:18px}body[data-version=refined] .hero{padding:145px 24px 105px;gap:38px}body[data-version=refined] .hero h1{font-size:clamp(28px,9.6vw,62px);letter-spacing:-.07em;line-height:1.10}.fluid-percolation .hero-description{font-size:15px}.fluid-percolation .hero-detail{max-width:330px}.fluid-percolation .context{display:grid;grid-template-columns:1fr;padding:90px 24px 60px;min-height:0;gap:30px}.fluid-percolation .chapter h2,.fluid-percolation .context h2{font-size:clamp(39px,10.2vw,63px)}.fluid-percolation .chapter-body{margin:0;padding:0;max-width:335px}.fluid-percolation .chapter p{font-size:16px}.fluid-percolation .chapter p.secondary{font-size:14px}.refined-connections{height:300px;width:calc(100% + 30px);max-width:none;margin:0 -15px}.refined-connections .work-graph{min-height:0}.fluid-percolation .practice{min-height:85svh;padding:90px 24px;gap:28px}.fluid-percolation .growth-rest{height:50svh}.fluid-percolation .conversation{min-height:0;padding:75px 24px}.fluid-percolation .conversation h2{font-size:62px}.fluid-percolation .brand-footer{padding-top:26px;padding-bottom:20px}.footer-meta{align-items:flex-start;gap:26px;flex-direction:column;padding-inline:3vw}.footer-role{max-width:280px;letter-spacing:.08em;font-size:10px}.footer-links{gap:24px;font-size:12px}.footer-brand{margin-top:65px}.footer-baseline{margin-top:20px;padding-inline:3vw;font-size:10px}body[data-version=percolate] .hero-description{font-size:10px;letter-spacing:.08em}body[data-version=percolate] .brand-baseline{font-size:8px}}
@media(prefers-reduced-motion:reduce){.fluid-percolation .hero,.fluid-percolation .chapter{opacity:1!important;transform:none!important}.footer-brand{transform:none!important;opacity:1!important}}

/* The selected footer fills the page edge with a soft fade inside the letters. */
.fluid-percolation .brand-footer.footer-interactive{padding:40px 0 0;overflow:hidden}
.footer-interactive .footer-meta{margin-inline:4.4vw;padding:0}
.footer-interactive .footer-baseline{margin:35px 4.4vw 0;padding:0;border:0}
.footer-interactive .footer-brand{height:12vw;width:100%;margin-top:80px;transform:none;opacity:1;overflow:hidden;cursor:default;user-select:none;touch-action:pan-y}
.footer-interactive .footer-brand-text{font-size:16.1vw;line-height:1.1;white-space:nowrap}
.footer-interactive .footer-brand canvas{height:16vw;max-width:none}
.footer-gather .footer-brand{mask-image:linear-gradient(to bottom,#000 var(--fade-start,66%),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 var(--fade-start,66%),transparent 100%)}
@media(max-width:650px){.fluid-percolation .brand-footer.footer-interactive{padding-top:28px}.footer-interactive .footer-meta{margin-inline:24px;gap:22px}.footer-interactive .footer-baseline{margin:30px 24px 0;font-size:10px}.footer-interactive .footer-brand{margin-top:58px}}
