/* /tools/use-case-portfolio/: one motif (the six-disc portfolio) re-posed in eight states.
   Stability: HTML is the end state; pre-states only under :root[data-m-go] (and main[data-ucp-armed] for the page-owned
   entrances); transform, opacity, clip-path and filter only; scroll-driven rules as longhands; sticky, never
   counter-translation; reduced motion and Calm show the composed state. */
body[data-page=use-case-portfolio] main{overflow-x:clip}
.ucp-sec{--ucp-ease:cubic-bezier(.16,1,.3,1);--ucp-night:#072d2b;--ucp-deep:#0b3b37;--ucp-forest:#0e4d4a;--ucp-paper:#f6f4ef;--ucp-sage:#6bb68f;--ucp-ochre:#c98a2b;--ucp-ochre-t:#e9b765;--ucp-ink:#072d2b;--ucp-mute:#2f4d47;--ucp-dtext:#e4f1ea;--ucp-dmute:#d6ebe0;position:relative;isolation:isolate;font-size:17px;line-height:1.6;font-variant-numeric:tabular-nums;min-width:0}
.ucp-sec [hidden]{display:none!important}
.ucp-sec :is(input,select,button,textarea,summary){font:inherit}
.ucp-sec :is(button,summary,select,label){cursor:pointer}
.ucp-sec :is(input,button,summary,select,textarea,a,[tabindex]):focus-visible{outline:3px solid var(--ucp-ochre);outline-offset:3px}
.ucp-sec button:disabled{opacity:.5;cursor:not-allowed}
.ucp-sec h2{font-weight:850;letter-spacing:-.045em;line-height:1.04;margin:0}
.ucp-sec h3{font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0}
.ucp-sec p,.ucp-s1 p{margin:0;max-width:none}
.ucp-sec .gft-eyebrow{font:600 13px var(--gft-font-mono);letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.ucp-kicker{font:600 13px/1.5 var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;margin:0}
.ucp-note{font-size:14px;line-height:1.55;color:inherit;opacity:1}
.ucp-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ucp-pl{position:relative;min-width:0;min-height:0}
.ucp-pl>svg,.ucp-pl svg.ucp-chart{display:block;width:100%;height:100%;overflow:visible}
/* The kit's section entrance stays the block's label; the visible entrance is the page-owned staged one below. */
:root[data-m-go] .ucp-sec[data-m]{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;translate:none!important;scale:none!important;rotate:none!important;animation-name:none!important}

/* ---------- SVG label scale: --k is viewBox units per CSS pixel ---------- */
.ucp-t{font-family:var(--gft-font-mono);font-size:calc(13px * var(--k,1));letter-spacing:.06em;fill:#d6ebe0}
.ucp-t--z{font-weight:700;fill:#e4f1ea;letter-spacing:.08em}
.ucp-t--a{letter-spacing:.1em;fill:#cfe6da}
.ucp-t--n{font-size:calc(14px * var(--k,1));font-weight:700;fill:#f6f4ef;font-family:var(--gft-font-display);letter-spacing:0}
.ucp-t--p{fill:#cfe6da}.ucp-t--p.is-now{fill:#e9b765;font-weight:700}
.ucp-t--c{font-weight:700;font-size:calc(13px * var(--k,1))}
.ucp-t--b{fill:#072d2b;font-weight:800}
.ucp-t--name{font-family:var(--gft-font-display);font-size:calc(15px * var(--k,1));fill:#e4f1ea;letter-spacing:0}
.ucp-t--g{fill:#e9b765;font-weight:800;font-size:calc(15px * var(--k,1))}
.ucp-t--ok{fill:#9fd9b8;font-weight:800}
.ucp-t--cap{fill:#e9b765;font-weight:800}
.ucp-t--k{fill:#cfe6da;letter-spacing:.08em}
.ucp-t--ex,.ucp-t--iso{fill:#c9d3f5}
.ucp-t--h{font-size:calc(15px * var(--k,1));font-weight:800;fill:#f6f4ef;letter-spacing:.06em}
.ucp-t--hub{font-family:var(--gft-font-display);font-size:calc(40px * var(--k,1));font-weight:850;fill:#f6f4ef;letter-spacing:-.02em}

/* ---------- shared controls ---------- */
.ucp-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:999px;border:1px solid #6bb68f;background:#0b3b37;color:#f6f4ef;font-size:15px;font-weight:600;text-decoration:none;line-height:1.2}
.ucp-pill:hover{background:#0e4d4a}
.ucp-pill--light{background:#f6f4ef;color:#072d2b;border-color:#f6f4ef}
.ucp-pill--light:hover{background:#e2ebe6}
.ucp-link-out{color:inherit;font-weight:600;text-underline-offset:.2em;display:inline-flex;align-items:center;min-height:44px}
.ucp-chip{display:inline-flex;align-items:center;min-height:28px;padding:2px 10px;border-radius:999px;font:700 13px/1.3 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;background:#d7ebdf;color:#0e4d4a;vertical-align:middle}
.ucp-chip[data-k=ill]{background:#f4e2c2;color:#5e3d0c}
.ucp-chip[data-k=all]{background:#e2e6ee;color:#1f2d55}
.ucp-chip[data-k=read]{background:#1d2c5c;color:#e6eaff}
.ucp-seg{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.ucp-seg legend{font:600 13px var(--gft-font-mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;padding:0;width:100%}
.ucp-seg label{position:relative;display:flex}
.ucp-seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.ucp-seg span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid #0e4d4a;color:#0e4d4a;font-size:15px;font-weight:600;transition:background-color .25s,color .25s}
.ucp-seg input:checked+span{background:#0e4d4a;color:#f6f4ef}
.ucp-seg input:focus-visible+span{outline:3px solid var(--ucp-ochre);outline-offset:2px}
.ucp-seg--dark span{border-color:#6bb68f;color:#e4f1ea}
.ucp-seg--dark input:checked+span{background:#6bb68f;color:#072d2b}
.ucp-error{margin:12px 0;padding:14px 18px;border-left:4px solid var(--ucp-ochre);background:#3a2a10;color:#fbe9c9;font-size:15px}

/* ======================= S1 splash ======================= */
.gft-splash[data-splash=use-case-portfolio]{min-height:calc(100svh - 88px)}
.gft-splash[data-splash=use-case-portfolio] .gft-splash__structure{inset:0;height:auto;display:block;z-index:-1}
.gft-splash[data-splash=use-case-portfolio] .gft-splash__structure::after{background:linear-gradient(90deg,#072d2b 0%,#072d2bd9 24%,#072d2b00 44%)}
.gft-splash[data-splash=use-case-portfolio] .gft-splash__data{display:none}
.gft-splash[data-splash=use-case-portfolio] h1{font-size:clamp(48px,min(4.8vw,8.6svh),76px);max-width:9.4ch;margin-top:22px}
.gft-splash[data-splash=use-case-portfolio] .gft-splash__lede{font-size:18px;line-height:1.6;max-width:min(31vw,29rem);color:#e2ebe6;margin-top:22px}
.gft-splash[data-splash=use-case-portfolio] .gft-splash__actions{margin-top:26px}
.gft-splash[data-splash=use-case-portfolio] :is(.gft-splash__cue,.gft-splash__caption){font-size:14px}
.gft-splash[data-splash=use-case-portfolio] .gft-splash__caption{color:#d6ebe0}
.gft-splash[data-splash=use-case-portfolio] .gft-splash__position{font-size:13px;color:#cfe6da}
.ucp-s1{position:absolute;inset:0;background-image:linear-gradient(#b4d4c512 1px,transparent 1px),linear-gradient(90deg,#b4d4c512 1px,transparent 1px);background-size:96px 96px}
.ucp-s1__warp{position:absolute;inset:-12px 0;width:100%;height:calc(100% + 24px)}
.ucp-s1__dock{position:absolute;inset:0}
.ucp-s1__frame{position:absolute;right:2vw;top:1.5%;width:min(63vw,calc((100svh - 88px) * .85 * 760 / 580));display:flex;flex-direction:column;align-items:center;gap:6px}
.ucp-s1__plane{width:100%;aspect-ratio:760/580}
.ucp-s1__fig{position:absolute;left:var(--x);top:var(--y);transform:translate(-100%,-50%);display:flex;align-items:center;gap:12px;margin:0;white-space:nowrap}
.ucp-s1__fig output{font:850 44px/1 var(--gft-font-display);letter-spacing:-.03em;color:#f6f4ef;font-variant-numeric:tabular-nums;display:inline-block}
.ucp-s1__fig span{font:600 13px/1.4 var(--gft-font-mono);letter-spacing:.06em;color:#d6ebe0;text-transform:uppercase}
.ucp-s1__status{font:600 15px/1.5 var(--gft-font-mono);letter-spacing:.08em;color:#d6ebe0;margin:0;text-align:center}
.s1-threads path{stroke-dasharray:none}
.ucp-ping{opacity:0;transform-box:fill-box;transform-origin:center}
:root[data-m-go] [data-m-live~=ucp-ping][data-m-on] .ucp-ping{animation-name:ucp-ping;animation-duration:2.8s;animation-timing-function:ease-out;animation-iteration-count:infinite;animation-direction:normal}
@keyframes ucp-ping{0%{opacity:.9;transform:scale(.85)}100%{opacity:0;transform:scale(1.55)}}
.s1-ride,.s1-ring{transform-box:fill-box;transform-origin:center}
:root[data-m-go] .ucp-s1 .s1-axes{animation-name:ucp-comb;animation-duration:560ms;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ucp-s1 .s1-threads{animation-name:ucp-fade-in;animation-duration:420ms;animation-timing-function:linear;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ucp-s1 .s1-ride{animation-name:ucp-ride;animation-duration:420ms;animation-timing-function:cubic-bezier(.3,.7,.2,1.1);animation-delay:var(--d);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ucp-s1 .s1-ring{animation-name:ucp-ring;animation-duration:300ms;animation-timing-function:var(--gft-ease-out);animation-delay:var(--d);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ucp-s1 .s1-weft{animation-name:ucp-weft;animation-duration:460ms;animation-timing-function:cubic-bezier(.4,0,.3,1);animation-delay:440ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ucp-s1 .s1-leader{animation-name:ucp-leader;animation-duration:300ms;animation-timing-function:var(--gft-ease-out);animation-delay:760ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ucp-s1 .ucp-s1__fig output{animation-name:ucp-roll;animation-duration:420ms;animation-timing-function:var(--gft-ease-out);animation-delay:880ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] .ucp-s1 .ucp-s1__fig span,:root[data-m-go] .ucp-s1 .ucp-s1__status{animation-name:ucp-fade-in;animation-duration:400ms;animation-timing-function:linear;animation-delay:820ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-m-live~=ucp-ping][data-m-on] .s1-weft__live{animation-name:ucp-breathe2;animation-duration:3.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes ucp-comb{from{clip-path:inset(0 100% 0 0);opacity:.3}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes ucp-fade-in{from{opacity:0}}
@keyframes ucp-ride{from{transform:translateY(calc(-1 * var(--dy)));opacity:.2}}
@keyframes ucp-ring{from{opacity:0;transform:scale(1.5)}}
@keyframes ucp-weft{from{transform:translateY(370px);opacity:.6}}
@keyframes ucp-leader{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ucp-roll{from{clip-path:inset(0 0 100% 0);transform:translateY(.45em);opacity:0}to{clip-path:inset(0 0 0 0);transform:none;opacity:1}}
@keyframes ucp-breathe2{from{transform:translateY(-2px)}to{transform:translateY(2px)}}
@supports (animation-timeline:view()){
 :root[data-m-go] .ucp-s1__dock{animation-name:ucp-dock;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--gft-splash;animation-range-start:exit 35%;animation-range-end:exit 95%}
}
@keyframes ucp-dock{to{opacity:0}}

/* ======================= S2 bench ======================= */
.ucp-bench{background:var(--ucp-night);color:var(--ucp-dtext);padding:11vh 0 9vh}
.ucp-warpbg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.ucp-bench__grid{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);padding-inline:48px 2.5vw;align-items:start}
.ucp-bench__panel{position:relative;z-index:2;background:rgba(14,58,50,.92);border:1px solid #6bb68f;border-radius:16px;padding:30px 28px 26px;box-shadow:0 24px 60px #0007}
.ucp-bench__head h2{font-size:clamp(34px,3vw,48px);margin-bottom:16px}
.ucp-bench__intro{font-size:17px;line-height:1.6;color:var(--ucp-dmute);margin-bottom:18px}
.ucp-bench__intro strong{color:#f6f4ef}
.ucp-fold{border-top:1px solid #6bb68f80;padding:6px 0 16px}
.ucp-fold summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px;font:700 14px var(--gft-font-mono);letter-spacing:.12em;text-transform:uppercase;color:#e9b765}
.ucp-fold summary::-webkit-details-marker{display:none}
.ucp-fold summary::after{content:'+';font-size:22px;color:#6bb68f;transition:transform .3s}
.ucp-fold[open] summary::after{transform:rotate(45deg)}
.ucp-fold>*+*{margin-top:12px}
.ucp-bench .ucp-note{color:#cfe6da}
.ucp-presets{display:flex;flex-wrap:wrap;gap:8px}
.ucp-presets button{min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid #6bb68f;background:transparent;color:#e4f1ea;font-size:14px;font-weight:600}
.ucp-presets button[aria-pressed=true]{background:#6bb68f;color:#072d2b}
.ucp-fs{border:0;margin:0;padding:0}
.ucp-fs legend,.ucp-select-label{display:block;font:600 13px var(--gft-font-mono);letter-spacing:.1em;text-transform:uppercase;color:#d6ebe0;margin-bottom:8px;padding:0}
.ucp-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ucp-phases label{position:relative;display:flex}
.ucp-phases input{position:absolute;opacity:0;inset:0;margin:0}
.ucp-phases span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;border:1px solid #6bb68f99;border-radius:10px;font-size:14px;font-weight:600;color:#e4f1ea;text-align:center;line-height:1.2}
.ucp-phases small{font:700 13px var(--gft-font-mono);color:#e9b765}
.ucp-phases input:checked+span{background:#6bb68f;color:#072d2b;border-color:#6bb68f}
.ucp-phases input:checked+span small{color:#072d2b}
.ucp-phases input:focus-visible+span{outline:3px solid var(--ucp-ochre);outline-offset:2px}
.ucp-field{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;font-weight:600}
.ucp-field small{display:block;font:500 13px var(--gft-font-mono);color:#cfe6da;letter-spacing:.04em}
.ucp-field input,.ucp-bench select,.ucp-add input{background:#072d2b;color:#f6f4ef;border:1px solid #6bb68f;border-radius:10px;min-height:46px;padding:8px 12px;font-size:17px}
.ucp-field input{width:96px;text-align:right;font-variant-numeric:tabular-nums}
.ucp-bench select{width:100%}
.ucp-range{width:100%;accent-color:#6bb68f;min-height:32px;margin:6px 0 2px}
.ucp-control{display:grid;gap:2px}
.ucp-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px}
.ucp-check input{width:20px;height:20px;accent-color:#6bb68f}
.ucp-add{display:flex;gap:8px}.ucp-add input{flex:1;min-width:0}
.ucp-add input::placeholder{color:#a9c6b8}
.ucp-ab{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ucp-link{display:grid;gap:6px;font-size:14px}.ucp-link input{background:#072d2b;color:#f6f4ef;border:1px solid #6bb68f;border-radius:8px;min-height:44px;padding:6px 10px;font:13px var(--gft-font-mono)}
.ucp-cmp{width:100%;border-collapse:collapse;font-size:14px}.ucp-cmp caption{text-align:left;font:13px var(--gft-font-mono);padding-bottom:8px}
.ucp-cmp :is(th,td){padding:8px 6px;border-bottom:1px solid #6bb68f55;text-align:left;vertical-align:top}
.ucp-bench__stage{position:sticky;top:0;height:100svh;min-height:640px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;padding:18px 0 16px 3vw}
.ucp-read{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'m t' 'w w';gap:6px 24px;align-items:end;padding:0 0 0 calc(80 / 760 * 100%)}
.ucp-read__main{grid-area:m}.ucp-read__tally{grid-area:t}.ucp-read__why{grid-area:w}
.ucp-read .ucp-kicker{color:#e9b765;display:block}
.ucp-read__score{display:flex;align-items:flex-end;gap:14px}
.ucp-read__score output{font:850 64px/0.95 var(--gft-font-display);letter-spacing:-.04em;color:#f6f4ef;font-variant-numeric:tabular-nums}
.ucp-read__score span{font:600 13px/1.35 var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:#d6ebe0;padding-bottom:6px}
.ucp-read__tier{font-size:17px;margin-top:6px;color:#e4f1ea}.ucp-read__tier strong{color:#9fd9b8}
.ucp-read__tally{display:flex;align-items:flex-end;gap:12px}
.ucp-read__tally p{display:grid;justify-items:center;line-height:1}
.ucp-read__tally output{font:850 32px/1 var(--gft-font-display);color:#f6f4ef}
.ucp-read__tally small{font:600 13px var(--gft-font-mono);color:#d6ebe0;text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.ucp-read__tally b{font-size:24px;color:#6bb68f;padding-bottom:22px}
.ucp-read__why{font-size:15px;line-height:1.5;color:#d6ebe0;min-height:3em;max-width:62ch}
.ucp-bench__plot{display:flex;align-items:center;justify-content:center}
.ucp-bench__plot svg{max-height:100%}
.ucp-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-left:calc(80 / 760 * 100%)}
.ucp-cases button{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 12px;border-radius:12px;border:1px solid #6bb68f80;background:#0b3b37;color:#e4f1ea;text-align:left;min-width:0}
.ucp-cases button b{font:800 15px var(--gft-font-mono);color:#e9b765}
.ucp-cases button span{min-width:0;font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucp-cases button small{display:block;font:13px var(--gft-font-mono);color:#cfe6da}
.ucp-cases button[aria-pressed=true]{border-color:#f6f4ef;background:#0e4d4a;box-shadow:inset 0 0 0 1px #f6f4ef}
.ucp-node{cursor:pointer}
.ucp-node__sel{opacity:0;transition:opacity .3s}
.ucp-node.is-sel .ucp-node__sel,.ucp-node[data-hover] .ucp-node__sel{opacity:.85}
.ucp-ghost{pointer-events:none}
.ucp-seat,[data-ucp-orbit]{transform-box:fill-box;transform-origin:center}
/* entrance "shed": the glass panel slides in while the plane frame opens right; then the discs re-seat and the figures roll */
:root[data-m-go] main[data-ucp-armed] [data-ucp-in=shed]:not([data-ucp-on]) .ucp-bench__panel{opacity:.15;transform:translateX(-64px)}
:root[data-m-go] main[data-ucp-armed] [data-ucp-in=shed]:not([data-ucp-on]) .ucp-bench__plot{clip-path:inset(0 100% 0 0)}
:root[data-m-go] main[data-ucp-armed] [data-ucp-in=shed]:not([data-ucp-on]) :is(.ucp-seat,.ucp-read,.ucp-cases){opacity:0}
:root[data-m-go] [data-ucp-in=shed][data-ucp-on]:not([data-ucp-done]) .ucp-bench__panel{animation-name:ucp-in-l;animation-duration:420ms;animation-timing-function:var(--ucp-ease);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=shed][data-ucp-on]:not([data-ucp-done]) .ucp-bench__plot{animation-name:ucp-open-r;animation-duration:440ms;animation-timing-function:cubic-bezier(.5,0,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=shed][data-ucp-on]:not([data-ucp-done]) .ucp-seat{animation-name:ucp-reseat;animation-duration:420ms;animation-timing-function:cubic-bezier(.3,.7,.2,1.15);animation-delay:calc(380ms + var(--i,0) * 60ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=shed][data-ucp-on]:not([data-ucp-done]) :is(.ucp-read,.ucp-cases){animation-name:ucp-rise;animation-duration:420ms;animation-timing-function:var(--ucp-ease);animation-delay:380ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ucp-in-l{from{opacity:.15;transform:translateX(-64px)}}
@keyframes ucp-open-r{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ucp-reseat{from{opacity:0;transform:translateY(-34px) scale(.55)}}
@keyframes ucp-rise{from{opacity:0;transform:translateY(26px)}}

/* ======================= S3 ledger ======================= */
.ucp-ledger{background:var(--ucp-paper);color:var(--ucp-ink);padding:9vh 0 6vh}
.ucp-ledger__grid{display:grid;grid-template-columns:minmax(0,35fr) minmax(0,65fr);gap:32px;padding-inline:40px;align-items:start}
.ucp-lens{position:sticky;top:88px;height:74vh;min-height:500px;max-height:680px;margin-top:0;z-index:3;background:#fbfaf7;color:var(--ucp-ink);border-radius:18px;padding:20px 20px 16px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;box-shadow:0 18px 44px #072d2b16;border:1.5px solid #0e4d4a40}
.ucp-lens .ucp-kicker{color:#7a4a08}
.ucp-lens__plot{display:flex;align-items:center;justify-content:center;background:#efeae0;border-radius:12px;border:1px solid #0e4d4a2e;padding:8px}
.ucp-lens__plot svg{max-height:100%}
.ucp-lens__plot svg rect[fill="#0b3b37"]{fill:#e9e3d6}
.ucp-lens__plot svg path[fill="#afbce9"]{fill:#2c3e7a;fill-opacity:.08}
.ucp-lens__plot svg path[fill="#6bb68f"]{fill:#0e4d4a;fill-opacity:.13}
.ucp-lens__plot svg path[stroke="#cfe6da"]{stroke:#0e4d4a;stroke-opacity:.28}
.ucp-lens__plot svg path[stroke-dasharray="5 6"]{stroke:#0e4d4a;stroke-opacity:.75}
.ucp-lens__plot svg .ucp-t{fill:#072d2b;font-weight:700}
.ucp-lens__plot svg .ucp-t--z{fill:#0e4d4a;font-weight:800}
.ucp-lens__plot svg .ucp-t--a{fill:#1d3b36;font-weight:700;font-size:calc(11px * var(--k,1))}
.ucp-lens__plot svg .ucp-t--n{fill:#072d2b;font-weight:800}
.ucp-lens__plot svg .ucp-node[data-tier="1"] :is(.ucp-node__body,.ucp-node__gate){stroke:#0e4d4a}
.ucp-lens__plot svg .ucp-node[data-tier="1"] .ucp-node__body{fill:#0e4d4a;fill-opacity:.22}
.ucp-lens__plot svg .ucp-node[data-tier="1"] circle[r="3.2"]{fill:#0e4d4a}
.ucp-lens__plot svg .ucp-node[data-tier="2"] :is(.ucp-node__body,.ucp-node__gate){stroke:#2c3e7a}
.ucp-lens__plot svg .ucp-node[data-tier="2"] .ucp-node__body{fill:#2c3e7a;fill-opacity:.2}
.ucp-lens__plot svg .ucp-node[data-tier="2"] circle[r="3.2"]{fill:#2c3e7a}
.ucp-lens__plot svg .ucp-node[data-tier="3"] :is(.ucp-node__body,.ucp-node__gate){stroke:#8a5208}
.ucp-lens__plot svg .ucp-node[data-tier="3"] circle[r="3.2"]{fill:#8a5208}
.ucp-lens__plot svg :is(.ucp-node__sel,.ucp-ping){stroke:#072d2b}
.ucp-lens__plot svg .ucp-leader{stroke:#8a5208}
.ucp-lens__plot svg pattern path{stroke:#072d2b;stroke-opacity:.45}
.ucp-lens__plot svg .lz-s7 rect{fill:#072d2b}
.ucp-lens__plot svg .ucp-t--b{fill:#f6f4ef}
.ucp-lens__read{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:4px 12px;border-top:2px dashed #c98a2b;padding-top:10px;min-height:4.8em}
.ucp-lens__read b{font:800 15px var(--gft-font-mono);color:#7a4a08}
.ucp-lens__read span{font-size:17px;font-weight:700;color:#072d2b;line-height:1.3}
.ucp-lens__read em{font:850 30px/1 var(--gft-font-display);font-style:normal;color:#0e4d4a}
.ucp-lens__read small{grid-column:1/-1;font:14px/1.45 var(--gft-font-mono);color:var(--ucp-mute)}
.ucp-lens__mode{font-size:14px;line-height:1.5;color:var(--ucp-mute);min-height:2.8em}
.lz-hatch,.lz-s3,.lz-s7{opacity:0;transition:opacity .45s}
.ucp-ledger[data-lens=s3] .lz-s3,.ucp-ledger[data-lens=s7] .lz-s7,.ucp-ledger[data-lens=ill] .lz-hatch{opacity:1}
.ucp-ledger__main{min-width:0}
.ucp-ledger__main h2{font-size:clamp(38px,3.6vw,58px);color:#0e4d4a;margin-bottom:16px}
.ucp-ledger__lede{font-size:18px;line-height:1.6;color:var(--ucp-mute);max-width:56ch;margin-bottom:22px}
.ucp-lensctl{margin-bottom:18px}
.ucp-strip{border:1px solid #0e4d4a33;border-radius:14px;padding:16px 18px;background:#fbfaf7;margin-bottom:20px}
.ucp-strip__count{font:850 28px/1.1 var(--gft-font-display);color:#0e4d4a;margin-bottom:12px}
.ucp-strip__count i{font-style:normal;color:#c98a2b}
.ucp-strip__bar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.ucp-strip__bar button{width:100%;min-height:58px;border:0;border-radius:8px;padding:6px 8px;background:#2f7a59;color:#fff;font-size:13px;font-weight:700;line-height:1.2;text-align:left;transform-origin:0 50%;transition:filter .25s,opacity .3s,box-shadow .25s}
.ucp-strip__bar button[data-k=ill]{background:#c98a2b;color:#2b1a03}
.ucp-strip__bar button[data-hover],.ucp-strip__bar button:hover{box-shadow:0 0 0 3px #072d2b}
.ucp-ledger[data-lens=s3] .ucp-strip__bar button:not([data-k=s3]),.ucp-ledger[data-lens=s7] .ucp-strip__bar button:not([data-k=s7]),.ucp-ledger[data-lens=ill] .ucp-strip__bar button:not([data-k=ill]){filter:saturate(.15) brightness(1.55)}
.ucp-ledger[data-lens=s3] .ucp-strip__bar button[data-k=s3],.ucp-ledger[data-lens=s7] .ucp-strip__bar button[data-k=s7],.ucp-ledger[data-lens=ill] .ucp-strip__bar button[data-k=ill]{box-shadow:0 0 0 3px #072d2b}
.ucp-strip__read{display:grid;margin-top:12px}
.ucp-strip__read p{grid-area:1/1;font-size:15px;line-height:1.5;color:var(--ucp-mute);opacity:0;visibility:hidden;transition:opacity .14s,visibility 0s .14s}
.ucp-strip__read p.is-on{opacity:1;visibility:visible;transition:opacity .22s .15s,visibility 0s}
.ucp-strip__read strong{color:#072d2b}
.ucp-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}
.ucp-seg--s span{min-height:44px;padding:6px 14px;font-size:14px}
.ucp-table-wrap{overflow-x:auto;max-width:100%}
.ucp-ledger-table{width:100%;min-width:0;border-collapse:collapse;font-size:14px;line-height:1.35}
.ucp-ledger-table caption{text-align:left;font:13px/1.5 var(--gft-font-mono);color:var(--ucp-mute);padding-bottom:8px}
.ucp-ledger-table th,.ucp-ledger-table td{padding:8px 5px;height:48px;border-bottom:1px solid #0e4d4a26;text-align:right;vertical-align:middle;transition:opacity .3s,background-color .3s}
.ucp-ledger-table thead th{font:700 13px var(--gft-font-mono);letter-spacing:.04em;text-transform:uppercase;color:#0e4d4a;border-bottom:2px solid #0e4d4a;white-space:nowrap}
.ucp-ledger-table thead button{background:none;border:0;padding:6px 0;min-height:44px;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit}
.ucp-ledger-table [data-col=n]{text-align:left}
.ucp-ledger-table tbody th{font-weight:600;min-width:168px}
.ucp-ledger-table tbody tr{cursor:pointer}
.ucp-ledger-table tbody tr:is([data-hover],[data-active]){background:#e2ebe6}
.ucp-ledger-table .ucp-ready{font-size:13px;max-width:140px;text-align:left}
.ucp-ledger-table .ucp-ready[data-ready=true]{color:#1f6a48;font-weight:700}
.ucp-ledger-table .ucp-ready[data-ready=false]{color:#7a4a08}
.ucp-ledger-table[data-view=in] [data-col=res],.ucp-ledger-table[data-view=res] [data-col=in]{display:none}
.ucp-row-n{font:700 13px var(--gft-font-mono);color:#7a4a08;margin-right:6px}
.ucp-bead{display:inline-block;vertical-align:middle;margin-right:8px;width:15px;height:15px}
.ucp-bead i{display:block;width:15px;height:15px;border-radius:50%;border:2px solid;box-sizing:border-box}
.ucp-chips{white-space:nowrap}
.ucp-chips span{display:inline-block;margin-left:3px;padding:2px 6px;border-radius:999px;font:700 12px/1.4 var(--gft-font-mono);background:#d7ebdf;color:#0e4d4a}
.ucp-chips span[data-k=ill]{background:#f4e2c2;color:#5e3d0c}
.ucp-ledger[data-lens=s3] [data-src]:not([data-src=s3]),.ucp-ledger[data-lens=s7] [data-src]:not([data-src=s7]),.ucp-ledger[data-lens=ill] [data-src]:not([data-src=ill]){color:#5d706b}
.ucp-ledger[data-lens=s3] [data-src=s3],.ucp-ledger[data-lens=s7] [data-src=s7],.ucp-ledger[data-lens=ill] [data-src=ill]{background:#fff3dc}
.ucp-ledger__foot{margin-top:14px;color:var(--ucp-mute);max-width:80ch}
/* entrance "pick": rows slide in from the left and each bead drops into its cell; then the status strip grows and counts roll */
:root[data-m-go] main[data-ucp-armed] [data-ucp-in=pick]:not([data-ucp-on]) :is(.ucp-ledger-table tbody tr,.ucp-strip__bar button){opacity:0}
:root[data-m-go] [data-ucp-in=pick][data-ucp-on]:not([data-ucp-done]) .ucp-ledger-table tbody tr{animation-name:ucp-row;animation-duration:380ms;animation-timing-function:var(--ucp-ease);animation-delay:calc(var(--i,0) * 70ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=pick][data-ucp-on]:not([data-ucp-done]) .ucp-bead i{animation-name:ucp-bead;animation-duration:300ms;animation-timing-function:cubic-bezier(.3,.7,.2,1.3);animation-delay:calc(160ms + var(--i,0) * 70ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=pick][data-ucp-on]:not([data-ucp-done]) .ucp-strip__bar button{animation-name:ucp-grow-x;animation-duration:420ms;animation-timing-function:var(--ucp-ease);animation-delay:calc(420ms + var(--i,0) * 40ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ucp-row{from{opacity:0;transform:translateX(-48px)}}
@keyframes ucp-bead{from{opacity:0;transform:translateY(-22px) scale(.3)}}
@keyframes ucp-grow-x{from{transform:scaleX(0);opacity:.4}}
@supports (animation-timeline:view()){
 /* "Beads to rows": each row's bead slides right into its first cell as the row arrives */
 :root[data-m-go] .ucp-bead{animation-name:ucp-bead-in;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range-start:entry 0%;animation-range-end:entry 100%}
}
@keyframes ucp-bead-in{from{transform:translateX(-140px);opacity:.2}to{transform:none;opacity:1}}

/* ======================= S4 method: the carved plane (sticky scene 1) ======================= */
.ucp-method{background:var(--ucp-night);color:var(--ucp-dtext);view-timeline-name:--ucp-meth;view-timeline-axis:block}
.ucp-scene{position:relative}
.ucp-scene__pin{position:sticky;top:0;height:100svh;min-height:640px;overflow:clip}
.ucp-scene__groundwrap{position:absolute;inset:0;transform-origin:0 50%;overflow-anchor:none}
.ucp-scene__ground{position:absolute;inset:0;background:var(--ucp-night);transform:none}
.ucp-scene__grid{position:absolute;inset:0;background-image:linear-gradient(#b4d4c514 1px,transparent 1px),linear-gradient(90deg,#b4d4c514 1px,transparent 1px);background-size:96px 96px}
.ucp-scene__handover{position:absolute;left:48px;right:48px;top:2.2vh;height:170px;z-index:3;pointer-events:none;opacity:0;overflow-anchor:none}
.ucp-handover-svg{display:block;width:100%;height:100%;overflow:visible}
.ucp-scene__body{position:absolute;inset:0;overflow-anchor:none}
.ucp-scene__head{position:absolute;left:48px;top:4vh;width:calc(38vw - 64px);color:#f6f4ef;z-index:2}
.ucp-scene__head .gft-eyebrow{color:#e9b765}
.ucp-scene__head h2{font-size:clamp(28px,2.4vw,38px)}
.ucp-scene__stage{position:absolute;left:48px;top:calc(4vh + 140px);bottom:3vh;width:calc(58vw - 96px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;color:#e4f1ea;transform-origin:0 50%;transition:transform .8s var(--ucp-ease);z-index:1}
.ucp-method:is([data-step="2"],[data-step="3"],[data-step="4"]) .ucp-scene__stage{transform:translateX(1.5vw)}
.ucp-ms{transform-origin:35% 50%;transition:transform .8s var(--ucp-ease)}
.ucp-method:is([data-step="2"],[data-step="3"]) .ucp-ms{transform:scale(1.06)}
.ucp-scene__bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ucp-counter{font:600 15px var(--gft-font-mono);letter-spacing:.1em;color:#d6ebe0}
.ucp-counter b{font-size:22px;color:#e9b765}
.ucp-chipsel{display:flex;align-items:center;gap:8px;font:600 13px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#d6ebe0}
.ucp-chipsel select{max-width:340px;min-height:44px;border-radius:999px;border:1px solid #6bb68f;background:#0b3b37;color:#f6f4ef;padding:6px 14px;font:600 14px var(--gft-font-display);text-transform:none;letter-spacing:0}
.ucp-ms{display:grid}
.ucp-ms>*{grid-area:1/1;min-height:0}
.ms-floor{perspective:1300px;perspective-origin:50% 10%}
.ms-plate{height:100%;transform-origin:50% 94%;transition:transform 1s var(--ucp-ease)}
.ms-plate svg,.ms-wall svg{display:block;width:100%;height:100%;overflow:visible}
.ms-wall{opacity:0;transform:scaleY(.04);transform-origin:50% 56%;transition:transform .7s var(--ucp-ease) .25s,opacity .3s .25s;pointer-events:none}
.ucp-method[data-step="4"] .ms-plate{transform:translateY(-2%) rotateX(58deg)}
.ucp-method[data-step="4"] .ms-wall{opacity:1;transform:none}
.ms-disc{transform:translate(var(--px),var(--py));transition:transform .75s var(--ucp-ease) calc(var(--i) * 60ms)}
.ucp-method[data-step="0"] .ms-disc{transform:translate(var(--cx),var(--cy))}
.ms-tier,.ms-neutral,.ms-axes,.ms-zones,.ms-guide,.ms-iso{transition:opacity .4s,clip-path .7s var(--ucp-ease)}
.ms-cols{opacity:0;transition:opacity .15s}.ucp-method[data-step="0"] .ms-cols{opacity:1;transition:opacity .35s .18s}
.ms-tier{opacity:0}.ucp-method:is([data-step="3"],[data-step="4"]) .ms-tier{opacity:1}
.ucp-method:is([data-step="3"],[data-step="4"]) .ms-neutral{opacity:0}
.ucp-method[data-step="0"] .ms-axes{opacity:0;clip-path:inset(0 100% 0 0)}
.ms-axes{clip-path:inset(0 0 0 0)}
.ms-guide{opacity:0}.ucp-method:is([data-step="1"],[data-step="2"]) .ms-guide{opacity:1}
.ms-rect__sel{transform:scale(0);transform-box:fill-box;transform-origin:0 100%;transition:transform .8s var(--ucp-ease)}
.ms-rect__note,.ms-rect__ex{opacity:0;transition:opacity .15s}
.ucp-method[data-step="2"] .ms-rect__sel{transform:none}
.ucp-method[data-step="2"] :is(.ms-rect__note,.ms-rect__ex){opacity:1;transition:opacity .35s .42s}
.ms-iso{opacity:0;clip-path:inset(0 0 100% 0)}
.ucp-method[data-step="2"] .ms-iso{opacity:1;clip-path:inset(0 0 0 0);transition-delay:.3s}
.ms-zones{opacity:0}.ucp-method:is([data-step="3"],[data-step="4"]) .ms-zones{opacity:1;transition-delay:.5s}
.ms-reed{opacity:0;clip-path:inset(0 100% 0 0);transition:clip-path .65s var(--ucp-ease),opacity .2s}
.ucp-method:is([data-step="3"],[data-step="4"]) .ms-reed{opacity:1;clip-path:inset(0 0 0 0)}
.ms-disc.is-sel .ms-disc__in{filter:drop-shadow(0 0 8px #f6f4ef88)}
.ms-disc__in{transform-box:fill-box;transform-origin:center}
.ucp-ms__notes{display:grid}
.ucp-ms__notes p{grid-area:1/1;font-size:15px;line-height:1.5;color:#d6ebe0;opacity:0;visibility:hidden;transition:opacity .14s,visibility 0s .14s}
.ucp-ms__notes p.is-on{opacity:1;visibility:visible;transition:opacity .24s .15s,visibility 0s}
.ucp-scene__steps{list-style:none;margin:-100svh 0 0;padding:0;position:relative;z-index:2}
.ucp-method .ucp-step{min-height:80svh;display:flex;align-items:center;justify-content:flex-end;padding:0 48px 0 calc(58vw + 32px);pointer-events:none}
.ucp-method .ucp-step:first-child{min-height:92svh;padding-top:24vh}
.ucp-method .ucp-step:nth-child(n+3){padding-top:22vh}
.ucp-method .ucp-step:last-child{min-height:118svh}
.ucp-card{position:relative;pointer-events:auto;width:min(100%,460px);background:rgba(14,58,50,.94);border:1px solid #6bb68f;color:#e4f1ea;border-radius:16px;padding:26px 26px 22px;box-shadow:0 18px 50px #0008;overflow:hidden}
.ucp-card__n{position:absolute;right:14px;top:-10px;font:900 96px/1 var(--gft-font-display);color:transparent;-webkit-text-stroke:1.5px #6bb68f66;pointer-events:none}
.ucp-card .ucp-kicker{color:#e9b765;margin-bottom:8px}
.ucp-card h3{font-size:26px;margin-bottom:10px;color:#f6f4ef}
.ucp-card p{font-size:17px;line-height:1.6}
.ucp-formula{display:block;margin-top:12px;font:600 22px/1.35 var(--gft-font-mono);color:#e9b765;background:#072d2b;padding:10px 14px;border-radius:10px}
.ucp-card__live{margin-top:10px!important;font:600 15px var(--gft-font-mono)!important;color:#e9b765}
.ucp-tag{display:inline-block;margin-top:14px;font:700 13px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:#1f5a4a;color:#e4f1ea}
/* entrance "curtain": the stage drops from its top edge, then the axes draw and the step-1 columns rise */
:root[data-m-go] main[data-ucp-armed] [data-ucp-in=curtain]:not([data-ucp-on]){clip-path:inset(0 0 100% 0)}
:root[data-m-go] main[data-ucp-armed] [data-ucp-in=curtain]:not([data-ucp-on]) .ms-disc__in{opacity:0}
:root[data-m-go] [data-ucp-in=curtain][data-ucp-on]:not([data-ucp-done]){animation-name:ucp-curtain;animation-duration:460ms;animation-timing-function:cubic-bezier(.6,0,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=curtain][data-ucp-on]:not([data-ucp-done]) .ms-disc__in{animation-name:ucp-rise-s;animation-duration:420ms;animation-timing-function:var(--ucp-ease);animation-delay:calc(450ms + var(--i,0) * 50ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=curtain][data-ucp-on]:not([data-ucp-done]) .ms-cols{animation-name:ucp-comb;animation-duration:430ms;animation-timing-function:var(--ucp-ease);animation-delay:450ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ucp-curtain{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ucp-rise-s{from{opacity:0;transform:translateY(40px)}}
@supports (animation-timeline:view()){
 /* "Ledger to method": while #ledger is still leaving the screen, show only the 6-thread hand-over conduit; once #ledger passes, fade out the conduit and mount the sticky stage */
 :root[data-m-go] .ucp-scene__handover{animation-name:ucp-handover-out;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ucp-meth;animation-range-start:entry 28%;animation-range-end:entry 48%}
 :root[data-m-go] .ucp-scene__body{animation-name:ucp-meth-in;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ucp-meth;animation-range-start:entry 50%;animation-range-end:entry 78%}
}
@keyframes ucp-handover-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-16px)}}
@keyframes ucp-meth-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ======================= S5 interlude: the ruler ======================= */
.ucp-int{background:var(--ucp-night);color:var(--ucp-dtext);padding:10vh 48px 6vh;min-height:100svh;overflow:clip;view-timeline-name:--ucp-int;view-timeline-axis:block}
.ucp-int::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#b4d4c512 1px,transparent 1px),linear-gradient(90deg,#b4d4c512 1px,transparent 1px);background-size:96px 96px}
.ucp-int__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'c c' 'r r' 't t';gap:0 48px}
.ucp-int__copy{grid-area:c}
.ucp-int__copy .gft-eyebrow{color:#e9b765}
.ucp-int__copy h2{font-size:clamp(44px,4.6vw,72px);max-width:20ch;line-height:1.02}
.ucp-ruler{grid-area:r;position:relative;height:210px;margin:3vh 0 5vh}
.ucp-ruler__line{position:absolute;left:0;right:0;top:calc(50% - 20px);height:40px}
.ucp-ruler__line svg{width:100%;height:100%;display:block;overflow:visible}
.ucp-ruler__plate{position:absolute;left:4%;right:4%;top:calc(50% - 150px);height:300px;perspective:900px;pointer-events:none}
.ucp-ruler__plate i{position:absolute;inset:0;border:2px solid #cfe6da80;background-color:#0b3b37;background-image:linear-gradient(#cfe6da2a 1px,transparent 1px),linear-gradient(90deg,#cfe6da2a 1px,transparent 1px);background-size:60px 60px;opacity:0;transform:rotateX(89deg);overflow-anchor:none}
.ucp-ruler__bracket{position:absolute;left:0;right:0;top:calc(50% - 64px);height:128px;pointer-events:none}
.ucp-ruler__bracket i{position:absolute;inset:0;background:#6bb68f26;transform-origin:0 50%;transform:translateX(calc(var(--a) * 1%)) scaleX(calc((var(--b) - var(--a)) / 100));transition:transform .7s cubic-bezier(.5,0,.2,1.2)}
.ucp-ruler__bracket::before,.ucp-ruler__bracket::after{content:'';position:absolute;top:0;bottom:0;left:0;width:100%;transition:transform .7s cubic-bezier(.5,0,.2,1.2);background:linear-gradient(#6bb68f,#6bb68f) 0 0/4px 100% no-repeat,linear-gradient(#6bb68f,#6bb68f) 0 0/20px 4px no-repeat,linear-gradient(#6bb68f,#6bb68f) 0 100%/20px 4px no-repeat}
.ucp-ruler__bracket::before{transform:translateX(calc(var(--a) * 1%))}
.ucp-ruler__bracket::after{left:-20px;background:linear-gradient(#6bb68f,#6bb68f) 16px 0/4px 100% no-repeat,linear-gradient(#6bb68f,#6bb68f) 0 0/20px 4px no-repeat,linear-gradient(#6bb68f,#6bb68f) 0 100%/20px 4px no-repeat;transform:translateX(calc(var(--b) * 1%))}
.ucp-ruler__nodes{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.ucp-ruler__nodes li{position:absolute;left:calc(var(--m) * 1%);top:50%;width:0;height:0;transition:left .6s var(--ucp-ease)}
.ucp-ruler__nodes i{position:absolute;left:calc(-1 * var(--r));top:calc(-1 * var(--r));width:calc(2 * var(--r));height:calc(2 * var(--r));border-radius:50%;border:3px solid var(--c);background:color-mix(in srgb,var(--c) 30%,#072d2b)}
.ucp-ruler__nodes span{position:absolute;left:0;bottom:calc(var(--r) + 10px);transform:translateX(-50%);white-space:nowrap;font:600 15px var(--gft-font-mono);color:#e4f1ea}
.ucp-ruler__nodes li.is-low span{bottom:auto;top:calc(var(--r) + 10px)}
.ucp-ruler__nodes b{color:#e9b765}
.ucp-ruler__ends{position:absolute;left:0;right:0;bottom:-24px;display:grid}
.ucp-ruler__ends p{grid-area:1/1;display:flex;justify-content:space-between;gap:24px;font-size:17px;color:#d6ebe0;opacity:0;visibility:hidden;transition:opacity .14s,visibility 0s .14s}
.ucp-ruler__ends p.is-on{opacity:1;visibility:visible;transition:opacity .24s .15s,visibility 0s}
.ucp-int__tool{grid-area:t;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 48px;align-items:start;margin-top:3vh}
.ucp-int__p{font-size:18px;line-height:1.6;color:#e4f1ea}
.ucp-int__out{display:grid;grid-column:2;grid-row:1/span 2}
.ucp-int__out p{grid-area:1/1;font-size:19px;line-height:1.55;color:#e4f1ea;border-left:4px solid #6bb68f;padding-left:18px;opacity:0;visibility:hidden;transition:opacity .14s,visibility 0s .14s}
.ucp-int__out p.is-on{opacity:1;visibility:visible;transition:opacity .24s .15s,visibility 0s}
.ucp-int__out strong{color:#f6f4ef}
.ucp-int__chip{grid-column:2;font-size:15px;color:#e4f1ea;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ucp-int__chip small{flex-basis:100%;font-size:14px;color:#d6ebe0}
/* entrance "beat-up": the ruler beats up from below with its ticks, then the nodes drop on and the bracket snaps */
:root[data-m-go] main[data-ucp-armed] [data-ucp-in=beat-up]:not([data-ucp-on]) :is(.ucp-ruler__line,.ucp-ruler__nodes i,.ucp-ruler__nodes span,.ucp-ruler__bracket){opacity:0}
:root[data-m-go] [data-ucp-in=beat-up][data-ucp-on]:not([data-ucp-done]) .ucp-ruler__line{animation-name:ucp-beat;animation-duration:400ms;animation-timing-function:cubic-bezier(.3,.8,.2,1.2);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=beat-up][data-ucp-on]:not([data-ucp-done]) :is(.ucp-ruler__nodes i,.ucp-ruler__nodes span){animation-name:ucp-drop;animation-duration:380ms;animation-timing-function:cubic-bezier(.3,.7,.2,1.25);animation-delay:calc(360ms + var(--i,0) * 50ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=beat-up][data-ucp-on]:not([data-ucp-done]) .ucp-ruler__bracket{animation-name:ucp-snap;animation-duration:360ms;animation-timing-function:cubic-bezier(.3,.7,.2,1.3);animation-delay:520ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ucp-beat{from{opacity:0;transform:translateY(60px) scaleY(.4)}}
@keyframes ucp-drop{from{opacity:0;transform:translateY(-70px)}}
@keyframes ucp-snap{from{opacity:0;transform:scaleY(1.8)}}
@supports (animation-timeline:view()){
 /* "Floor flood": the tilted floor from the method stage flattens edge-on into the ruler as the interlude arrives */
 :root[data-m-go] .ucp-ruler__plate i{animation-name:ucp-flatten;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ucp-int;animation-range-start:entry 0%;animation-range-end:entry 95%}
}
@keyframes ucp-flatten{from{opacity:.9;transform:rotateX(58deg)}85%{opacity:.55}to{opacity:0;transform:rotateX(89deg)}}

/* ======================= S6 phase film (sticky scene 2) ======================= */
.ucp-film{background:var(--ucp-forest);color:#e4f1ea;view-timeline-name:--ucp-film;view-timeline-axis:block}
.ucp-film__pin{display:grid;grid-template-columns:minmax(0,30fr) minmax(0,70fr);gap:3vw;padding:4vh 48px 3vh}
.ucp-film__side{display:flex;flex-direction:column;min-height:0}
.ucp-film__side .gft-eyebrow{color:#f0c27a}
.ucp-film__side h2{font-size:clamp(28px,2.4vw,38px);color:#f6f4ef}
.ucp-film__lede{font-size:16px;line-height:1.55;color:#e4f1ea;margin-top:12px!important}
.ucp-film__cards{display:grid;margin-top:auto;padding-top:14px}
.ucp-fcard{grid-area:1/1;align-self:end;background:#072d2b;border:1px solid #6bb68f;border-radius:14px;padding:18px 20px;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .35s,transform .45s var(--ucp-ease),visibility 0s}
.ucp-fcard.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s .1s,transform .45s var(--ucp-ease) .1s,visibility 0s}
.ucp-fcard .ucp-kicker{color:#f0c27a;margin-bottom:6px}
.ucp-fcard h3{font-size:22px;color:#f6f4ef;margin-bottom:8px}
.ucp-fcard p{font-size:17px;line-height:1.55;color:#e4f1ea;margin-bottom:10px}
.ucp-film__stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;min-height:0}
.ucp-film__read p{font-size:17px;line-height:1.5;color:#f6f4ef;min-height:3em;font-weight:600}
.ucp-ln{overflow:clip;border-radius:10px}
.ucp-ln__cam{height:100%;transform-origin:100% 40%;transition:transform .9s var(--ucp-ease)}
.ucp-ln__cam svg{display:block;width:100%;height:100%;overflow:visible}
.ucp-film[data-step="2"] .ln-disc[data-state=held] .ln-disc__in{transform:scale(1.12)}
.ucp-film__ctl{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.ucp-film__ctl .ucp-seg legend{color:#e4f1ea}
.ucp-weftctl{display:grid;gap:4px;min-width:260px;font:600 14px var(--gft-font-mono);color:#f6f4ef}
.ucp-weftctl output{font-size:22px;color:#f0c27a}
.ucp-weftctl small{display:block;font-size:13px;color:#e4f1ea;font-weight:500}
.ucp-weftctl input{accent-color:#e9b765;width:100%;min-height:36px}
.ln-disc{transition:transform .8s var(--ucp-ease) calc(var(--i) * 50ms)}
.ln-disc__in{transform-box:fill-box;transform-origin:center;transition:transform .6s var(--ucp-ease)}
.ln-ring{stroke-dasharray:5 5}
.ln-disc[data-state=through] .ln-ring{stroke-dasharray:none;stroke:#f6f4ef}
.ln-disc[data-state=hang] .ln-body{fill-opacity:.12}
.ln-gap{opacity:0;transition:opacity .4s}
.ln-disc[data-state=held] .ln-gap{opacity:1}
.ln-lit,.ln-scan{opacity:0;transition:opacity .4s}
.ln-scan{transform-box:view-box}
.ucp-film[data-step="0"] [data-lane="0"] :is(.ln-lit,.ln-scan),.ucp-film[data-step="1"] [data-lane="1"] :is(.ln-lit,.ln-scan),.ucp-film[data-step="2"] [data-lane="2"] :is(.ln-lit,.ln-scan),.ucp-film[data-step="3"] [data-lane="3"] :is(.ln-lit,.ln-scan){opacity:1}
.ucp-film[data-step="3"] .ln-disc.is-sel .ln-disc__in{transform:translateY(-34px) scale(1.4)}
:root[data-m-go] [data-m-live~=ucp-bob][data-m-on] .ln-scan{animation-name:ucp-scan-down;animation-duration:3.4s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
:root[data-m-go] [data-m-live~=ucp-bob][data-m-on] .ln-disc:not([data-state=through]) :is(.ln-body,.ln-ring){animation-name:ucp-bob;animation-duration:2.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes ucp-scan-down{from{transform:translateY(0)}to{transform:translateY(680px)}}
@keyframes ucp-bob{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.ucp-film__steps .ucp-step{min-height:80svh}
.ucp-film__steps .ucp-step:last-child{min-height:130svh}
.ucp-film__steps{pointer-events:none}
/* entrance "warp": lane threads draw top to bottom, then the capacity weft slides in and the discs fall to their height */
.ln-thr,.ln-weft,.ln-heads{transform-box:view-box}
:root[data-m-go] main[data-ucp-armed] [data-ucp-in=warp]:not([data-ucp-on]) .ln-thr{clip-path:inset(0 0 100% 0)}
:root[data-m-go] main[data-ucp-armed] [data-ucp-in=warp]:not([data-ucp-on]) :is(.ln-weft,.ln-disc__in){opacity:0}
:root[data-m-go] [data-ucp-in=warp][data-ucp-on]:not([data-ucp-done]) .ln-thr{animation-name:ucp-down;animation-duration:440ms;animation-timing-function:cubic-bezier(.5,0,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=warp][data-ucp-on]:not([data-ucp-done]) .ln-weft{animation-name:ucp-weft-in;animation-duration:420ms;animation-timing-function:var(--ucp-ease);animation-delay:380ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=warp][data-ucp-on]:not([data-ucp-done]) .ln-disc__in{animation-name:ucp-fall;animation-duration:440ms;animation-timing-function:cubic-bezier(.3,.7,.2,1.2);animation-delay:calc(420ms + var(--i,0) * 50ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ucp-down{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ucp-weft-in{from{clip-path:inset(0 100% 0 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes ucp-fall{from{opacity:0;transform:translateY(-110px)}}
@supports (animation-timeline:view()){
 /* "Ruler to lanes": the lane panels grow down from the lane heads as the film arrives */
 .ln-lanes{transform-box:view-box;transform-origin:50% 72px}
 :root[data-m-go] .ln-lanes{animation-name:ucp-lanes;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ucp-film;animation-range-start:entry 0%;animation-range-end:entry 80%}
}
@keyframes ucp-lanes{from{transform:scaleY(.06)}to{transform:none}}

/* ======================= S7 test design: the lens ======================= */
.ucp-test{background:var(--ucp-forest);color:var(--ucp-dtext);padding:9vh 48px 7vh;min-height:100svh;overflow:clip;view-timeline-name:--ucp-test;view-timeline-axis:block}
.ucp-test__flood{position:absolute;inset:0;z-index:-2;overflow:clip}
.ucp-test__flood i{position:absolute;left:68%;top:22%;width:320vmax;height:320vmax;margin:-160vmax 0 0 -160vmax;border-radius:50%;background:var(--ucp-night);overflow-anchor:none}
.ucp-test .ucp-warpbg{z-index:-1}
.ucp-test__grid{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:40px;align-items:center}
.ucp-test__copy .gft-eyebrow{color:#e9b765}
.ucp-test__copy h2{font-size:clamp(36px,3.4vw,54px);color:#f6f4ef;margin-bottom:16px}
.ucp-test__lead{font-size:17px;line-height:1.6;color:#e4f1ea;margin-bottom:18px!important}
.ucp-tabs{margin-bottom:16px}
.ucp-test__out{display:grid;margin-bottom:14px}
.ucp-test__out>div{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.ucp-test__out>div.is-on{opacity:1;visibility:visible;transition:opacity .35s .25s,visibility 0s}
.ucp-test__say{font-size:21px;line-height:1.4;font-weight:700;color:#f6f4ef;margin-bottom:10px!important}
.ucp-test__src{font-size:15px;line-height:1.5;color:#d6ebe0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px!important}
.ucp-test__src .ucp-link-out{color:#f0c27a}
.ucp-test__off{font-size:15px;line-height:1.55;color:#d6ebe0;border-top:1px solid #6bb68f80;padding-top:12px}
.ucp-test__off strong{color:#f0c27a}
.ucp-lensfig{position:relative;height:min(62vh,52vw);aspect-ratio:1;margin:0;justify-self:center}
.ucp-lensfig__lens{position:absolute;inset:0}
.ucp-lensfig__lens svg{display:block;width:100%;height:100%;overflow:visible}
.ucp-lensfig__orbit{position:absolute;inset:0;pointer-events:none;overflow-anchor:none;container-type:size;z-index:2}
.ucp-lensfig__drift{position:absolute;inset:0}
.ucp-lensfig__drift span{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(-50cqmin - 28px)) rotate(calc(var(--a) * -1))}
.ucp-lensfig__drift b{display:block;width:max-content;transform:translate(var(--tx,-50%),-50%);white-space:nowrap;font:600 13px var(--gft-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#f0c27a;background:#072d2bcc;padding:3px 8px;border-radius:6px;border:1px dashed #c98a2b}
.ucp-lensfig__drift [data-side=l] b{--tx:calc(-100% + 10px)}.ucp-lensfig__drift [data-side=r] b{--tx:-10px}.ucp-lensfig__drift [data-side=c] b{--tx:-50%}
.lz-draw{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.ucp-test[data-t=vision] .lz-vision,.ucp-test[data-t=forecast] .lz-forecast,.ucp-test[data-t=design] .lz-design{opacity:1;visibility:visible;transition:opacity .4s .28s,visibility 0s}
.lz-scan{transform-box:view-box}
:root[data-m-go] [data-m-live~=ucp-scan][data-m-on] .lz-vision .lz-scan{animation-name:ucp-scan-x;animation-duration:4.2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
:root[data-m-go] [data-m-live~=ucp-scan][data-m-on] .lz-forecast .lz-scan{animation-name:ucp-scan-x2;animation-duration:3.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
:root[data-m-go] [data-m-live~=ucp-scan][data-m-on] .lz-design .lz-scan{animation-name:ucp-scan-x;animation-duration:4.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
:root[data-m-go] [data-m-live~=ucp-scan][data-m-on] .ucp-lensfig__drift{animation-name:ucp-orbit;animation-duration:14s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes ucp-scan-x{from{transform:translateX(0)}to{transform:translateX(380px)}}
@keyframes ucp-scan-x2{from{transform:translateX(0)}to{transform:translateX(200px)}}
@keyframes ucp-orbit{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
/* entrance "iris": the lens opens from its centre, then the drawing sets and the omitted factors deal out round the rim */
:root[data-m-go] main[data-ucp-armed] [data-ucp-in=iris]:not([data-ucp-on]) .ucp-lensfig__lens{clip-path:circle(0% at 50% 50%)}
:root[data-m-go] main[data-ucp-armed] [data-ucp-in=iris]:not([data-ucp-on]) :is(.ucp-lensfig__drift b,.lz-draw g,.lz-draw rect){opacity:0}
:root[data-m-go] [data-ucp-in=iris][data-ucp-on]:not([data-ucp-done]) .ucp-lensfig__lens{animation-name:ucp-iris;animation-duration:440ms;animation-timing-function:cubic-bezier(.5,0,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=iris][data-ucp-on]:not([data-ucp-done]) .ucp-lensfig__drift b{animation-name:ucp-deal;animation-duration:420ms;animation-timing-function:var(--ucp-ease);animation-delay:calc(400ms + var(--i,0) * 55ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=iris][data-ucp-on]:not([data-ucp-done]) :is(.lz-draw g,.lz-draw rect){animation-name:ucp-set;animation-duration:420ms;animation-timing-function:var(--ucp-ease);animation-delay:420ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ucp-iris{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes ucp-deal{from{opacity:0;transform:translate(var(--tx,-50%),-50%) scale(.4)}}
@keyframes ucp-set{from{opacity:0}}
@supports (animation-timeline:view()){
 /* "Disc swells into the lens": the night ground opens as a circle from the lens as the block arrives */
 .ucp-test__flood i{transform-origin:50% 50%}
 :root[data-m-go] .ucp-test__flood i{animation-name:ucp-flood;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ucp-test;animation-range-start:entry 0%;animation-range-end:entry 90%}
 /* "Lens to hub": the omitted factors fall outward as the block leaves */
 :root[data-m-go] .ucp-lensfig__orbit{animation-name:ucp-fallout;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ucp-test;animation-range-start:exit 20%;animation-range-end:exit 80%}
}
@keyframes ucp-flood{from{transform:scale(.03)}to{transform:none}}
@keyframes ucp-fallout{to{transform:scale(1.35);opacity:0}}

/* ======================= S8 closing: the gate dial ======================= */
.ucp-close{background:var(--ucp-night);color:var(--ucp-dtext);min-height:100svh;padding:4vh 48px;display:flex;align-items:center;overflow:clip;view-timeline-name:--ucp-close;view-timeline-axis:block}
.ucp-close__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:40px;width:100%;align-items:center}
.ucp-dialfig{position:relative;height:min(76vh,48vw);aspect-ratio:1;margin:0;justify-self:center}
.ucp-dial{position:absolute;inset:0}
.ucp-dialfig__lens{position:absolute;inset:0;pointer-events:none;overflow-anchor:none}
.ucp-dialfig__lens i{position:absolute;left:39.5%;top:39.5%;width:21%;height:21%;border-radius:50%;border:3px solid #6bb68f;opacity:0}
.ucp-thread{position:absolute;left:48px;top:50%;bottom:0;width:calc((100% - 136px) * .29);height:auto;pointer-events:none;z-index:0;overflow:visible}
.ucp-thread path{fill:none;stroke:#6bb68f;stroke-width:2.5}
.ucp-thread__pulse{stroke:#f0c27a!important;stroke-width:4!important;opacity:0}
.ucp-close[data-k="4"] .ucp-thread path:first-child{stroke:#9fe0bb;stroke-width:3.5}
:root[data-m-go] .ucp-close[data-pulse] .ucp-thread__pulse{animation-name:ucp-pulse-down;animation-duration:1.6s;animation-timing-function:cubic-bezier(.5,0,.3,1);animation-fill-mode:none;animation-iteration-count:1;animation-direction:normal}
@keyframes ucp-pulse-down{0%{opacity:1;clip-path:inset(0 0 100% 0)}70%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 0)}}
.dl-ring{transform-box:view-box;transform-origin:400px 400px}
.dl-pointer{transform-box:view-box;transform-origin:400px 400px;transform:rotate(var(--a));transition:transform .9s cubic-bezier(.5,0,.15,1.15)}
.dl-disc{transition:transform .8s var(--ucp-ease) calc(var(--i) * 50ms)}
.dl-disc__in,.dl-hub__in{transform-box:fill-box;transform-origin:center}
.dl-notch{stroke:#cfe6da40;transition:stroke .3s}
.dl-notch.is-on{stroke:#e9b765}
.ucp-close[data-k="4"] .dl-notch{stroke:#9fe0bb}
.ucp-close__panel h2{font-size:clamp(34px,3.2vw,50px);color:#f6f4ef;margin-bottom:12px}
/* Keep the drop inside each line box, with no vertical mask spill into its neighbour. */
.ucp-close__panel #ucp-close-t{line-height:1.15}
.ucp-close__panel #ucp-close-t .m-w{height:1.15em;padding:0 .1em;margin:0 -.1em;overflow:hidden;overflow-clip-margin:0}
.ucp-close__panel .gft-eyebrow{color:#e9b765}
.ucp-close__p{font-size:17px;line-height:1.55;color:#e4f1ea;margin-bottom:16px!important}
.ucp-seg--4{margin-bottom:12px}
.ucp-seg--4 span{padding:6px 12px;font-size:14px}
.ucp-close__cases{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ucp-close__cases button{min-width:48px;min-height:44px;border-radius:999px;border:1px solid #6bb68f;background:transparent;color:#e4f1ea;font:700 15px var(--gft-font-mono)}
.ucp-close__cases button[aria-pressed=true]{background:#f6f4ef;color:#072d2b;border-color:#f6f4ef}
.ucp-checks{border:0;margin:0 0 12px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.ucp-checks legend{font:600 13px var(--gft-font-mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;padding:0;color:#d6ebe0}
.ucp-checks label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;line-height:1.3}
.ucp-checks input{width:22px;height:22px;accent-color:#6bb68f;flex:none}
.ucp-close__read{border-top:1px solid #6bb68f80;padding-top:12px;margin-bottom:10px}
.ucp-close__settle{display:grid}
.ucp-close__settle p{grid-area:1/1;font-size:17px;line-height:1.5;color:#f6f4ef;opacity:0;visibility:hidden;transition:opacity .14s,visibility 0s .14s}
.ucp-close__settle p.is-on{opacity:1;visibility:visible;transition:opacity .24s .15s,visibility 0s}
.ucp-close__state{margin-top:8px!important;font-size:15px;line-height:1.5;color:#d6ebe0}
.ucp-close__state output{display:inline-block;font:800 22px var(--gft-font-display);color:#e9b765;margin-right:6px}
.ucp-close__state output[data-s=ready]{color:#9fe0bb}
.ucp-close__links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
/* entrance "spin": the ring turns into place and the sectors set, then the discs settle and the case drops into the hub */
:root[data-m-go] main[data-ucp-armed] [data-ucp-in=spin]:not([data-ucp-on]) :is(.dl-ring,.dl-disc__in,.dl-hub__in,.dl-pointer path,.dl-pointer circle){opacity:0}
:root[data-m-go] [data-ucp-in=spin][data-ucp-on]:not([data-ucp-done]) .dl-ring{animation-name:ucp-spin;animation-duration:460ms;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=spin][data-ucp-on]:not([data-ucp-done]) .dl-disc__in{animation-name:ucp-settle;animation-duration:420ms;animation-timing-function:cubic-bezier(.3,.7,.2,1.25);animation-delay:calc(420ms + var(--i,0) * 50ms);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=spin][data-ucp-on]:not([data-ucp-done]) .dl-hub__in{animation-name:ucp-drop;animation-duration:420ms;animation-timing-function:cubic-bezier(.3,.7,.2,1.25);animation-delay:460ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
:root[data-m-go] [data-ucp-in=spin][data-ucp-on]:not([data-ucp-done]) :is(.dl-pointer path,.dl-pointer circle){animation-name:ucp-fade-in;animation-duration:300ms;animation-timing-function:linear;animation-delay:300ms;animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal}
@keyframes ucp-spin{from{opacity:.2;transform:rotate(-90deg)}}
@keyframes ucp-settle{from{opacity:0;transform:scale(.3)}}
@supports (animation-timeline:view()){
 /* "Lens to hub": a lens-sized ring contracts onto the hub as the closing arrives */
 :root[data-m-go] .ucp-dialfig__lens i{animation-name:ucp-contract;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--ucp-close;animation-range-start:entry 0%;animation-range-end:entry 85%}
}
@keyframes ucp-contract{from{opacity:.9;transform:scale(4.2)}90%{opacity:.6}to{opacity:0;transform:none}}
/* "Hub thread": the footer's "Continue the thread" picks up the sage thread at the same gutter */
body[data-page=use-case-portfolio] .gft-footer__next{position:relative}
body[data-page=use-case-portfolio] .gft-footer__next::before{content:'';position:absolute;left:0;top:-1px;width:3px;height:40px;background:#6bb68f}
body[data-page=use-case-portfolio] .gft-footer__next-line i{background:#6bb68f}

/* ---------- Calm: every pose jumps to its end state ---------- */
:root[data-motion=calm] :is(.ucp-sec,.ucp-s1) *,:root[data-motion=calm] :is(.ucp-sec,.ucp-s1) *::before,:root[data-motion=calm] :is(.ucp-sec,.ucp-s1) *::after{transition-duration:0s!important;transition-delay:0s!important}

/* ======================= mid widths ======================= */
@media (max-width:1100px) and (min-width:761px){
 .ucp-bench__grid{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
 .ucp-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ucp-read__score output{font-size:52px}
 .ucp-film__pin{grid-template-columns:minmax(0,36fr) minmax(0,64fr)}
}

/* ======================= phone ======================= */
@media (max-width:760px){
 .gft-splash[data-splash=use-case-portfolio]{min-height:calc(100svh - 76px)}
 .gft-splash[data-splash=use-case-portfolio] .gft-splash__structure{inset:0;height:auto}
 .gft-splash[data-splash=use-case-portfolio] .gft-splash__structure::after{background:linear-gradient(180deg,#072d2b 0%,#072d2bd0 30%,#072d2b00 48%)}
 .gft-splash[data-splash=use-case-portfolio] .gft-splash__content{padding-top:20px;padding-bottom:calc(36svh + 80px)}
 .gft-splash[data-splash=use-case-portfolio] h1{font-size:40px;line-height:1.04;margin-top:14px}
 .gft-splash[data-splash=use-case-portfolio] .gft-splash__lede{font-size:17px;max-width:none;margin-top:14px;line-height:1.5}
 .gft-splash[data-splash=use-case-portfolio] .gft-splash__actions{margin-top:16px}
 .gft-splash[data-splash=use-case-portfolio] .gft-splash__caption{display:none}
 .ucp-s1__frame{left:8px;right:8px;width:auto;top:auto;bottom:calc(var(--splash-strip-h,70px) + 6px)}
 .ucp-s1__fig output{font-size:36px}
 .ucp-s1__fig span{display:none}
 .ucp-s1__fig{transform:translate(-100%,-62%)}
 .ucp-t--z,.ucp-t--p,.ucp-t--name,.ucp-wide,.ucp-t--a{display:none}
 .ucp-t--k,.ucp-t--cap{font-size:calc(13px * min(var(--k,1),2.2))}
 .ucp-s1__status{font-size:13px}
 .ucp-sec{font-size:17px}
 .ucp-bench{padding:8vh 0 6vh}
 .ucp-bench__grid{grid-template-columns:minmax(0,1fr);padding-inline:16px}
 .ucp-bench__stage{order:-1;position:sticky;top:0;z-index:4;height:42svh;min-height:300px;padding:8px 0;background:var(--ucp-night);grid-template-rows:auto minmax(0,1fr);gap:4px;border-bottom:1px solid #6bb68f80}
 .ucp-read{padding:0;grid-template-areas:'m t';gap:4px 10px}
 .ucp-read__why,.ucp-cases,.ucp-read__tier{display:none}
 .ucp-read__score output{font-size:40px}
 .ucp-read__score span{font-size:13px;padding-bottom:2px}
 .ucp-read .ucp-kicker{display:none}
 .ucp-read__score{flex-direction:column;align-items:flex-start;gap:2px}
 .ucp-read__score br{display:none}
 .ucp-read__tally{gap:6px}.ucp-read__tally output{font-size:26px}.ucp-read__tally b{font-size:18px;padding-bottom:18px}
 .ucp-bench__panel{margin-top:16px;padding:20px 16px}
 .ucp-ab{grid-template-columns:1fr 1fr}
 .ucp-ledger{padding:7vh 0 5vh}
 .ucp-ledger__grid{grid-template-columns:minmax(0,1fr);padding-inline:16px;gap:16px}
 .ucp-lens{top:0;height:36svh;min-height:280px;margin-top:0;grid-template-rows:auto minmax(0,1fr) auto;padding:10px 12px;border-radius:14px}
 .ucp-lens__mode{display:none}
 .ucp-lens__read{min-height:0;padding-top:6px;grid-template-columns:auto 1fr auto}
 .ucp-lens__read small{display:none}
 .ucp-lens__read em{font-size:22px}
 .ucp-lens__read span{font-size:15px}
 .ucp-strip__bar{grid-template-columns:repeat(3,minmax(0,1fr))}
 .ucp-ledger-table{min-width:0}
 .ucp-ledger-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .ucp-ledger-table,.ucp-ledger-table tbody,.ucp-ledger-table caption{display:block}
 .ucp-ledger-table tbody tr{display:grid;grid-template-columns:repeat(4,auto);gap:4px 10px;padding:12px 8px;border-bottom:1px solid #0e4d4a33;align-items:center}
 .ucp-ledger-table tbody :is(th,td){height:auto;border:0;padding:0;text-align:left}
 .ucp-ledger-table tbody th{grid-column:1/-1;min-width:0}
 .ucp-ledger-table tbody td.ucp-ready{grid-column:1/-1;max-width:none}
 .ucp-ledger-table tbody td.ucp-chips{grid-column:1/-1}
 .ucp-ledger-table tbody td:nth-of-type(1)::before{content:'M '}
 .ucp-ledger-table tbody td:nth-of-type(2)::before{content:'R '}
 .ucp-ledger-table tbody td:nth-of-type(3)::before{content:'Need '}
 .ucp-ledger-table tbody td:nth-of-type(4)::before{content:'Prog. T'}
 .ucp-ledger-table tbody td:nth-of-type(5)::before{content:'Floor '}
 .ucp-ledger-table tbody td:nth-of-type(6)::before{content:'Tier '}
 .ucp-ledger-table tbody td:nth-of-type(7)::before{content:'P '}
 .ucp-ledger-table tbody td::before{font:600 13px var(--gft-font-mono);color:var(--ucp-mute)}
 .ucp-chips span:first-child{margin-left:0}
 .ucp-scene__pin{height:46svh;min-height:330px;z-index:3}
 .ucp-scene__handover{left:12px;right:12px;top:10px;height:110px}
 .ucp-method .ucp-scene__steps{z-index:1}
 .ucp-scene__ground{transform:none!important}
 .ucp-scene__head{left:16px;right:16px;width:auto;top:10px}
 .ucp-scene__head .gft-eyebrow{display:none}
 .ucp-scene__head h2{font-size:22px}
 .ucp-scene__stage{left:12px;right:12px;width:auto;top:74px;bottom:6px;transform:none!important}
 .ucp-ms{transform:none!important}
 .ucp-ms__notes{display:none}
 .ucp-chipsel span{display:none}.ucp-chipsel select{max-width:56vw;font-size:13px}
 .ucp-scene__steps{margin-top:0}
 .ucp-method .ucp-step,.ucp-method .ucp-step:first-child,.ucp-method .ucp-step:nth-child(n+3){min-height:70svh;padding:24px 16px;align-items:center;justify-content:center}
 .ucp-method .ucp-step:last-child{min-height:90svh}
 .ucp-card{width:100%}
 .ucp-card__n{font-size:72px}
 .ucp-formula{font-size:17px}
 .ucp-method[data-step="4"] .ms-plate{transform:translateY(6%) rotateX(30deg)}
 .ucp-int{padding:9vh 16px 7vh}
 .ucp-int__in{grid-template-columns:minmax(0,1fr)}
 .ucp-int__copy h2{font-size:40px}
 .ucp-ruler{height:190px;margin:5vh 8px 6vh}
 .ucp-ruler__nodes span{font-size:13px}
 .ucp-ruler__nodes em{display:none}
 .ucp-ruler__ends{bottom:-40px}
 .ucp-ruler__ends p{font-size:14px}
 .ucp-ruler__ends span{max-width:45%}
 .ucp-ruler__ends span:last-child{text-align:right}
 .ucp-int__tool{grid-template-columns:minmax(0,1fr)}
 .ucp-int__out,.ucp-int__chip{grid-column:1;grid-row:auto}
 .ucp-film__pin{position:relative;display:flex;flex-direction:column;height:auto;min-height:0;overflow:visible;padding:0 12px 6vh}
 .ucp-film__stage{order:-1;position:sticky;top:0;z-index:3;height:52svh;min-height:380px;background:var(--ucp-forest);padding:8px 0;gap:6px;border-bottom:1px solid #6bb68f80}
 .ucp-film__read p{font-size:14px;min-height:2.9em}
 .ucp-film__ctl .ucp-seg{display:none}
 .ucp-weftctl{min-width:0;width:100%}
 .ucp-film__side{padding:6vh 4px 0}
 .ucp-film__side h2{font-size:30px}
 .ucp-film__cards{margin-top:0;gap:0}
 .ucp-fcard{grid-area:auto;opacity:1;visibility:visible;transform:none;margin-top:30svh}
 .ucp-fcard:last-child{margin-bottom:8svh}
 .ucp-film__steps{display:none}
 .ucp-test{padding:9vh 16px 7vh}
 .ucp-test__grid{grid-template-columns:minmax(0,1fr)}
 .ucp-lensfig{height:auto;width:88vw;order:-1}
 .ucp-lensfig__orbit{position:static;margin-top:12px;container-type:normal}
 .ucp-lensfig__drift{position:static;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
 .ucp-lensfig__drift span{position:static;width:auto;height:auto;transform:none}
 .ucp-lensfig__drift b{transform:none}
 .ucp-lensfig__lens{position:relative;aspect-ratio:1}
 .ucp-close{padding:6vh 16px 4vh;display:block}
 .ucp-close__grid{grid-template-columns:minmax(0,1fr);gap:20px}
 .ucp-dialfig{height:auto;width:92vw}
 .ucp-thread{left:6px;top:calc(6vh + 46vw);width:calc(50% - 6px)}
 .ucp-checks{grid-template-columns:1fr}
 body[data-page=use-case-portfolio] .gft-footer__next::before{left:0}
}