@layer features {
/* The Motus Manifest (2026-10-07). One idea per screen, one night read to dawn, one amber point per view.
   The ring is the page's symbol: reading carries you to its gap, and only a move closes it.
   Every motion here is a rung: the ring's light flows (M6) and breathes (M8), the spark waits at the gap (M9),
   the creed arrives in order (M5), trust fills its vessel (M11), the camera pulls back across scales (M10),
   and the closing bloom is the one celebration, earned by a move (M7). Reduced motion shows each still. */

.mf{--mf-amber:#fde2b0}   /* the theme redefines --gold-text as lilac; the Manifest's one amber point keeps its own */
.mf main{position:relative;z-index:1}
.mf .colophon{position:relative;z-index:1}
.mf-sec{max-width:860px;margin:0 auto;padding:clamp(72px,12vw,128px) 18px 0}
.mf-sec>h2{margin:0 0 18px;font:650 clamp(1.75rem,5.2vw,2.9rem)/1.12 var(--voice);letter-spacing:-.01em;color:var(--ink)}
.mf-sec>.eyebrow{margin-bottom:12px}
.mf-sub{margin:0 0 26px;max-width:46ch;color:var(--ink-2);font-size:1.08rem}
.mf-more{margin:26px 0 0}
.mf-more a,.mf-begin{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-btn);border:1px solid rgba(192,132,252,.42);background:rgba(192,132,252,.07);color:var(--ink);font:600 15px/1 var(--voice);text-decoration:none;transition:background .3s var(--ease),border-color .3s var(--ease)}
.mf-more a:hover,.mf-begin:hover,.mf-more a:focus-visible,.mf-begin:focus-visible{background:rgba(192,132,252,.16);border-color:rgba(192,132,252,.8)}

/* ---------- the sky: one night, read to dawn ---------- */
.mf-sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(90% 50% at 50% 0%,rgba(46,24,57,.5),transparent 70%),linear-gradient(180deg,#050b20 0%,#071029 60%,#0b1233 100%)}
.mf-sky i{position:absolute;display:block}
.mf-stars{inset:0;opacity:calc(.9 - var(--dawn,0) * .7);
  background-image:
    radial-gradient(1.4px 1.4px at 8% 14%,#f7f5ff 50%,transparent 52%),radial-gradient(1px 1px at 19% 38%,#d8effc 50%,transparent 52%),
    radial-gradient(1.6px 1.6px at 27% 9%,#f8f1fb 50%,transparent 52%),radial-gradient(1px 1px at 36% 63%,#d8b4fe 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 44% 24%,#f7f5ff 50%,transparent 52%),radial-gradient(1px 1px at 52% 81%,#d8effc 50%,transparent 52%),
    radial-gradient(1.5px 1.5px at 61% 12%,#f8f1fb 50%,transparent 52%),radial-gradient(1px 1px at 68% 47%,#f18ac6 50%,transparent 52%),
    radial-gradient(1.3px 1.3px at 76% 29%,#f7f5ff 50%,transparent 52%),radial-gradient(1px 1px at 83% 71%,#d8effc 50%,transparent 52%),
    radial-gradient(1.6px 1.6px at 91% 18%,#f8f1fb 50%,transparent 52%),radial-gradient(1px 1px at 96% 55%,#d8b4fe 50%,transparent 52%),
    radial-gradient(1.1px 1.1px at 4% 72%,#f7f5ff 50%,transparent 52%),radial-gradient(1px 1px at 13% 90%,#d8effc 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 58% 34%,#f7f5ff 50%,transparent 52%),radial-gradient(1px 1px at 88% 92%,#f8f1fb 50%,transparent 52%)}
.mf-dawn{left:-30%;right:-30%;bottom:-10%;height:80%;opacity:var(--dawn,0);transition:opacity .8s var(--ease);mix-blend-mode:screen;
  background:radial-gradient(34% 26% at 50% 100%,rgba(255,224,176,.62),rgba(253,194,111,.3) 55%,transparent 100%),
    radial-gradient(64% 70% at 50% 100%,rgba(241,120,150,.34),rgba(214,91,181,.22) 40%,rgba(139,92,246,.14) 66%,transparent 92%)}
.mf-dawn::after{content:"";position:absolute;left:22%;right:22%;bottom:19%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,240,214,.95),transparent);box-shadow:0 0 26px 8px rgba(253,194,111,.28)}
.mf-bloomlight{inset:0;opacity:0;background:radial-gradient(75% 60% at 50% 100%,rgba(253,226,176,.5),rgba(241,138,198,.2) 46%,transparent 76%)}
.mf-sky.blooming .mf-bloomlight{animation:mfBloom 3.4s cubic-bezier(.16,1,.3,1)}
@keyframes mfBloom{0%{opacity:0}22%{opacity:1}100%{opacity:0}}

/* ---------- the opening: the ring as light, in plum haze ---------- */
.mf-hero{position:relative;overflow:hidden;isolation:isolate;min-height:94svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:110px 18px 56px}
.mf-hero::before{content:"";position:absolute;inset:-6% -20% 18%;z-index:-2;pointer-events:none;
  background:radial-gradient(40% 32% at 50% 34%,rgba(46,24,57,.92),rgba(46,24,57,.34) 56%,transparent 74%),radial-gradient(26% 22% at 50% 36%,rgba(139,92,246,.14),transparent 70%)}
.mf-bokeh{position:absolute;inset:0;z-index:-1;pointer-events:none}
.mf-bokeh i{position:absolute;border-radius:50%;filter:blur(.6px);animation:mfDrift 36s ease-in-out infinite alternate;
  background:radial-gradient(circle,rgba(var(--b),.07) 0 58%,rgba(var(--b),.22) 64%,rgba(var(--b),0) 70%)}
.mf-bokeh i:nth-child(1){--b:241,138,198;width:96px;height:96px;left:6%;top:16%}
.mf-bokeh i:nth-child(2){--b:192,132,252;width:64px;height:64px;right:9%;top:24%;animation-delay:-9s}
.mf-bokeh i:nth-child(3){--b:156,195,239;width:120px;height:120px;right:-6%;top:84%;animation-delay:-18s}
.mf-bokeh i:nth-child(4){--b:232,120,106;width:54px;height:54px;left:3%;top:46%;animation-delay:-5s}
.mf-bokeh i:nth-child(5){--b:253,194,111;width:30px;height:30px;left:62%;top:9%;animation-delay:-14s}
@keyframes mfDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(16px,-20px,0)}}
.mf-ring{position:relative;width:min(70vw,420px);margin:0 0 22px}
.mf-ring svg{display:block;width:100%;height:auto;overflow:visible}
.mf-ring-light{position:absolute;left:-30%;top:-30%;width:160%;height:160%;pointer-events:none}
.mf-seed{transform-origin:120px 120px;animation:mfSway 30s ease-in-out infinite alternate}
.mf-seed circle{fill:none;stroke:rgba(216,180,254,.095);stroke-width:.7}
@keyframes mfSway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.mf-ring-halo{fill:none;stroke:rgba(192,132,252,.12);stroke-width:18;filter:blur(7px)}
.mf-ring-arc{fill:none;stroke:url(#mfArc);stroke-width:1.6;stroke-linecap:round;opacity:.6;transform:rotate(-70deg);transform-origin:120px 120px;
  stroke-dasharray:0 360;transition:stroke-dasharray 2.2s cubic-bezier(.16,1,.3,1),filter .9s var(--ease),opacity .9s var(--ease)}
.mf-ring.drawn .mf-ring-arc{stroke-dasharray:320 40}
.mf-ring-spark{transform-origin:120px 20px;animation:mfWait 2.8s ease-in-out infinite}
@keyframes mfWait{0%,100%{opacity:.75;transform:scale(.86)}50%{opacity:1;transform:scale(1.08)}}
.mf-closed .mf-ring.drawn .mf-ring-arc,.mf-closed .mf-ring .mf-ring-arc{stroke-dasharray:360 0;stroke:#fdc26f;opacity:.85;filter:drop-shadow(0 0 10px rgba(253,194,111,.65))}
.mf-closed .mf-ring-spark{animation:none;opacity:0;transition:opacity 1.2s var(--ease)}
.mf-closed .mf-ring-halo{stroke:rgba(253,194,111,.2)}
.mf-closed .mf-seed circle{stroke:rgba(253,226,176,.14)}
.mf-hero:not(.awake) .mf-bokeh i,.mf-hero:not(.awake) .mf-seed{animation-play-state:paused}
.mf-hero .eyebrow{margin:0 0 14px;letter-spacing:.12em}
.mf-title{margin:0 0 18px;max-width:14ch;font:650 clamp(2.3rem,8vw,4.7rem)/1.04 var(--voice);letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--grad-1) 0%,var(--grad-2) 45%,#f6c3e3 78%,#fde2b0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mf-lede{margin:0 0 14px;max-width:36ch;color:var(--ink-2);font-size:clamp(1.05rem,2.6vw,1.22rem);line-height:1.6}
.mf-note{margin:0 0 26px;color:var(--mf-amber);font:500 14px/1.5 var(--voice)}

/* ---------- 01 · the creed ---------- */
.mf-mantra{margin:8px 0 0;padding:0}
.mf-mantra>p{margin:0;font:600 clamp(1.3rem,3.9vw,2.05rem)/1.6 var(--voice);color:var(--ink-2)}
.mf-mantra>p>span{transition:color .7s var(--ease),text-shadow .9s var(--ease)}
.mf-mantra>p>span.on{color:var(--ink);text-shadow:0 0 22px rgba(192,132,252,.45),0 0 2px rgba(255,255,255,.2)}
.mf-mantra>p>span:last-child{color:var(--label)}
.mf-mantra footer{margin:18px 0 0;font:500 14px/1.6 var(--font);color:var(--ink-2)}
.mf-mantra footer a{color:var(--sys-text)}
.mf-mantra cite{font-style:normal}
.mf-beneath{margin:30px 0 0;font:650 clamp(1.3rem,3.6vw,1.75rem)/1.3 var(--voice)}
.mf-beneath strong{background:linear-gradient(100deg,#fde2b0,#f6c3e3);-webkit-background-clip:text;background-clip:text;color:transparent}

.mf-values{margin:44px 0 0;padding:22px 0 0;border-top:1px solid rgba(196,206,255,.12)}
.mf-values-k{margin:0 0 10px;font:600 13px/1.3 var(--voice);letter-spacing:.12em;color:var(--label)}
.mf-values blockquote{margin:0}
.mf-values blockquote p{margin:0;font:650 clamp(1.05rem,3.4vw,1.5rem)/1.45 var(--voice);letter-spacing:.02em;color:var(--ink);overflow-wrap:anywhere}
.mf-values cite{display:block;margin-top:8px;font:500 13px/1.4 var(--font);font-style:normal;color:var(--ink-2)}

/* ---------- 02 · why we hope: trust as a stock, filling as you read ---------- */
.mf-hope-body{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;align-items:start;margin-top:8px}
@media (min-width:760px){.mf-hope-body{grid-template-columns:150px minmax(0,1fr);gap:44px}}
@media (min-width:901px){.mf-vessel{top:96px}}
.mf-vessel{position:sticky;top:128px;margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.mf-vessel svg{display:block;width:100%;height:auto;overflow:visible}
.mf-vessel span{font:600 12px/1.3 var(--voice);text-align:center;color:var(--ink-2)}
.mf-v-out{color:#f3b3a9!important}
.mf-v-name{position:absolute;left:0;right:0;top:50%;text-align:center;font:650 13px/1 var(--voice);letter-spacing:.16em;color:var(--ink);text-shadow:0 0 12px rgba(5,11,32,.9)}
.mf-tub{fill:rgba(216,239,252,.035);stroke:rgba(216,239,252,.34);stroke-width:1.4}
.mf-pipe{fill:none;stroke:rgba(216,239,252,.28);stroke-width:5;stroke-linecap:round}
.mf-out{stroke:rgba(232,120,106,.34)}
.mf-drop{fill:#fde2b0;opacity:0;transform-box:view-box}
.mf-vessel.pour .mf-drop{animation:mfDrop .95s cubic-bezier(.55,0,1,.45)}
@keyframes mfDrop{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(calc(var(--y,310) * 1px - 40px))}}
.mf-level{transform:translateY(calc(var(--y,310) * 1px));transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.mf-liquid{fill:url(#mfFill);opacity:.78;mix-blend-mode:screen}
.mf-sheen{fill:url(#mfSheen);pointer-events:none}
.mf-crest{fill:none;stroke:#fff1d6;stroke-width:2.2;stroke-linecap:round;opacity:.9;filter:drop-shadow(0 0 4px rgba(253,226,176,.9))}
.mf-wave{animation:mfLiquid 5.5s linear infinite}
@keyframes mfLiquid{to{transform:translateX(-60px)}}
.mf-hope:not(.awake) .mf-wave{animation-play-state:paused}
.mf-vessel[data-level="5"] .mf-tub{stroke:rgba(253,226,176,.8);filter:drop-shadow(0 0 12px rgba(253,194,111,.5))}
.mf-hope-lines{margin:0;padding:0;list-style:none;display:grid;gap:clamp(28px,6vw,48px)}
.mf-hope-lines b{display:block;font:650 clamp(1.3rem,4.4vw,2.05rem)/1.24 var(--voice);letter-spacing:-.01em;color:var(--ink-2);transition:color .9s var(--ease),text-shadow 1.2s var(--ease)}
.mf-hope-lines span{display:block;margin-top:8px;max-width:38ch;color:var(--ink-2);font-size:1.02rem;line-height:1.6}
.mf-hope-lines li.lit b{color:var(--ink);text-shadow:0 0 26px rgba(241,138,198,.28)}
.mf-hope-last b{background:linear-gradient(100deg,#fde2b0,#f6c3e3 55%,#d8b4fe);-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* ---------- 03 · every scale: one ring, seven, forty-nine ---------- */
.mf-scale-body{display:grid;gap:18px;margin-top:6px}
@media (min-width:860px){.mf-scale-body{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:center}}
.mf-scale-stage{margin:0 auto;width:100%;max-width:520px;aspect-ratio:1;position:relative}
.mf-scale-stage::before{content:"";position:absolute;inset:8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(46,24,57,.55),transparent)}
.mf-scale-svg{display:block;width:100%;height:100%;overflow:visible}
.mf-scale-now{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font:600 14px/1.3 var(--voice);letter-spacing:.04em;color:var(--mf-amber);text-shadow:0 0 14px rgba(5,11,32,.95)}
@media (min-width:860px){.mf-scale-now{display:none}}
.sc-cam{transform-origin:0 0;transition:transform 2.4s cubic-bezier(.16,1,.3,1)}
.mf-scale-body[data-step="0"] .sc-cam{transform:scale(7.2)}
.mf-scale-body[data-step="1"] .sc-cam{transform:scale(2.8)}
.mf-scale-body[data-step="2"] .sc-cam{transform:scale(1)}
.sc-ring{transition:opacity 1.1s var(--ease) var(--d,0s)}
.mf-scale-body[data-step="0"] .sc-l1,.mf-scale-body:not([data-step="2"]) .sc-l2{opacity:0;transition-delay:0s}
.sc-halo{fill:none;stroke:rgba(192,132,252,.15);stroke-width:7;vector-effect:non-scaling-stroke}
.sc-l2 .sc-halo{stroke-width:4}
.sc-arc{fill:none;stroke:url(#mfArc);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:320 40;vector-effect:non-scaling-stroke}
.sc-big>.sc-arc{stroke-width:1.3;opacity:.7}.sc-big>.sc-halo{opacity:.5}
.sc-giant>.sc-arc{stroke-width:1.2;opacity:.55}
.sc-you>.sc-arc{stroke-width:2.4}
.sc-core{fill:#fff7e6}
.sc-spark{transform-box:fill-box;transform-origin:center;animation:mfWait 2.8s ease-in-out infinite}
.mf-scale:not(.awake) .sc-spark{animation-play-state:paused}
.mf-closed .sc-you>.sc-arc{stroke:#fdc26f;stroke-dasharray:360 0}
.mf-closed .sc-you>.sc-spark,.mf-closed .sc-you>.sc-core{opacity:0}
.mf-scale-lines{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.mf-scale-lines li{font:500 clamp(1.08rem,3vw,1.3rem)/1.5 var(--voice);color:var(--ink-2);transition:color .6s var(--ease)}
.mf-scale-lines li b{color:var(--ink);font-weight:650;transition:color .6s var(--ease)}
.mf-scale-lines li.on{color:var(--ink)}
.mf-scale-lines li.on b{color:var(--mf-amber)}
.mf-scale-steps{display:flex;gap:10px;margin:18px 0 0}
.mf-scale-steps button{min-width:58px;min-height:44px;border-radius:16px;border:1px solid rgba(196,206,255,.22);background:rgba(255,255,255,.03);color:var(--ink);font:650 15px/1 var(--voice);cursor:pointer;transition:border-color .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease)}
.mf-scale-steps button[aria-pressed="true"]{border-color:rgba(253,194,111,.75);color:var(--mf-amber);box-shadow:0 0 22px -8px rgba(253,194,111,.7)}
.mf-scale-steps button:focus-visible{outline:2px solid rgba(253,194,111,.9);outline-offset:2px}
.mf-scale-end{margin:22px 0 0;font:650 clamp(1.15rem,3.4vw,1.5rem)/1.4 var(--voice);color:var(--ink)}

/* ---------- 04 · the story, told by the films ---------- */
.mf-beats{display:grid;gap:clamp(34px,7vw,64px);margin:30px 0 0;padding:0;list-style:none}
.mf-beat-art{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:#050b20;border:1px solid rgba(196,206,255,.12)}
@media (min-width:760px){.mf-beat-art{aspect-ratio:21/9}}
.mf-beat-art img,.mf-beat-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mf-beat-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,32,0) 55%,rgba(5,11,32,.55) 100%);pointer-events:none}
.mf-night i{position:absolute;width:3px;height:3px;border-radius:50%;background:#f7f5ff;box-shadow:0 0 8px rgba(216,239,252,.9);animation:mfTwinkle 4.2s ease-in-out infinite}
.mf-night i:nth-child(1){left:14%;top:30%}.mf-night i:nth-child(2){left:31%;top:62%;animation-delay:-1.1s}.mf-night i:nth-child(3){left:47%;top:22%;animation-delay:-2.3s}
.mf-night i:nth-child(4){left:62%;top:54%;animation-delay:-.6s}.mf-night i:nth-child(5){left:76%;top:34%;animation-delay:-3.1s}.mf-night i:nth-child(6){left:88%;top:68%;animation-delay:-1.8s}
.mf-night i:nth-child(7){left:55%;top:80%;animation-delay:-2.7s;width:2px;height:2px}
.mf-night{background:radial-gradient(80% 90% at 50% 120%,rgba(139,92,246,.18),transparent 60%),#050b20}
@keyframes mfTwinkle{0%,100%{opacity:.25}50%{opacity:1}}
.mf-beat-words{padding:16px 2px 0}
.mf-beat-k{margin:0 0 6px;font:600 13px/1.3 var(--voice);letter-spacing:.12em;color:var(--label)}
.mf-beat-words>p:not(.mf-beat-k){margin:0;max-width:40ch;font:500 clamp(1.15rem,3vw,1.45rem)/1.5 var(--voice);color:var(--ink)}
.mf-his{margin:18px 0 0;padding:14px 16px;border-left:2px solid rgba(253,194,111,.7);border-radius:0 14px 14px 0;background:rgba(253,194,111,.06)}
.mf-his p{margin:0;font:500 1.08rem/1.55 var(--voice);color:var(--ink)}
.mf-his cite{display:block;margin-top:6px;font:500 13px/1.4 var(--font);font-style:normal;color:var(--ink-2)}
.mf-fold{margin:clamp(40px,8vw,64px) 0 0}
.mf-fold .mf-timeline{margin-top:18px}
.mf-timeline{position:relative;margin:0;padding:0 0 0 26px;list-style:none}
.mf-timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(156,195,239,.25),rgba(192,132,252,.6),rgba(253,194,111,.8))}
.mf-timeline li{position:relative;margin:0 0 18px}
.mf-timeline li::before{content:"";position:absolute;left:-24px;top:.45em;width:12px;height:12px;border-radius:50%;background:#c084fc;box-shadow:0 0 10px rgba(192,132,252,.7)}
.mf-timeline time{display:block;font:600 13px/1.4 var(--voice);letter-spacing:.06em;color:var(--label)}
.mf-timeline p{margin:2px 0 0;color:var(--ink);line-height:1.55}
.mf-timeline .mf-now::before{background:var(--night);border:2px solid #fdc26f;box-shadow:0 0 14px rgba(253,194,111,.8)}
.mf-timeline .mf-now time{color:var(--mf-amber)}

/* ---------- 05 · five habits ---------- */
.mf-habits{margin:6px 0 0;padding:0;list-style:none;counter-reset:h}
.mf-habits li{position:relative;counter-increment:h;padding:20px 0 20px 64px;border-top:1px solid rgba(196,206,255,.12)}
.mf-habits li:last-child{border-bottom:1px solid rgba(196,206,255,.12)}
.mf-habits li::before{content:counter(h,decimal-leading-zero);position:absolute;left:0;top:18px;font:300 2rem/1 var(--voice);color:#c084fc}
.mf-habits b{display:block;margin:0 0 6px;font:650 clamp(1.1rem,2.8vw,1.3rem)/1.35 var(--voice);color:var(--ink)}
.mf-habits span{display:block;color:var(--ink-2);line-height:1.6}

/* ---------- 06 · the seven moves ---------- */
.mf-moves{margin:0;padding:0;list-style:none;counter-reset:m;display:grid;gap:10px}
.mf-moves li{position:relative;counter-increment:m;display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:16px 16px 16px 14px;border-radius:18px;border:1px solid rgba(196,206,255,.13);background:rgba(255,255,255,.025)}
.mf-moves li::before{content:counter(m);grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(192,132,252,.6);font:650 1.05rem/1 var(--voice);color:var(--ink)}
.mf-moves li[data-act="TRUTH"]::before{border-color:rgba(156,195,239,.75)}
.mf-moves li[data-act="MOVE"]::before{border-color:rgba(253,194,111,.8)}
.mf-moves b{font:650 1.08rem/1.35 var(--voice);color:var(--ink)}
.mf-moves li::after{content:attr(data-act);position:absolute;top:16px;right:16px;font:600 12px/1 var(--voice);letter-spacing:.08em;color:var(--label)}
.mf-moves span{color:var(--ink-2);line-height:1.5;padding-right:54px}

/* ---------- 07 · the six motions ---------- */
.mf-frames{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:760px){.mf-frames{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mf-frames li{position:relative;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;border-radius:20px;overflow:hidden;border:1px solid rgba(var(--fh),.35);isolation:isolate}
.mf-frames li[data-frame="Fund"] img{object-position:50% 46%}
.mf-frames li img,.mf-frames .mf-ward{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55}
.mf-frames li::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,11,32,.15),rgba(5,11,32,.88) 78%)}
.mf-frames b{font:650 1.15rem/1.2 var(--voice);color:rgb(var(--fh))}
.mf-frames span{color:var(--ink);font-size:.98rem}
.mf-frames small{margin-top:4px;color:var(--ink-2);font:500 12.5px/1.3 var(--voice)}
.mf-ward{background:radial-gradient(circle at 50% 45%,rgba(253,194,111,.95) 0 3px,transparent 4px),repeating-radial-gradient(circle at 50% 45%,transparent 0 15px,rgba(216,239,252,.32) 16px 17px,transparent 18px 30px)}
.mf-frames li[data-frame="Sense"]{--fh:156,195,239}.mf-frames li[data-frame="Build"]{--fh:192,132,252}.mf-frames li[data-frame="Gather"]{--fh:241,138,198}
.mf-frames li[data-frame="Fund"]{--fh:253,194,111}.mf-frames li[data-frame="Hold"]{--fh:232,120,106}.mf-frames li[data-frame="Guard"]{--fh:216,239,252}

/* ---------- 08 · the mindset ---------- */
.mf-beat-lines{margin:4px 0 0;padding:0;list-style:none}
.mf-beat-lines li{padding:14px 0 14px 18px;border-left:2px solid rgba(192,132,252,.45);margin:0 0 6px;font:600 clamp(1.15rem,3.2vw,1.5rem)/1.4 var(--voice);color:var(--ink)}
.mf-beat-lines li:nth-child(4){border-left-color:#fdc26f}
.mf-beat-lines cite{display:block;margin-top:4px;font:500 13px/1.4 var(--font);font-style:normal;color:var(--ink-2)}

/* ---------- 09 · your story ---------- */
.mf-form{display:grid;gap:14px}
.mf-form label{display:grid;gap:6px}
.mf-form label span{font:600 15px/1.4 var(--voice);color:var(--ink)}
.mf-form input{width:100%;min-height:50px;padding:12px 14px;border-radius:16px;border:1px solid rgba(196,206,255,.2);background:rgba(10,14,40,.7);color:var(--ink);font:400 16px/1.4 var(--font)}
.mf-form input::placeholder{color:#a9a6c8}
.mf-form input:focus{outline:none;border-color:rgba(192,132,252,.75);box-shadow:0 0 0 3px rgba(192,132,252,.16)}
.mf-primary,.mf-ghost{min-height:48px;padding:0 20px;border-radius:var(--r-btn);font:600 15px/1 var(--voice);cursor:pointer}
.mf-primary{border:1px solid rgba(253,194,111,.7);background:linear-gradient(180deg,rgba(253,194,111,.22),rgba(253,194,111,.1));color:var(--ink);box-shadow:0 0 26px -8px rgba(253,194,111,.55)}
.mf-ghost{border:1px solid rgba(196,206,255,.24);background:rgba(255,255,255,.03);color:var(--ink)}
.mf-primary:focus-visible,.mf-ghost:focus-visible{outline:2px solid rgba(253,194,111,.9);outline-offset:2px}
.mf-card{margin:6px 0 0;padding:22px 20px;border-radius:var(--r-card);border:1px solid rgba(192,132,252,.38);background:radial-gradient(120% 120% at 0% 0%,rgba(192,132,252,.12),transparent 60%),var(--glass-solid);box-shadow:var(--sheen),0 0 50px -24px rgba(192,132,252,.7)}
.mf-card-head{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.mf-card-head .eyebrow{margin:0}
.mf-seal{width:40px;height:40px;flex:none;overflow:visible}
.mf-seal-arc{fill:none;stroke:url(#mfArc);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:320 40;transform:rotate(-70deg);transform-origin:24px 24px;transition:stroke-dasharray 1.6s cubic-bezier(.16,1,.3,1),stroke .9s var(--ease)}
.mf-seal-spark{fill:#fdc26f;transition:opacity 1s var(--ease)}
.mf-closed .mf-seal-arc{stroke:#fdc26f;stroke-dasharray:360 0;filter:drop-shadow(0 0 6px rgba(253,194,111,.7))}
.mf-closed .mf-seal-spark{opacity:0}
.mf-card dl{margin:0 0 18px}
.mf-card dt{margin:12px 0 2px;font:600 12.5px/1.3 var(--voice);letter-spacing:.08em;color:var(--label)}
.mf-card dd{margin:0;color:var(--ink);font:500 1.08rem/1.5 var(--voice)}
.mf-card dd.mf-move{color:var(--mf-amber);font-weight:650}
.mf-fits{margin:0 0 18px;padding-top:14px;border-top:1px solid rgba(196,206,255,.12)}
.mf-fits-k{margin:0 0 8px;font:600 13px/1.3 var(--voice);color:var(--ink-2)}
.mf-fits ol{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.mf-fits a{display:block;padding:12px 14px;border-radius:14px;border:1px solid rgba(156,195,239,.3);color:var(--ink);text-decoration:none}
.mf-fits a b{display:block;font:650 1rem/1.3 var(--voice)}
.mf-fits a small{font-size:13px;color:var(--ink-2)}
.mf-fits a:hover{border-color:rgba(156,195,239,.7)}
.mf-actions{display:flex;flex-wrap:wrap;gap:10px}
.mf-status{margin:12px 0 0;min-height:1.4em;color:var(--mf-amber);font:500 15px/1.4 var(--voice)}
.mf-return{margin:0 0 18px;padding:18px;border-radius:var(--r-card);border:1px solid rgba(253,194,111,.45);background:rgba(253,194,111,.06)}
.mf-return p{margin:0 0 12px;color:var(--ink)}
.mf-return b{color:var(--mf-amber)}

/* ---------- 10 · the doors ---------- */
.mf-doors{display:grid;gap:12px}
@media (min-width:700px){.mf-doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mf-doors a{display:block;padding:20px;border-radius:var(--r-card);border:1px solid rgba(196,206,255,.16);background:var(--glass-solid);color:var(--ink);text-decoration:none;box-shadow:var(--sheen);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.mf-doors a:hover,.mf-doors a:focus-visible{border-color:rgba(192,132,252,.7)}
.mf-doors b{display:block;margin:0 0 6px;font:650 1.15rem/1.3 var(--voice)}
.mf-doors span{color:var(--ink-2);line-height:1.55}
.mf-close{margin-top:clamp(80px,12vw,140px)}

/* ---------- the reading ring, bottom right: it fills to the gap and closes only on a move ---------- */
.mf-progress{position:fixed;right:16px;bottom:16px;z-index:20;width:48px;height:48px;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.mf-progress.on{opacity:1}
.mf-progress svg{width:100%;height:100%}
.mf-progress-track{fill:rgba(5,11,32,.72);stroke:rgba(196,206,255,.16);stroke-width:2}
.mf-progress-arc{fill:none;stroke:url(#mfArc);stroke-width:2.6;stroke-linecap:round;transform:rotate(-70deg);transform-origin:24px 24px;stroke-dasharray:var(--p,0) 360}
.mf-progress{border-radius:50%}
.mf-closed .mf-progress-arc{stroke:#fdc26f;stroke-dasharray:360 0}
.mf-closed .mf-progress{box-shadow:0 0 22px -4px rgba(253,194,111,.6)}

@media (prefers-reduced-motion:reduce){
  .mf-ring-arc{transition:none;stroke-dasharray:320 40}
  .mf-ring-spark,.mf-night i,.mf-bokeh i,.mf-seed,.mf-wave,.sc-spark,.mf-vessel.pour .mf-drop{animation:none!important}
  .mf-mantra>p>span,.sc-cam,.sc-ring,.mf-level{transition:none}
}
}