/* Workforce and HR rebuild: generated by pages/explorations/domains-v2/build.mjs from the Enrollment rebuild study
   (Maria, 2026-11-08). Edit page.json and domain.js in domains-v2/workforce-hr/, or the shared shell in enrollment-v2.
   - Light sections tell the human story with drawn art that has texture and depth (iso plates, the domain's dot grid).
   - Dark blueprint sections carry the technical detail, drawn linear and dense, one thing in focus.
   - Each section is framed one idea at a time; pinned scenes step through a process.
   - Motion is critically damped: springs settle without bounce, fades use a soft ease-out.
   Copy is unchanged; the copy notes overlay holds the suggested edits. */
@font-face{font-family:Founders;font-weight:600;font-display:swap;src:url("https://cdn.prod.website-files.com/6994ecf1007f8acee42ae620/6994ecf1007f8acee42ae64b_FoundersGrotesk-Semibold.otf") format("opentype")}
@font-face{font-family:Founders;font-weight:500;font-display:swap;src:url("https://cdn.prod.website-files.com/6994ecf1007f8acee42ae620/6994ecf1007f8acee42ae646_FoundersGrotesk-Medium.otf") format("opentype")}
:root{
  --ink:#141106;--ink2:#242116;--n800:#464238;--n700:#63615a;--n600:#767571;--n500:#9e9e9e;--n400:#bebdb9;--n300:#e2e0d9;--n200:#f0eee7;--n100:#f7f5ef;--p50:#fafaf8;
  --dom:#73a885;--dom2:#e2f8da;--dom3:#cbf2bd;--dom4:#a8cf9a;--dom6:#608752;--dom7:#4c733e;
  --edge:max(clamp(16px,3.4vw,48px),calc((100% - 1320px) / 2 + clamp(16px,3.4vw,48px)));
  --sans:"Inter",system-ui,sans-serif;--head:Founders,"Inter",sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.4,0,.2,1);--out:cubic-bezier(.22,1,.36,1);
  --navh:0px;
}
.ev *{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
.ev{margin:0;background:var(--p50);color:var(--ink);font:400 17px/1.55 var(--sans)}
.ev p,.ev h1,.ev h2,.ev h3,.ev h4,.ev ul,.ev ol{margin:0}
.ev h1,.ev h2,.ev h3{text-wrap:balance}
.ev p,.ev span,.ev li{text-wrap:pretty}
.ev a{color:inherit}
.ev .wrap{padding:0 var(--edge)}
.ev section{position:relative}
.ev .btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:6px;font:500 15px var(--sans);text-decoration:none;white-space:nowrap;border:1px solid var(--ink);transition:background .2s var(--ease),color .2s var(--ease)}
.ev .btn-ink{background:var(--ink);color:var(--p50)}
.ev .btn-ink:hover{background:var(--ink2)}
.ev .btn-line{background:transparent;color:var(--ink)}
.ev .btn-line:hover{background:var(--ink);color:var(--p50)}

/* type: Founders only for the one key heading per screen */
.ev .h1{font:600 clamp(44px,5.6vw,76px)/.98 var(--head);letter-spacing:-.015em}
.ev .h2{font:600 clamp(34px,3.9vw,54px)/1.02 var(--head);letter-spacing:-.015em}
/* a statement: the heading in ink, its lede running on in gray */
.ev .say{font:500 clamp(28px,3.1vw,44px)/1.12 var(--head);letter-spacing:-.01em}
.ev .say b{font-weight:600}
.ev .say span{color:var(--n600)}
.ev .dark .say span{color:#8f8d86}
.ev .lede{font-size:20px;line-height:1.5;color:var(--n800);max-width:40ch}
.ev .lab{font:600 15px/1.4 var(--sans);color:var(--n700)}

/* hero */
.ev .hero{background:var(--dom);padding:72px 0 64px;overflow:hidden}
.ev .hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
.ev .hero .lab{color:var(--ink);margin-bottom:20px}
.ev .hero .lede{color:var(--ink);margin-top:24px;max-width:34ch}
.ev .hero .for{margin-top:20px;font-size:15px}
.ev .hero .for b{font-weight:600}
.ev .hero .act{display:flex;gap:12px;margin-top:32px}
.ev .hero canvas{display:block;width:min(100%,520px);aspect-ratio:5/4;margin-left:auto}
.ev .grain{position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.9'/></svg>")}

/* section heads */
.ev .head{padding-top:120px}
.ev .head .say,.ev .head .h2{max-width:22ch}
.ev .head.c{text-align:center}
.ev .head.c .say,.ev .head.c .h2{margin:0 auto;max-width:26ch}
/* centered section ledes get room for two even lines (Maria, 2026-11-09: no widows under the model and measure heads) */
.ev .head.c .lede{max-width:46ch;margin-left:auto;margin-right:auto;text-wrap:balance}

/* a pinned scene: a rail of steps on the left, one frame of art on the right */
.ev .scene{height:calc(var(--steps) * 92vh + 8vh)}
.ev .stage{position:sticky;top:var(--navh);height:calc(100vh - var(--navh));display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:center;padding:0 var(--edge)}
.ev .rail{list-style:none;padding:0;display:grid;gap:6px;position:relative}
.ev .rail li{position:relative;padding:14px 0 14px 22px;cursor:pointer;color:var(--n500);transition:color .35s var(--ease)}
.ev .rail li::before{content:"";position:absolute;left:0;top:22px;width:7px;height:7px;border-radius:50%;background:var(--n400);transition:background .35s var(--ease),transform .5s var(--out)}
.ev .rail li.on{color:var(--ink)}
.ev .rail li.on::before{background:var(--ink);transform:scale(1.3)}
.ev .rail h3{font:600 19px/1.3 var(--sans);letter-spacing:-.005em;color:inherit}
.ev .rail .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--out),opacity .35s var(--ease);opacity:0}
.ev .rail .more>div{overflow:hidden}
.ev .rail li.on .more{grid-template-rows:1fr;opacity:1}
.ev .rail .more p{padding-top:8px;font-size:16px;color:var(--n800);max-width:38ch}
.ev .rail .kind{font:500 13px var(--sans);color:inherit;margin-bottom:2px;opacity:.8}
.ev .rail .uses{margin-top:10px;font-size:14px;color:var(--n600)}
.ev .rail .uses b{font-weight:500;color:var(--ink)}
.ev .dark .rail li{color:#6f6c64}
.ev .dark .rail li.on{color:var(--p50)}
.ev .dark .rail li::before{background:#4a473f}
.ev .dark .rail li.on::before{background:var(--p50)}
.ev .dark .rail .more p{color:#cfccc4}
.ev .fig{position:relative;height:min(78vh,620px)}
.ev .fig > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ev .frame{opacity:0;transition:opacity .45s var(--ease)}
.ev .frame.on{opacity:1}

/* art */
.ev .k1{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ev .k0{fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.ev .kh{fill:none;stroke:var(--ink);stroke-width:.7;stroke-linecap:round;opacity:.55}
.ev .kd{fill:none;stroke:var(--ink);stroke-width:1.1;stroke-dasharray:1.5 4;stroke-linecap:round}
.ev .tk{stroke:var(--ink);stroke-width:1;opacity:.28}
.ev .al{font:500 14px var(--sans);fill:var(--ink)}
.ev .as{font:400 13px var(--sans);fill:var(--n600)}
.ev .am{font:400 12px var(--mono);fill:var(--n600)}
.ev .hot{fill:var(--dom)}
.ev .dark .k1,.ev .dark .k0{stroke:#d6d3cb}
.ev .dark .kd{stroke:#8f8d86}
.ev .dark .tk{stroke:#d6d3cb;opacity:.22}
.ev .dark .kh{stroke:#d6d3cb}
.ev .dark .al{fill:#ebe9e2}
.ev .dark .as{fill:#8f8d86}
.ev .dark .am{fill:#8f8d86}
.ev .glow circle{fill:var(--dom)}
.ev .dark .glow circle{fill:var(--dom4)}
.ev .gl1{animation:shim 3.2s ease-in-out infinite}
.ev .gl2{animation:shim 3.2s ease-in-out -1.1s infinite}
.ev .gl3{animation:shim 3.2s ease-in-out -2.2s infinite}
@keyframes shim{0%,100%{opacity:.35}
.ev 50%{opacity:1}
.ev }
.pill rect{fill:var(--p50);stroke:var(--dom);stroke-width:1.5}
.ev .pill text{font:500 13px var(--mono);fill:var(--ink)}
.ev .dark .pill rect{fill:#141106;stroke:var(--dom4)}
.ev .dark .pill text{fill:#f4f2ec}

/* dark blueprint */
.ev .dark{background:var(--ink);color:var(--p50)}
.ev .dark .lab{color:#a3a097}
.ev .dark::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(250,250,248,.11) 1px,transparent 1.2px);background-size:24px 24px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 160px,#000 calc(100% - 160px),transparent);mask-image:linear-gradient(180deg,transparent,#000 160px,#000 calc(100% - 160px),transparent)}

/* the model */
.ev .model{padding:0 var(--edge) 40px;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:40px;align-items:center;margin-top:48px}
.ev .model svg{width:100%;height:auto;overflow:visible;display:block}
.ev .read{padding:4px 0;min-height:380px}
.ev .read .k{font:500 13px var(--sans);color:#a3a097;margin-bottom:8px}
.ev .read h3{font:600 30px/1.1 var(--head);margin-bottom:14px}
.ev .read p{color:#d6d3cb;font-size:16px;max-width:34ch}
.ev .read ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px}
.ev .read li{font-size:15px;color:#a3a097}
.ev .read li b{color:var(--p50);font-weight:500;cursor:pointer;text-decoration:underline;text-decoration-color:#6a675f;text-underline-offset:3px}
.ev .read .lg{margin-top:22px;display:grid;gap:8px}
.ev .read .lg div{display:flex;align-items:center;gap:8px;font:400 13px/1.4 var(--mono);color:#d6d3cb}
.ev .read .lg svg.mk{color:#bebdb9}
.ev .read .lg i{font-style:normal;color:#8f8d86;font-family:var(--sans);margin-right:2px}
.ev .cap{margin-top:10px;font-size:14px;color:#8f8d86}
.ev .node{cursor:pointer}
.ev .node .nt{fill:#2e2b22;stroke:#bebdb9;stroke-width:1;transition:fill .3s var(--ease),stroke .3s var(--ease)}
.ev .node .nl{fill:#1f1c14;stroke:#bebdb9;stroke-width:1;transition:fill .3s var(--ease)}
.ev .node .nr{fill:#171409;stroke:#bebdb9;stroke-width:1;transition:fill .3s var(--ease)}
.ev .node text{font:500 13px var(--sans);fill:#d6d3cb;paint-order:stroke;stroke:#141106;stroke-width:4px;stroke-linejoin:round;transition:fill .3s var(--ease)}
.ev .node:hover text{fill:#fff}
.ev .node.on .nt{fill:var(--dom);stroke:var(--dom3)}
.ev .node.on .nl{fill:var(--dom6)}
.ev .node.on .nr{fill:var(--dom7)}
.ev .node.on text,.ev .node.nb text{fill:#fff}
.ev .ic path{fill:none;stroke:#bebdb9;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke .3s var(--ease)}.ev .ic-p path{stroke:#e2e0d9;stroke-width:1.5}
.ev .node.on .ic path{stroke:var(--dom4)}.ev .node.nb .ic path{stroke:#f4f2ec}
.ev .edge path{stroke:#5c594f;stroke-width:1;fill:none;transition:stroke .3s var(--ease)}
.ev .edge text{font:400 11px var(--sans);fill:#77746c;paint-order:stroke;stroke:#141106;stroke-width:3px;opacity:0;transition:opacity .3s var(--ease),fill .3s var(--ease)}
.ev .edge.on path{stroke:var(--dom4);stroke-width:1.4}
.ev .edge.on text{opacity:1;fill:var(--dom3)}
.ev .logic{transition:opacity .4s var(--ease);opacity:0}
.ev .logic text{font:400 12px var(--mono);fill:#d6d3cb}
.ev .logic .lk{font:500 11px var(--sans);fill:#8f8d86}
.ev .logic line{stroke:#8f8d86;stroke-dasharray:1.5 3.5;stroke-linecap:round}
.ev .logic.on{opacity:1}
/* the floating logic labels are gone: each object carries its mark, and the panel names the logic (Maria, 2026-11-08) */
.ev .logic{display:none}
.ev .edge text.nofit{display:none}
.ev .sys text{font:500 12px var(--sans);fill:#a3a097}

/* what it enables: six ideas, a line drawing each */
.ev .six{padding:96px var(--edge) 140px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 48px}
.ev .six>h3{grid-column:1/-1;font:600 clamp(30px,3vw,40px)/1.05 var(--head);letter-spacing:-.01em}
.ev .six svg{width:100%;height:auto;display:block;overflow:visible;margin-bottom:20px}
.ev .lead{font-size:17px;line-height:1.5;color:var(--n600);max-width:34ch}
.ev .lead b{font-weight:600;color:var(--ink)}
.ev .dark .lead{color:#a3a097}
.ev .dark .lead b{color:var(--p50)}

/* outcomes */
.ev .out{background:var(--n100);padding:0 0 120px}
.ev .out ol{list-style:none;padding:0 var(--edge);margin-top:56px}
.ev .out li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;padding:32px 0;border-top:1px solid var(--n300);align-items:center}
.ev .out .t{display:flex;gap:18px;align-items:baseline}
.ev .out .t b{font:600 40px/1 var(--head);color:var(--n400);min-width:26px}
.ev .out .t h3{font:600 21px/1.28 var(--sans);letter-spacing:-.01em}
.ev .out .d p{font-size:18px;color:var(--ink)}
.ev .out .d p+p{font-size:15px;color:var(--n600);margin-top:8px}
.ev .out svg{width:100%;height:auto;max-height:84px;overflow:visible}

/* measurement */
.ev .meas{padding:0 0 120px}
.ev .meas .three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding:0 var(--edge);margin-top:40px}
.ev .meas .three p{font:500 24px/1.2 var(--head);color:var(--p50)}
.ev .meas .three span{display:block;margin-top:10px;font:400 15px/1.4 var(--sans);color:#8f8d86}
.ev .meas svg{display:block;width:calc(100% - 2*var(--edge));margin:56px var(--edge) 0;height:auto;overflow:visible}
.ev .nx{display:flex;justify-content:space-between;padding:40px var(--edge);border-top:1px solid var(--n300)}
.ev .nx span{display:block;font-size:14px;color:var(--n600)}
.ev .nx b{font:600 26px var(--head)}
.ev .cta{background:var(--n100);padding:72px 0}
.ev .cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.ev .cta p{font:500 clamp(24px,2.4vw,32px)/1.2 var(--head);max-width:30ch}
.ev .cta .act{display:flex;gap:12px}

/* phones: no pinning, every step shown in order */
@media (max-width:900px){
.ev .hero .wrap,.ev .model,.ev .six,.ev .meas .three,.ev .out li{grid-template-columns:1fr}
.ev .scene{height:auto}
.ev .stage{position:static;height:auto;grid-template-columns:1fr;padding-top:24px;padding-bottom:48px}
.ev .rail li .more{grid-template-rows:1fr;opacity:1}
.ev .fig{height:auto;aspect-ratio:3/2}
.ev .rail{gap:40px}.ev .rail li{padding-left:0;cursor:default}.ev .rail li::before{display:none}.ev .mfig{display:block;width:100%;height:auto;margin-top:20px;overflow:visible}
.ev .read{min-height:0}
}
@media (prefers-reduced-motion:reduce){
.ev *{transition-duration:.01s!important;animation:none!important}}

/* copy notes overlay, Hemingway style */
.cn-btn{position:fixed;right:20px;bottom:20px;z-index:2147482000;display:flex;gap:8px;align-items:center;height:42px;padding:0 16px;border-radius:21px;border:1px solid var(--ink);background:var(--p50);color:var(--ink);font:500 14px var(--sans);cursor:pointer;box-shadow:0 6px 20px rgba(20,17,6,.12)}
.cn-btn i{font-style:normal;display:grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:var(--ink);color:var(--p50);font-size:12px}
body.cn .ev [data-cn]{border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone;cursor:pointer;color:var(--ink)!important}
body.cn .ev [data-ck=repeat]{background:rgba(238,175,209,.75)}
body.cn .ev [data-ck=hard]{background:rgba(241,181,88,.6)}
body.cn .ev [data-ck=vague]{background:rgba(162,197,235,.75)}
body.cn .ev [data-ck=passive]{background:rgba(168,207,154,.75)}
body.cn .ev [data-cn]::after{content:attr(data-cn);display:inline-grid;place-items:center;min-width:17px;height:17px;margin-left:5px;padding:0 4px;border-radius:9px;background:var(--ink);color:var(--p50);font:600 10px/1 var(--sans);vertical-align:.35em;letter-spacing:0}
body.cn .ev [data-cn].cn-hot{outline:2px solid var(--ink);outline-offset:2px}
.cn-pane{position:fixed;top:116px;right:20px;bottom:76px;width:min(400px,calc(100vw - 40px));z-index:2147481999;background:var(--p50);border:1px solid var(--n300);border-radius:12px;box-shadow:0 18px 50px rgba(20,17,6,.16);display:none;flex-direction:column;overflow:hidden;color:var(--ink)}
body.cn .cn-pane{display:flex}
.cn-pane header{padding:18px 20px 14px;border-bottom:1px solid var(--n300)}
.cn-pane header b{font:600 20px var(--head)}
.cn-pane header p{font-size:13px;color:var(--n600);margin-top:4px}
.cn-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12.5px;color:var(--n700)}
.cn-key span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.cn-key .r::before{background:rgba(238,175,209,.9)}
.cn-key .h::before{background:rgba(241,181,88,.8)}
.cn-key .v::before{background:rgba(162,197,235,.9)}
.cn-key .p::before{background:rgba(168,207,154,.9)}
.cn-list{overflow:auto;padding:6px 0;flex:1}
.cn-item{padding:14px 20px;border-bottom:1px solid var(--n200);cursor:pointer}
.cn-item:hover,.cn-item.cn-hot{background:var(--n100)}
.cn-item .m{display:flex;gap:8px;align-items:center;font:500 12px var(--sans);color:var(--n600)}
.cn-item .m i{font-style:normal;display:grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--ink);color:var(--p50);font-size:10px}
.cn-item del{display:block;margin-top:8px;font-size:13.5px;color:var(--n600);text-decoration-color:rgba(20,17,6,.35)}
.cn-item ins{display:block;margin-top:6px;font-size:14.5px;color:var(--ink);text-decoration:none;font-weight:500}
.cn-item .w{margin-top:6px;font-size:12.5px;color:var(--n700)}
.cn-reps{padding:14px 20px;border-top:1px solid var(--n300);font-size:12.5px;color:var(--n700);line-height:1.6}
.cn-reps b{font-weight:600;color:var(--ink)}
/* live style check (CSS Custom Highlight API: painted over the text, never written into it) */
::highlight(cn-avoid){background:rgba(251,150,167,.55);color:#141106}
::highlight(cn-hard){background:rgba(241,181,88,.55);color:#141106}
::highlight(cn-vague){background:rgba(162,197,235,.7);color:#141106}
::highlight(cn-passive){background:rgba(168,207,154,.7);color:#141106}
.cn-key .a::before{background:rgba(251,150,167,.8)}
body.cn .ev [contenteditable][data-cn]::after,html.cve-on body.cn .ev [data-cn]::after{display:none}
html.cve-on body.cn .ev [data-ck],html.cn-local body.cn .ev [data-ck]{background:none}
html.cn-local .ev [contenteditable]{outline:2px solid #7065da;outline-offset:3px;caret-color:#7065da}
html.cn-local .ev :is(h1,h2,h3,h4,p,li,.lead):hover{outline:1.5px solid #998eff;outline-offset:3px;cursor:text}
.cn-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cn-edit{border:1px solid var(--ink);background:var(--ink);color:var(--p50);height:32px;padding:0 14px;border-radius:16px;font:500 13px var(--sans);cursor:pointer}
.cn-edit[aria-pressed=true]{background:var(--p50);color:var(--ink)}
.cn-list section{padding:4px 0 8px}
.cn-list h4{display:flex;justify-content:space-between;gap:12px;padding:14px 20px 6px;font:600 13px var(--sans);color:var(--ink)}
.cn-list h4 span{font-weight:400;color:var(--n600);text-align:right}
.cn-now{background:#f6f5fb;border-bottom:1px solid var(--n300)}
.cn-flag{padding:10px 20px;border-bottom:1px solid var(--n200);cursor:pointer}
.cn-flag:hover{background:var(--n100)}
.cn-flag .m{display:flex;gap:8px;align-items:center;font:500 12px var(--sans);color:var(--n600)}
.cn-flag .sw{width:10px;height:10px;border-radius:2px}
.cn-flag[data-ck=avoid] .sw{background:rgba(251,150,167,.9)}.cn-flag[data-ck=hard] .sw{background:rgba(241,181,88,.9)}
.cn-flag[data-ck=vague] .sw{background:rgba(162,197,235,.95)}.cn-flag[data-ck=passive] .sw{background:rgba(168,207,154,.95)}
.cn-flag .hit{margin-top:6px;font-size:14px;color:var(--ink)}
.cn-flag .w{margin-top:4px;font-size:12.5px;color:var(--n700)}
.cn-clear{padding:6px 20px 12px;font-size:13px;color:var(--n600)}
.cn-item .m em{font-style:normal;margin-left:auto;color:#00935b}
.cn-item.cn-done del,.cn-item.cn-done ins{opacity:.5}
.cn-use{margin-top:10px;border:1px solid var(--n400);background:#fff;color:var(--ink);height:28px;padding:0 12px;border-radius:14px;font:500 12.5px var(--sans);cursor:pointer}
.cn-use:hover{border-color:var(--ink)}

.ev .dark .nb .al.nbn{font-size:22px;font-weight:600}
.ev .dark text.nbe{font:500 13px var(--sans);fill:#a3a097;letter-spacing:0}
.ev .dark .xl path{fill:none;stroke:#bebdb9;stroke-width:1;stroke-dasharray:3 4}
.ev .dark .xl text{font-size:12px;fill:#bebdb9}
.ev .w3 .chs{display:none}@media (max-width:900px){.ev .w3 article:nth-child(1) text.as,.ev .w3 .chp{display:none}.ev .w3 .chs{display:inline}}


/* The model's key is gone (Maria, 2026-11-08: "hide the legend everywhere and fold that icon set where needed into the
   explainer of each object"): each mark now sits beside its own label, in the object readout and on the tiles. */
.ev .legend{display:none!important}
.ev .read p.k svg.mk,.ev .read ul li svg.mk{display:inline-block;width:16px;height:12px;margin:0 8px 0 0;vertical-align:-1px}
.ev .tile .reads span.lg i{font-style:normal;font-family:var(--sans);color:var(--n600);margin-right:6px}
/* phones: the queue keeps its day and step; the intakes keep their names (captions hidden so nothing collides) */
@media (max-width:900px){.ev .w3 article:nth-child(2) text.as,.ev .w3 article:nth-child(2) text.am{display:none}.ev .intk text.it,.ev text.it{display:none}}

/* What we deploy as one suite (Maria, 2026-11-08, after superhuman.com's "Your Superhuman suite"): one framed panel.
   Its header (heading plus the three tabs) locks under the nav while the three items scroll past underneath, each with
   its own text and live screen; the tab of the item in view lights up, and a tab click scrolls to its item. On phones
   the tabs drop and the three items simply follow one another (as superhuman.com does).
   The software screens are a set layout, not responsive (Maria: "a set layout we're showing a corner of"): each is a
   fixed 1040x760 desktop screen, scaled as a whole to the width it has (--s, set in deploy.js) and cropped by the well. */
/* A full section break after the dark model cards (Maria, 2026-11-10: "a lot more space here please, they are different sections") */
.ev .su{padding:0 var(--edge);margin:136px 0 96px}
/* Maria (2026-11-09): no rounded outer frame. The heading sits on the page; the tabs and the panels keep their own lines. */
.ev .su-frame{position:relative;overflow:clip}
.ev .su-top{position:sticky;top:var(--navh);z-index:5;background:var(--p50)}
.ev .su-head{display:flex;align-items:end;justify-content:space-between;gap:40px;padding:8px 0 32px}
.ev .su-tabs{border-left:1px solid var(--n300);border-right:1px solid var(--n300)}
.ev .su-p{border-left:1px solid var(--n300);border-right:1px solid var(--n300)}
.ev .su-p:last-of-type{border-bottom:1px solid var(--n300)}
.ev .su-head .h2{margin:0}
.ev .su-head p{font-size:17px;line-height:1.5;color:var(--n700);max-width:42ch}
.ev .su-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--n300);border-bottom:1px solid var(--n300);background:var(--n100)}
.ev .su-tab{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;min-height:68px;padding:12px 20px;background:var(--p50);color:var(--n700);font:500 17px/1.25 var(--sans);transition:background .3s var(--ease),color .3s var(--ease)}
.ev .su-tab+.su-tab{border-left:1px solid var(--n300)}
.ev .su-tab svg{flex:none;width:22px;height:22px}
.ev .su-tab:hover{color:var(--ink)}
.ev .su-tab[aria-selected=true]{background:var(--n200);color:var(--ink)}
.ev .su-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.ev .su-p{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(680px,calc(100vh - var(--navh) - 200px))}
.ev .su-p+.su-p{border-top:1px solid var(--n300)}
.ev .su-text{background:var(--p50);border-right:1px solid var(--n300);padding:clamp(32px,3.6vw,56px) clamp(24px,3.4vw,48px);display:flex;flex-direction:column}
.ev .su-text .kind{display:flex;align-items:center;gap:10px;font:500 15px var(--sans);color:var(--n700);padding-bottom:20px;margin-bottom:28px;border-bottom:1px dashed var(--n300)}
.ev .su-text .kind svg{width:20px;height:20px}
/* Bold Founders, like the other headings (Maria, 2026-11-10: "these headers should be bold founders") */
.ev .su-text .lead{font:600 clamp(28px,2.4vw,36px)/1.08 var(--head);letter-spacing:-.01em;color:var(--ink);max-width:22ch}
.ev .su-text .body{margin-top:16px;font-size:17px;line-height:1.55;color:var(--n700);max-width:38ch}
.ev .su-reads{margin-top:auto;padding-top:40px}
.ev .su-reads p{font:500 14px var(--sans);color:var(--n600);margin-bottom:12px}
.ev .su-text ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ev .su-text li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--n700)}
.ev .su-text li:before{content:"";flex:none;width:9px;height:9px;border:1.5px solid var(--ink);border-radius:50%}
.ev .su-text li.has-oi:before{content:none}
.ev .su-text li .oi{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ev .su-well{--s:.8;--in:40px;position:relative;overflow:hidden;min-height:560px;background:linear-gradient(160deg,var(--dom2) 0%,#eef9ea 45%,var(--n200) 100%)}
.ev .su-well .scr{left:var(--in);top:var(--in);right:auto;bottom:auto;width:1040px;height:max(760px,calc((100% - var(--in)) / var(--s) + 24px));transform-origin:0 0;transform:scale(var(--s)) translateY(16px)}
.ev .su-well .scr.on{transform:scale(var(--s))}
.ev .su-well .ui-top b,.ev .su-well .ui-top span{white-space:nowrap}
@media (max-width:900px){
  .ev .su{margin:88px 0 72px}
  .ev .su-top{display:contents}
  .ev .su-head{display:block;padding:28px 20px 20px}.ev .su-head p{margin-top:12px;font-size:16px}
  .ev .su-tabs{display:none}
  .ev .su-tab{flex-direction:column;gap:6px;min-height:0;padding:12px 8px;font-size:13px;text-align:center}
  .ev .su-tab svg{width:20px;height:20px}
  .ev .su-p{display:block;min-height:0}
  .ev .su-text{border-right:0;border-bottom:1px solid var(--n300);padding:24px 20px 28px}
  .ev .su-text .kind{margin-bottom:20px;padding-bottom:16px}
  .ev .su-text .lead{font-size:26px}.ev .su-text .body{font-size:16px}
  .ev .su-text ul{display:flex;flex-wrap:wrap;gap:10px 20px}.ev .su-reads{padding-top:24px}
  .ev .su-well{--in:20px;min-height:0;height:360px}
}

/* Why it's hard (Maria, 2026-11-08): all three at once, not steps. The student and the market side by side, the queue's
   timeline full width under them (she found this arrangement cleaner); captions on top as the anchor. */
.ev .why3{padding:56px 0 40px}
.ev .w3{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"a c" "b b";gap:24px;align-items:stretch}
.ev .w3 article:nth-child(1){grid-area:a}.ev .w3 article:nth-child(2){grid-area:b}.ev .w3 article:nth-child(3){grid-area:c}
.ev .w3 article:nth-child(2) .artbox{aspect-ratio:auto}.ev .w3 article:nth-child(2) .w3-fig{max-width:820px;height:auto;margin:0 auto}
.ev .w3 article{background:#fff;border:1px solid #f0eee8;border-radius:20px;padding:32px 32px 28px;display:flex;flex-direction:column;gap:28px}
.ev .w3 .cap h3{font:600 22px/1.25 var(--sans);letter-spacing:-.01em;margin-bottom:10px;max-width:22ch;color:var(--ink)}
.ev .w3 .cap p{font-size:17px;line-height:1.5;color:var(--n700);max-width:34ch}
.ev .w3 .artbox{flex:1;display:grid;place-items:center;aspect-ratio:4/3;min-height:0}
.ev .w3-fig{display:block;width:100%;height:100%;overflow:visible}
/* labels scaled up so they read at panel size; the queue keeps only the step and its day */
/* labels inside the drawings stay quiet (Maria, 2026-11-08: "these need subtlety"); only the caption is big */
.ev .w3 article:nth-child(1) text.al{font-size:14px}.ev .w3 article:nth-child(1) text.as{font-size:13px}

.ev .w3 article:nth-child(3) text.al{font-size:19px}.ev .w3 article:nth-child(3) text.am,.ev .w3 article:nth-child(3) text.as{font-size:17px}
@media (max-width:900px){.ev .w3{grid-template-areas:"a" "b" "c"}}
@media (max-width:900px){.ev .w3{grid-template-columns:1fr}}

/* the prospect on the model is Maria's student illustration, inverted for the dark plate; coral when selected */
.ev .ic-p .st-rg{fill:#1d1a12;stroke:none!important}.ev .ic-p .st-ink{stroke:#ebe9e2}.ev .node.on .ic-p .st-ink{stroke:var(--dom4)}.ev .node.on .ic-p .st-rg{fill:#141106}.ev .node.nb .ic-p .st-ink{stroke:#f4f2ec}
/* Webflow's .page-wrapper hides overflow, which stops sticky scenes; clip pins the same way Home does. */
.page-wrapper:has(.ev){overflow:clip}
/* The four key sections (Maria, 2026-11-08): the model is a blueprint, what it enables is a slide, what we deploy is
   software, outcomes is a vista grounded by its measurement. Each opens with a numbered section label. */
.ev .sk{display:flex;align-items:baseline;gap:10px;font:600 15px/1.4 var(--sans);color:var(--n700);margin-bottom:18px}
.ev .head.c .sk{justify-content:center}
.ev .sk b{font:600 15px var(--sans);color:var(--dom6)}
.ev .dark .sk,.ev .on-media .sk{color:#cfccc4}.ev .dark .sk b,.ev .on-media .sk b{color:var(--dom4)}
.ev .en{--mf:#141106;--mf2:#767571;--ma:var(--dom)}
.ev .dark{--mf:#d6d3cb;--mf2:#8f8d86;--ma:var(--dom4)}
/* the model: the readout never changes the layout */
.ev .model{align-items:start}
.ev .read{height:470px;overflow:hidden;margin-top:72px}
.ev .flow{fill:none;stroke:#8f8d86;stroke-width:1.1;stroke-dasharray:2 6;stroke-linecap:round;animation:evflow 1.6s linear infinite}
@keyframes evflow{to{stroke-dashoffset:-16}}
.ev .intk text{font:500 13px var(--sans);fill:#ebe9e2}.ev .intk .it{font:400 12px var(--mono);fill:#8f8d86}
/* intake sources each named under their drawing; primary labels on a small dark box (Maria, 2026-11-09) */
.ev .intk text.iti{font:400 11.5px var(--sans);fill:#a3a19a}
.ev .lbg{fill:#141106;stroke:#464238;stroke-width:1}
.ev .node.on .lbg{stroke:var(--dom4)}
/* category labels under the intakes: a bit bigger, a plain box with no border (Maria, 2026-11-09) */
.ev .intk text.ik{font:500 15px var(--sans);fill:#f4f2ec}.ev .intk .lbg{stroke:none;fill:#2e2b22}
.ev .node.on .cvst{--pp-fill:var(--dom)!important}.ev .node.nb .cvst{--pp-fill:#2e2b22!important}
@media (max-width:900px){.ev .intk text.iti{display:none}}
/* what it enables: one slide */
.ev .en{padding-bottom:120px}
.ev .slide{background:#fff;border:1px solid var(--n300);border-radius:24px;padding:clamp(28px,4vw,64px);box-shadow:0 24px 60px -32px rgba(20,17,6,.18)}
.ev .slide-top{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:end;margin-bottom:48px}
.ev .slide-top .h2{max-width:14ch}
.ev #en-plate{width:400px;height:auto;overflow:visible}
.ev #en-plate .lbl{font:500 12px var(--sans);fill:var(--ink);opacity:0;transition:opacity .3s var(--ease)}.ev #en-plate .lbl.on{opacity:1}
.ev .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px}
.ev .tile{border-top:1px solid var(--n300);padding-top:20px;transition:border-color .3s var(--ease)}
.ev .tile:hover{border-color:var(--ink)}
.ev .tile .kind{font:500 13px var(--sans);color:var(--n600)}
.ev .tile svg{display:block;width:100%;height:auto;max-height:120px;overflow:visible;margin:18px 0 22px}
.ev .tile h3{font:600 28px/1.08 var(--head);letter-spacing:-.01em;margin-bottom:10px}
.ev .tile p:last-child{font-size:16px;color:var(--n800);max-width:34ch}
.ev #en-plate .oc rect{fill:#fff;stroke:#e2e0d9;stroke-width:1;transition:stroke .3s var(--ease),fill .3s var(--ease)}
.ev #en-plate .oc text{font:400 11.5px var(--mono);fill:var(--n600);transition:fill .3s var(--ease)}
.ev #en-plate .oc.on rect{stroke:var(--dom);fill:var(--dom2)}.ev #en-plate .oc.on text{fill:var(--ink)}
.ev #en-plate .lk{fill:none;stroke:#e2e0d9;stroke-width:1;transition:stroke .3s var(--ease)}.ev #en-plate .lk.on{stroke:var(--dom);stroke-width:1.4}
/* what we deploy: a screen that bleeds off the right and bottom */
.ev .dep .stage{overflow:hidden}
.ev .fig.sw{height:calc(100vh - var(--navh) - 96px);align-self:end;margin-right:calc(-1 * var(--edge))}
.ev .scr{position:absolute;left:0;top:0;right:-24px;bottom:-40px;background:#fff;border:1px solid #f0eee8;border-radius:16px 0 0 0;box-shadow:0 30px 80px -30px rgba(20,17,6,.25);opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .7s var(--out);overflow:hidden;font:400 14px/1.4 var(--sans);color:var(--ink)}
.ev .scr.on{opacity:1;transform:none}
.ev .ui-top{display:flex;align-items:center;gap:22px;height:52px;padding:0 22px;border-bottom:1px solid #f0eee8;font-size:14px}
.ev .ui-top b{font-weight:600;font-size:15px;margin-right:10px}
.ev .ui-top span{color:var(--n600)}.ev .ui-top span.on{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--ink);padding:16px 0}
.ev .ui-body{padding:22px;display:grid;gap:16px}
.ev .uc{background:#fff;border:1px solid #f0eee8;border-radius:15px;box-shadow:0 1px 2px rgba(20,17,6,.04);padding:18px}
.ev .uc h4{font:600 14px var(--sans);margin:0 0 4px}.ev .uc .sub{font-size:13px;color:var(--n600)}
.ev .chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;background:var(--n100);font:500 12.5px var(--sans);color:var(--n800);white-space:nowrap}
.ev .chip.ok{background:#dee8be;color:#404a20}.ev .chip.hot{background:var(--dom2);color:var(--dom7)}
.ev .num{font:600 34px/1 var(--head);letter-spacing:-.01em}
/* outcomes: a vista, light type over the foliage loop */
.ev .vista{position:relative;overflow:hidden;background:#101509;color:#fff;padding-bottom:140px;min-height:100vh}
.ev .vbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(1.15)}
.ev .vshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,5,.55) 0%,rgba(8,14,5,.12) 34%,rgba(8,14,5,.3) 62%,rgba(8,14,5,.78) 100%)}
.ev .vista .head{position:relative;padding-top:160px}
.ev .vista .h2{color:#fff;max-width:16ch}
.ev .ocards{position:relative;list-style:none;margin:96px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.ev .ocards li{background:rgba(16,20,10,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px}
.ev .ocards .n{font:600 15px/1 var(--sans);color:var(--dom4);order:-2}
.ev .ocards h3{font:500 14px/1.4 var(--sans);color:rgba(250,250,248,.72);order:-1}
.ev .ocards .r{font:500 21px/1.18 var(--head);letter-spacing:-.005em;color:#fff}
.ev .ocards .m{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:rgba(250,250,248,.66)}
.ev .meas{padding-top:0}
@media (max-width:1100px){.ev .ocards{grid-template-columns:repeat(2,minmax(0,1fr))}.ev .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .ev .tiles,.ev .ocards,.ev .slide-top{grid-template-columns:1fr}
  .ev .read{height:auto;margin-top:0}
  .ev .fig.sw{display:none}
  .ev .scr{position:relative;inset:auto;height:440px;opacity:1;transform:none;margin-top:20px;border-radius:16px}
  .ev .vista .head{padding-top:96px}
}

/* Outcomes, light (Maria, 2026-11-08: "lets try light mode here. cards can be bigger ... Show some sort of visual"):
   the foliage loop washed toward paper, ink type, larger white glass cards in a 3 + 2 layout, each with a small drawing. */
.ev .vista{background:var(--p50);color:var(--ink);padding-bottom:120px;min-height:0}
.ev .vista .vbg{filter:saturate(.7) brightness(1.2);opacity:.55}
.ev .vista .vshade{background:linear-gradient(180deg,rgba(250,250,248,.55) 0%,rgba(250,250,248,.25) 40%,rgba(250,250,248,.6) 75%,rgba(250,250,248,.95) 100%)}
.ev .vista .h2{color:var(--ink)}
.ev .vista .head{padding-top:140px}
.ev .ocards{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:64px}
.ev .ocards li{grid-column:span 2;background:rgba(255,255,255,.82);border:1px solid rgba(20,17,6,.08);border-radius:20px;padding:28px 30px 26px;gap:14px;box-shadow:0 20px 50px -30px rgba(20,17,6,.25);--mf:#141106;--mf2:#767571;--ma:var(--dom)}
.ev .ocards li:nth-child(n+4){grid-column:span 3}
.ev .ocards .n{color:var(--dom6)}
.ev .ocards h3{color:var(--n700);font-size:15px}
.ev .ocards .r{color:var(--ink);font-size:24px;line-height:1.16}
.ev .ocards .m{border-top-color:var(--n300);color:var(--n600);font-size:14.5px}
.ev .ocards svg{display:block;width:100%;height:auto;max-height:120px;overflow:visible;margin:4px 0 6px}
/* Maria (2026-11-09): the foliage at full strength again, behind white cards. The heading goes light over the
   green-black shade, as on Home ("Text on video stays light"). Corners scaled back to match the other pages. */
.ev .vista{background:#101509}
.ev .vista .vbg{filter:saturate(.95) brightness(1.15);opacity:1}
.ev .vista .vshade{background:linear-gradient(180deg,rgba(8,14,5,.55) 0%,rgba(8,14,5,.18) 30%,rgba(8,14,5,.12) 60%,rgba(8,14,5,.45) 100%)}
.ev .vista .h2{color:#fff}
.ev .ocards li{background:rgba(250,250,248,.94);border-color:rgba(255,255,255,.4);border-radius:12px;box-shadow:0 24px 60px -30px rgba(8,14,5,.6)}
.ev .slide{border-radius:12px}
.ev .tile{border-radius:8px}
@media (max-width:1100px){.ev .ocards{grid-template-columns:repeat(2,minmax(0,1fr))}.ev .ocards li,.ev .ocards li:nth-child(n+4){grid-column:auto}
  /* the odd one out spans both columns (Maria, 2026-11-09: "keep what works spans 2 col in this 2-col layout") */
  .ev .ocards li:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:900px){.ev .ocards{grid-template-columns:1fr}}

/* The closing call to action (Maria, 2026-11-08: "enrollment color and a VERY subtle texture"): the domain color with
   Enrollment's hand-drawn dot grid at a whisper; type and buttons in ink, per the color-ground rule. */
.ev .cta{position:relative;overflow:hidden;background:var(--dom)}
.ev .cta .wrap{position:relative}
.ev .cta .lede{color:var(--ink)}
.ev .cta-tex{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ev .cta-tex circle{fill:#141106;opacity:.09}

/* Previous and next domain sit on the same coral ground as the call to action (Maria, 2026-11-08: "blend better into
   section below"): one band, no rule between them, ink type. */
.ev .cta{padding-top:0}
.ev .cta .nx{border-top:0;padding-top:36px;padding-bottom:48px}
.ev .cta .nx span{color:rgba(20,17,6,.72)}.ev .cta .nx b{color:var(--ink)}

/* Closing band, taller (Maria, 2026-11-08: "can be taller to potentially fit the entire form on right"): the say on
   the left, the site's demo form on a paper card on the right, same fields as the live modal. Previous and next sit
   below as a quiet row (Maria: "make this less prominent"). */
.ev .cta{padding:clamp(64px,7vw,96px) 0 0}
.ev .cta .ev-close{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.ev .cta-act{display:flex;gap:12px}
.ev .cta .cta-say{padding-top:8px}
.ev .cta .cta-say .lede{max-width:30ch}
.ev .cta-alt{display:inline-block;margin-top:24px;font:500 16px var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ev .demo{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;background:#fafaf8;border-radius:12px;padding:28px 32px 32px;color:#141106;font-family:var(--sans)}
.ev .demo>*{grid-column:1/-1}.ev .demo .half{grid-column:auto}
.ev .demo h3{font:600 30px/1 var(--head);letter-spacing:-.015em;margin:0 0 20px}
.ev .demo .f{margin:0 0 14px;border:0;padding:0;min-width:0}
.ev .demo label,.ev .demo legend{display:block;font-size:14px;line-height:20px;font-weight:500;color:#242116;margin-bottom:4px;padding:0}
.ev .demo i{font-style:normal;font-weight:400;color:#464238;margin-left:2px}
.ev .demo small{display:block;font-size:13px;line-height:20px;color:#464238;margin:-2px 0 8px}
.ev .demo input[type=text],.ev .demo input[type=email],.ev .demo input[type=date]{width:100%;height:40px;padding:0 12px;font:400 15px var(--sans);border:1px solid #e2e0d9;border-radius:8px;background:#fff;color:#141106;box-sizing:border-box}
.ev .demo input:focus{outline:none;border-color:#141106;box-shadow:0 0 0 3px rgba(20,17,6,.08)}
.ev .demo label.r{display:flex;align-items:center;gap:8px;font-weight:400;margin:0 0 4px;cursor:pointer}
.ev .demo label.r input{accent-color:#141106;margin:0}
.ev .demo button{margin-top:6px;height:44px;border:0;border-radius:8px;background:#141106;color:#fff;font:500 15px var(--sans);cursor:pointer}
.ev .demo button:hover{background:#242116}
.ev .cta .nx{position:relative;margin-top:clamp(56px,7vw,96px);padding:20px var(--edge) 28px;border-top:1px solid rgba(20,17,6,.14)}
.ev .cta .nx a{text-decoration:none;color:var(--ink)}.ev .cta .nx a:last-child{text-align:right}
.ev .cta .nx span{display:inline;font-size:14px;color:rgba(20,17,6,.72);margin-right:8px}
.ev .cta .nx b{font:500 15px var(--sans);color:var(--ink)}
.ev .cta .nx a:hover b{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.ev .cta .ev-close{grid-template-columns:1fr}.ev .demo{padding:22px 20px 24px}}
@media (max-width:600px){.ev .demo{grid-template-columns:1fr}.ev .demo .half{grid-column:1/-1}.ev .cta .nx{flex-direction:column;gap:10px}.ev .cta .nx a:last-child{text-align:left}.ev .cta .nx span{display:block}}

/* Measurement timeline labels (Maria, 2026-11-08: "these can just be inter, full strength, small"): Inter at full
   paper strength, small; the contrast between the bright realized line and the faint projected and holdout lines stays. */
.ev .meas svg text.tl{font:500 13px var(--sans);fill:#fafaf8;letter-spacing:0}


/* How we measure (Maria, 2026-11-09: "simplify this and reduce artificial detail... use [the curve] as abstract art in
   the BG almost and focus on measurement types"): the projected-against-realized curve sits behind the section with no
   labels, ticks, or pill; four measurement types are the content. */
.ev .meas{position:relative;overflow:hidden;padding-bottom:300px}
.ev .meas>.head,.ev .meas .types{position:relative;z-index:1}
.ev .meas svg#m-measure{position:absolute;left:0;right:0;bottom:0;width:100%;height:340px;margin:0;opacity:.6;pointer-events:none}
.ev .meas .types{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:72px}
.ev .meas .types h3{font:500 24px/1.2 var(--head);color:var(--p50)}
.ev .meas .types p{margin-top:10px;font:400 15px/1.45 var(--sans);color:#b5b3ab;max-width:28ch}
@media (max-width:900px){.ev .meas .types{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}}
@media (max-width:600px){.ev .meas .types{grid-template-columns:1fr}.ev .meas{padding-bottom:200px}.ev .meas svg#m-measure{height:220px}}

/* The demo form opens in a dialog from the closing button (Maria, 2026-11-08: "go back to just showing button to call up the form") */
.demo-dlg{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%}
.demo-dlg::backdrop{background:rgba(20,17,6,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.demo-dlg .demo{box-shadow:0 1px 2px rgba(20,17,6,.06),0 24px 64px rgba(20,17,6,.16)}
.demo-dlg .x{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;border-radius:8px;background:none;cursor:pointer;z-index:1}
.demo-dlg .x::before,.demo-dlg .x::after{content:"";position:absolute;left:11px;top:17px;width:14px;height:1.5px;background:#242116;transform:rotate(45deg)}
.demo-dlg .x::after{transform:rotate(-45deg)}.demo-dlg .x:hover{background:#f0eee7}
.demo-dlg .demo h3{margin-right:40px}


/* the legend's marks, drawn in the model itself */
.ev .edge path.foot{stroke:#5c594f;stroke-width:1;fill:none}
.ev .edge.on path.foot{stroke:var(--dom4);stroke-width:1.4}
.ev .ghost{fill:none;stroke:#63615a;stroke-width:1;stroke-dasharray:2 3}
.ev .node .omk path{fill:none;stroke:#bebdb9;stroke-width:1.1;stroke-linejoin:round}
.ev .node .omk text.fx{font:italic 400 15px Georgia,serif;fill:#bebdb9;stroke:none}
.ev .node.on .omk path{stroke:#fff}.ev .node.on .omk text.fx{fill:#fff}

/* the share panel's key: the figures in text, under the circles */
.ev .w3-key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:10px 0 0;font:400 14px/1.4 var(--sans);color:var(--n700)}
.ev .w3-key span{display:inline-flex;align-items:center;gap:6px}
.ev .w3-key b{font-weight:600;color:var(--ink)}
.ev .w3-key i{width:10px;height:10px;border-radius:50%;border:1px solid var(--ink)}
.ev .w3-key .a i{background:var(--dom)}
.ev .w3-key .m i{background:#fff;background-image:radial-gradient(var(--ink) .8px,transparent 1px);background-size:4px 4px}
.ev .w3-key .s{flex-basis:100%;justify-content:center;color:var(--n600);font-size:13.5px;transition:opacity .4s var(--ease)}
/* the model's object drawings: detail lines follow the selection like the faces do */
.ev .node .nk{stroke:#bebdb9;stroke-width:1;stroke-linecap:round;fill:none;transition:stroke .3s var(--ease)}
.ev .node.on .nk{stroke:#fff}.ev .node.nb .nk{stroke:#f4f2ec}
.ev .node .nt,.ev .node .nl,.ev .node .nr{stroke-linejoin:round}

/* What it enables, journal style (Maria, 2026-11-08: "stay with very graph-y style ... smaller and flat ... dark on light,
   no color accent ... like graph figures in an old journal article"; "some can just lean into a longer text heading in
   the big font"; "outlines on the cards so its clear how many there are"). */
.ev .tiles{gap:20px}
.ev .tile{border:1px solid var(--n300);border-radius:16px;padding:26px 28px 28px;display:flex;flex-direction:column}
.ev .tile:hover{border-color:var(--n500)}
.ev .tile svg{max-height:92px;margin:14px 0 20px}
.ev .tile.tx{justify-content:space-between}
.ev .tile.tx h3{font:600 34px/1.04 var(--head);letter-spacing:-.015em;margin:18px 0 14px;max-width:12ch}
.ev .en{--mf:#141106;--mf2:#141106;--ma:#141106}
.ev #en-plate .oc.on rect{stroke:var(--ink);fill:var(--n200)}
.ev #en-plate .lk.on{stroke:var(--ink)}

/* the object cards as the slide's backdrop (Maria, 2026-11-08) */
.ev .slide-top{grid-template-columns:1fr;margin-bottom:36px}
.ev .tiles{position:relative;isolation:isolate}
.ev .tiles>#en-plate{position:absolute;left:50%;top:50%;width:min(100%,860px);height:auto;transform:translate(-50%,-50%);z-index:-1;pointer-events:none}
.ev .tiles>#en-plate .oc{opacity:.16;transition:opacity .35s var(--ease)}.ev .tiles>#en-plate .oc.on{opacity:.75}
.ev .tiles>#en-plate .lk{opacity:.18}.ev .tiles>#en-plate .lk.on{opacity:.7}
.ev .tile{background:rgba(255,255,255,.8);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}

/* What it enables: each tile lists what it reads, with the legend's marks (Maria, 2026-11-08: "just list them on the
   bottom like original"), and one journal-style legend for the page's model marks. */
.ev .reads{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 14px;border-top:1px solid var(--n200)}
.ev .tile p+.reads,.ev .tile .reads{margin-top:22px}
.ev .reads span{display:inline-flex;align-items:center;gap:6px;font:400 13px/1.3 var(--sans);color:var(--n800)}
.ev .reads span.lg{font:400 12.5px var(--mono);color:var(--n700)}
.ev .mk,.ev .tile svg.mk,.ev .legend svg.mk,.ev .read svg.mk{display:inline-block;width:18px;height:14px;max-height:none;margin:0;flex:none;overflow:visible;color:currentColor}
.ev .legend{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px;padding-top:16px;border-top:1px solid var(--n300);font:400 13px/1.3 var(--sans);color:var(--n700)}
.ev .legend span{display:inline-flex;align-items:center;gap:8px}
.ev .legend b{font:600 13px var(--sans);color:var(--ink);margin-right:4px}
.ev .dark .legend{border-top-color:#3a372f;color:#a3a097}.ev .dark .legend b{color:#ebe9e2}

/* Outcome cards, text only (Maria, 2026-11-08: "hierarchy is backwards ... drop the numbers ... drop the art and focus on
   good text placement"): the outcome is the heading, the result reads under it, what we measure closes the card. */
.ev .ocards li{padding:30px 32px 28px;gap:0}
.ev .ocards h3{order:0;font:600 26px/1.12 var(--head);letter-spacing:-.01em;color:var(--ink);max-width:20ch;margin-bottom:16px}
.ev .ocards .r{font:400 17px/1.5 var(--sans);color:var(--n800);max-width:38ch}
.ev .ocards .m{margin-top:auto;padding-top:16px;border-top:1px solid var(--n300);font-size:14.5px;color:var(--n600)}
.ev .ocards .r+.m{margin-top:28px}
/* Outcome cards on the dark vista (Maria, 2026-11-09: "less contrasty cards, so i guess dark mode with white text. try
   adding simple (but maybe more nuanced) icons back in"): smoked glass, white type, a small drawn icon per outcome in
   pale ink with one coral mark. */
.ev .ocards li{background:rgba(14,18,9,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px -34px rgba(0,0,0,.7)}
.ev .ocards h3{color:#fafaf8}
.ev .ocards .r{color:rgba(250,250,248,.74)}
.ev .ocards .oi{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);margin-bottom:26px}
.ev .ocards .oi svg{width:36px!important;height:36px!important;max-height:none;margin:0;overflow:visible;fill:none;stroke:#e9e7e0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* icons stay monochrome (Maria, 2026-11-09) */
.ev .ocards .oi .a{stroke:#e9e7e0}.ev .ocards .oi .af{fill:#e9e7e0;stroke:none}.ev .ocards .oi .s{stroke:#e9e7e0;opacity:.45}
/* Why it's hard as the case study stack (Maria, 2026-11-09: "try the case studies horizontal cards layout in the site
   patterns, but as you scroll you show them one by one"). The heading and arrows hold; the section is three screens tall
   and each third deals the next card: the front card lifts away, the ones behind step forward. Phones: no deck, the
   three cards follow one another. */
.ev .wdeck .cs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
/* one ink color (Maria, 2026-11-09: two-tone headings are "such an overused move") */
.ev .wdeck .cs-head .h2{max-width:16ch;color:var(--ink)}
.ev .wdeck .cs-nav{display:flex;gap:10px;flex:none}
.ev .wdeck .cs-nav button{all:unset;cursor:pointer;width:48px;height:48px;border-radius:8px;border:1px solid var(--n300);background:var(--p50);display:grid;place-items:center;color:var(--ink);box-shadow:0 1px 2px rgba(20,17,6,.08);transition:background .2s var(--ease),opacity .2s var(--ease)}
.ev .wdeck .cs-nav button:hover{background:#fff}.ev .wdeck .cs-nav button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ev .wdeck .cs-nav button[disabled]{opacity:.35;cursor:default}
.ev .wdeck .cs-nav svg{width:18px;height:18px}
@media (min-width:901px){
  .ev .wdeck{padding:0;height:calc(300vh - 2 * var(--navh))}
  .ev .wdeck .wd-pin{position:sticky;top:var(--navh);height:calc(100vh - var(--navh));display:flex;flex-direction:column;justify-content:center;padding:24px 0 72px;box-sizing:border-box}
  .ev .wdeck .w3{display:block;position:relative;flex:1;max-height:600px;min-height:380px;width:100%}
  .ev .wdeck .w3 article{position:absolute;left:var(--edge);right:var(--edge);top:0;bottom:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(28px,3.4vw,56px);
    border:1px solid #ece9e1;border-radius:14px;box-shadow:0 30px 60px -40px rgba(20,17,6,.35);
    transform:translateY(calc(var(--i,0) * 26px)) scale(calc(1 - var(--i,0) * .05));transform-origin:50% 100%;z-index:calc(10 - var(--i,0));
    transition:transform .7s var(--ease),opacity .5s var(--ease),filter .5s var(--ease);filter:brightness(calc(1 - var(--i,0) * .06))}
  .ev .wdeck .w3 article.out{transform:translateY(-36px) scale(1.02);opacity:0;pointer-events:none}
  .ev .wdeck .w3 article .cap,.ev .wdeck .w3 article .artbox{transition:opacity .4s var(--ease)}
  .ev .wdeck .w3 article:not([data-i="0"]) .cap,.ev .wdeck .w3 article:not([data-i="0"]) .artbox{opacity:0}
  .ev .wdeck .w3 .cap h3{font:600 clamp(28px,2.6vw,40px)/1.08 var(--head);letter-spacing:-.015em;max-width:16ch;margin-bottom:16px}
  .ev .wdeck .w3 .cap p{font-size:19px;max-width:30ch}
  .ev .wdeck .w3 .artbox{height:100%;aspect-ratio:auto;min-height:0}
  .ev .wdeck .w3 article:nth-child(2) .w3-fig{max-width:none;height:100%}
}
@media (max-width:900px){.ev .wdeck .cs-nav{display:none}.ev .wdeck .cs-head{margin-bottom:24px}.ev .wdeck .w3 .cap h3{font:600 26px/1.1 var(--head);letter-spacing:-.01em}}
/* The queue card in the Why deck keeps the step names and days only; the gray two-line captions crowd at the deck's
   card width (Maria, 2026-11-09: "now this is broken"). Under 1200px the days go too. */
@media (min-width:901px){.ev .wdeck .w3 article:nth-child(2) text.as{display:none}}
@media (min-width:901px) and (max-width:1199px){.ev .wdeck .w3 article:nth-child(2) text.am{display:none}}
/* The model's readout as a sidecar: outlined in the highlight color, tied to the picked object by a line that draws
   and fades (Maria, 2026-11-09). */
.ev .model{position:relative}
.ev .read{border:1.5px solid var(--dom4);border-radius:14px;padding:26px 28px 28px;background:rgba(20,17,6,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);height:auto;min-height:0;overflow:visible;position:relative;z-index:1}
.ev .read .k{color:var(--dom4)}
.ev .cnx{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:2}
.ev .cnx path{fill:none;stroke:var(--dom4);stroke-width:1.4;opacity:0}
.ev .cnx circle{fill:var(--dom4);opacity:0}
.ev .cnx.go path{animation:cnx-draw 2.2s var(--ease) forwards}
.ev .cnx.go circle{animation:cnx-fade 2.2s var(--ease) forwards}
@keyframes cnx-draw{0%{opacity:1;stroke-dashoffset:var(--L,600)}35%{opacity:1;stroke-dashoffset:0}70%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes cnx-fade{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
@media (max-width:900px){.ev .read{min-height:0;margin-top:8px}.ev .cnx{display:none}}
/* What we deploy, more cohesive (Maria, 2026-11-10: "instead of a block BG for the UI ... a color glow and a bottom edge.
   Do not let the three items run into each other ... the underline tabs would look better left-aligned"): the UI floats
   on a soft glow of the domain color and stands on one hairline; the three items have air between them; tabs sit left. */
.ev .su-well{background:none;overflow:hidden;border-bottom:1px solid var(--n300)}
.ev .su-well::before{content:"";position:absolute;inset:-10% -20% 0 -10%;pointer-events:none;
  background:radial-gradient(62% 58% at 48% 62%,color-mix(in srgb,var(--dom3) 55%,transparent) 0%,color-mix(in srgb,var(--dom2) 80%,transparent) 40%,transparent 74%)}
/* The software comes in lightly (Maria, 2026-11-10: "try to lightly animate software as it comes in"): once the screen
   is on, its rows rise into place one after another, the right panel a beat behind the left. */
@media (prefers-reduced-motion:no-preference){
  .ev .su-well .scr .ui-top>*,.ev .su-well .scr .uc>*{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
  .ev .su-well .scr.on .ui-top>*,.ev .su-well .scr.on .uc>*{opacity:1;transform:none}
  .ev .su-well .scr.on .ui-top>*:nth-child(1){transition-delay:.15s}.ev .su-well .scr.on .ui-top>*:nth-child(2){transition-delay:.2s}
  .ev .su-well .scr.on .ui-top>*:nth-child(3){transition-delay:.25s}.ev .su-well .scr.on .ui-top>*:nth-child(n+4){transition-delay:.3s}
  .ev .su-well .scr.on .uc>*:nth-child(1){transition-delay:.3s}.ev .su-well .scr.on .uc>*:nth-child(2){transition-delay:.38s}
  .ev .su-well .scr.on .uc>*:nth-child(3){transition-delay:.46s}.ev .su-well .scr.on .uc>*:nth-child(4){transition-delay:.54s}
  .ev .su-well .scr.on .uc>*:nth-child(5){transition-delay:.62s}.ev .su-well .scr.on .uc>*:nth-child(6){transition-delay:.7s}
  .ev .su-well .scr.on .uc>*:nth-child(n+7){transition-delay:.78s}
  .ev .su-well .scr.on .uc+.uc>*:nth-child(1){transition-delay:.5s}.ev .su-well .scr.on .uc+.uc>*:nth-child(2){transition-delay:.58s}
  .ev .su-well .scr.on .uc+.uc>*:nth-child(3){transition-delay:.66s}.ev .su-well .scr.on .uc+.uc>*:nth-child(4){transition-delay:.74s}
  .ev .su-well .scr.on .uc+.uc>*:nth-child(5){transition-delay:.82s}.ev .su-well .scr.on .uc+.uc>*:nth-child(6){transition-delay:.9s}
  .ev .su-well .scr.on .uc+.uc>*:nth-child(n+7){transition-delay:.98s}
}
/* One soft shadow for cards and software screens (Maria, 2026-11-10: "reduce the amount of dropshadow a bit so it is
   more consistent w how the software screenshots look throughout") */
.ev .su-well .scr,.ev .wdeck .w3 article,.ev .wdeck article{box-shadow:0 24px 56px -34px rgba(20,17,6,.18)}
.ev .su-p+.su-p{margin-top:clamp(64px,8vw,120px)}
.ev .su-tabs{display:flex;justify-content:flex-start;gap:clamp(24px,3vw,44px)}
.ev .su-tab{flex:0 0 auto;justify-content:flex-start;padding:12px 0;gap:10px}
@media (max-width:900px){.ev .su-p+.su-p{margin-top:56px}.ev .su-tabs{display:none}}
/* The domain's small form comes back next to its name in the hero (Maria, 2026-11-10: "small icon can come back into here too") */
.ev .dh .lab{display:flex;align-items:center;gap:10px}
.ev .dh .lab canvas.dico{width:24px;height:24px}
/* Clearer hierarchy in What we deploy (Maria, 2026-11-10: "not super happy with hierarchy and clarity ... runs into a v
   similar text size on the tabs. can you solve w spacing and size?"): the heading leads; the intro steps down to 16px gray;
   the tabs are a quiet 15px nav, set apart from the heading above and the item below. */
.ev .su-head{padding:8px 0 48px}
.ev .su-head p{font-size:16px;color:var(--n600);max-width:40ch}
.ev .su-tab{font:500 15px/1.2 var(--sans);color:var(--n600);min-height:52px;gap:9px}
.ev .su-tab svg,.ev .su-tab canvas.dico{width:18px;height:18px}
.ev .su-tab[aria-selected=true]{color:var(--ink)}
.ev .su-p:first-of-type .su-text{padding-top:clamp(40px,4.4vw,64px)}
/* What the model lets you do, as a list of horizontal rows (Maria, 2026-11-10: "these become a horizontal list. no
   background for icons", then "a horizontal arrangement (one item per line) not 5 columns"): one item per line, icon,
   heading, and description side by side, a faint rule between rows; no cards, no tiles behind the icons. */
.ev .ocards{display:grid;grid-template-columns:1fr;gap:0;margin-top:56px}
.ev .ocards li,.ev .ocards li:nth-child(n+4),.ev .ocards li:last-child:nth-child(odd){grid-column:auto;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  display:grid;grid-template-columns:56px minmax(0,5fr) minmax(0,6fr);column-gap:clamp(20px,3vw,48px);align-items:start;padding:28px 0;border-top:1px solid rgba(250,250,248,.18)}
.ev .ocards li:last-child,.ev .ocards li:last-child:nth-child(odd){border-bottom:1px solid rgba(250,250,248,.18)}
.ev .ocards .oi{width:auto;height:auto;background:none;border:0;border-radius:0;place-items:start;margin:0}
.ev .ocards .oi svg{width:40px!important;height:40px!important}
.ev .ocards h3{font-size:clamp(22px,2vw,28px);max-width:none;margin:0;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.ev .ocards .r{font-size:17px;max-width:none;margin:0;text-wrap:pretty;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.ev .ocards .r+.m{margin-top:0}
@media (max-width:700px){
  .ev .ocards li,.ev .ocards li:nth-child(n+4),.ev .ocards li:last-child:nth-child(odd){grid-template-columns:40px minmax(0,1fr);column-gap:16px;row-gap:8px;padding:22px 0}
  .ev .ocards .oi svg{width:32px!important;height:32px!important}
  .ev .ocards .r{grid-column:2;font-size:15.5px}
}
/* The agent's icon is its domain's form, small (Maria, 2026-11-10: "this agent should have the same icon as the domain, just mini version") */
.ev canvas.dico{flex:none;display:block;width:26px;height:26px}
.ev .su-tab canvas.dico{width:28px;height:28px}
/* How we measure, redone (Maria, 2026-11-10: "no dot pattern in BG, and add mini explainer diagrams like in what the
   model enables"): no dot texture; each method gets a small figure above its heading, flush left like the model cards. */
.ev .meas::before{display:none}
/* No growth curve under the methods (Maria, 2026-11-10: "remove this visual from domain pages") */
.ev .meas{padding-bottom:clamp(96px,10vw,140px)}
@media (max-width:600px){.ev .meas{padding-bottom:88px}}
.ev .meas{--mb:#141106}
.ev .meas .types svg{display:block;position:static;width:auto;max-width:100%;height:92px;margin:0 0 22px;opacity:1;overflow:visible}
/* What we deploy without its hairline box (Maria, 2026-11-10: "remove the containing hairline frame. Keep the three
   tabs but with underline instead"): one baseline under the tabs, the picked tab underlined in ink, no fills or dividers. */
.ev .su-tabs,.ev .su-p,.ev .su-p:last-of-type{border-left:0;border-right:0;border-bottom:0}
.ev .su-tabs{border-top:0;border-bottom:1px solid var(--n300);background:var(--p50)}
.ev .su-tab,.ev .su-tab[aria-selected=true]{background:var(--p50)}
.ev .su-tab+.su-tab{border-left:0}
.ev .su-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .3s var(--ease)}
.ev .su-tab[aria-selected=true]::after{transform:scaleX(1)}
.ev .su-p+.su-p{border-top:0}
.ev .su-text{border-right:0;padding-left:0}
@media (max-width:900px){.ev .su-text{border-bottom:0;padding-left:0;padding-right:0}}
/* Rebalanced (Maria, 2026-11-10: "the ontology drawing ... more in the middle and take a bit more space, and the callout
   on the right to accommodate"): a narrower callout, a larger drawing nudged right, its empty right edge under the callout.
   And no dot texture behind the model ("remove the dot BG there"). */
#model::before{display:none}
@media (min-width:901px){
  .ev .model{grid-template-columns:minmax(0,1fr) clamp(300px,24vw,340px);gap:0;padding-right:clamp(16px,3.2vw,48px)}
  .ev .model>div:first-child{margin-left:clamp(0px,4vw,64px);margin-right:clamp(-40px,-2.6vw,0px)}
  .ev .read p{max-width:none}
}
@media (prefers-reduced-motion:reduce){.ev .cnx{display:none}}
/* What the model enables, dark like the model above it (Maria, 2026-11-09: "dark mode and closer to the model.
   Slightly warmer or somehow separated BG for the set of cards, maybe a subtle texture behind them. Keep line art.
   centered header"). The page stays ink; the panel of cards is a warmer charcoal with a faint dot grid. */
.ev .en{background:var(--ink);color:var(--p50);--mf:#e2e0d9;--mf2:#e2e0d9;--ma:#e2e0d9;--mb:#24211a}
.ev .en>.wrap{padding-top:24px!important}
/* No box (Maria, 2026-11-09: "fade out the texture rather than giving this its own box"): a warm dot field behind
   the cards that fades into the page at every edge. */
.ev .en .slide{position:relative;background:none;border:0;box-shadow:none;isolation:isolate}
.ev .en .slide::before{content:"";position:absolute;inset:-80px -6vw -40px;z-index:-1;pointer-events:none;
  background-color:#221f17;background-image:radial-gradient(rgba(250,250,248,.08) 1px,transparent 1.2px);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 50%,#000 55%,transparent 100%)}
.ev .en .slide-top{justify-items:center;text-align:center}
.ev .en .slide-top .h2{max-width:none;color:var(--p50)}
.ev .en .tile{background:rgba(26,23,16,.86);border-color:rgba(250,250,248,.12)}
/* One heading size in every card (Maria, 2026-11-09: "all headings should be same size ... its not tidy looking").
   Text-only cards keep the drawing's space empty, so each row's headings, bodies, and object lists line up. */
.ev .en .tile h3,.ev .en .tile.tx h3{font:600 28px/1.08 var(--head);letter-spacing:-.01em;max-width:none;margin:0 0 10px}
/* Every card has a drawing; each card's parts share rows with its neighbors (subgrid), so labels, drawings,
   headings, bodies, and object lists line up across a row (Maria, 2026-11-09). Tertiary text smaller. */
.ev .en .tiles{grid-auto-rows:auto}
.ev .en .tile{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start}
.ev .en .tile svg:not(.mk){height:92px;max-height:92px;margin:14px 0 20px}
.ev .en .tile .reads{margin-top:22px;align-self:start}
.ev .en .tile .kind{font-size:12px}
.ev .en .reads span{font-size:12px}.ev .en .reads span.lg,.ev .en .tile .reads span.lg i{font-size:11.5px}
.ev .en .reads span.lg i{white-space:nowrap}
/* No object list under the cards, and the drawings sit left with the text (Maria, 2026-11-10: "remove the bottom
   tertiary info and left align content in these cards throughout"). */
.ev .en .tile .reads{display:none}
.ev .en .tile svg:not(.mk){width:auto;max-width:100%;justify-self:start}
@media (max-width:600px){.ev .en .reads{gap:6px 12px}.ev .en .reads span{font-size:11.5px;gap:5px}.ev .en .reads span.lg,.ev .en .tile .reads span.lg i{font-size:11px}
  .ev .en .reads svg.mk{width:15px;height:12px}}
.ev .en .tile:hover{border-color:rgba(250,250,248,.32)}
.ev .en .tile .kind{color:#a3a097}
.ev .en .tile h3{color:var(--p50)}
.ev .en .tile p:last-child,.ev .en .tile>p:not(.kind){color:#cfccc4}
.ev .en .reads span{color:#d6d3cb}.ev .en .reads span.lg,.ev .en .tile .reads span.lg i{color:#a3a097}
.ev .en .tile .reads{border-top-color:rgba(250,250,248,.12)}
.ev .en .k1,.ev .en .k0,.ev .en .kh,.ev .en .kd{stroke:#e2e0d9}.ev .en .tk{stroke:#e2e0d9}
.ev .en #en-plate .oc rect{fill:#2b2820;stroke:#4a473f}.ev .en #en-plate .oc text{fill:#a3a097}
.ev .en #en-plate .oc.on rect{stroke:#e2e0d9;fill:#3a372f}.ev .en #en-plate .oc.on text{fill:var(--p50)}
.ev .en #en-plate .lk{stroke:#4a473f}.ev .en #en-plate .lk.on{stroke:#e2e0d9}
/* How we measure: the subhead stays on one line where it fits (Maria, 2026-11-09: "dont break subhead line") */
@media (min-width:700px){.ev .meas .head .lede{max-width:none;white-space:nowrap}}


.ev .ph.dh{background:var(--dom);min-height:clamp(640px,52vw,780px);display:flex;align-items:center}
.ev .ph.dh>.wrap{width:100%;position:relative;z-index:6}
.ev .dh .dh-grid{display:block;margin-top:18px}.ev .dh .dh-copy{max-width:min(520px,44vw)}
.ev .dh h1{font-size:clamp(36px,3.5vw,52px);line-height:1;max-width:none;text-wrap:balance}
.ev .dh .lede{margin-top:22px}
.ev .dh-stage{position:absolute;left:0;right:0;top:66px;bottom:0;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:0 max(24px,calc((100vw - 1240px) / 2 + 24px)) 0 0;pointer-events:none}
.ev .dh-stage::before{content:"";position:absolute;inset:0;opacity:.22;background-image:radial-gradient(circle,var(--deep2) .9px,transparent 1.2px);background-size:18px 18px;-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 62%);mask-image:linear-gradient(90deg,transparent 40%,#000 62%)}
.ev .dh-bp{position:absolute;left:0;top:0;width:1080px;-webkit-mask-image:linear-gradient(90deg,transparent var(--fade0,0px),#000 var(--fade1,0px));mask-image:linear-gradient(90deg,transparent var(--fade0,0px),#000 var(--fade1,0px))}
.ev .dh-bp img{display:block;width:100%;height:auto}
.ev .dh-ph{position:absolute;top:0;bottom:0;right:0;width:54%;overflow:hidden;will-change:clip-path}
.ev .dh-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos);display:block;max-width:none}
.ev .dh-flip img{transform:scaleX(-1)}
.ev .dh-seam{position:absolute;top:0;bottom:0;left:0;width:0;z-index:3;pointer-events:none;will-change:transform}
.ev .dh-seam::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:rgba(255,255,255,.9)}
.ev .dh-knob{position:absolute;left:0;top:28%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:#fafaf8;box-shadow:0 10px 30px -10px rgba(20,17,6,.45);display:grid;place-items:center}
.ev .dh-knob canvas{width:46px;height:46px;display:block}
.ev .dh-card{position:relative;z-index:5;width:min(440px,42vw);background:rgba(250,250,248,.97);border-radius:18px;padding:20px 22px;box-shadow:0 30px 70px -28px rgba(20,17,6,.55);font-size:15.5px;line-height:1.42;color:#141106;display:grid;gap:12px;opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.ev .dh-card.dh-on{opacity:1;transform:none}
.ev .dh-who{display:flex;align-items:center;gap:10px;font-size:13px;color:#63615a}.ev .dh-who b{color:#141106;font-weight:600}
.ev .dh-av{flex:none;width:30px;height:30px;border-radius:50%;background:#f0eee7;display:grid;place-items:center}.ev .dh-av canvas{width:23px;height:23px;display:block}
.ev .dh-t{margin:0;font-size:17px;line-height:1.3;font-weight:600;text-wrap:balance}
.ev .dh-body{margin:0;color:#242116;text-wrap:pretty}
.ev .dh-viz svg{display:block;width:100%;height:auto}
.ev .dh-st{opacity:0;transform:translateY(6px);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}.ev .dh-st.dh-on{opacity:1;transform:none}
.ev .dh-act{display:grid}.ev .dh-act>*{grid-area:1/1}
.ev .dh-b2{display:flex;gap:8px;transition:opacity .35s}
.ev .dh-b2 span{font-size:14px;line-height:1;font-weight:500;padding:11px 15px;border-radius:6px;border:1.5px solid #141106;white-space:nowrap;transition:transform .15s,background .15s}
.ev .dh-go{background:#141106;color:#fafaf8}.ev .dh-go.dh-press{transform:scale(.96);background:#242116}
.ev .dh-res{display:flex;gap:9px;align-items:center;font-weight:600;opacity:0;transition:opacity .45s}.ev .dh-res svg{flex:none;width:20px;height:20px;color:var(--deep)}
.ev .dh-act.dh-done .dh-b2{opacity:0}.ev .dh-act.dh-done .dh-res{opacity:1}
.ev .dh-card.dh-chat{background:none;box-shadow:none;padding:0;gap:10px;width:min(430px,42vw)}
.ev .dh-msg{display:flex;gap:8px;align-items:flex-end}
.ev .dh-msg p{margin:0;padding:10px 14px;border-radius:16px;max-width:84%;box-shadow:0 14px 34px -16px rgba(20,17,6,.55);text-wrap:pretty}
.ev .dh-them{justify-content:flex-end}.ev .dh-them p{background:#141106;color:#fafaf8;border-bottom-right-radius:4px}
.ev .dh-us p{background:#fafaf8;border-bottom-left-radius:4px}
.ev .dh-msg .dh-av{background:#fafaf8;box-shadow:0 8px 20px -10px rgba(20,17,6,.5)}.ev .dh-gap{visibility:hidden}
@media (max-width:860px){.ev .ph.dh{display:block;min-height:0;padding-bottom:0}.ev .dh .dh-copy{max-width:none}
.ev .dh-stage{position:relative;top:auto;display:block;padding:36px 16px 48px;margin-top:8px}
.ev .dh-stage::before{-webkit-mask-image:none;mask-image:none}
.ev .dh-card,.ev .dh-card.dh-chat{width:auto;font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.ev .dh-card,.ev .dh-st,.ev .dh-act *{transition:none}}
.ev .ph.dh{position:relative;overflow:hidden;padding:72px 0}.ev .ph.dh .grain{z-index:0}
.ev .dh .lab{color:var(--ink);margin:0}.ev .dh .h1{font-size:clamp(36px,3.5vw,52px);line-height:1;text-wrap:balance}
.ev .dh .lede{color:var(--ink);max-width:none;font-size:18px}.ev .dh .for{margin-top:14px;font-size:15px}.ev .dh .for b{font-weight:600}
.ev .dh .act{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
@media (max-width:860px){.ev .ph.dh{padding:104px 0 0}}