/* Nenya Design Partners page v8 (2026-11-03), from the d3 "Bigger jobs" prototype. Loads after the /nenya sheets and
   partners.css. External file: the site CSP is 'self'-only, so nothing is inline.
   The hero's text choreography is pure CSS (it runs without JS); js/partners-v8.js draws the weave on the canvas and
   syncs to the card's own animation clock. Reduced motion shows the finished state at once. */
.d3-page{--zoom:1.8;--ink:var(--plum);--ink-mut:rgba(35,31,43,.7);--ink-line:rgba(35,31,43,.14);--pan:-22vw}
.d3-page .wrap{position:relative}

/* the stage: a sticky canvas layer under two screens of text */
/* the site lazily renders sections (content-visibility:auto); these measure themselves, so render them for real */
.d3-page>section{content-visibility:visible!important}
.d3-stage{position:relative;background:var(--chalk)}
.d3-sticky{position:absolute;inset:0 0 auto;height:100vh;height:100lvh;overflow:hidden;background:var(--chalk);z-index:0}
.d3-live .d3-sticky{position:sticky;top:0;margin-bottom:-100vh;margin-bottom:-100lvh}
.d3-canvas{position:absolute;inset:0;width:100%;height:100%}
.d3-hero,.d3-b2{position:relative;z-index:2;pointer-events:none}
.d3-copy,.d3-b2-copy,.d3-xs,.d3-b2-cap{pointer-events:auto}

/* the job card: one task that becomes the whole job */
.d3-jobpos{position:absolute;left:72%;top:calc(var(--nav-h) + (100vh - var(--nav-h)) * .5);z-index:3;width:0;height:0;transition:opacity .2s cubic-bezier(.16,1,.3,1)}
.d3-cam{position:absolute;left:0;top:0;animation:d3-pan 2.4s both}
.d3-job{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:320px;display:grid;grid-template-columns:20px 1fr auto;column-gap:11px;row-gap:5px;align-items:center;padding:14px 15px 13px 15px;border-radius:14px;background:#FCFBF8;color:var(--plum);box-shadow:0 7px 0 -3px #F4F1EB,0 7px 0 -2px rgba(35,31,43,.12),0 14px 0 -6px #EDE9E2,0 14px 0 -5px rgba(35,31,43,.10),inset 0 0 0 1px rgba(35,31,43,.13),0 1px 0 rgba(35,31,43,.05),0 18px 40px -18px rgba(35,31,43,.45);animation:d3-cardin .45s var(--ease) both,d3-pulse .55s .78s var(--ease),d3-unstack .25s .76s var(--ease) forwards}
.d3-job-t{font-size:16.5px;font-weight:560;letter-spacing:-.015em;line-height:1.2;white-space:nowrap}
.d3-sw{display:inline-grid;vertical-align:top;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.d3-sw>span{grid-area:1/1;justify-self:start}
.d3-old{background:linear-gradient(var(--verm),var(--verm)) no-repeat 0 58%/0% 2px;animation:d3-strike .22s .3s var(--ease) forwards,d3-odo-up .2s .6s ease-in forwards}
.d3-new{color:var(--ultra);animation:d3-odo-down .38s .68s var(--ease) both}
.d3-chip{display:inline-grid;font-size:12px;font-weight:600;letter-spacing:.01em}
.d3-chip>span{grid-area:1/1;padding:3px 9px;border-radius:999px;text-align:center}
.d3-c1{box-shadow:inset 0 0 0 1px rgba(35,31,43,.3);color:rgba(35,31,43,.75);animation:d3-up .2s .6s ease-in forwards}
.d3-c2{background:var(--ultra);color:#fff;animation:d3-down .38s .66s var(--ease) both}
.d3-job-s{grid-column:2/4;display:grid;font-size:12.5px;color:rgba(35,31,43,.62);line-height:1.3}
.d3-job-s>span{grid-area:1/1}
.d3-s1{animation:d3-up .2s 2.38s ease-in forwards}
.d3-s2{color:var(--plum);animation:d3-down .38s 2.46s var(--ease) both}
.d3-tick{position:relative;width:20px;height:20px;grid-row:1}
.d3-tick::before{content:"";position:absolute;inset:1px;border-radius:50%;border:2px solid rgba(35,31,43,.16);border-top-color:var(--ultra);animation:d3-spin .8s linear infinite,d3-fade .15s 2.4s forwards}
.d3-tick::after{content:"";position:absolute;inset:0;border-radius:50%;background:#3E8A5E;animation:d3-pop .4s 2.42s cubic-bezier(.3,1.6,.5,1) both}
.d3-tick i{position:absolute;left:7px;top:4px;width:6px;height:10px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(42deg);z-index:1;animation:d3-pop .3s 2.52s var(--ease) both}

.d3-axo{position:absolute;left:0;top:0;width:72px;height:48px;image-rendering:pixelated;z-index:4;opacity:0;pointer-events:none}
.d3-steer,.d3-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .2s cubic-bezier(.16,1,.3,1)}
.d3-steer{padding:5px 10px 5px 9px;border-radius:999px;background:var(--ultra);color:#fff;font-size:12px;font-weight:600;letter-spacing:.005em;box-shadow:0 6px 18px -8px rgba(29,26,140,.7)}
.d3-steer.on,.d3-tip.on{opacity:1}
.d3-steer.big{padding:6px 13px 6px 12px;font-size:15px}
.d3-tip{padding:7px 10px;border-radius:9px;background:var(--plum);color:var(--chalk);font-size:12.5px;line-height:1.35;transition:opacity .12s cubic-bezier(.16,1,.3,1)}
.d3-tip small{display:block;color:rgba(238,234,227,.68);font-size:11.5px}
.d3-tip.lt{background:var(--chalk);color:var(--plum)}
.d3-tip.lt small{color:rgba(35,31,43,.62)}
.d3-illus{position:absolute;right:var(--gut);bottom:16px;z-index:3;font-size:12px;color:rgba(35,31,43,.7);animation:d3-land .6s 2.9s var(--ease) both}
@media (min-width:901px){
  /* placed under the card by js/partners-v8.js, so it fades in where it lands */
  .d3-illus{left:0;top:0;right:auto;bottom:auto;padding:1px 6px;border-radius:6px;background:rgba(238,234,227,.88);animation-name:d3-fadein}
}
@keyframes d3-fadein{from{opacity:0}}
/* the invitation to test it: knock a step off course (the canvas does the rest) */
.d3-hint{position:absolute;left:0;top:0;z-index:3;margin:0;padding:1px 6px;border-radius:6px;background:rgba(238,234,227,.88);font-size:13px;color:rgba(35,31,43,.9);pointer-events:none;animation:d3-fadein .6s 3.1s var(--ease) both;transition:opacity .4s cubic-bezier(.16,1,.3,1)}
/* after the demo catch, the hint lights up once: your turn (colour only; the script sets its transform) */
.d3-hint.nudge{animation:d3-fadein .6s 3.1s var(--ease) both,d3-nudge 1.2s var(--ease)}
@keyframes d3-nudge{35%{background:#F4CE46;color:#231F2B}}
.d3-hint.used{opacity:0!important;visibility:hidden;transition:opacity .4s cubic-bezier(.16,1,.3,1),visibility 0s .4s}
.d3-job.re-a .d3-tick::after{animation:d3-repop-a .45s cubic-bezier(.3,1.6,.5,1)}
.d3-job.re-b .d3-tick::after{animation:d3-repop-b .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes d3-repop-a{0%{transform:scale(1)}40%{transform:scale(1.45);box-shadow:0 0 0 5px rgba(62,138,94,.25)}}
@keyframes d3-repop-b{0%{transform:scale(1)}40%{transform:scale(1.45);box-shadow:0 0 0 5px rgba(62,138,94,.25)}}

/* hero copy; lands as the job completes */
.d3-hero{min-height:100vh;min-height:100svh;padding:calc(var(--nav-h) + clamp(28px,5.4vh,60px)) 0 48px;color:var(--plum)}
.d3-copy{max-width:min(700px,47vw)}
.d3-h1{font-weight:500;font-size:clamp(44px,6.6vw,100px);line-height:.95;letter-spacing:-.045em}
.d3-ln{display:block;white-space:nowrap;animation:d3-land .8s 2.04s var(--ease) both}
.d3-ln+.d3-ln{animation-delay:2.12s}
.d3-dot{color:var(--verm);display:inline-block;animation:d3-dotp 2.4s 3.2s var(--ease) infinite}
.d3-sub{margin-top:22px;font-size:clamp(16px,1.22vw,18.5px);line-height:1.5;color:var(--ink-mut);max-width:58ch;animation:d3-land .8s 2.3s var(--ease) both}
.d3-avail{margin-top:20px;max-width:580px;border-top:1px solid var(--ink-line);animation:d3-land .8s 2.38s var(--ease) both}
.d3-avail li{display:grid;grid-template-columns:168px 1fr;gap:16px;padding:9px 0;border-bottom:1px solid var(--ink-line);font-size:14px;line-height:1.45}
.d3-avail b{font-weight:600}
.d3-ctas{margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;animation:d3-land .8s 2.44s var(--ease) both}
.d3-btn{background:var(--plum);color:var(--chalk)}
.d3-btn:hover{transform:translateY(-2px)}
.d3-btn .arr{transition:transform .25s var(--ease)}
.d3-under{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--ink-mut);max-width:56ch;animation:d3-land .8s 2.5s var(--ease) both}
.d3-stats{margin-top:30px;padding-top:18px;border-top:1px solid var(--ink-line);max-width:580px;animation:d3-land .8s 2.58s var(--ease) both}
.d3-stats dl{display:flex;gap:clamp(24px,3vw,44px)}
.d3-stats dt{font-size:clamp(28px,2.7vw,40px);font-weight:500;letter-spacing:-.045em;line-height:1}
.d3-stats dt i{font-style:normal}
.d3-stats dd{margin-top:6px;font-size:12.5px;line-height:1.35;color:var(--ink-mut);max-width:17ch}
.d3-src{margin-top:12px;font-size:12px;line-height:1.45;color:rgba(35,31,43,.72);max-width:62ch}

/* screen 2: a harness, not another agent */
.d3-b2{min-height:100vh;min-height:100lvh;color:var(--chalk);background:var(--plum)}
.d3-live .d3-b2{background:transparent}
.d3-still{position:absolute;inset:0;width:100%;height:100%;display:none}
.d3-static .d3-still{display:block}
.d3-b2-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4vw,64px);min-height:100vh;min-height:100lvh;padding-top:calc(var(--nav-h) + 7vh);padding-bottom:6vh}
.d3-h2{font-weight:500;font-size:clamp(34px,4.4vw,68px);line-height:1.02;letter-spacing:-.04em;max-width:12ch}
.d3-b2-p{margin-top:22px;font-size:clamp(17px,1.4vw,21px);line-height:1.45;color:rgba(238,234,227,.78);max-width:28ch}
.d3-b2-cap{grid-column:2;margin-top:2.4vh;font:400 clamp(19px,1.7vw,26px)/1.25 var(--serif);letter-spacing:-.01em;max-width:30ch}
.d3-xs{grid-column:2;grid-row:1/3;display:grid;grid-template-rows:15vh 19vh 21vh 9vh;align-self:start}
.d3-row{display:grid;grid-template-columns:150px 1fr;align-items:center;border-top:1px solid rgba(238,234,227,.14)}
.d3-row-models{border-bottom:1px solid rgba(238,234,227,.14)}
.d3-k{font-size:13px;color:rgba(238,234,227,.66);line-height:1.3;align-self:center}
.d3-k small{display:block;font-size:12px;color:rgba(238,234,227,.66);margin-top:3px;max-width:14ch}
.d3-row-nen .d3-k{position:relative;z-index:1;justify-self:start;display:grid;gap:2px;padding:10px 14px 11px;margin-left:-14px;border-radius:12px;background:var(--plum);box-shadow:inset 0 0 0 1px rgba(182,165,207,.28)}
.d3-row-nen .d3-k b{font-size:22px;font-weight:600;letter-spacing:-.03em;color:#fff}
.d3-slot{display:block;height:100%}
.d3-models{display:flex;gap:28px;font-size:20px;font-weight:560;letter-spacing:-.02em}
.d3-row-prod .d3-slot,.d3-row-agents .d3-slot{height:70%}

/* after the stage */
.d3-keep{background:var(--plum);color:var(--chalk);padding:clamp(56px,8vw,120px) 0}
/* one row per pair: what stays yours on top, and what Nenya takes on slides out from under it (armed by JS) */
.d3-pairs{--gap:clamp(24px,4vw,64px);display:block;width:100%;max-width:1080px;border-collapse:collapse}
.d3-pairs thead,.d3-pairs tbody{display:block}
.d3-pairs tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(238,234,227,.1)}
.d3-pairs thead tr{border-bottom-color:rgba(238,234,227,.18)}
.d3-pairs th{text-align:left;font-size:clamp(19px,1.5vw,24px);font-weight:560;letter-spacing:-.02em;padding:0 var(--gap) 14px 0}
.d3-pairs th+th{color:#C9C4FF;padding-right:0}
.d3-pairs td{position:relative;display:block;padding:15px var(--gap) 15px 24px;font-size:clamp(16px,1.2vw,18px);line-height:1.4;color:rgba(238,234,227,.84)}
.d3-pairs td:first-child{z-index:1;background:var(--plum)}
.d3-pairs td+td{padding-right:0}
.d3-pairs td::before{content:"";position:absolute;left:0;top:calc(15px + .7em - 4px);width:8px;height:8px;background:rgba(238,234,227,.7)}
.d3-pairs td+td::before{background:var(--gold)}
.d3-pairs.arm td+td{opacity:0;transform:translateX(-46%)}
.d3-pairs.arm tr.in td+td{opacity:1;transform:none;transition:transform .85s cubic-bezier(.2,.8,.15,1) var(--t,0s),opacity .45s var(--t,0s) cubic-bezier(.16,1,.3,1)}
.d3-iface{margin-top:clamp(28px,4vw,48px);max-width:62ch;font:400 clamp(18px,1.5vw,22px)/1.45 var(--serif);color:rgba(238,234,227,.9)}
.d3-wall{background:var(--chalk);color:var(--plum);padding:clamp(56px,7vw,104px) 0}
.d3-wall-h{font-size:clamp(26px,2.6vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.12;max-width:24ch}
.d3-wall-sub{margin-top:10px;font-size:15px;color:var(--ink-mut)}
.d3-logos{margin-top:36px;display:flex;flex-wrap:wrap;gap:28px 48px;align-items:center}
.d3-logos img{height:24px;width:auto;opacity:.82}
.d3-close{position:relative;overflow:hidden;background:var(--ultra);color:var(--chalk);padding:clamp(72px,9vw,140px) 0 clamp(280px,30vw,420px);text-align:center}
/* mid-page now: a shorter runway under the ring on desktop, so Test it arrives with its heading on screen */
@media (min-width:901px){.d3-close{padding-bottom:clamp(170px,17.5vw,252px)}}
.d3-close-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.d3-close .wrap{position:relative;z-index:1}
.d3-close .d3-h2{margin:0 auto;max-width:14ch}
.d3-close-p{margin-left:auto;margin-right:auto}
.d3-close .d3-ctas{justify-content:center;margin-top:30px}
.d3-close .d3-btn-inv{font-size:18px;min-height:58px;padding:0 30px}
.d3-close .d3-btn-inv.held{animation:d3-held 1.2s var(--ease)}
@keyframes d3-held{0%{box-shadow:0 0 0 0 rgba(244,206,70,.9)}100%{box-shadow:0 0 0 22px rgba(244,206,70,0)}}
.d3-close-p{margin-top:18px;font-size:clamp(17px,1.4vw,21px);max-width:44ch;color:rgba(238,234,227,.86)}
.d3-close .d3-ctas{animation:none}
.d3-btn-inv{background:var(--chalk);color:var(--plum)}
.v8-callwrap{position:relative;display:inline-flex}
.v8-axo{position:absolute;left:50%;bottom:100%;width:48px;height:32px;margin:0 0 -5px -24px;image-rendering:pixelated;pointer-events:none}
.d3-close.arm .v8-axo{opacity:0;transform:translateY(12px)}
.d3-close.arm.on .v8-axo{opacity:1;transform:none;transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.3,1.6,.5,1)}
.d3-or{font-size:14px;color:rgba(238,234,227,.8);flex-basis:100%}
.d3-close .d3-ctas{flex-direction:column;gap:14px}
.d3-close .d3-or{flex-basis:auto;padding:4px 12px;border-radius:999px;background:var(--ultra)}
.d3-or a{text-decoration:underline;text-underline-offset:3px}

@keyframes d3-cardin{from{transform:translate(-50%,-50%) translateY(6px) scale(.985)}}
@keyframes d3-pulse{30%{transform:translate(-50%,-50%) scale(1.045)}}
@keyframes d3-pan{0%,33%{transform:translateX(var(--pan)) scale(var(--zoom));animation-timing-function:cubic-bezier(.55,0,.25,1)}100%{transform:none}}
@keyframes d3-strike{to{background-size:100% 2px}}
@keyframes d3-odo-up{to{opacity:0;transform:translateY(-100%)}}
@keyframes d3-odo-down{from{opacity:0;transform:translateY(100%)}}
@keyframes d3-unstack{to{box-shadow:inset 0 0 0 1px rgba(35,31,43,.13),0 1px 0 rgba(35,31,43,.05),0 18px 40px -18px rgba(35,31,43,.45)}}
@keyframes d3-up{to{opacity:0;transform:translateY(-.45em)}}
@keyframes d3-down{from{opacity:0;transform:translateY(.5em)}}
@keyframes d3-spin{to{transform:rotate(1turn)}}
@keyframes d3-fade{to{opacity:0}}
@keyframes d3-pop{from{opacity:0;transform:scale(.2)}}
@keyframes d3-land{from{opacity:0;transform:translateY(16px)}}
@keyframes d3-dotp{50%{opacity:.35}}

/* small laptops and tablets in landscape: the weave sits a little further right, clear of the copy */
@media (min-width:901px) and (max-width:1100px){.d3-jobpos{left:76%}}
@media (max-width:900px){
  .d3-page{--pan:0px;--zoom:1.28}
  .d3-jobpos{left:50%;top:calc(var(--nav-h) + 27vh)}
  .d3-job{width:282px;grid-template-columns:18px 1fr auto;column-gap:9px;padding:12px 12px 11px}
  .d3-job-t{font-size:14.5px}
  .d3-chip{font-size:12px}
  .d3-job-s{font-size:12.5px}
  .d3-tick{width:18px;height:18px}
  .d3-tick i{left:6px;top:3px}
  .d3-axo{width:54px;height:36px}
  .d3-hero{padding-top:calc(var(--nav-h) + 27vh + min(52vw,25vh) + 6px)}
  .d3-copy{max-width:none;display:flex;flex-direction:column;background:var(--chalk);box-shadow:0 0 0 100vmax var(--chalk);clip-path:inset(-4px -100vmax -16px)}
  .d3-ctas{order:1}.d3-under{order:2}.d3-sub{order:3}.d3-avail{order:4;margin-top:22px}.d3-stats{order:5}
  .d3-h1{font-size:clamp(38px,10.6vw,52px)}
  .d3-ln{display:inline;white-space:normal}
  .d3-sub{font-size:15.5px;margin-top:14px}
  .d3-avail li{grid-template-columns:1fr;gap:2px}
  .d3-ctas{margin-top:18px}
  .d3-stats dl{gap:18px}
  .d3-illus{bottom:auto;top:calc(var(--nav-h) + 10px)}
  .d3-hint{left:auto;right:var(--gut);top:calc(var(--nav-h) + 34px);font-size:12px}
  .d3-b2-grid{grid-template-columns:1fr;padding-top:calc(var(--nav-h) + 28px)}
  .d3-b2-cap,.d3-xs{grid-column:1;grid-row:auto}
  .d3-xs{margin-top:22px;grid-template-rows:auto auto auto auto}
  .d3-row{grid-template-columns:1fr;align-items:start;padding:10px 0}
  .d3-row-prod .d3-slot{height:84px}
  .d3-row-agents .d3-slot{height:72px;margin-top:8px}
  .d3-row-nen .d3-slot{height:64px}
  .d3-row-nen .d3-k{margin-left:0}
  .d3-models{font-size:17px;margin-top:6px}
  .d3-pairs tbody tr{grid-template-columns:1fr;padding:6px 0 10px}
  .d3-pairs td{padding:7px 0 7px 22px}
  .d3-pairs td::before{top:calc(7px + .7em - 4px)}
  .d3-pairs th{position:relative;padding:0 16px 14px 22px;font-size:18px}
  .d3-pairs th::before{content:"";position:absolute;left:0;top:calc(.6em - 4px);width:8px;height:8px;background:rgba(238,234,227,.7)}
  .d3-pairs th+th::before{background:var(--gold)}
  .d3-pairs.arm td+td{transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){
  /* the site turns CSS animation off here, so state the finished card outright */
  .d3-page *,.d3-page *::before,.d3-page *::after{animation:none!important}
  .d3-old,.d3-c1,.d3-s1,.d3-tick::before,.d3-hint{visibility:hidden}
  .d3-job{box-shadow:inset 0 0 0 1px rgba(35,31,43,.13),0 1px 0 rgba(35,31,43,.05),0 18px 40px -18px rgba(35,31,43,.45)}
}

/* ---------- v8: the rest of the page ---------- */
.dp-page{background:var(--plum)}
.v8-dot{color:var(--verm)}
/* each H2's dot echoes the hero once on arrival: it drifts off its line, then snaps back (added by JS, never under reduced motion) */
.v8-dot.go{display:inline-block;animation:v8-dot .9s both}
@keyframes v8-dot{0%{transform:none;animation-timing-function:cubic-bezier(.45,0,.6,1)}52%{transform:translate(.3em,-.22em) rotate(18deg);animation-timing-function:cubic-bezier(.7,0,.9,.3)}70%{transform:translate(-.05em,.03em) scale(1.25,.8);animation-timing-function:cubic-bezier(.2,.8,.3,1)}84%{transform:translate(.015em,-.02em) scale(.95,1.06)}100%{transform:none}}
.dp-page .h2{max-width:20ch}

/* calm sections: blocks rise in once on arrival (armed by JS, never under reduced motion) */
.rv8{opacity:0;transform:translateY(22px)}
.rv8.rv8-in{opacity:1;transform:none;transition:opacity .5s var(--ease) var(--d,0s),transform .75s var(--ease) var(--d,0s)}

/* the wall, now after the stack: no overlap into the section above */
.dp-page .v8-wall{margin-top:0;padding-top:clamp(56px,7vw,100px)}
/* the traction number in a deeper vermilion so it passes AA on chalk (4.85:1); /nenya keeps the shell colour */
.d3-page .nb-wall-n{color:#B23E25}

/* What a catch looks like: 40 follow-ups drop through the Nenya band; 3 stop on it */
.v8-catch-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px clamp(24px,4vw,64px);align-items:end}
.v8-catch-head .h2{max-width:11ch}
.v8-catch-head .deck{margin:0;max-width:56ch;font-size:var(--fs-body);line-height:1.55}
.v8-scene{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,44px);margin-top:clamp(32px,4vw,56px);padding:clamp(20px,2.6vw,36px);border-radius:28px;background:var(--plum);color:var(--chalk)}
.v8-beats{display:grid;gap:8px;margin:0;padding:0;list-style:none;align-content:center}
.v8-beats li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:12px 14px;border-radius:14px;background:#332D3D;font-size:15px;line-height:1.4}
.v8-beats time{padding-top:2px;color:rgba(238,234,227,.6);font-size:12px}
.v8-beats .v8-beat-n{background:linear-gradient(160deg,#4C46F0,#3A34E6 55%,#2B26C4)}
.v8-beats .v8-beat-n time{color:var(--gold)}
.v8-run{--rq:30px;--rn:132px;--ro:250px;--sq:min(16px,2.1vw);position:relative;height:280px}
.v8-lane{position:absolute;left:0;font-size:12px;line-height:1;color:rgba(238,234,227,.62)}
.v8-lane-q{top:4px}
.v8-lane-n{top:calc(var(--rn) - 26px);color:#C9C4FF;font-weight:600}
.v8-lane-o{top:calc(var(--ro) - 22px)}
.v8-braid{position:absolute;left:0;width:100%;top:calc(var(--rn) - 14px);height:40px;overflow:visible}
.v8-mails{position:absolute;left:0;right:0;top:var(--rq);display:grid;grid-template-columns:repeat(40,minmax(0,1fr));justify-items:center}
.v8-mails i{display:block;width:var(--sq);height:var(--sq);background:var(--lilac);opacity:.5;transform:translateY(calc(var(--ro) - var(--rq)))}
.v8-mails i.x{background:var(--verm);opacity:1;transform:translateY(calc(var(--rn) - var(--rq) + 1px));box-shadow:0 0 0 3px rgba(224,98,69,.28)}
.v8-stopchip{position:absolute;left:48.75%;top:calc(var(--rn) + 22px);transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:#C4482D;color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
.v8-stopchip::before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;background:inherit;transform:rotate(45deg);z-index:-1}
.v8-illus{position:absolute;right:clamp(20px,2.6vw,36px);bottom:12px;font-size:12px;color:rgba(238,234,227,.66)}
/* armed by JS (not under reduced motion): everything waits in the queue until the scene is on screen */
.v8-scene.arm .v8-mails i{background:var(--chalk);opacity:1;box-shadow:none;transform:none}
.v8-scene.arm .v8-stopchip{opacity:0;transform:translateX(-50%) translateY(6px)}
.v8-scene.arm .v8-braid{opacity:.55}
.v8-scene.arm.in .v8-mails i{background:var(--lilac);opacity:.5;transform:translateY(calc(var(--ro) - var(--rq)));transition:transform .9s cubic-bezier(.5,0,.3,1) calc(var(--i) * 24ms),background .4s calc(var(--i) * 24ms + .55s) cubic-bezier(.16,1,.3,1),opacity .6s calc(var(--i) * 24ms + .7s) cubic-bezier(.16,1,.3,1)}
.v8-scene.arm.in .v8-mails i.x{background:var(--verm);opacity:1;transform:translateY(calc(var(--rn) - var(--rq) + 1px));box-shadow:0 0 0 3px rgba(224,98,69,.28);transition:transform .55s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * 24ms),background .2s calc(var(--i) * 24ms + .4s) cubic-bezier(.16,1,.3,1),box-shadow .4s calc(var(--i) * 24ms + .45s) cubic-bezier(.16,1,.3,1)}
.v8-scene.arm.in .v8-stopchip{opacity:1;transform:translateX(-50%);transition:opacity .4s 1.05s cubic-bezier(.16,1,.3,1),transform .5s var(--ease) 1.05s}
.v8-scene.arm.in .v8-braid{opacity:1;transition:opacity .4s .5s cubic-bezier(.16,1,.3,1)}
/* the three hit the braid together: it flashes gold and each one glows where it stopped */
.v8-scene.arm.in .v8-braid path{animation:v8-hit .7s .9s}
.v8-scene.arm.in .v8-mails i.x{animation:v8-glow 1.1s ease-out .9s}
@keyframes v8-hit{25%{stroke:#F4CE46;stroke-width:3.5px}}
@keyframes v8-glow{20%{box-shadow:0 0 0 3px rgba(224,98,69,.5),0 0 22px 8px rgba(224,98,69,.55)}}
/* replay the scene; only when it can play */
.v8-replay{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:0 2px;border:0;background:none;color:var(--lilac);font:inherit;font-size:14.5px;text-decoration:underline;text-decoration-color:rgba(182,165,207,.45);text-underline-offset:4px;cursor:pointer}
.v8-replay:hover{color:var(--chalk);text-decoration-color:currentColor}
.v8-replay:focus-visible{outline:2px solid var(--lilac);outline-offset:3px;border-radius:4px}
.v8-scene:not(.arm)~.v8-replay{display:none}
.v8-scene.arm~.v8-replay{opacity:0;pointer-events:none}
.v8-scene.arm.in~.v8-replay{opacity:1;pointer-events:auto;transition:opacity .4s 1.9s cubic-bezier(.16,1,.3,1)}
/* the three beats light up with the run: the rule, the queue, the catch */
.v8-scene.arm .v8-beats li{opacity:.3;transform:translateX(-6px)}
.v8-scene.arm.in .v8-beats li{opacity:1;transform:none;transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .5s var(--ease)}
.v8-scene.arm.in .v8-beats li:nth-child(2){transition-delay:.3s}
.v8-scene.arm.in .v8-beats li:nth-child(3){transition-delay:1s}
/* on plum: the scene panel steps up a shade, and the probe squares go light so they read on the dark */
.v8-catch .v8-scene{background:#2E2938;box-shadow:inset 0 0 0 1px rgba(238,234,227,.06)}
.v8-catch .v8-beats li{background:#3A3446}
.v8-catch .v8-beats .v8-beat-n{background:linear-gradient(160deg,#4C46F0,#3A34E6 55%,#2B26C4)}
.v8-catch .v8-dots i{box-shadow:inset 0 0 0 1.5px rgba(238,234,227,.38)}
.v8-catch .v8-dots i.on{background:#8C87FF;box-shadow:none}
.v8-catch .v8-dots i.hold{box-shadow:inset 0 0 0 2px #8C87FF}
.v8-probes{display:grid;grid-template-columns:1fr 1fr;gap:24px clamp(24px,4vw,64px);margin-top:clamp(28px,3.4vw,44px)}
.v8-dots{display:grid;grid-template-columns:repeat(18,14px);gap:5px}
.v8-dots i{display:block;width:14px;height:14px;box-shadow:inset 0 0 0 1.5px rgba(35,31,43,.34)}
.v8-dots i.on{background:var(--ultra);box-shadow:none}
.v8-dots i.hold{box-shadow:inset 0 0 0 2px var(--ultra)}
.v8-probes figcaption{margin-top:12px;max-width:40ch;font-size:15px;line-height:1.45;color:var(--mut)}
.v8-probes b{margin-right:4px;color:var(--fg);font-size:17px;font-weight:600}

/* Day 30: the bars become cells, one square per percent (50 columns by 2 rows) */
.v8-d30 .dp-sig{--panel:#FCFBF8;background:var(--panel);box-shadow:inset 0 0 0 1px rgba(35,31,43,.1),0 30px 60px -40px rgba(35,31,43,.4)}
.v8-d30 .dp-sig-pick button:not([aria-pressed="true"]){background:#F3F0EA}
.v8-d30 .dp-sig-row i{position:relative;height:20px;border-radius:0;background:rgba(35,31,43,.08)}
.v8-d30 .dp-sig-row i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 78%,var(--panel) 78%) 0 0/2% 100%,linear-gradient(180deg,transparent 0 45%,var(--panel) 45% 55%,transparent 55%)}
.v8-d30 .dp-sig-row s{border-radius:0;background:rgba(35,31,43,.62)}
.v8-d30 .dp-nen s{background:var(--ultra)}
/* at rest, before a pick, Nenya's printed day-30 results already stand (dimmed); a pick runs the clock against them */
.v8-d30 .dp-sig:not(.ran) [data-bar="nfid"]{width:95.2%}
.v8-d30 .dp-sig:not(.ran) [data-bar="nrule"]{width:97.6%}
.v8-d30 .dp-sig .dp-nen{opacity:.8}
.v8-d30 .dp-sig.nen .dp-nen{opacity:1}

/* A more autonomous product: six claims, still type */
/* A more autonomous product: six small copies of the hero's job card. Each spinner turns into the check as its card
   arrives, and the figure is what comes back (armed by JS; the finished cards are the default and the reduced-motion state) */
.v8-jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(28px,4vw,52px)}
.v8-jc{display:flex;flex-direction:column;padding:15px clamp(16px,1.6vw,22px) clamp(20px,2vw,26px);border-radius:14px;background:#FCFBF8;color:var(--plum);box-shadow:inset 0 0 0 1px rgba(35,31,43,.13),0 1px 0 rgba(35,31,43,.05),0 10px 16px -12px rgba(35,31,43,.4)}
.v8-jc-h{display:flex;align-items:center;gap:11px;padding-bottom:13px;margin-bottom:clamp(16px,1.6vw,22px);border-bottom:1px solid rgba(35,31,43,.1)}
.v8-jc .d3-tick{flex:none}
.v8-jc h3{margin:0;font-size:clamp(16.5px,1.25vw,19px);font-weight:560;letter-spacing:-.015em;line-height:1.2}
.v8-fig{margin:0 0 14px;font-size:clamp(42px,4vw,62px);font-weight:500;line-height:1;letter-spacing:-.045em;color:var(--ultra)}
.v8-fig small{font-size:.5em;letter-spacing:-.02em}
.v8-jc>p:last-child{margin:0;color:rgba(35,31,43,.78);font-size:var(--fs-body);line-height:1.5}
.v8-jc .d3-tick::before{animation:none;opacity:0}
.v8-jc .d3-tick::after,.v8-jc .d3-tick i{animation:none}
.v8-jobs.arm .v8-jc .d3-tick::before{opacity:1}
.v8-jobs.arm .v8-jc .d3-tick::after,.v8-jobs.arm .v8-jc .d3-tick i{opacity:0}
.v8-jobs.arm .v8-jc .v8-fig{opacity:.3;transform:translateY(.14em)}
.v8-jobs.arm .v8-jc.in .d3-tick::before{animation:d3-spin .8s linear 4,d3-fade .15s var(--t,.55s) forwards}
.v8-jobs.arm .v8-jc.in .d3-tick::after{opacity:1;animation:d3-pop .4s calc(var(--t,.55s) + .02s) cubic-bezier(.3,1.6,.5,1) both}
.v8-jobs.arm .v8-jc.in .d3-tick i{opacity:1;animation:d3-pop .3s calc(var(--t,.55s) + .12s) var(--ease) both}
.v8-jobs.arm .v8-jc.in .v8-fig{opacity:1;transform:none;transition:opacity .35s calc(var(--t,.55s) + .04s) cubic-bezier(.16,1,.3,1),transform .55s var(--ease) calc(var(--t,.55s) + .04s)}

/* Days on their own: hours as cells, one square per hour, drawn to scale */
.v8-hours{--pitch:min(20px,calc((100vw - 2 * var(--gut)) / 55))}
.v8-cm{margin-top:clamp(36px,4.4vw,60px)}
.v8-cm h3{margin:0;font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.025em}
.v8-cm h3 em{font-style:normal;color:var(--gold)}
.v8-cm-sub{margin:6px 0 0;color:var(--mut);font-size:var(--fs-small)}
.v8-crow{margin-top:20px}
.v8-crow p{display:flex;justify-content:space-between;gap:12px;width:calc(var(--pitch) * 55);max-width:100%;margin:0 0 8px;font-size:15px}
.v8-cm-sm .v8-crow p{width:calc(var(--pitch) * 21)}
.v8-crow p b{font-weight:600;font-variant-numeric:tabular-nums}
.v8-us p{color:var(--gold)}
.v8-cells{--cols:55;display:grid;grid-template-columns:repeat(var(--cols),var(--pitch));min-height:calc(var(--pitch) * 2)}
.v8-cells[data-cells="42"]{--cols:21}
.v8-cells i{display:block;width:calc(var(--pitch) - 4px);height:calc(var(--pitch) - 4px);margin-bottom:4px;background:rgba(238,234,227,.13)}
.v8-cells i.on{background:rgba(238,234,227,.82)}
.v8-cells i.part{background:linear-gradient(90deg,rgba(238,234,227,.82) var(--f),rgba(238,234,227,.13) var(--f))}
.v8-us .v8-cells i.on{background:var(--gold)}
.v8-us .v8-cells i.part{background:linear-gradient(90deg,var(--gold) var(--f),rgba(238,234,227,.13) var(--f))}
.v8-cells.arm i.on,.v8-cells.arm i.part{transform:scale(.2);opacity:0}
.v8-cells.arm.in i.on,.v8-cells.arm.in i.part{transform:none;opacity:1;transition:transform .35s var(--ease) calc(var(--k) * 11ms),opacity .2s calc(var(--k) * 11ms) cubic-bezier(.16,1,.3,1)}
.v8-us{position:relative}
.v8-axo-run{position:absolute;left:0;top:0;width:24px;height:16px;image-rendering:pixelated;pointer-events:none;opacity:0;z-index:1}
.v8-axo-run.on{opacity:1}
.v8-cm figcaption{margin-top:14px;color:var(--fg);font-size:var(--fs-body)}

/* the deal and fit: light cards stay light */
.dp-page .dp-fitwrap>div{background:#FCFBF8;box-shadow:inset 0 0 0 1px rgba(35,31,43,.08)}
.dp-page .dp-fitwrap>div.dp-not{background:transparent;box-shadow:inset 0 0 0 1px rgba(35,31,43,.16)}

/* What happens when you book: the two steps before anything else, side by side (the track above carries the rest) */
.v8-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);max-width:980px;margin:clamp(28px,3.4vw,48px) 0 0;padding:0;list-style:none}
.v8-next li{padding:clamp(22px,2.4vw,32px);border-radius:16px;background:rgba(238,234,227,.07);box-shadow:inset 0 0 0 1px rgba(238,234,227,.16)}
.v8-next b{display:flex;align-items:center;gap:12px;font-size:var(--fs-h3);font-weight:540;letter-spacing:-.01em}
.v8-next b::before{content:"";flex:none;width:12px;height:12px;background:var(--gold)}
.v8-next p{margin:10px 0 0;color:var(--mut);font-size:var(--fs-body);line-height:1.5}
.v8-steps .btn.primary{background:var(--gold);color:var(--plum)}
.v8-steps .btn.primary .arr{color:var(--plum)}

@media (max-width:1100px){
  .v8-jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .d3-close .d3-btn-inv{font-size:17px;min-height:54px}
  .v8-catch-head,.v8-scene,.v8-probes{grid-template-columns:1fr}
  .v8-run{--sq:6px}
  .v8-scene{padding-bottom:40px}
  .v8-run{--rn:104px;--ro:180px;height:206px}
  .v8-dots{grid-template-columns:repeat(18,minmax(0,14px));gap:4px}
  .v8-dots i{width:auto;aspect-ratio:1;height:auto}
  .v8-next{grid-template-columns:1fr}
}
@media (max-width:760px){
  .v8-hours{--pitch:calc((100vw - 2 * var(--gut)) / 22)}
  .v8-cells{--cols:22}
  .v8-crow p{width:calc(var(--pitch) * 22)}
  .v8-cells i{width:calc(var(--pitch) - 3px);height:calc(var(--pitch) - 3px);margin-bottom:3px}
  .v8-jobs{grid-template-columns:1fr;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .v8-run .v8-mails i,.v8-cells i,.v8-beats li{transition:none!important}
}

/* ---------- builder5 (2026-11-03): the closing band, and the three sections after the hours made live ---------- */
/* the calm last word: the H1 line and one Book a call, so the page still ends on the CTA */
.v8-end{padding:clamp(56px,6.5vw,96px) 0;text-align:center}
.v8-end .d3-h2{margin:0 auto;max-width:none;font-size:clamp(30px,3.6vw,54px);text-wrap:balance}
.v8-end .d3-ctas{justify-content:center;margin-top:26px;animation:none}

/* Who it's for: each strong-fit line is a job card whose spinner turns into the check, one after another, on one
   thread; the not-yet lines are cards that drop out of the job */
.dp-page .v8-fit>div,.dp-page .v8-fit>div.dp-not{padding:0;background:transparent;box-shadow:none}
.v8-fit ul{position:relative;gap:10px}
.v8-fit>div:first-child ul::before{content:"";position:absolute;left:25px;top:22px;bottom:22px;width:2px;background:var(--ultra);opacity:.28}
.v8-fit li::before,.dp-not .v8-fit li::before,.v8-fit .dp-not li::before{content:none}
.v8-fc{position:relative;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;background:#FCFBF8;box-shadow:inset 0 0 0 1px rgba(35,31,43,.13),0 1px 0 rgba(35,31,43,.05),0 10px 16px -12px rgba(35,31,43,.4)}
.v8-fc .d3-tick{flex:none;margin-top:1px}
.v8-fc .d3-tick::before{animation:none;opacity:0}
.v8-fc .d3-tick::after,.v8-fc .d3-tick i{animation:none}
.v8-fit.arm .v8-fc .d3-tick::before{opacity:1}
.v8-fit.arm .v8-fc .d3-tick::after,.v8-fit.arm .v8-fc .d3-tick i{opacity:0}
.v8-fit.arm .v8-fc.in .d3-tick::before{animation:d3-spin .8s linear 4,d3-fade .15s var(--t,.55s) forwards}
.v8-fit.arm .v8-fc.in .d3-tick::after{opacity:1;animation:d3-pop .4s calc(var(--t,.55s) + .02s) cubic-bezier(.3,1.6,.5,1) both}
.v8-fit.arm .v8-fc.in .d3-tick i{opacity:1;animation:d3-pop .3s calc(var(--t,.55s) + .12s) var(--ease) both}
/* tap the ones that sound like you: each turns gold, and the closer below runs that many of its threads in gold */
.v8-fit-hint{display:none;margin:14px 0 0 2px;font-size:var(--fs-body);color:rgba(35,31,43,.7)}
.v8-fit.tap .v8-fit-hint{display:block}
.v8-fit.tap .v8-fc{cursor:pointer;transition:box-shadow .25s cubic-bezier(.16,1,.3,1),transform .25s var(--ease)}
.v8-fit.tap .v8-fc:hover{transform:translateY(-1px)}
/* the pick: an empty gold square at the card's edge (a real toggle button) that fills when picked; the card turns
   cream and its piece of the thread turns gold */
.v8-fc-pick{flex:none;align-self:center;width:18px;height:18px;margin:0 0 0 auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:inset 0 0 0 2px #CB9C17;cursor:pointer;transition:background .2s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.3,1.6,.5,1)}
.v8-fc-pick:focus-visible{outline:2px solid var(--ultra);outline-offset:3px}
.v8-fit.tap .v8-fc:hover .v8-fc-pick{background:rgba(244,206,70,.3)}
.v8-fc.gold{background:#FBF1CF;box-shadow:inset 0 0 0 2px var(--gold),0 1px 0 rgba(35,31,43,.05),0 10px 18px -10px rgba(203,156,23,.8)}
.v8-fit.tap .v8-fc.gold .v8-fc-pick{background:var(--gold);transform:scale(1.12)}
.v8-fit .v8-fc.gold::before,.v8-fit .v8-fc.gold::after{content:"";position:absolute;left:24px;width:4px;height:10px;background:var(--gold)}
.v8-fit .v8-fc.gold::before{top:-10px}
.v8-fit .v8-fc.gold::after{bottom:-10px}
.v8-fit .v8-fc.gold:first-child::before,.v8-fit .v8-fc.gold:last-child::after{content:none}
/* the not-yet cards: at rest they hang off the job, dashed and dim, each a little askew */
.v8-fx{position:relative;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:12px;border:1.5px dashed rgba(35,31,43,.24);color:rgba(35,31,43,.6);transform:translateY(6px) rotate(var(--r,-1deg))}
.v8-fx:nth-child(2){--r:.8deg}
.v8-fx:nth-child(3){--r:-.6deg}
.v8-fx-sq{flex:none;width:12px;height:12px;margin:5px 4px 0;box-shadow:inset 0 0 0 1.5px rgba(35,31,43,.34);transform:translateY(4px) rotate(18deg)}
/* armed, they start in the job like the cards beside them, then drop out of it once it is on screen */
.v8-fit.arm .v8-fx{border-color:transparent;background:#FCFBF8;color:var(--plum);transform:none;box-shadow:inset 0 0 0 1px rgba(35,31,43,.13)}
.v8-fit.arm .v8-fx .v8-fx-sq{background:var(--ultra);box-shadow:none;transform:none}
.v8-fit.arm .v8-fx.in{animation:v8-drop .9s var(--t,.4s) cubic-bezier(.5,0,.3,1) both}
.v8-fit.arm .v8-fx.in .v8-fx-sq{animation:v8-drop-sq .9s var(--t,.4s) cubic-bezier(.5,0,.3,1) both}
@keyframes v8-drop{
  0%{border-color:transparent;background:#FCFBF8;color:var(--plum);box-shadow:inset 0 0 0 1px rgba(35,31,43,.13);transform:none}
  25%{transform:translateY(-3px) rotate(calc(var(--r,-1deg) * -.6))}
  100%{border-color:rgba(35,31,43,.24);background:rgba(252,251,248,0);color:rgba(35,31,43,.6);box-shadow:inset 0 0 0 1px rgba(35,31,43,0);transform:translateY(6px) rotate(var(--r,-1deg))}}
@keyframes v8-drop-sq{
  0%{background:var(--ultra);box-shadow:none;transform:none}
  30%{background:var(--verm);transform:translateY(-2px)}
  100%{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(35,31,43,.34);transform:translateY(4px) rotate(18deg)}}

/* Test it on your own job first: one track, Today to your product; Nen swims it as the section scrolls */
.v8-track{position:relative;margin-top:clamp(28px,3.4vw,48px)}
.v8-stops{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin:0;padding:64px 0 0;list-style:none}
.v8-stops li{position:relative}
.v8-stops li::before{content:"";position:absolute;left:0;top:-52px;width:18px;height:18px;border-radius:50%;background:var(--plum);box-shadow:0 0 0 5px var(--gold);z-index:2}
.v8-stops h3{margin:0;font-size:var(--fs-h3);font-weight:560;letter-spacing:-.015em;line-height:1.2}
.v8-stops p{margin:8px 0 0;font-size:var(--fs-body);line-height:1.5;color:rgba(35,31,43,.82)}
.v8-axo-t{position:absolute;left:0;top:0;width:48px;height:32px;image-rendering:pixelated;pointer-events:none;z-index:3;opacity:0}
.v8-axo-t.on{opacity:1}
.v8-track.arm .v8-stops li{opacity:.62;transform:translateY(8px);transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .5s var(--ease)}
.v8-track.arm .v8-stops li::before{background:var(--gold);box-shadow:0 0 0 5px var(--gold),inset 0 0 0 2px var(--plum);transition:background .25s cubic-bezier(.16,1,.3,1)}
.v8-track.arm .v8-stops li.lit{opacity:1;transform:none}
.v8-track.arm .v8-stops li.lit::before{background:var(--plum);animation:v8-lit .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes v8-lit{0%{transform:scale(.6)}100%{transform:none}}
.dp-gets .dp-two{margin-top:clamp(40px,5vw,72px)}

/* Your customers' data: a live boundary. Traces leave your machine; secrets are stripped at its edge and a marker
   stands in for them; your model keys stay home; in our cloud the traces are stored and the training gate stays shut */
@keyframes v8-key{50%{transform:translateY(-2px)}}
/* the gate: two posts and three bars, shut across the way in; the path from the store ends at it */
/* each trace is a lane-wide carrier, so translateX(100%) is the lane's width: compositor-only motion */
/* the edge is the lane's midpoint: before it the secret bit is vermilion, after it a hollow marker stands in */
/* a fact under the pointer, or tapped, lights its part of the picture */
.dp-grid-data article[data-part]{cursor:default;transition:box-shadow .25s cubic-bezier(.16,1,.3,1)}
.dp-grid-data article.hl{box-shadow:inset 0 0 0 2px var(--gold)}
.dp-grid-data article:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (max-width:900px){
  .v8-stops{grid-template-columns:1fr;gap:28px;padding:0 0 0 46px}
  .v8-stops li::before{left:-46px;top:2px}
  .v8-axo-t{width:36px;height:24px}
}
@media (max-width:600px){
}
@media (prefers-reduced-motion:reduce){
  .v8-fx,.v8-fx-sq{transition:none}
}

/* ---------- fixer5 (2026-11-03): REVIEW5 fixes ---------- */
/* Test it: the deal's lines rise in one after another, each check landing as it arrives */
.dp-gets .dp-two.arm li{opacity:0;transform:translateY(10px)}
.dp-gets .dp-two.arm li.in{opacity:1;transform:none;transition:opacity .45s var(--ease) var(--t,0s),transform .6s var(--ease) var(--t,0s)}
.dp-gets .dp-two.arm .dp-list:not(.dp-list-sm) li.in::before{animation:d3-pop .4s calc(var(--t,0s) + .18s) cubic-bezier(.3,1.6,.5,1) both}
/* the stop titles share a line height where one of them wraps */
@media (min-width:901px) and (max-width:1180px){.v8-stops h3{min-height:2.4em}}
/* loops hold still while their section is off screen */
.d3-stage.off .d3-tick::before,.d3-stage.off .d3-dot,.d3-close.off .d3-dot,.nb-wall.off .nb-wall-track{animation-play-state:paused}

/* ---------- builder6 (2026-11-03): depth and play in Who it's for, Test it and Your customers' data ---------- */
/* Who it's for: the strong-fit cards sit in a tilted stack under the lamp; each pick builds your job beside them,
   and the not-yet cards fall out of it */
.dp-page .v8-fit{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(24px,3.6vw,60px);align-items:start}
.v8-fit-a{perspective:1300px}
.v8-fit-a ul{transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.v8-fit-a ul.live{transition:transform .15s linear}
.v8-fit .v8-fc{background:radial-gradient(130% 160% at var(--lx,18%) var(--ly,-30%),rgba(255,244,214,.95),rgba(255,244,214,0) 55%),#FCFBF8;
  transform:translateZ(var(--z,8px));box-shadow:inset 0 0 0 1px rgba(35,31,43,.13),var(--sx,0px) var(--sy,14px) 26px -14px rgba(35,31,43,.5)}
.v8-fit.tap .v8-fc{transition:box-shadow .3s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.3,1.5,.5,1),background-color .3s cubic-bezier(.16,1,.3,1)}
.v8-fit.tap .v8-fc:hover{transform:translateZ(16px)}
.v8-fit .v8-fc.gold{--z:26px;background:radial-gradient(130% 160% at var(--lx,18%) var(--ly,-30%),rgba(255,250,230,.95),rgba(255,250,230,0) 55%),#FBF1CF;
  box-shadow:inset 0 0 0 2px var(--gold),var(--sx,0px) calc(var(--sy,14px) + 10px) 34px -14px rgba(203,156,23,.85)}
.v8-fit.tap .v8-fc.gold:hover{transform:translateZ(30px)}
.v8-fc.press{animation:v8-press .5s var(--ease)}
@keyframes v8-press{40%{transform:translateZ(0) scale(.985)}}
.v8-fit-b{position:relative}
.v8-fitjob{position:relative;margin:0 0 clamp(22px,2.6vw,34px);height:clamp(250px,22vw,310px);border-radius:18px;overflow:hidden;
  background:radial-gradient(90% 70% at 50% -10%,rgba(244,206,70,.2),rgba(244,206,70,0) 70%),linear-gradient(#2B2634,#1F1B27);
  box-shadow:0 2px 0 rgba(255,255,255,.6),0 30px 50px -28px rgba(35,31,43,.75),inset 0 0 0 1px rgba(238,234,227,.08)}
.v8-fitjob canvas{position:absolute;inset:0;width:100%;height:100%}
.v8-fit:not(.tap) .v8-fitjob{display:none}
.v8-fitjob figcaption{position:absolute;left:16px;bottom:12px;font-size:13px;color:rgba(238,234,227,.6)}
.dp-not{position:relative;z-index:2}
.v8-fit.arm6 .v8-fx{border-color:transparent;background:#FCFBF8;color:var(--plum);transform:none;
  box-shadow:inset 0 0 0 1px rgba(35,31,43,.13),0 16px 24px -14px rgba(35,31,43,.55);transition:background-color .6s cubic-bezier(.16,1,.3,1),color .6s cubic-bezier(.16,1,.3,1),box-shadow .6s cubic-bezier(.16,1,.3,1),border-color .6s cubic-bezier(.16,1,.3,1);animation:none}
.v8-fit.arm6 .v8-fx .v8-fx-sq{background:var(--verm);box-shadow:none;transform:none;transition:background-color .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);animation:none}
.v8-fit.arm6 .v8-fx.out{border-color:rgba(35,31,43,.24);background:rgba(252,251,248,0);color:rgba(35,31,43,.55);box-shadow:none}
.v8-fit.arm6 .v8-fx.out .v8-fx-sq{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(35,31,43,.34);transform:rotate(18deg)}
@media (max-width:900px){
  .dp-page .v8-fit{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .v8-fit-a,.v8-fit-b{display:contents}
  .v8-fit-a h3{order:1}
  .v8-fitjob{order:2;height:210px;margin:4px 0 18px}
  .v8-fit-a ul{order:3}
  .v8-fit-hint{order:4}
  .dp-not{order:5;margin-top:34px}
}

/* Test it: sixty days as sixty squares on a plum plate that recedes; Nen walks it with the scroll */
.v8-cal{position:relative;height:clamp(300px,27vw,380px);margin:0 0 clamp(18px,2.4vw,34px);perspective:860px;perspective-origin:50% -30%;display:none}
.v8-track.cal .v8-cal{display:block}
.v8-cal::before{content:"";position:absolute;left:10%;right:10%;bottom:-6px;height:44px;background:radial-gradient(closest-side,rgba(35,31,43,.34),rgba(35,31,43,0))}
.v8-cal-tilt{position:absolute;left:50%;bottom:22px;width:min(100%,940px);transform:translateX(-50%) rotateX(58deg);transform-origin:50% 100%;transform-style:preserve-3d}
.v8-cal-plate{position:relative;display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:9px;padding:16px;border-radius:14px;background:var(--plum);
  box-shadow:0 14px 0 #14111A}
.v8-cal-plate i{aspect-ratio:1;border-radius:3px;background:rgba(238,234,227,.13)}
.v8-cal-plate i.v{background:rgba(238,234,227,.8);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.v8-cal-plate i.g{background:rgba(244,206,70,.6)}
.v8-cal-plate i.g.v{background:#FFE27A;box-shadow:0 0 0 3px rgba(244,206,70,.45),0 4px 0 #B48A10}
.v8-cal-plate.span{box-shadow:0 14px 0 #14111A,0 0 0 3px var(--ultra),0 0 0 9px rgba(58,52,230,.22)}
.v8-cal-span{position:absolute;left:0;top:0;white-space:nowrap;padding:7px 12px;border-radius:9px;background:var(--ultra);color:#fff;font-size:14px;font-weight:560;opacity:0;transform:translateY(8px);transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .5s var(--ease)}
.v8-cal-span.on{opacity:1;transform:none}
.v8-cal-span::after{content:"";position:absolute;right:18px;top:100%;width:2px;height:14px;background:var(--ultra)}
.v8-cal-job{position:absolute;left:0;top:0;z-index:4;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:#FCFBF8;color:var(--plum);
  font-size:15px;white-space:nowrap;box-shadow:0 1px 0 rgba(35,31,43,.06),0 22px 30px -14px rgba(35,31,43,.6);opacity:0;pointer-events:none;
  transition:opacity .35s cubic-bezier(.16,1,.3,1),translate .6s cubic-bezier(.3,1.5,.5,1),scale .6s cubic-bezier(.3,1.5,.5,1);translate:0 0;scale:.7}
.v8-cal-job b{font-weight:560}
.v8-cal-job.lift{opacity:1;translate:0 -52px;scale:1}
.v8-cal-job .d3-tick::before{animation:none}
.v8-cal-job .d3-tick::after,.v8-cal-job .d3-tick i{opacity:0;animation:none}
.v8-cal-job.lift .d3-tick::before{animation:d3-spin .8s linear infinite}
.v8-cal-job.done .d3-tick::before{animation:none;opacity:0}
.v8-cal-job.done .d3-tick::after{opacity:1;animation:d3-pop .4s cubic-bezier(.3,1.6,.5,1) both}
.v8-cal-job.done .d3-tick i{opacity:1;animation:d3-pop .3s .1s var(--ease) both}
.v8-cal .v8-axo-t{width:48px;height:32px;z-index:3;transform-origin:50% 100%;will-change:transform}
.v8-cal .v8-illus{right:0;bottom:-4px;color:rgba(35,31,43,.6)}
.v8-track .v8-stops{padding:0}
.v8-track .v8-stops li::before{position:static;display:block;width:14px;height:14px;margin:0 0 12px;border-radius:3px;background:var(--plum);box-shadow:none}
.v8-track .v8-stops li:nth-child(2)::before{background:var(--gold);box-shadow:inset 0 0 0 2px var(--plum),0 0 10px 1px rgba(255,255,255,.6)}
.v8-track .v8-stops li:nth-child(3)::before{background:var(--ultra)}
.v8-track .v8-stops li:nth-child(4)::before{background:#3E8A5E}
.v8-track.arm .v8-stops li::before{animation:none}
.v8-track.arm .v8-stops li.lit::before{animation:v8-lit .45s cubic-bezier(.3,1.6,.5,1)}
/* the deal and the ask: short cards and chips, same words */
.dp-gets .dp-two{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}
.dp-gets .dp-two .dp-list:not(.dp-list-sm){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dp-gets .dp-two .dp-list:not(.dp-list-sm) li{padding:16px 18px 17px;border-radius:14px;background:rgba(255,255,255,.55);font-size:14.5px;line-height:1.45;color:rgba(35,31,43,.78);
  box-shadow:inset 0 0 0 1px rgba(35,31,43,.1),0 14px 24px -18px rgba(35,31,43,.55)}
.dp-gets .dp-two .dp-list:not(.dp-list-sm) li::before,.dp-gets .dp-two.arm .dp-list:not(.dp-list-sm) li.in::before{content:none}
.dp-gets .dp-two .dp-list:not(.dp-list-sm) li b{display:block;margin:0 0 6px;font-size:var(--fs-body);font-weight:600;line-height:1.3;color:var(--plum)}
.dp-gets .dp-ask{padding:0;background:transparent}
.dp-gets .dp-list-sm{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.dp-gets .dp-list-sm li{padding:10px 14px;border-radius:12px;background:var(--plum);color:var(--chalk);font-size:14.5px;line-height:1.4}
.dp-gets .dp-list-sm li::before{content:none}
@media (max-width:900px){
  .v8-track .v8-stops{padding:0}
  .v8-track .v8-stops li::before{position:static}
  .v8-cal{height:300px;perspective:640px;perspective-origin:50% -40%}
  .v8-cal-tilt{width:100%;bottom:16px;transform:translateX(-50%) rotateX(52deg)}
  .v8-cal-plate{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;padding:10px;border-radius:10px}
  .v8-cal-plate i{border-radius:2px}
  .v8-cal-span{font-size:13px;padding:6px 10px}
  .v8-cal-job{font-size:14px;padding:9px 12px}
  .v8-cal .v8-axo-t{width:36px;height:24px}
  .dp-gets .dp-two{grid-template-columns:1fr}
}
@media (max-width:600px){.dp-gets .dp-two .dp-list:not(.dp-list-sm){grid-template-columns:1fr}}

/* Your customers' data: your machine in front, our cloud behind, traces flying between them in depth */
.v8-bd{position:relative;height:clamp(360px,32vw,440px);margin:clamp(28px,3.4vw,44px) 0 0}
.v8-bd-scene{position:absolute;left:0;right:0;top:0;bottom:30px;perspective:1200px;perspective-origin:40% 42%}
.v8-bd-home,.v8-bd-cloud{position:absolute;border-radius:18px;transition:box-shadow .3s cubic-bezier(.16,1,.3,1)}
.v8-bd-cloud{right:-4%;top:0;width:66%;height:90%;z-index:1;transform:translateZ(-380px) rotateY(-16deg);transform-origin:100% 50%;
  background:radial-gradient(80% 60% at 70% 0%,rgba(182,165,207,.16),rgba(182,165,207,0)),linear-gradient(200deg,#36303F,#25212D);
  box-shadow:0 40px 60px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(238,234,227,.1)}
.v8-bd-home{left:0;top:9%;width:40%;height:84%;z-index:3;transform:rotateY(22deg) translateZ(60px);transform-origin:0 50%;
  background:radial-gradient(90% 70% at 20% 0%,rgba(244,206,70,.14),rgba(244,206,70,0)),linear-gradient(160deg,#3D3649,#2A2533);
  box-shadow:0 34px 50px -24px rgba(0,0,0,.8),inset 0 0 0 1px rgba(238,234,227,.14)}
.v8-bd-k{position:absolute;left:18px;top:14px;margin:0;font-size:var(--fs-body);font-weight:560;letter-spacing:-.01em;color:var(--chalk)}
.v8-bd small{display:block;font-size:13px;line-height:1.3;color:rgba(238,234,227,.62)}
.v8-bd-key{position:absolute;left:12px;bottom:10px;z-index:5;padding:6px;border:0;border-radius:8px;background:none;color:inherit;text-align:left;font:inherit;cursor:grab;touch-action:none;
  transition:transform .7s cubic-bezier(.3,1.8,.45,1)}
.v8-bd-key.drag{transition:none;cursor:grabbing}
.v8-bd-key:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.v8-bd-key svg{display:block;margin-bottom:6px;image-rendering:pixelated;animation:v8-keylean 4.2s ease-in-out infinite}
@keyframes v8-keylean{0%,70%,100%{transform:none}80%{transform:translateX(5px)}88%{transform:translateX(-1px)}}
.v8-bd .v8-bd-cut{position:absolute;right:12px;bottom:16px;max-width:9em;text-align:right;color:#F08A70}
.v8-bd-edge{position:absolute;right:24%;top:16%;bottom:24%;border-left:2px dashed var(--verm);opacity:.9}
.v8-bd-store{position:absolute;left:9%;top:26%;width:40%;height:46%;border-radius:10px;box-shadow:inset 0 0 0 1.5px rgba(238,234,227,.3);
  display:grid;grid-template-columns:repeat(auto-fill,10px);gap:6px;padding:12px;align-content:end;justify-content:end;transition:box-shadow .25s cubic-bezier(.16,1,.3,1)}
.v8-bd-store i{width:10px;height:10px;background:rgba(238,234,227,.34)}
.v8-bd-store i.m{position:relative}
.v8-bd-store i.m::after{content:"";position:absolute;left:5px;top:2px;width:6px;height:6px;background:#2E2938;box-shadow:inset 0 0 0 1px rgba(238,234,227,.6)}
.v8-bd-store small,.v8-bd-gate small{position:absolute;left:0;top:calc(100% + 8px);white-space:nowrap}
.v8-bd-path{position:absolute;left:50%;width:19%;top:49%;border-top:2px dashed rgba(238,234,227,.26)}
.v8-bd-gate{position:absolute;left:70%;top:calc(49% - 40px);width:70px;height:80px;transition:filter .3s cubic-bezier(.16,1,.3,1)}
.v8-gate{position:absolute;inset:0;transform:scale(1.3);transform-origin:50% 60%}
.v8-gate i{position:absolute;top:0;bottom:0;width:11px;background:linear-gradient(90deg,#F8DA6A,#F4CE46 55%,#B48A10 56%);box-shadow:5px 7px 0 -2px rgba(0,0,0,.4)}
.v8-gate i+i{right:0}
.v8-gate b{position:absolute;left:5px;right:5px;height:10px;border-radius:1px;background:linear-gradient(#FBE08A,#F4CE46 45%,#C2960F);box-shadow:0 4px 0 #85660A,0 9px 10px rgba(0,0,0,.45)}
.v8-gate b:nth-of-type(1){top:12px}
.v8-gate b:nth-of-type(2){top:35px}
.v8-gate b:nth-of-type(3){top:58px}
.v8-gate u{position:absolute;left:50%;top:27px;width:20px;height:22px;margin-left:-10px;background:var(--plum);box-shadow:inset 0 0 0 3px var(--gold),0 4px 0 #85660A;z-index:1}
.v8-bd.arm .v8-gate b{transform:translateY(-26px);opacity:0}
.v8-bd.arm.in .v8-gate b{transform:none;opacity:1;transition:transform .5s cubic-bezier(.5,0,.4,1.5),opacity .15s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--k,0) * .12s + .3s)}
.v8-gate b:nth-of-type(2){--k:1}
.v8-gate b:nth-of-type(3){--k:2}
.v8-bd-fly{position:absolute;inset:0;z-index:4;perspective:1200px;perspective-origin:40% 42%;pointer-events:none;transition:opacity .3s cubic-bezier(.16,1,.3,1)}
.v8-tr{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;
  animation:v8-tr var(--per,9s) linear var(--d,0s) infinite;opacity:0}
.v8-tr::before{content:"";position:absolute;left:8px;top:8px;width:18px;height:18px;background:var(--chalk);box-shadow:0 6px 0 rgba(0,0,0,.28)}
.v8-tr b{position:absolute;left:17px;top:11px;width:10px;height:9px;background:var(--verm);animation:v8-strip var(--per,9s) steps(1,end) var(--d,0s) infinite}
.v8-tr:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.v8-tr.hold,.v8-tr.hold b,.v8-bd.off .v8-tr,.v8-bd.off .v8-tr b,.v8-bd.off .v8-bd-key svg{animation-play-state:paused}
.v8-tr.hold::before{box-shadow:0 0 0 3px var(--gold),0 6px 0 rgba(0,0,0,.28)}
@keyframes v8-tr{0%{transform:translate3d(var(--x0),var(--y0),60px);opacity:0}6%{opacity:1}92%{opacity:1}100%{transform:translate3d(var(--x1),var(--y1),-380px);opacity:0}}
@keyframes v8-strip{0%{background:var(--verm);box-shadow:none}40%{background:#2E2938;box-shadow:inset 0 0 0 1.5px rgba(238,234,227,.8),0 0 0 5px rgba(224,98,69,.6),0 0 0 11px rgba(224,98,69,.2)}
  46%{background:#2E2938;box-shadow:inset 0 0 0 1.5px rgba(238,234,227,.8)}}
.v8-bd-msg{position:absolute;left:0;top:0;z-index:7;margin:0;padding:8px 12px;border-radius:10px;background:var(--gold);color:var(--plum);font-size:14px;font-weight:560;white-space:nowrap;
  opacity:0;transform:translateY(6px);transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .3s var(--ease);pointer-events:none}
.v8-bd-msg.on{opacity:1;transform:none}
.v8-bd-peek{position:absolute;left:0;top:0;z-index:7;width:200px;padding:12px 14px 8px;border-radius:12px;background:#FCFBF8;color:var(--plum);
  box-shadow:0 22px 40px -16px rgba(0,0,0,.75);opacity:0;transform:translateY(6px) scale(.96);transform-origin:0 100%;pointer-events:none;transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .25s var(--ease)}
.v8-bd-peek.on{opacity:1;transform:none}
.v8-bd-peek p{display:flex;align-items:center;gap:10px;margin:0 0 7px;font-size:13px;line-height:1.2}
.v8-bd-peek span{flex:none;width:64px;color:rgba(35,31,43,.7)}
.v8-bd-peek i{height:8px;border-radius:2px;background:rgba(58,52,230,.3)}
.v8-bd-peek p:nth-child(1) i{width:92px}
.v8-bd-peek p:nth-child(2) i{width:70px}
.v8-bd-peek p:nth-child(3) i{width:84px}
.v8-bd-peek p:nth-child(4) i{width:56px}
.v8-bd-peek .v8-bd-sec i{width:40px;background:var(--verm);transition:width .3s .35s cubic-bezier(.16,1,.3,1),background-color .2s .3s cubic-bezier(.16,1,.3,1),box-shadow .5s .3s cubic-bezier(.16,1,.3,1)}
.v8-bd-peek.nosec .v8-bd-sec{display:none}
.v8-bd-peek.strip .v8-bd-sec i{width:12px;background:transparent;box-shadow:inset 0 0 0 2px var(--plum),0 0 0 6px rgba(224,98,69,0);animation:v8-burst .6s .3s ease-out}
@keyframes v8-burst{0%{box-shadow:inset 0 0 0 2px var(--verm),0 0 0 0 rgba(224,98,69,.7)}100%{box-shadow:inset 0 0 0 2px var(--plum),0 0 0 12px rgba(224,98,69,0)}}
.v8-bd .v8-illus{position:absolute;right:0;bottom:0;margin:0}
.v8-bd[data-hl] .v8-bd-fly{opacity:.3}
.v8-bd[data-hl="traces"] .v8-bd-fly{opacity:1}
.v8-bd[data-hl="traces"] .v8-bd-home{box-shadow:0 34px 50px -24px rgba(0,0,0,.8),inset 0 0 0 2px var(--gold)}
.v8-bd[data-hl="cloud"] .v8-bd-cloud{box-shadow:0 40px 60px -30px rgba(0,0,0,.85),inset 0 0 0 2px var(--gold)}
.v8-bd[data-hl="store"] .v8-bd-store{box-shadow:inset 0 0 0 2px var(--gold)}
.v8-bd[data-hl="train"] .v8-bd-gate{filter:drop-shadow(0 0 14px rgba(244,206,70,.75))}
@media (max-width:600px){
  .v8-bd{height:540px}
  .v8-bd-scene,.v8-bd-fly{perspective:900px;perspective-origin:50% 20%}
  .v8-bd-cloud{left:5%;right:5%;width:auto;top:0;height:42%;transform:translateZ(-260px) rotateX(18deg);transform-origin:50% 0}
  .v8-bd-home{left:0;right:0;width:auto;top:auto;bottom:0;height:42%;transform:rotateX(-12deg) translateZ(20px);transform-origin:50% 100%}
  .v8-bd-k{left:14px;top:12px;font-size:16px}
  .v8-bd small{font-size:12.5px}
  .v8-bd-edge{left:8%;right:8%;top:44px;bottom:auto;border-left:0;border-top:2px dashed var(--verm)}
  .v8-bd .v8-bd-cut{left:auto;right:14px;top:12px;bottom:auto;max-width:none}
  .v8-bd-store{left:16px;top:48px;width:44%;height:52%}
  .v8-bd-path{left:calc(16px + 44%);width:14%;top:62%}
  .v8-bd-gate{left:auto;right:9%;top:calc(62% - 34px);width:58px;height:68px;transform:scale(.85);transform-origin:50% 50%}
}
/* the planes swing apart as the section arrives: your machine turns toward you, our cloud falls back */
.v8-bd.arm .v8-bd-home,.v8-bd.arm .v8-bd-cloud{transition:transform 1.3s cubic-bezier(.2,.8,.2,1),opacity .8s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
.v8-bd.arm:not(.in) .v8-bd-home{transform:rotateY(0) translateZ(0)}
.v8-bd.arm:not(.in) .v8-bd-cloud{transform:translateZ(0) rotateY(0);opacity:.4}
.v8-bd.arm .v8-bd-fly{opacity:0}
.v8-bd.arm.set .v8-bd-fly{opacity:1;transition:opacity .6s cubic-bezier(.16,1,.3,1)}
.v8-bd.arm.set[data-hl] .v8-bd-fly{opacity:.3}
.v8-bd.arm.set[data-hl="traces"] .v8-bd-fly{opacity:1}
@media (prefers-reduced-motion:reduce){
  .v8-tr,.v8-tr b,.v8-bd-key svg{animation:none}
  .v8-tr{opacity:1}
  .v8-tr b.m{background:#2E2938;box-shadow:inset 0 0 0 1.5px rgba(238,234,227,.8)}
  .v8-bd-key{transition:none}
  .v8-fit .v8-fc,.v8-fit-a ul,.v8-cal-plate i,.v8-cal-job,.v8-fx,.v8-fx-sq{transition:none}
}

/* ---------- builder7 (2026-11-03): premium pass per v8/review/PREMIUM.md ---------- */
/* one light, above and a little left: tinted elevation, lit bands, one radius scale, one set of motion curves */
.dp-page{
  --r-2xs:4px;--r-xs:8px;--r-sm:14px;--r-md:20px;--r-lg:28px;--r-pill:999px;
  --ink-rgb:35,31,43;--deep-rgb:29,26,140;
  --hi:inset 0 1px 0 rgba(255,255,255,.9);
  --hi-dark:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.06);
  --e1:0 0 0 1px rgba(var(--ink-rgb),.07),0 1px 2px rgba(var(--ink-rgb),.05),0 2px 6px -2px rgba(var(--ink-rgb),.06);
  --e2:0 0 0 1px rgba(var(--ink-rgb),.06),0 1px 2px rgba(var(--ink-rgb),.05),0 6px 12px -4px rgba(var(--ink-rgb),.07),0 18px 36px -12px rgba(var(--deep-rgb),.12);
  --e3:0 0 0 1px rgba(var(--ink-rgb),.05),0 2px 4px rgba(var(--ink-rgb),.04),0 10px 20px -6px rgba(var(--ink-rgb),.07),0 32px 64px -20px rgba(var(--deep-rgb),.18),0 60px 110px -40px rgba(var(--ink-rgb),.16);
  --e4:0 0 0 1px rgba(var(--ink-rgb),.05),0 2px 4px rgba(var(--ink-rgb),.04),0 14px 28px -8px rgba(var(--ink-rgb),.08),0 48px 96px -24px rgba(var(--deep-rgb),.24),0 96px 160px -48px rgba(var(--ink-rgb),.20);
  --e-dark:0 0 0 1px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.18),0 16px 32px -12px rgba(0,0,0,.40),0 40px 80px -28px rgba(10,8,40,.55);
  --surf:linear-gradient(180deg,#FFFFFF 0%,#FBFAF7 60%,#F8F6F2 100%);
  --surf-dark:linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.035) 100%);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--ease-press:cubic-bezier(.3,0,.5,1);
  --ease-spring:cubic-bezier(.175,.885,.32,1.1);
  --t-press:90ms;--t-hover:180ms;--t-ui:260ms;--t-reveal:700ms;--stagger:60ms;
  --gloss-ultra:linear-gradient(180deg,#5049F0,#3A34E6);
  --gloss-ultra-sh:inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(29,26,140,.3),0 10px 22px -8px rgba(29,26,140,.6);
}
/* lit bands: light from above, never flat, never grain; chalk stays light */
.dp-page .g-chalk{background:radial-gradient(120% 60% at 42% -8%,#FBFAF8 0%,rgba(251,250,248,0) 62%),linear-gradient(180deg,#F2EFEA 0%,#EEEAE3 55%,#EAE6DE 100%)}
.dp-page .g-plum,.dp-page .d3-keep{background:radial-gradient(70% 55% at 30% -6%,rgba(58,52,230,.20) 0%,rgba(58,52,230,0) 62%),radial-gradient(50% 40% at 92% 104%,rgba(224,98,69,.07) 0%,rgba(224,98,69,0) 70%),linear-gradient(180deg,#2B2635 0%,#231F2B 42%,#1C1923 100%)}
.dp-page .g-ultramarine,.dp-page .d3-close{background:radial-gradient(80% 60% at 46% -10%,#6A65F4 0%,rgba(106,101,244,0) 58%),linear-gradient(180deg,#3F39EC 0%,#3A34E6 46%,#2E28CC 100%)}
.dp-page .g-gold{background:radial-gradient(80% 60% at 46% -10%,#FFE995 0%,rgba(255,233,149,0) 58%),linear-gradient(180deg,#F7D65C 0%,#F4CE46 50%,#EEC53B 100%)}
/* the close: a soft light where the button sits, over the ring */
.dp-page .d3-close{background:radial-gradient(28% 36% at 50% 46%,rgba(255,255,255,.14),rgba(255,255,255,0)),radial-gradient(80% 60% at 46% -10%,#6A65F4 0%,rgba(106,101,244,0) 58%),linear-gradient(180deg,#3F39EC 0%,#3A34E6 46%,#2E28CC 100%)}
/* the hero: one light behind the weave's centre (the canvas clears to let it through) */
.dp-page .d3-sticky{background:radial-gradient(38% 46% at 70% 44%,#FFFFFF 0%,rgba(255,255,255,0) 70%),var(--chalk)}
/* sheets: each band after another slides over it with a lit top edge */
.dp-page>section.g-plum,.dp-page>section.g-ultramarine,.dp-page>section.g-gold,.dp-page>section.d3-close,.dp-page>section.d3-keep{position:relative;z-index:1;border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:calc(-1 * var(--r-lg));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 -18px 40px -24px rgba(var(--ink-rgb),.35)}
.dp-page>section.g-gold{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 -18px 40px -24px rgba(var(--ink-rgb),.35)}
.dp-page>section.g-chalk.pad{position:relative;z-index:1;border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:calc(-1 * var(--r-lg));box-shadow:inset 0 1px 0 #fff,0 -18px 40px -26px rgba(var(--ink-rgb),.22)}
.dp-page>section.v8-wall{border-radius:0;margin-top:0;box-shadow:none}
@media (max-width:600px){
  .dp-page>section.g-plum,.dp-page>section.g-ultramarine,.dp-page>section.g-gold,.dp-page>section.d3-close,.dp-page>section.d3-keep,.dp-page>section.g-chalk.pad{border-radius:20px 20px 0 0;margin-top:-20px}
}
/* width: a 1280 column, not the viewport */
.dp-page .wrap{max-width:1280px}

/* buttons: a lit pill that lifts on hover and presses down */
.dp-page .btn{transition:transform var(--t-hover) var(--ease-out),filter var(--t-hover) var(--ease-out)}
.dp-page .btn .arr{transition:transform var(--t-hover) var(--ease-out)}
.dp-page .d3-btn:not(.d3-btn-inv),.dp-page .g-chalk .btn.primary{background:linear-gradient(180deg,#3B3547 0%,#231F2B 100%);color:var(--chalk);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px #1A1720,0 1px 2px rgba(var(--ink-rgb),.25),0 8px 18px -8px rgba(var(--ink-rgb),.55),0 18px 36px -18px rgba(var(--deep-rgb),.45)}
.dp-page .d3-btn-inv{background:linear-gradient(180deg,#FFFFFF 0%,#EEEAE3 100%);color:var(--plum);
  box-shadow:inset 0 -1px 0 rgba(var(--ink-rgb),.08),0 1px 2px rgba(var(--deep-rgb),.35),0 10px 24px -10px rgba(var(--deep-rgb),.7),0 24px 48px -24px rgba(10,8,60,.6)}
.dp-page .v8-steps .btn.primary{background:linear-gradient(180deg,#FBDD6E 0%,#F4CE46 100%);color:var(--plum);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(150,110,0,.25),0 1px 2px rgba(var(--deep-rgb),.35),0 10px 24px -10px rgba(var(--deep-rgb),.7)}
.dp-page .d3-hero .d3-btn,.dp-page .dp-sig-cta,.dp-page .v8-steps .btn.primary,.dp-page .v8-end .d3-btn-inv{height:52px;min-height:52px;padding:0 26px;font-size:16px}
@media (hover:hover){
  .dp-page .btn:hover,.dp-page .d3-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
}
.dp-page .btn:active,.dp-page .d3-btn:active{transform:translateY(0) scale(.98);transition-duration:var(--t-press);transition-timing-function:var(--ease-press)}

/* cards: one light material on light bands, one dark material on dark bands */
.dp-page .v8-jc{position:relative;border-radius:var(--r-md);background:var(--surf);box-shadow:var(--hi),var(--e2);padding:22px 24px 26px;transition:transform var(--t-ui) var(--ease-out)}
.dp-page .v8-jc::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--hi),var(--e3);opacity:0;transition:opacity var(--t-ui) var(--ease-out);pointer-events:none}
@media (hover:hover){.dp-page .v8-jc:hover{transform:translateY(-3px)}.dp-page .v8-jc:hover::after{opacity:1}}
.dp-page .v8-d30 .dp-sig{--panel:#FDFCFA;border-radius:var(--r-lg);background:var(--surf);box-shadow:var(--hi),var(--e4)}
.dp-page .v8-scene,.dp-page .v8-catch .v8-scene{border-radius:var(--r-lg);background:var(--surf-dark),#2A2633;box-shadow:var(--hi-dark),var(--e-dark)}
.dp-page .v8-catch .v8-beats li{border-radius:var(--r-sm);background:linear-gradient(180deg,#403A4C,#36303F);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.dp-page .v8-catch .v8-beats .v8-beat-n{background:linear-gradient(180deg,#4B45F0,#3A34E6);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 32px -12px rgba(58,52,230,.75)}
.dp-page .v8-stopchip{background:linear-gradient(180deg,#E06245,#C4482D);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(120,30,10,.3),0 10px 22px -8px rgba(120,30,10,.6)}
.dp-page .d3-steer{background:var(--gloss-ultra);box-shadow:var(--gloss-ultra-sh)}
.dp-page .v8-next li{border-radius:var(--r-md);background:var(--surf-dark);box-shadow:var(--hi-dark),0 24px 48px -24px rgba(10,8,90,.6)}
.dp-page .g-plum .dp-grid-data article{border-radius:var(--r-md);background:var(--surf-dark);box-shadow:var(--hi-dark),var(--e-dark)}
.dp-page .g-plum .dp-grid-data article.hl{box-shadow:inset 0 0 0 2px var(--gold),var(--e-dark)}
/* the hero job card: lit face, deep elevation once the stack has come apart */
.dp-page .d3-job{border-radius:var(--r-md);background:var(--surf)}
@keyframes d3-unstack{to{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(35,31,43,.06),0 2px 4px rgba(35,31,43,.05),0 12px 24px -8px rgba(35,31,43,.12),0 32px 56px -24px rgba(29,26,140,.26)}}
/* no dashes: the open slot is solid, the not-yet rows are recessed */
.dp-page .dp-sig-slot{border-style:solid}
.dp-page .v8-fx{border:0;box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.12);background:rgba(255,255,255,.35);border-radius:var(--r-sm)}
.dp-page .v8-fit.arm6 .v8-fx{border:0;border-radius:var(--r-sm);box-shadow:var(--hi),0 0 0 1px rgba(var(--ink-rgb),.08),0 16px 24px -14px rgba(var(--ink-rgb),.5)}
.dp-page .v8-fit.arm6 .v8-fx.out{background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.12)}
.dp-page .v8-fit .v8-fc{border-radius:var(--r-sm)}

/* type: Inter, eight sizes, four weights; figures in tabular numerals */
.dp-page{--fs-h2:clamp(36px,4.4vw,64px);--fs-deck:clamp(18px,1.4vw,21px);--fs-body:clamp(16px,1.2vw,17px)}
.dp-page .h2,.dp-page .d3-h2{font-weight:500;letter-spacing:-.042em;line-height:1;text-wrap:balance}
.dp-page .h2+.deck,.dp-page .h2+.nb-lede{margin-top:20px}
.dp-page .deck.nb-lede{font-size:var(--fs-deck);line-height:1.5;letter-spacing:-.006em;max-width:52ch}
.dp-page .g-chalk .deck.nb-lede{color:rgba(var(--ink-rgb),.72)}
.dp-page .g-plum{--mut:rgba(238,234,227,.78)}
.dp-page p,.dp-page li,.dp-page dd{text-wrap:pretty}
.dp-page .btn,.dp-page .d3-btn{font-weight:560}
.dp-page .v8-next b{font-weight:560}
.dp-page .d3-stats dt,.dp-page .v8-fig,.dp-page .v8-crow p b,.dp-page .dp-sig-m,.dp-page .dp-sig-clock,.dp-page .nb-wall-n{font-variant-numeric:tabular-nums}
.dp-page .v8-fig{background:linear-gradient(180deg,#5A54F2 0%,#3A34E6 55%,#2A24C4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dp-page .d3-stats dt{background:linear-gradient(180deg,#4A4357 0%,#231F2B 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* nothing a visitor reads sits under 14 px; source lines at 12.5 */
.dp-page .d3-stats dd{font-size:14px;max-width:19ch;line-height:1.4}
.dp-page .d3-avail{border-top:0;margin-top:22px}
.dp-page .d3-avail li{border-bottom:0;padding:7px 0;font-size:15px}
.dp-page .d3-stats{border-top:0;padding-top:4px}
.dp-page .v8-cm-sub{font-size:14px}
.dp-page .dp-sig-src,.dp-page .nb-proof-src,.dp-page .d3-src{font-size:12.5px;line-height:1.45}
.dp-page .v8-catch .v8-beats time{color:rgba(238,234,227,.78)}
.dp-page .v8-hours .v8-cm-sub,.dp-page .v8-hours .nb-proof-src{color:rgba(238,234,227,.8)}
/* space: H2 to content 56, cards 24/28 with 20 between */
.dp-page .v8-jobs{gap:20px;margin-top:56px}
.dp-page .v8-next{gap:20px}
.dp-page .v8-end{padding:clamp(88px,9vw,140px) 0}
/* motion: reveals rise 16 px on the long ease-out */
.dp-page .rv8{transform:translateY(16px)}
.dp-page .rv8.rv8-in{transition:opacity var(--t-reveal) var(--ease-out) var(--d,0s),transform var(--t-reveal) var(--ease-out) var(--d,0s)}
.dp-page .dp-qs summary::after{transition:transform var(--t-ui) var(--ease-spring)}

/* ---- builder7 section work ---- */
/* nav: a lit bar, not a flat fill (no glass: it sits over the weave and the ring) */
.nav{background:linear-gradient(180deg,#2B2635 0%,#231F2B 100%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.06),0 10px 28px -16px rgba(10,8,30,.55)}
.nav .ea{background:linear-gradient(180deg,#FFFFFF 0%,#EEEAE3 100%);color:var(--plum);box-shadow:0 1px 2px rgba(0,0,0,.3),inset 0 -1px 0 rgba(35,31,43,.08);font-weight:560}

/* You keep / Nenya takes on: what stays yours sits recessed; what Nenya takes on is a raised panel that slides out from under it */
@media (min-width:901px){
  .dp-page .d3-pairs{max-width:1120px}
  .dp-page .d3-pairs tr{column-gap:20px;border-bottom:0}
  .dp-page .d3-pairs thead tr{border-bottom:0}
  .dp-page .d3-pairs th{padding:0 28px 16px 26px}
  .dp-page .d3-pairs td{padding:15px 28px 15px 50px}
  .dp-page .d3-pairs td::before{left:26px;top:calc(15px + .7em - 4px)}
  .dp-page .d3-pairs td:first-child{background:#1A1720;box-shadow:inset 1px 0 0 rgba(0,0,0,.3),inset -1px 0 0 rgba(255,255,255,.035)}
  .dp-page .d3-pairs tbody tr:first-child td:first-child{border-radius:20px 20px 0 0;padding-top:24px;box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 1px 0 0 rgba(0,0,0,.3),inset -1px 0 0 rgba(255,255,255,.035)}
  .dp-page .d3-pairs tbody tr:last-child td:first-child{border-radius:0 0 20px 20px;padding-bottom:24px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.07),inset 1px 0 0 rgba(0,0,0,.3),inset -1px 0 0 rgba(255,255,255,.035)}
  .dp-page .d3-pairs td+td{background:rgba(255,255,255,.055);color:rgba(238,234,227,.92);box-shadow:inset 1px 0 0 rgba(255,255,255,.06),inset -1px 0 0 rgba(255,255,255,.06)}
  .dp-page .d3-pairs tbody tr:first-child td+td{border-radius:20px 20px 0 0;padding-top:24px;background:radial-gradient(60% 90% at 30% 0,rgba(182,165,207,.18),rgba(182,165,207,0)),rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 1px 0 0 rgba(255,255,255,.06),inset -1px 0 0 rgba(255,255,255,.06)}
  .dp-page .d3-pairs tbody tr:last-child td+td{border-radius:0 0 20px 20px;padding-bottom:24px;box-shadow:inset 1px 0 0 rgba(255,255,255,.06),inset -1px 0 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.06),0 40px 60px -30px rgba(0,0,0,.55)}
  .dp-page .d3-pairs tbody tr:first-child td::before{top:calc(24px + .7em - 4px)}
}
@media (max-width:900px){
  .dp-page .d3-pairs tbody tr{border-bottom:0;margin:0 0 10px;padding:12px 16px 12px;border-radius:var(--r-sm);background:#1A1720;box-shadow:inset 0 1px 3px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.06)}
  .dp-page .d3-pairs td:first-child{background:#1A1720}
  .dp-page .d3-pairs thead tr{border-bottom:0}
}
.dp-page .d3-iface{font-size:clamp(19px,1.6vw,22px);max-width:46ch}

/* What a catch looks like: the two probe results sit on dark instrument panels under the scene */
.dp-page .v8-probes{gap:20px}
.dp-page .v8-probes figure{margin:0;padding:22px 24px 24px;border-radius:var(--r-md);background:var(--surf-dark);box-shadow:var(--hi-dark),var(--e-dark)}

/* Day 30: the agent and the models are lit slabs, the setups a segmented control */
.dp-page .dp-sig-agent{border-radius:var(--r-sm);background:linear-gradient(180deg,#36303F,#231F2B);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(var(--ink-rgb),.2),0 10px 20px -10px rgba(var(--ink-rgb),.5)}
.dp-page .dp-sig-model{border-radius:var(--r-sm);background:linear-gradient(180deg,#4A4357,#3A3446);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(var(--ink-rgb),.2)}
.dp-page .dp-sig-slot{border-radius:var(--r-sm);border:0;box-shadow:inset 0 1px 2px rgba(35,31,43,.14),inset 0 0 0 1px rgba(35,31,43,.1);background:rgba(35,31,43,.03)}
.dp-page .dp-sig.nen .dp-sig-slot{background:linear-gradient(180deg,#4B45F0,#3A34E6);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 32px -12px rgba(58,52,230,.7)}
.dp-page .dp-sig-pick{gap:6px;padding:6px;border-radius:var(--r-md);background:rgba(35,31,43,.045);box-shadow:inset 0 1px 2px rgba(35,31,43,.12),inset 0 0 0 1px rgba(35,31,43,.06)}
.dp-page .dp-sig-pick legend{float:left;width:100%;padding:0 0 10px;margin:0;color:rgba(35,31,43,.72)}
.dp-page .v8-d30 .dp-sig-pick button:not([aria-pressed="true"]){background:var(--surf);box-shadow:var(--hi),var(--e1)}
.dp-page .dp-sig-pick button{border-radius:var(--r-sm);transition:transform var(--t-hover) var(--ease-out),background-color var(--t-ui) var(--ease-out)}
.dp-page .dp-sig-pick button[aria-pressed="true"]{background:linear-gradient(180deg,#4B45F0,#3A34E6);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(29,26,140,.6),0 8px 18px -8px rgba(29,26,140,.6)}
.dp-page .dp-sig-pick button:active{transform:scale(.985);transition-duration:var(--t-press)}

/* A more autonomous product: two lead cards at full figure size, four beside them below */
@media (min-width:1101px){
  .dp-page .v8-jobs{grid-template-columns:repeat(12,minmax(0,1fr))}
  .dp-page .v8-jc{grid-column:span 3}
  .dp-page .v8-jc:nth-child(-n+2){grid-column:span 6;padding:26px 30px 30px}
  .dp-page .v8-jc:nth-child(-n+2) .v8-fig{font-size:clamp(56px,5.4vw,84px)}
  .dp-page .v8-jc:nth-child(-n+2)>p:last-child{max-width:46ch}
  .dp-page .v8-jc:nth-child(n+3) .v8-fig{font-size:clamp(36px,3.3vw,50px)}
}
.dp-page .v8-jc-h{border-bottom-color:rgba(var(--ink-rgb),.08)}

/* Days on their own: each row of hours sits on a recessed rail; gold cells are lit, not flat */
.dp-page .v8-cells{width:max-content;max-width:100%;padding:6px 6px 2px;border-radius:var(--r-xs);background:rgba(10,8,90,.22);box-shadow:inset 0 1px 2px rgba(0,0,0,.25),inset 0 -1px 0 rgba(255,255,255,.08)}
.dp-page .v8-crow p{padding:0 6px;width:calc(var(--pitch) * 55 + 12px)}
.dp-page .v8-cm-sm .v8-crow p{width:calc(var(--pitch) * 21 + 12px)}
.dp-page .v8-us .v8-cells i.on{background:linear-gradient(180deg,#FBDD6E,#F4CE46)}
.dp-page .v8-hours.pad{padding-bottom:clamp(88px,8vw,120px)}
@media (max-width:900px){
  .dp-page .v8-hours{--pitch:calc((100vw - 2 * var(--gut) - 12px) / 22)}
  .dp-page .v8-crow p{width:calc(var(--pitch) * 22 + 12px)}
}

/* Test it: the deal and the ask become one cream document */
.dp-page .dp-gets .dp-two{padding:clamp(24px,3vw,40px);border-radius:var(--r-lg);background:linear-gradient(180deg,#FFFBEA,#FBF1CF);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(120,90,0,.10),0 2px 4px rgba(120,90,0,.06),0 24px 48px -18px rgba(120,90,0,.30)}
.dp-page .dp-gets .dp-two .dp-list:not(.dp-list-sm) li{border-radius:var(--r-sm);background:linear-gradient(180deg,#FFFFFF,#FFFCF2);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(120,90,0,.09),0 6px 14px -8px rgba(120,90,0,.22)}
.dp-page .dp-gets .dp-list-sm li{border-radius:var(--r-sm);background:linear-gradient(180deg,#3B3547,#231F2B);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 14px -8px rgba(var(--ink-rgb),.5)}
.dp-page .dp-gets .dp-ask h3{margin:0 0 14px}

/* Your customers' data: four facts as four lit tiles */
.dp-page .dp-facts{gap:12px;margin-top:20px;padding-top:0;border-top:0}
.dp-page .dp-facts li{padding:16px 18px;border-radius:var(--r-sm);background:var(--surf-dark);box-shadow:var(--hi-dark);color:rgba(238,234,227,.86);font-size:15px;line-height:1.45}
.dp-page .dp-facts a{color:var(--chalk)}

/* What happens when you book: the line beside the button reads */
.dp-page .dp-steps-cta{gap:12px 20px}
.dp-page .dp-steps-cta span{font-size:15px;color:rgba(238,234,227,.8);max-width:52ch}

/* Questions: the heading and a booking button hold still on the left, the questions run on the right */
.dp-page .dp-faq .wrap{max-width:1154px}
.dp-page .dp-faq-cta{margin-top:28px}
@media (min-width:1001px){
  .dp-page .dp-faq .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,680px);gap:clamp(40px,6vw,96px);align-items:start}
  .dp-page .dp-faq-l{position:sticky;top:calc(var(--nav-h) + 40px)}
  .dp-page .dp-qs{margin-top:0}
}
.dp-page .dp-qs{border-top:0;gap:4px}
.dp-page .dp-qs details{border-bottom:0;border-radius:var(--r-md);transition:background-color var(--t-ui) var(--ease-out)}
.dp-page .dp-qs details:not([open]){box-shadow:inset 0 -1px 0 rgba(var(--ink-rgb),.1);border-radius:0}
.dp-page .dp-qs summary{align-items:center;padding:20px 4px 20px 20px;font-size:20px;font-weight:500;letter-spacing:-.012em;line-height:1.3}
.dp-page .dp-qs summary::after{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surf);box-shadow:var(--hi),var(--e1);font-size:18px;line-height:1}
.dp-page .dp-qs details[open]{background:var(--surf);box-shadow:var(--hi),var(--e1)}
.dp-page .dp-qs details p{max-width:62ch;margin:0;padding:0 24px 24px 20px;font-size:17px;line-height:1.6}
@media (hover:hover){.dp-page .dp-qs details:not([open]) summary:hover{color:var(--ultra)}}

/* the close and the end: chalk pills, the end ruled into the footer */
.dp-page .v8-end{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.12),0 -18px 40px -24px rgba(var(--ink-rgb),.35)}

/* pixel axolotls stand on something: a soft drop shadow and a contact ellipse */
.dp-page .v8-axo,.dp-page .v8-cal .v8-axo-t{filter:drop-shadow(0 6px 6px rgba(var(--ink-rgb),.28))}
.dp-page .v8-callwrap::before{content:"";position:absolute;left:50%;bottom:100%;width:34px;height:8px;margin:0 0 -7px -17px;border-radius:50%;background:radial-gradient(closest-side,rgba(10,8,60,.35),rgba(10,8,60,0));pointer-events:none}
@media (min-width:901px){.dp-page .v8-stops h3{min-height:2.4em}}

/* ---- builder7 pass 4: the remaining materials ---- */
/* the wall: one optical weight */
.dp-page .nb-wall-list img{opacity:.62}
/* Who it's for: pick squares get the small radius and a springy fill */
.dp-page .v8-fc-pick{border-radius:var(--r-2xs);transition:background-color var(--t-ui) var(--ease-spring),transform var(--t-ui) var(--ease-spring)}
/* Test it: the four stops stand on the gold as lit cream cards under the plate */
@media (min-width:901px){
  .dp-page .v8-track .v8-stops{gap:20px}
  .dp-page .v8-track .v8-stops li{padding:20px 22px 22px;border-radius:var(--r-md);background:linear-gradient(180deg,#FFFBEA,#FBF1CF);
    box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(120,90,0,.10),0 2px 4px rgba(120,90,0,.06),0 14px 28px -14px rgba(120,90,0,.32)}
}
@media (max-width:900px){
  .dp-page .v8-track .v8-stops{gap:12px}
  .dp-page .v8-track .v8-stops li{padding:16px 18px 18px;border-radius:var(--r-sm);background:linear-gradient(180deg,#FFFBEA,#FBF1CF);
    box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(120,90,0,.10),0 10px 22px -12px rgba(120,90,0,.3)}
}
.dp-page .v8-track.arm .v8-stops li.lit::before{animation:v8-lit .45s var(--ease-spring)}
/* one radius scale inside builder6's scenes too */
.dp-page .v8-fitjob,.dp-page .v8-bd-home,.dp-page .v8-bd-cloud{border-radius:var(--r-md)}
.dp-page .v8-cal-job{border-radius:var(--r-sm)}
.dp-page .v8-cal-span,.dp-page .d3-tip{border-radius:var(--r-xs)}
@media (max-width:600px){.dp-page .v8-probes figure{padding:18px 16px 20px}}
/* small motion: an opened answer rises in; dark cards lift a touch under the pointer */
@media (prefers-reduced-motion:no-preference){
  .dp-page .dp-qs details[open] p{animation:b7-rise var(--t-ui) var(--ease-out) both}
}
@keyframes b7-rise{from{opacity:0;transform:translateY(-4px)}}
@media (hover:hover){
  .dp-page .v8-next li{transition:transform var(--t-ui) var(--ease-out)}
  .dp-page .v8-next li:hover{transform:translateY(-3px)}
}
/* the four smaller why cards read at 15 px so their lines don't run to seven */
@media (min-width:1101px){.dp-page .v8-jc:nth-child(n+3)>p:last-child{font-size:15px;line-height:1.5}.dp-page .v8-jc:nth-child(n+3){padding:22px 22px 24px}}

/* ---- fixer7: REVIEW7 fixes ---- */
/* Who it's for: the not-yet cards fall first and carry no text until they land; "Not yet" shows once they're down */
.v8-fit.arm6 .v8-fx>span:last-child{transition:opacity .35s var(--ease-out)}
.v8-fit.arm6 .v8-fx:not(.out)>span:last-child{opacity:0}
@media (min-width:901px){
  .v8-fit.arm6 .dp-not>h3{opacity:0;transition:opacity .5s var(--ease-out) .8s}
  .v8-fit.arm6.dropped .dp-not>h3{opacity:1}
}
.dp-page .v8-fit.arm6 .v8-fx.out{color:rgba(var(--ink-rgb),.68)}
.dp-page .v8-fit .v8-fx{font-size:15px}
/* one marker per row: the box, which takes the check when the row is picked; rows sit taller at 16 px */
.dp-page .v8-fit.tap .v8-fc .d3-tick{display:none}
.dp-page .v8-fit .v8-fc{align-items:center;min-height:54px;padding:15px 18px 15px 20px;font-size:16px;line-height:1.4}
.dp-page .v8-fc-pick{position:relative;width:22px;height:22px}
.dp-page .v8-fc-pick::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--plum);border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(.4);opacity:0;transition:opacity var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-spring)}
.dp-page .v8-fit.tap .v8-fc.gold .v8-fc-pick::after{opacity:1;transform:rotate(45deg) scale(1)}
/* Day 30: at rest the Nenya slot is closed, so opening it under the agent is the reveal; the models slab names them */
.dp-page .v8-d30 .dp-sig-slot{overflow:hidden;max-height:160px}
.dp-page .v8-d30 .dp-sig-slot b,.dp-page .v8-d30 .dp-sig-slot small{display:block}
.dp-page .v8-d30 .dp-sig:not(.nen) .dp-sig-slot{max-height:0;min-height:0;padding-top:0;padding-bottom:0;margin:-4px 0;background:transparent;box-shadow:none}
@media (prefers-reduced-motion:no-preference){
  .dp-page .v8-d30 .dp-sig-slot{transition:max-height .7s var(--ease-out),padding .7s var(--ease-out),margin .7s var(--ease-out),box-shadow .5s var(--ease-out),color .3s .35s}
}
.dp-page .dp-sig-agent>span,.dp-page .dp-sig-model>span:first-child{font-size:13.5px;color:rgba(238,234,227,.8)}
.dp-page .dp-sig-model{gap:10px;padding:14px 16px 16px}
.v8-sig-models{display:flex;flex-wrap:wrap;gap:8px}
.v8-sig-models b{padding:5px 11px;border-radius:var(--r-xs);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.08),0 2px 4px rgba(10,8,30,.25);color:var(--chalk);font-size:14px;font-weight:560;letter-spacing:-.01em}
/* Your customers' data: two lit planes that read apart from the band and from each other; bigger traces, readable labels */
.dp-page .v8-bd{height:clamp(340px,29vw,410px)}
.dp-page .v8-bd-home{background:radial-gradient(90% 70% at 18% 0%,rgba(244,206,70,.18),rgba(244,206,70,0) 70%),linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04) 60%),#2C2734;
  box-shadow:inset 0 1px 0 rgba(198,184,226,.6),inset 0 0 0 1px rgba(238,234,227,.16),0 1px 0 rgba(255,255,255,.08),0 34px 50px -24px rgba(0,0,0,.85)}
.dp-page .v8-bd-cloud{background:radial-gradient(80% 70% at 72% 0%,rgba(122,116,255,.26),rgba(122,116,255,0) 70%),linear-gradient(200deg,#2E2B66,#1F1C44 70%);
  box-shadow:inset 0 1px 0 rgba(170,164,255,.5),inset 0 0 0 1px rgba(150,144,255,.18),0 1px 0 rgba(255,255,255,.06),0 40px 60px -30px rgba(0,0,0,.85)}
.dp-page .v8-bd[data-hl="traces"] .v8-bd-home{box-shadow:inset 0 0 0 2px var(--gold),0 34px 50px -24px rgba(0,0,0,.85)}
.dp-page .v8-bd[data-hl="cloud"] .v8-bd-cloud{box-shadow:inset 0 0 0 2px var(--gold),0 40px 60px -30px rgba(0,0,0,.85)}
.dp-page .v8-bd small{font-size:14.5px;color:rgba(238,234,227,.82)}
.dp-page .v8-bd .v8-bd-cut{color:#F49A82}
.dp-page .v8-bd-store{top:20%;width:46%;height:56%;grid-template-columns:repeat(auto-fill,12px);gap:7px;padding:14px;background:rgba(10,8,40,.22);box-shadow:inset 0 1px 3px rgba(0,0,0,.35),inset 0 0 0 1.5px rgba(238,234,227,.26)}
.dp-page .v8-bd-store i{width:12px;height:12px;background:rgba(238,234,227,.5)}
.dp-page .v8-bd-store i.m::after{left:6px;top:3px;width:7px;height:7px}
.dp-page .v8-bd-path{left:57%;width:12%}
.v8-tr{width:38px;height:38px;margin:-19px 0 0 -19px}
.v8-tr::before{left:9px;top:9px;width:20px;height:20px;box-shadow:inset 0 -2px 0 rgba(35,31,43,.12),0 6px 0 rgba(0,0,0,.28)}
.v8-tr b{left:19px;top:13px;width:11px;height:10px}
@media (max-width:600px){
  .dp-page .v8-bd{height:520px}
  .dp-page .v8-bd small{font-size:14px}
  .dp-page .v8-bd-store{top:48px;width:48%;height:54%}
  .dp-page .v8-bd-path{left:calc(16px + 48%);width:12%}
}
/* the close: Nen perches on the button with air above it */
.dp-page .d3-close .d3-ctas{margin-top:54px}
@media (max-width:900px){.dp-page .d3-close .d3-ctas{margin-top:50px}}
/* Questions sits on the page grid: the 1280 wrap, a 5/7 split */
.dp-page .dp-faq .wrap{max-width:1280px}
@media (min-width:1001px){.dp-page .dp-faq .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,80px)}}
/* labels that teach the graphics read at 14 px, 80% chalk or more on dark */
.dp-page .v8-lane{font-size:14px;color:rgba(238,234,227,.82)}
.dp-page .v8-lane-n{color:#D4D0FF}
.dp-page .v8-catch .v8-beats time{font-size:14px;color:rgba(238,234,227,.82)}
.dp-page .v8-catch .v8-beats .v8-beat-n time{color:var(--gold)}
.dp-page .v8-beats li{grid-template-columns:66px minmax(0,1fr)}
.dp-page .d3-k{font-size:14px;color:rgba(238,234,227,.82)}
.dp-page .d3-k small{font-size:13.5px;color:rgba(238,234,227,.78);max-width:16ch}
.dp-page .d3-chip{font-size:13.5px}
/* the cloud plane sits far back, so its labels are set larger to read at about 14 px once the depth shrinks them */
.dp-page .v8-bd-cloud .v8-bd-k{font-size:24px}
.dp-page .v8-bd-cloud small{font-size:19px}
@media (max-width:600px){.dp-page .v8-bd-cloud .v8-bd-k{font-size:20px}.dp-page .v8-bd-cloud small{font-size:17px}}
/* You keep / Nenya takes on: every pair gets the same two-line row, so the left column keeps an even pitch */
@media (min-width:901px){
  .dp-page .d3-pairs tbody td{box-sizing:border-box;min-height:calc(2.8em + 30px)}
  .dp-page .d3-pairs tbody tr:first-child td,.dp-page .d3-pairs tbody tr:last-child td{min-height:calc(2.8em + 39px)}
}
/* "No training" sits centred under the gate, clear of its foot */
.dp-page .v8-bd-gate small{left:50%;top:calc(100% + 20px);transform:translateX(-50%)}
@media (max-width:600px){.dp-page .v8-bd-gate small{top:calc(100% + 14px)}}