/* The Ops Layer · Snapshot page. Builds on tokens/base/components (Home v3 system). */

/* hero */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.3) 50%,rgba(0,0,0,0) 72%),linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.2) 45%,rgba(0,0,0,0) 60%)}
.sentinel{position:absolute;top:120px;left:0;width:1px;height:1px}
.ol.js:not(.is-static) .hero [data-h]{opacity:0;translate:0 24px;filter:blur(6px);transition:opacity 1.3s var(--ex),translate 1.5s var(--ex),filter 1.3s var(--ex);transition-delay:var(--d,0ms)}
.ol.js:not(.is-static).loaded .hero [data-h]{opacity:1;translate:0 0;filter:blur(0)}

.sn-hero{min-height:max(780px,min(100vh,1080px));display:flex;flex-direction:column}
.sn-in{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;padding-top:116px;padding-bottom:26px}
.sn-h1{font-size:clamp(50px,6vw,106px);line-height:.95}
.sn-h1 .ln+.ln{padding-left:clamp(0px,7vw,124px)}
.sn-h1 .t{display:block;margin-top:clamp(16px,1.5vw,24px);padding-left:clamp(0px,7vw,124px);max-width:calc(19em + 124px);font-size:clamp(21px,1.9vw,31px);font-style:italic;font-weight:400;line-height:1.28;letter-spacing:-.008em;color:var(--on-d2)}
.sn-row{margin-top:clamp(32px,3vw,48px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px clamp(40px,7vw,120px);align-items:end}
.sn-body{display:flex;flex-direction:column;gap:16px}
.sn-body .hero-sub{font-size:clamp(15.5px,1.1vw,17px);line-height:1.68;color:var(--on-d2);max-width:52ch;text-wrap:pretty}
.sn-side{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.sn-nots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-family:var(--disp);font-style:italic;font-size:clamp(18px,1.4vw,21px);color:var(--on-d2)}
.btn .ic-dn{transition:transform .6s var(--ex)}
.btn:hover .ic-dn{transform:translateY(3px)}

/* the first question, asked in the hero */
.sn-try{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:20px clamp(32px,5vw,88px);align-items:center;padding:24px 0 30px;border-top:1px solid var(--hair2)}
.sn-try::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ex)}
.sn-try.done::after{transform:scaleX(1)}
.sn-try-t{font-family:var(--disp);font-weight:700;font-size:clamp(18px,1.4vw,22px);line-height:1.3;color:var(--fg);text-wrap:pretty}
.sn-try-r{min-height:0;font-family:var(--disp);font-style:italic;font-size:16px;line-height:1.5;color:var(--on-d2);opacity:0;translate:0 8px;transition:opacity .8s var(--ease),translate 1s var(--ex)}
.sn-try.done .sn-try-r{margin-top:12px;opacity:1;translate:0 0}
.sn-try-r a{color:var(--fg);text-underline-offset:4px;text-decoration-thickness:1px}
.sn-try-a{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.sn-o{position:relative;height:46px;padding:0 18px;border-radius:4px;border:1px solid rgb(255 255 255 / .22);background:rgb(255 255 255 / .04);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:14px;color:var(--on-d);overflow:hidden;transition:border-color .4s var(--ease),background-color .5s var(--ease),color .4s}
.sn-o:hover{border-color:rgb(255 255 255 / .55)}
.sn-o.on{background:#fff;border-color:#fff;color:#0F0F0F}
.sn-o.on::after,.ch input:checked+span::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:46%;pointer-events:none;background:linear-gradient(90deg,rgb(255 255 255 / 0),rgb(255 255 255 / .7) 50%,rgb(255 255 255 / 0));transform:translateX(-140%) skewX(-29deg);animation:sweep 1s var(--ex) forwards}
.sn-try.done .sn-o:not(.on){opacity:.5}

/* questionnaire */
.qz-sec{scroll-margin-top:60px}
.qz-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px clamp(40px,7vw,120px);align-items:end}
.qz-sub{font-size:15px;line-height:1.7;color:var(--on-d2);max-width:44ch}
.qz{position:relative;margin-top:clamp(64px,6vw,104px);display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start;padding-top:clamp(40px,4vw,64px);border-top:1px solid rgb(0 0 0 / .12)}
.qz{scroll-margin-top:120px}
.qz-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qz ::selection{background:#0F0F0F;color:#F6F5F2}

.qz-rail{position:sticky;top:140px}
.qz-rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.qz-ch{display:flex;flex-direction:column;gap:12px;padding:18px 0;border-bottom:1px solid rgb(0 0 0 / .08)}
.qz-ch:first-child{padding-top:0}
.qz-chn{font-size:14px;font-weight:700;color:var(--mute);transition:color .5s var(--ease)}
.qz-ch.cur .qz-chn,.qz-ch.done .qz-chn{color:var(--fg)}
.qz-tks{display:flex;gap:7px}
.qz-tk{width:16px;height:9px;border:1px solid rgb(0 0 0 / .28);border-radius:1px;transform:skewX(-29deg);transition:background-color .5s var(--ease),border-color .5s,transform .7s var(--ex)}
.qz-tk:hover{border-color:#0F0F0F}
.qz-tk.ok{background:#0F0F0F;border-color:#0F0F0F}
.qz-tk.cur{border-color:#0F0F0F;transform:skewX(-29deg) scale(1.35)}
.qz-tk:focus-visible{outline:2px solid #F26B21;outline-offset:3px}

.qz-stage{position:relative;min-width:0}
.qq{border:0;margin:0;padding:0;min-width:0}
.qq+.qq{margin-top:72px;padding-top:56px;border-top:1px solid rgb(0 0 0 / .08)}
.qq-t{display:block;width:100%;padding:0;font-family:var(--disp);font-weight:700;font-size:clamp(28px,2.7vw,44px);line-height:1.12;letter-spacing:-.016em;color:var(--fg);text-wrap:balance;max-width:20em}
.qq-h{padding-top:16px;font-size:16px;line-height:1.6;color:var(--on-d2)}
.qq-vz{margin-top:40px;max-width:520px}
.vz{display:block;width:100%;height:auto;overflow:visible}
.qq-o{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px}

.qq-pair{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 40px}
.qq-other{display:none;margin-top:28px;max-width:420px}
.qq:has(input[value="Other"]:checked) .qq-other{display:flex}

.qz-nav{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.qz-back{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--on-d2);transition:color .3s}
.qz-back .ic{font-size:15px;transform:rotate(180deg);transition:transform .5s var(--ex)}
.qz-back:hover{color:var(--fg)}
.qz-back:hover .ic{transform:rotate(180deg) translateX(4px)}
.qz-key{margin-left:auto;font-size:13px;color:var(--mute)}
.qz-foot{margin-top:28px;font-size:13px;line-height:1.6;color:var(--mute)}
.qz-next,.qz-back,.qz-key{display:none}
.qz-done{grid-column:1/-1;padding-block:40px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.qz-done[hidden]{display:none}
.qz-done .mk{font-size:72px;color:var(--fg)}
.qz-done h3{font-size:clamp(40px,4.4vw,72px)}
.qz-done p{font-size:17px;line-height:1.7;color:var(--on-d2);max-width:50ch}
.qz-done a{color:var(--fg);text-underline-offset:3px}

/* stepped mode (JS) */
.qz.on .qq{display:none;margin:0;padding:0;border:0}
.qz.on .qq.cur{display:block;animation:qin .9s var(--ex) both}
.qz.on.back .qq.cur{animation-name:qback}
@keyframes qin{from{opacity:0;translate:0 26px;filter:blur(6px)}}
@keyframes qback{from{opacity:0;translate:0 -26px;filter:blur(6px)}}
.qz.on .qz-stage{min-height:560px;display:flex;flex-direction:column}
.qz.on .qz-nav{margin-top:auto;padding-top:56px}
.qz.on .qz-next,.qz.on .qz-key{display:inline-flex}
.qz.on .qz-back{display:inline-flex}
.qz.on.first .qz-back{visibility:hidden}
.qz.on .qz-send,.qz.on.last .qz-next{display:none}
.qz.on.last .qz-send{display:inline-flex}
.qz:not(.on) .qz-rail{display:none}
.qz:not(.on){grid-template-columns:minmax(0,1fr)}
.qz.sent>:not(.qz-done){display:none}
.band-light .btn.qz-next::after,.band-light .btn.qz-send::after{background:linear-gradient(90deg,rgb(255 255 255 / 0),rgb(255 255 255 / .22) 50%,rgb(255 255 255 / 0))}
.qz.busy .qz-send{opacity:.6;pointer-events:none}

/* small drawings that answer back */
.vz text{font-family:var(--sans);font-size:12px;fill:#625F5C}
.vz .vz-nodes text{font-family:var(--disp);font-size:15px;fill:#1C1B1A}
.vz .vz-r text{font-family:var(--disp);font-style:italic;font-size:16px;fill:#1C1B1A}
.vz-base,.vz-t,.vz-in,.vz-dl{fill:none;stroke:rgb(0 0 0 / .28);stroke-width:1;vector-effect:non-scaling-stroke}
.vz-dl{stroke:#0F0F0F;stroke-dasharray:3 4}
.vz-band{fill:#0F0F0F;opacity:0;transform:translateX(var(--x,0px));transition:transform .9s var(--ex),opacity .5s}
.vz-scale.set .vz-band{opacity:1}
.vz-p{fill:transparent;stroke:rgb(0 0 0 / .25);stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;transition:fill .5s var(--ease),stroke .5s,transform 1s var(--ex);transition-delay:calc(var(--i) * 45ms)}
.vz-p.on{fill:#0F0F0F;stroke:#0F0F0F}
.vz-stack.over .vz-p:nth-child(n+11){transform:translate(10px,-14px) rotate(-18deg)}
.vz-stack.over .vz-p:nth-child(12){transform:translate(24px,8px) rotate(24deg)}
.vz-j{fill:#0F0F0F}
.vz-r{opacity:0;transition:opacity .5s var(--ease)}
.vz-r path{fill:none;stroke:#0F0F0F;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.vz-r .vz-dest{fill:#0F0F0F}
.vz-r.on{opacity:1}
.vz-r.on path{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ex)}
.vz-r.on path.vz-loop{stroke-dasharray:.035 .025;animation:loopin 6s linear infinite}
@keyframes loopin{to{stroke-dashoffset:-1}}
.vz-dot circle{fill:#0F0F0F}
.vz-dot{opacity:0;transform:translate(var(--x,260px),46px);transition:transform 1s var(--ex),opacity .4s}
.vz-time.set .vz-dot{opacity:1}
.vz-who{font-family:var(--disp)!important;font-style:italic;font-size:15px!important;fill:#1C1B1A!important;transition:opacity .4s}
.vz-line{fill:none;stroke:#0F0F0F;stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:d .9s var(--ex),opacity .5s;opacity:.18}
.vz-trend.set .vz-line{opacity:1}

/* what the Snapshot contains: the page itself, annotated */
.an-h{max-width:13em}
.anat{margin-top:clamp(72px,7vw,120px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,128px);align-items:start}
.anat-l{position:sticky;top:max(110px,calc(50vh - min(32vw,500px) * 1.294 / 2 + 30px))}
.sheet{--paper:#F4F3EF;--ink-p:#141413;--soft:#6B6863;position:relative;width:min(100%,500px);aspect-ratio:8.5/11;margin:0;container-type:inline-size;border-radius:3px;background:var(--paper);color:var(--ink-p);box-shadow:0 1px 0 rgb(255 255 255 / .6) inset,0 50px 120px -40px rgb(0 0 0 / .95),0 22px 40px -24px rgb(0 0 0 / .8);transform:perspective(1800px) rotateY(calc(var(--px,0) * 4deg)) rotateX(calc(var(--py,0) * -3deg));transition:transform 1.4s var(--ex)}
.sheet ::selection{background:#141413;color:#F4F3EF}
.sh-in{position:absolute;inset:0;padding:6cqw 8cqw 4.6cqw;display:flex;flex-direction:column}
.sh-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:3cqw;padding-bottom:2.8cqw;border-bottom:1px solid rgb(0 0 0 / .14)}
.sh-h .mk{font-size:7cqw;stroke-width:2.6}
.sh-h b{display:block;font-family:var(--disp);font-weight:700;font-size:3.8cqw;line-height:1.1;letter-spacing:-.01em}
.sh-h span{display:block;margin-top:.9cqw;font-size:2.5cqw;color:var(--soft)}
.sh-tag{align-self:start;font-family:var(--disp);font-size:2.7cqw;color:var(--soft)}
.sh-part{position:relative;padding-block:2.6cqw 2.3cqw;border-bottom:1px solid rgb(0 0 0 / .08);transition:opacity .9s var(--ease),filter .9s var(--ease)}
.sh-part:last-of-type{border-bottom:0}
.sh-part h4{margin:0 0 1.6cqw;font-family:var(--sans);font-weight:700;font-size:2.4cqw;letter-spacing:.01em;color:var(--soft)}
.sh-say{font-family:var(--disp);font-size:3.9cqw;line-height:1.2;letter-spacing:-.01em;color:var(--ink-p);text-wrap:balance}
.sh-blur{margin-top:1.4cqw;font-size:2.4cqw;line-height:1.55;color:#3B3936;filter:blur(2.4px);user-select:none}
.sh-opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw 4cqw}
.sh-opts li{position:relative;width:fit-content;font-size:2.6cqw;line-height:1.3;color:#8A8781}
.sh-opts li.pick{font-family:var(--disp);font-weight:700;font-size:3.2cqw;color:var(--ink-p)}
.sh-opts .ul{position:absolute;left:-2%;bottom:-1.6cqw;width:104%;height:1.6cqw;overflow:visible}
.sh-fit{display:flex;align-items:center;gap:6cqw;padding-block:1.4cqw .6cqw;padding-left:3cqw;font-size:2.8cqw;color:#8A8781}
.sh-fit .pick{position:relative;font-family:var(--disp);font-weight:700;font-size:3.9cqw;color:var(--ink-p)}
.sh-fit .loop-o{position:absolute;left:-38%;top:-46%;width:176%;height:192%;overflow:visible}
.sheet .ul path,.sheet .loop-o path,.tally path{fill:none;stroke:#141413;stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.6,.05,.3,1)}
.tally{margin-top:1.6cqw;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2.4cqw}
.tl-d{display:flex;flex-direction:column;gap:1cqw;padding-top:1.2cqw;border-top:1px solid rgb(0 0 0 / .12)}
.tl-d span{font-size:2.4cqw;color:var(--soft)}
.tl-d svg{display:block;width:78%;height:auto;overflow:visible}
.tally path{stroke-width:1.3;transition-duration:.28s;transition-delay:calc(var(--day) * 260ms + var(--k) * 70ms)}
/* frame: the mark's four brackets travel to the part being read */
.sh-frame{position:absolute;left:5.4cqw;right:5.4cqw;top:0;height:var(--fh,0px);transform:translateY(var(--fy,0px));pointer-events:none;transition:transform 1.1s var(--ex),height 1.1s var(--ex),opacity .6s}
.sh-frame b{position:absolute;width:3.4cqw;height:3.4cqw;border:0 solid #141413}
.sh-frame b:nth-child(1){left:0;top:0;border-top-width:1.5px;border-left-width:1.5px}
.sh-frame b:nth-child(2){right:0;top:0;border-top-width:1.5px;border-right-width:1.5px}
.sh-frame b:nth-child(3){right:0;bottom:0;border-bottom-width:1.5px;border-right-width:1.5px}
.sh-frame b:nth-child(4){left:0;bottom:0;border-bottom-width:1.5px;border-left-width:1.5px}

/* step states (JS sets data-step; without JS every part reads at full strength) */
.ol.js:not(.is-static) .sheet[data-step] .sh-part{opacity:.26;filter:blur(.6px)}
.ol.js:not(.is-static) .sheet[data-step="0"] .sh-part[data-p="0"],.ol.js:not(.is-static) .sheet[data-step="1"] .sh-part[data-p="1"],.ol.js:not(.is-static) .sheet[data-step="2"] .sh-part[data-p="2"],.ol.js:not(.is-static) .sheet[data-step="3"] .sh-part[data-p="3"]{opacity:1;filter:none}
.ol.js:not(.is-static) .sheet .sh-part.drawn path,.ol:not(.js) .sheet path,.ol.is-static .sheet path{stroke-dashoffset:0}
.ol:not(.js) .sh-frame,.ol.is-static .sh-frame{display:none}

.anat-parts{list-style:none;margin:0;padding:0}
.ap{min-height:min(76vh,720px);display:flex;flex-direction:column;justify-content:center;gap:22px;padding-block:40px;border-top:1px solid var(--hair);transition:opacity .8s var(--ease)}
.ap:first-child{border-top:0;min-height:min(60vh,560px);justify-content:flex-start;padding-top:clamp(20px,6vh,80px)}
.ap h3{font-size:clamp(32px,3.2vw,52px);line-height:1.04;color:var(--fg)}
.ap p{font-size:clamp(16px,1.2vw,18px);line-height:1.72;color:var(--on-d2);max-width:44ch;text-wrap:pretty}
.ap .ap-say{font-family:var(--disp);font-style:italic;font-size:clamp(21px,1.8vw,27px);line-height:1.3;color:var(--fg)}
.ap-list{list-style:none;margin:4px 0 0;padding:0;border-top:1px solid var(--hair);max-width:46ch}
.ap-list li{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid var(--hair);font-size:16px;line-height:1.5;color:var(--on-d2)}
.ap-list li::before{content:"";flex:none;width:10px;height:6px;background:currentColor;opacity:.4;transform:skewX(-29deg) translateY(-2px)}
.ap-list li:first-child{color:var(--fg)}
.ol.js:not(.is-static) .ap{opacity:.32}
.ol.js:not(.is-static) .ap.on{opacity:1}

@media (max-width:1100px){
.anat{grid-template-columns:minmax(0,1fr)}
.anat-l{position:relative;top:0}
.sheet{margin-inline:auto}
.ap,.ap:first-child{min-height:0;padding-block:36px}
.ol.js:not(.is-static) .ap{opacity:1}
.ol.js:not(.is-static) .sheet[data-step] .sh-part{opacity:1;filter:none}
.ol.js:not(.is-static) .sheet .sh-part path{stroke-dashoffset:0}
.sh-frame{display:none}
.sn-row,.qz-head{grid-template-columns:minmax(0,1fr)}
.sn-try{grid-template-columns:minmax(0,1fr)}
.sn-try-a{justify-content:flex-start}
.qz{grid-template-columns:minmax(0,1fr);gap:32px}
.qz-rail{position:relative;top:0}
.qz-rail ol{position:relative;flex-direction:row;flex-wrap:wrap;gap:10px 16px;padding-top:30px}
.qz-ch{display:block;padding:0;border:0}
.qz-chn{display:none}
.qz-ch.cur .qz-chn{display:block;position:absolute;left:0;top:0}
}
@media (max-width:760px){
.sn-in{padding-top:130px}
.sn-h1 .ln+.ln,.sn-h1 .t{padding-left:0}
.sheet{aspect-ratio:auto}
.sh-in{position:relative;inset:auto}
.qq-pair{grid-template-columns:minmax(0,1fr)}
.qz.on .qz-stage{min-height:0}
.qz-key{display:none!important}
}
@media (prefers-reduced-motion:reduce){
.ol *,.ol *::before,.ol *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
@media (hover:none){.ch span i{display:none}.ch span{padding-left:20px}}

/* why it is free: the questions are the point */
.wf-h{font-size:clamp(46px,5.6vw,96px);max-width:10em}
.wf-a,.wf-b,.wf-c{margin-top:clamp(96px,10vw,170px)}
.wf-a{margin-top:clamp(72px,7vw,112px)}
.wf-lead{font-size:clamp(19px,1.55vw,24px);line-height:1.55;font-weight:300;color:var(--on-d);max-width:40ch;text-wrap:pretty}
/* ten ticks; the sixth is where it usually clicks */
.six{position:relative;margin-top:clamp(56px,5vw,80px);padding-block:10px}
.sx-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(8px,1.2vw,18px)}
.sx-t{display:block;height:clamp(28px,2.6vw,40px);border:1px solid rgb(255 255 255 / .22);border-radius:2px;transform:skewX(-29deg);transition:background-color .6s var(--ease),border-color .6s,transform 1.2s var(--ex),box-shadow 1.2s var(--ease);transition-delay:calc(var(--i) * 140ms)}
.six.in .sx-t:nth-child(-n+5){background:rgb(255 255 255 / .16);border-color:rgb(255 255 255 / .3)}
.six.in .sx-t:nth-child(6){background:#F0EFEE;border-color:#F0EFEE;transform:skewX(-29deg) translateY(-10px);box-shadow:0 18px 40px -16px rgb(0 0 0 / .9)}
.six.in .sx-t:nth-child(n+7){border-color:rgb(255 255 255 / .12)}
.sx-lead{position:absolute;left:calc(55% - 2px);top:100%;width:1px;height:46px;background:rgb(255 255 255 / .4);transform:scaleY(0);transform-origin:top;transition:transform .9s var(--ex) 1.3s}
.six.in .sx-lead{transform:scaleY(1)}
.sx-cap{margin-top:62px;margin-left:calc(55% - 2px);padding-left:20px;max-width:30ch;font-family:var(--disp);font-size:clamp(20px,1.7vw,26px);line-height:1.3;color:var(--on-d2)}
.sx-cap em{color:var(--fg)}
.ol.js:not(.is-static) .sx-cap{transition-delay:1.5s}
.ol:not(.js) .sx-t:nth-child(6),.ol.is-static .sx-t:nth-child(6){background:#F0EFEE}
/* same answer four times, against four answers to one question */
.cmp{margin-top:clamp(48px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--hair2)}
.cmp-c{padding:32px 0 8px}
.cmp-c+.cmp-c{padding-left:clamp(32px,4vw,64px);border-left:1px solid var(--hair)}
.cmp-same{padding-right:clamp(32px,4vw,64px)}
.cmp-h{font-size:13px;font-weight:700;color:var(--on-d3);margin-bottom:26px}
.cmp ul{list-style:none;margin:0;padding:0;position:relative}
.cmp li{display:grid;grid-template-columns:minmax(0,9.5em) auto;align-items:baseline;gap:20px;padding:15px 0;border-bottom:1px solid var(--hair)}
.cmp li span{font-size:14px;color:var(--on-d3)}
.cmp li b{font-family:var(--disp);font-weight:700;font-size:clamp(19px,1.6vw,25px);line-height:1.2;color:var(--fg);width:fit-content;transition:translate 1.4s var(--ex),rotate 1.4s var(--ex),opacity 1s;transition-delay:calc(var(--k,0) * 110ms + .4s)}
.cmp li:nth-child(2) b{--k:1}.cmp li:nth-child(3) b{--k:2}.cmp li:nth-child(4) b{--k:3}
.ol.js:not(.is-static) .cmp-same b{translate:var(--o) 0;opacity:.5}
.ol.js:not(.is-static) .cmp.in .cmp-same b{translate:0 0;opacity:1}
.cmp-same ul::after{content:"";position:absolute;left:calc(9.5em + 10px);top:8px;bottom:8px;width:1px;background:rgb(255 255 255 / .5);transform:scaleY(0);transform-origin:top;transition:transform 1.2s var(--ex) 1.1s}
.cmp.in .cmp-same ul::after,.ol:not(.js) .cmp-same ul::after,.ol.is-static .cmp-same ul::after{transform:scaleY(1)}
.cmp-diff b{color:var(--on-d2)}
.ol.js:not(.is-static) .cmp.in .cmp-diff b,.ol:not(.js) .cmp-diff b{translate:var(--o) 0;rotate:var(--r)}
.wf-body{margin-top:44px;max-width:62ch;font-size:16.5px;line-height:1.75;color:var(--on-d2)}
.wf-body em{font-family:var(--disp);font-size:1.25em;color:var(--fg)}
/* the logo's three planes as the three layers of evidence */
.lay{position:relative;margin-top:clamp(56px,5vw,80px);display:flex;flex-direction:column;gap:12px;padding-right:clamp(170px,17vw,250px)}
.lay-p{position:relative;width:var(--w);height:clamp(58px,5.4vw,82px);margin-left:clamp(0px,1.6vw,26px);transform:skewX(-29deg);border:1px solid rgb(255 255 255 / .3);border-radius:2px;display:flex;align-items:center;padding-left:clamp(26px,2.4vw,40px);transition:background-color .8s var(--ease),border-color .8s,translate 1.4s var(--ex),opacity 1s var(--ease);transition-delay:calc(var(--i) * 160ms)}
.lay-p span{transform:skewX(29deg);font-family:var(--disp);font-size:clamp(16px,1.35vw,21px);color:var(--fg);white-space:nowrap}
.lay-p:first-child{background:#F0EFEE;border-color:#F0EFEE}
.lay-p:first-child span{color:#0F0F0F;font-weight:700}
.ol.js:not(.is-static) .lay .lay-p{translate:-40px 0;opacity:0}
.ol.js:not(.is-static) .lay.in .lay-p{translate:0 0;opacity:1}
.lay-b{position:absolute;right:0;width:clamp(150px,15vw,220px);display:flex;align-items:center;gap:16px;font-family:var(--disp);font-style:italic;font-size:clamp(17px,1.4vw,21px);color:var(--fg)}
.lay-b b{font-weight:400}
.lay-b::before{content:"";width:clamp(40px,5vw,80px);height:1px;background:rgb(255 255 255 / .45)}
.lay-b1{top:calc(clamp(58px,5.4vw,82px) / 2);translate:0 -50%}
.lay-b2{top:calc(clamp(58px,5.4vw,82px) + 12px);height:calc(clamp(58px,5.4vw,82px) * 2 + 12px);border-left:1px solid rgb(255 255 255 / .45);padding-left:0}
.lay-b2::before{width:clamp(24px,3vw,48px)}
.wf-end{margin-top:clamp(72px,7vw,112px);font-size:clamp(34px,3.8vw,64px);max-width:16em;color:var(--fg)}

/* what happens next: one line, then a fork */
.fork{position:relative;margin-top:clamp(64px,6vw,104px);height:520px}
.fork-l{position:absolute;inset:0 0 auto 0;width:100%;height:460px;overflow:visible}
.fork-l path{fill:none;stroke:rgb(255 255 255 / .5);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.fork.in .fork-l .f0,.ol:not(.js) .fork-l path,.ol.is-static .fork-l path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ex) .2s}
.fork.in .fork-l .f1,.fork.in .fork-l .f2{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ex) 1.5s}
.fk{position:absolute;padding-top:26px;max-width:min(34ch,30%)}
.fk i{position:absolute;left:0;top:-6px;width:12px;height:12px;border-radius:50%;background:#000;border:1.5px solid var(--fg);transform:scale(0);transition:transform .7s var(--ex)}
.fk h3{font-family:var(--disp);font-weight:700;font-size:clamp(22px,1.9vw,30px);line-height:1.1;letter-spacing:-.012em;color:var(--fg)}
.fk p{margin-top:12px;font-size:15.5px;line-height:1.7;color:var(--on-d2)}
.fk .lk{margin-top:18px}
.fk0{left:0;top:calc(210 / 460 * 460px)}
.fk1{left:30%;top:210px}
.fk2{left:69%;top:70px}
.fk3{left:69%;top:340px}
.fk0 i,.fk1 i{top:-6px}
.fork.in .fk0 i{transform:scale(1);transition-delay:.2s}
.fork.in .fk1 i{transform:scale(1);transition-delay:.9s}
.fork.in .fk2 i,.fork.in .fk3 i{transform:scale(1);transition-delay:2.4s}
.ol.js:not(.is-static) .fk{opacity:0;translate:0 14px;transition:opacity 1s var(--ease),translate 1.2s var(--ex)}
.ol.js:not(.is-static) .fork.in .fk{opacity:1;translate:0 0}
.fork.in .fk1{transition-delay:.8s}
.fork.in .fk2,.fork.in .fk3{transition-delay:2.2s}
.ol:not(.js) .fk i,.ol.is-static .fk i{transform:scale(1)}
.nx-sec .mail{margin-top:clamp(40px,4vw,64px)}

.faq-a a{color:var(--fg);text-underline-offset:3px}
.sn-final .final-ctas{margin-top:56px}
.btn .ic-up{transition:transform .6s var(--ex)}
.btn:hover .ic-up{transform:translateY(-3px)}

@media (max-width:1100px){
.cmp{grid-template-columns:minmax(0,1fr)}
.cmp-c+.cmp-c{padding-left:0;border-left:0;border-top:1px solid var(--hair);margin-top:24px}
.cmp-same{padding-right:0}
.lay{padding-right:0}
.lay-b{display:none}
.lay-p{width:calc(100% - 28px)!important;margin-left:14px}
.fork{height:auto;padding-left:28px;border-left:1px solid rgb(255 255 255 / .4);display:flex;flex-direction:column;gap:44px}
.fork-l{display:none}
.fk{position:relative;left:auto!important;top:auto!important;max-width:52ch;padding-top:0}
.fk i{left:-35px;top:8px}
.fk2,.fk3{margin-left:20px}
.fk2 i,.fk3 i{left:-55px}
}
@media (max-width:760px){
.sx-cap,.sx-lead{margin-left:0;left:0}
.sx-lead{display:none}
.sx-cap{margin-top:28px;padding-left:0}
.cmp li{grid-template-columns:minmax(0,1fr)}
.cmp-same ul::after{display:none}
.ol.js:not(.is-static) .cmp.in .cmp-diff b{translate:calc(var(--o) * .3) 0}
.lay-p span{white-space:normal;font-size:15px;line-height:1.2}
.lay-p{height:auto;min-height:58px;padding-block:10px}
}

/* Diagram pass (6 Oct 2026) */
/* the pointer under the sixth tick hung 20px below it (section padding plus the tick's lift) */
.sx-lead{top:calc(100% - 20px);height:66px}
/* the third plane ran through the Sprint bracket: margin and skew push planes ~44px past their box */
@media (min-width:1101px){.lay{padding-right:calc(clamp(150px,15vw,220px) + 64px)}}