/* ============================================================================
   SPEEDRUN v5 — What You Get, Figma 711-7526 (2026-10-29). The label "What you get" (General Sans 25) over rows of a
   320 px object left of centre and a 20 px paragraph right of it, 80 apart. The objects are cubes after thesis.co's
   "Are / You / In": each cube's own word (Brand, Deck, Website, Product) on the face turned to you, the other three
   on its sides and top. Every few seconds a cube rolls a full turn and lands back on its own face; the four are out
   of step. The faces carry a faint wash of the hero's cycling light.
   ========================================================================== */
.v5-get{max-width:1440px;margin:0 auto;padding:clamp(120px,11vw,190px) 20px 0;display:flex;flex-direction:column;gap:80px;}
.v5-label{margin:0;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:25px;line-height:normal;text-transform:none;letter-spacing:0;}
.v5-row{display:flex;align-items:center;}
.v5-row__vis{flex:1 0 0;display:flex;justify-content:flex-end;padding:0 40px 0 20px;}
.v5-row__txt{flex:1 0 0;padding:0 20px 0 40px;}
.v5-row__t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}   /* the cube says it; kept for readers */
.v5-row__txt p{margin:0;width:min(407px,100%);font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:20px;line-height:normal;}

/* the cube */
.cb{--s:clamp(120px,13vw,186px);width:320px;height:320px;display:grid;place-items:center;perspective:1600px;}
.cb-rig{position:relative;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(-28deg) rotateY(-36deg) rotate3d(var(--ax,1),var(--ay,0),0,0deg);
  animation:cb-roll 8s infinite;animation-delay:calc(var(--k) * -2.1s);}
.cb[style*="--k:1"],.cb[style*="--k:3"]{--ax:0;--ay:1;}
@keyframes cb-roll{
  0%,64%{transform:rotateX(-28deg) rotateY(-36deg) rotate3d(var(--ax,1),var(--ay,0),0,0deg);animation-timing-function:cubic-bezier(.68,-0.08,.22,1.06);}
  100%{transform:rotateX(-28deg) rotateY(-36deg) rotate3d(var(--ax,1),var(--ay,0),0,360deg);}}
.cb-f{position:absolute;left:calc(var(--s) / -2);top:calc(var(--s) / -2);width:var(--s);height:var(--s);display:grid;place-items:center;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;background:#fff;color:#151515;
  font-family:'Tanker','Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:calc(var(--s) * .2);line-height:1;letter-spacing:.01em;}
.cb-f::before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background:linear-gradient(var(--la),var(--lc),var(--ld));animation:hx-hue 9s linear infinite,hx-band 23s ease-in-out infinite alternate;}
.cb-f>span{position:relative;transform:translateY(.05em);}
.cb-front{transform:translateZ(calc(var(--s) / 2));}
.cb-back{transform:rotateY(180deg) translateZ(calc(var(--s) / 2));}
.cb-right{transform:rotateY(90deg) translateZ(calc(var(--s) / 2));background:#f3f3f3;}
.cb-left{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2));background:#f3f3f3;}
.cb-top{transform:rotateX(90deg) translateZ(calc(var(--s) / 2));background:#fafafa;}
.cb-bottom{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2));}
/* on black: black faces, white type with thesis's soft glow, the light a little stronger */
html.dark .cb-f{background:#040404;color:#fff;text-shadow:0 0 .35em rgba(255,255,255,.55);}
html.dark .cb-right,html.dark .cb-left{background:#020202;} html.dark .cb-top{background:#070707;}
html.dark .cb-f::before{opacity:.2;}
html.dark .v5-label,html.dark .v5-row__txt p{color:#fff;}

/* the add-ons block, two cards */
.v5-adds .v5-label{margin-bottom:56px;}
.cds--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cds--2 .cd:nth-child(2){margin-top:clamp(40px,6vw,100px);}

@media (max-width:820px){
  .v5-get{gap:64px;padding-left:16px;padding-right:16px;}
  .v5-row{flex-direction:column;gap:20px;align-items:stretch;}
  .v5-row__vis{justify-content:center;padding:0;}
  .v5-row__txt{padding:0;}
  .v5-row__txt p{width:100%;font-size:18px;}
  .cb{width:260px;height:260px;--s:150px;}
  .cds--2{grid-template-columns:1fr;}
  .cds--2 .cd:nth-child(2){margin-top:0;}
}
@media (prefers-reduced-motion:reduce){ .cb-rig,.cb-f::before{animation:none;} }

/* closer to thesis's cubes (read from its DOM): pure black faces, the word very large (~40 % of the face in their serif;
   Tanker is wider, so ~27 %), a soft white glow (0 0 30px at .3); the colour only as a faint light along one edge */
.cb{--s:clamp(140px,15vw,210px);}
.cb-rig{transform:rotateX(-34deg) rotateY(-40deg) rotate3d(var(--ax,1),var(--ay,0),0,0deg);}
@keyframes cb-roll{
  0%,64%{transform:rotateX(-34deg) rotateY(-40deg) rotate3d(var(--ax,1),var(--ay,0),0,0deg);animation-timing-function:cubic-bezier(.68,-0.08,.22,1.06);}
  100%{transform:rotateX(-34deg) rotateY(-40deg) rotate3d(var(--ax,1),var(--ay,0),0,360deg);}}
.cb-f{font-size:calc(var(--s) * .27);}
.cb-f::before{opacity:.22;-webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 55%);mask-image:linear-gradient(0deg,#000 0%,transparent 55%);}
html.dark .cb-f,html.dark .cb-right,html.dark .cb-left,html.dark .cb-top{background:#000;text-shadow:0 0 30px rgba(255,255,255,.3);}
html.dark .cb-f::before{opacity:.3;}

/* round 2 (Markiian): turned so the cube's own word faces you; the other faces' words at 20 %; each cube in its own
   pair of the hero's colours (blue·purple, purple·pink, pink·orange, orange·yellow), as a light along its faces and a
   soft halo behind it */
.cb{position:relative;}
.cb-rig{transform:rotateX(-18deg) rotateY(-24deg) rotate3d(var(--ax,1),var(--ay,0),0,0deg);}
@keyframes cb-roll{
  0%,64%{transform:rotateX(-18deg) rotateY(-24deg) rotate3d(var(--ax,1),var(--ay,0),0,0deg);animation-timing-function:cubic-bezier(.68,-0.08,.22,1.06);}
  100%{transform:rotateX(-18deg) rotateY(-24deg) rotate3d(var(--ax,1),var(--ay,0),0,360deg);}}
.cb-f:not(.cb-front)>span{opacity:.2;}
.cb-f::before,html.dark .cb-f::before{animation:none;background:linear-gradient(135deg,var(--c1),var(--c2));opacity:.5;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 60%);mask-image:linear-gradient(0deg,#000 0%,transparent 60%);}
.cb-halo{position:absolute;left:50%;top:50%;width:calc(var(--s) * 1.25);height:calc(var(--s) * 1.25);transform:translate(-50%,-50%);border-radius:30%;
  background:linear-gradient(135deg,var(--c1),var(--c2));filter:blur(calc(var(--s) * .22));opacity:.55;pointer-events:none;}
html.dark .cb-halo{opacity:.7;}

/* round 3 — rebuilt from thesis's cube DOM (2026-10-29). A thesis face is: black; a 1100 px rainbow "fractal" image at
   opacity .2 whose top-left corner sits at the face's centre (so the face catches one corner of it); a black gradient
   over it — 351° on the front, back and top, 135° on the sides — black to 55 %, clear at 100 %; the word in its serif
   with a 3rem white glow. Nearly all black, a soft colour creeping in from one corner, the light from the same side on
   every face; no halo, no wash. Ours: the same layers, the corner light in each cube's pair of the hero colours. */
.cb-halo{display:none;}
.cb-f,.cb-right,.cb-left,.cb-top,html.dark .cb-f,html.dark .cb-right,html.dark .cb-left,html.dark .cb-top{background:#000;}
.cb-f::before,html.dark .cb-f::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--s) * 4.2);height:calc(var(--s) * 2.4);
  -webkit-mask-image:none;mask-image:none;animation:none;opacity:.32;
  background:radial-gradient(60% 70% at 0% 0%,var(--c1) 0%,transparent 70%),radial-gradient(70% 80% at 30% 40%,var(--c2) 0%,transparent 75%),linear-gradient(135deg,var(--c1),var(--c2));}
.cb-f::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(351deg,#000 55.74%,rgba(0,0,0,0) 100%);}
.cb-right::after,.cb-left::after{background:linear-gradient(135deg,#000 54.79%,rgba(0,0,0,0) 100%);}
.cb-f>span{z-index:1;}
html.dark .cb-f,.cb-f{color:#fff;text-shadow:0 0 3rem rgba(255,255,255,.3);}
/* on the white page: white faces, the same corner light, the fade to white */
html:not(.dark) .cb-f,html:not(.dark) .cb-right,html:not(.dark) .cb-left,html:not(.dark) .cb-top{background:#fff;color:#151515;text-shadow:none;}
html:not(.dark) .cb-f::after{background:linear-gradient(351deg,#fff 55.74%,rgba(255,255,255,0) 100%);}
html:not(.dark) .cb-right::after,html:not(.dark) .cb-left::after{background:linear-gradient(135deg,#fff 54.79%,rgba(255,255,255,0) 100%);}
html:not(.dark) .cb-f::before{opacity:.45;}
/* a single cube on black has no neighbours to define it (thesis's sit in a packed field): the corner light covers the
   whole face and comes through stronger, the black fade starts earlier */
.cb-f::before,html.dark .cb-f::before{left:0;top:0;width:100%;height:100%;opacity:.6;
  background:radial-gradient(90% 90% at 100% 0%,var(--c2) 0%,transparent 70%),linear-gradient(135deg,var(--c1) 0%,var(--c2) 100%);}
.cb-f::after{background:linear-gradient(351deg,#000 38%,rgba(0,0,0,0) 100%);}
.cb-right::after,.cb-left::after{background:linear-gradient(135deg,#000 36%,rgba(0,0,0,0) 100%);}
.cb-top::after{background:linear-gradient(351deg,#000 30%,rgba(0,0,0,0) 100%);}
html:not(.dark) .cb-f::after{background:linear-gradient(351deg,#fff 38%,rgba(255,255,255,0) 100%);}
html:not(.dark) .cb-right::after,html:not(.dark) .cb-left::after{background:linear-gradient(135deg,#fff 36%,rgba(255,255,255,0) 100%);}
/* each cube a blend of four of the hero's colours (Markiian: "blend, like the header, all of them different"):
   two soft pools and a sweep under them, drifting slowly, each cube its own mix and its own pace */
.cb-f::before,html.dark .cb-f::before{
  background:
    radial-gradient(70% 70% at 100% 0%,var(--c1) 0%,transparent 72%),
    radial-gradient(80% 80% at 0% 100%,var(--c3) 0%,transparent 70%),
    radial-gradient(60% 60% at 70% 70%,var(--c4) 0%,transparent 75%),
    linear-gradient(135deg,var(--c2) 0%,var(--c1) 50%,var(--c3) 100%);
  background-size:220% 220%;animation:cb-drift 14s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -3.5s);}
.cb-right::before{animation-delay:calc(var(--k) * -3.5s - 2s);} .cb-left::before{animation-delay:calc(var(--k) * -3.5s - 5s);}
.cb-top::before{animation-delay:calc(var(--k) * -3.5s - 8s);}
@keyframes cb-drift{0%{background-position:0% 0%;}50%{background-position:100% 30%;}100%{background-position:40% 100%;}}
@media (prefers-reduced-motion:reduce){ .cb-f::before{animation:none;} }

/* ---- round 4 (Markiian): no roll. The section pins; the four cubes start spread out and a little turned, and as you
   scroll they slide together and square up into one tower facing you — Brand, Deck, Website, Product — each beside its
   paragraph. --st 0 → 1 from speedrun-v2.js. ---- */
.cb-rig,html.dark .cb-rig{animation:none;transform:rotateX(calc(-18deg * (1 - var(--st,0)))) rotateY(calc(-24deg * (1 - var(--st,0))));}
.v5-get{--P:400px;--sz:clamp(140px,15vw,210px);height:280svh;display:block;padding-top:0;}
.v5-pin{position:sticky;top:0;height:100svh;overflow:hidden;}
.v5-pin .v5-label{position:absolute;left:20px;top:120px;}
.v5-rows{position:absolute;left:0;right:0;top:50%;height:0;}
.v5-row{position:absolute;left:0;right:0;top:0;height:320px;
  transform:translateY(calc(-50% + (var(--k) - 1.5) * (var(--P) + (var(--sz) - var(--P)) * var(--st,0))));}
.v5-row .cb{--s:var(--sz);}
.v5-row__txt p{transition:none;}
@media (max-width:820px){
  .v5-get{height:auto;padding-top:120px;}
  .v5-pin{position:relative;height:auto;overflow:visible;display:flex;flex-direction:column;gap:56px;padding:0 16px;}
  .v5-pin .v5-label{position:static;}
  .v5-rows{position:static;height:auto;display:flex;flex-direction:column;gap:56px;}
  .v5-row{position:static;height:auto;transform:none;}
  .v5-get{--st:1;}
}
/* round 4b — everything stays in view (the spread-out start ran taller than the screen and lost Brand off the top):
   the cubes start side by side across the screen, a little turned; on scroll they slide over and stack into the tower
   left of centre, squaring up; each paragraph fades in beside its cube as it lands */
.v5-row{transform:translateY(calc(-50% + (var(--k) - 1.5) * var(--sz) * var(--st,0)));}
.v5-row .cb{transform:translateX(calc((1 - var(--st,0)) * ((var(--k) - 1.5) * 22vw + 200px)));}
.v5-row__txt{opacity:calc(var(--st,0) * var(--st,0) * var(--st,0));}
@media (max-width:820px){ .v5-row,.v5-row .cb{transform:none;} .v5-row__txt{opacity:1;} }
/* round 4c — the tower keeps a slight turn so it reads as solid cubes, and the front face is lit as a soft diagonal from
   its upper corner into the dark (square-on, the edge-light read as a flat band over black) */
.cb-rig,html.dark .cb-rig{transform:rotateX(calc(-18deg + 10deg * var(--st,0))) rotateY(calc(-24deg + 8deg * var(--st,0)));}
.cb-front::after{background:linear-gradient(200deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 45%,#000 85%);}
.cb-front::before{opacity:.75;}
html:not(.dark) .cb-front::after{background:linear-gradient(200deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 45%,#fff 85%);}
/* the paragraphs wait until the tower has formed (mid-move they overlapped as ghosts) */
.v5-row__txt{opacity:clamp(0,calc((var(--st,0) - .82) / .18),1);}
@media (max-width:820px){ .v5-row__txt{opacity:1;} }

/* ---- round 5 (Markiian): the rows as they were — one under another, 80 apart, the page scrolling normally — and
   as you scroll they pull together into the tower in the middle of the screen, then it scrolls on with the page.
   No pin and no sideways slide. speedrun-v2.js sets each row's --ty and the section's --st. ---- */
.v5-get{height:auto;padding-top:clamp(120px,11vw,190px);}
.v5-pin{position:relative;height:auto;overflow:visible;display:flex;flex-direction:column;gap:80px;}
.v5-pin .v5-label{position:static;}
.v5-rows{position:relative;top:auto;height:auto;display:flex;flex-direction:column;gap:80px;}
.v5-row{position:relative;top:auto;height:320px;transform:translate3d(0,var(--ty,0px),0);}
.v5-row .cb{transform:none;}
.v5-row__txt{opacity:1;}
/* colour at the bottom too (Markiian): a second, softer light along the lower edge of each front face, from the cube's
   third colour, so the face is lit at its upper corner and its foot, dark through the middle where the word sits */
.cb-front::before{background:
    radial-gradient(90% 70% at 100% 0%,var(--c1) 0%,transparent 70%),
    radial-gradient(110% 55% at 20% 100%,var(--c3) 0%,transparent 72%),
    radial-gradient(60% 60% at 0% 0%,var(--c2) 0%,transparent 70%),
    linear-gradient(135deg,var(--c2) 0%,var(--c1) 55%,var(--c4) 100%);background-size:180% 180%;}
.cb-front::after{background:linear-gradient(185deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 32%,#000 55%,rgba(0,0,0,.72) 82%,rgba(0,0,0,.25) 100%);}
html:not(.dark) .cb-front::after{background:linear-gradient(185deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 32%,#fff 55%,rgba(255,255,255,.72) 82%,rgba(255,255,255,.25) 100%);}

/* ---- round 6 (Markiian): the cubes stack one by one, top onto the next (sticky-card logic in speedrun-v2.js), and
   each cube turns square-on as it lands — in the tower only the written face shows. --st is now per row. ---- */
.cb-rig,html.dark .cb-rig{transform:rotateX(calc(-18deg * (1 - var(--st,0)))) rotateY(calc(-24deg * (1 - var(--st,0))));}
/* the cube above is in front: the incoming cube's top face slides in behind the one resting on it */
.v5-row{z-index:calc(10 - var(--k));}

/* ---- Add-ons (Markiian, 2026-10-29): the What You Get grammar — an object over a 20 px paragraph — two side by
   side, each a new shape in its own colours: a sphere for Website, a pyramid for Product. Black objects with the
   colour as a rim light, the word facing you with the cubes' glow. ---- */
.v5-adds{max-width:1440px;margin:0 auto;padding:clamp(140px,12vw,220px) 20px 0;}
.v5-adds .v5-label{margin:0 0 80px;}
html.dark .v5-adds .v5-label,html.dark .ad p{color:#fff;}
.ad-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;}
.ad{display:flex;flex-direction:column;align-items:center;gap:48px;}
.ad:nth-child(2){margin-top:clamp(60px,8vw,140px);}
.ad-vis{width:320px;height:320px;display:grid;place-items:center;}
.ad p{margin:0;width:min(407px,100%);font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:20px;line-height:normal;}
.sp>span,.py-f>span{position:relative;z-index:2;font-family:'Tanker','Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:.01em;color:#fff;text-shadow:0 0 3rem rgba(255,255,255,.3);}

/* the sphere: colour pools drifting inside a black ball, kept to the rim, with a soft highlight up left */
.sp{--d:clamp(170px,17vw,250px);position:relative;width:var(--d);height:var(--d);border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#000;isolation:isolate;
  animation:ad-float 7s ease-in-out infinite;}
.sp::before{content:"";position:absolute;inset:-10%;z-index:0;filter:blur(14px);
  background:radial-gradient(50% 50% at 15% 20%,var(--c2) 0%,transparent 70%),radial-gradient(55% 55% at 90% 30%,var(--c1) 0%,transparent 70%),
    radial-gradient(60% 50% at 70% 95%,var(--c4) 0%,transparent 70%),radial-gradient(50% 50% at 10% 85%,var(--c3) 0%,transparent 70%),#000;
  animation:ad-spin 18s linear infinite;}
.sp::after{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 16%),
    radial-gradient(circle at 50% 48%,#000 0%,rgba(0,0,0,.94) 40%,rgba(0,0,0,.55) 60%,rgba(0,0,0,0) 74%);}
.sp>span{font-size:calc(var(--d) * .17);}
@keyframes ad-spin{to{transform:rotate(360deg);}}
@keyframes ad-float{0%,100%{transform:translateY(-6px);}50%{transform:translateY(6px);}}

/* the pyramid: four sides on a square base (height .95 of the base, sides leaning 27.76°), swaying slowly so the
   front stays readable; each side black with the colour coming up from its foot */
.py{--a:clamp(170px,17vw,240px);width:320px;height:320px;display:grid;place-items:center;perspective:1600px;}
.py-rig{position:relative;width:0;height:0;transform-style:preserve-3d;transform:translateY(calc(var(--a) * .1)) rotateX(-14deg) rotateY(-20deg);animation:ad-sway 10s ease-in-out infinite alternate;}
.py-f{position:absolute;left:calc(var(--a) / -2);top:calc(var(--a) * .475 - var(--a) * 1.0735);width:var(--a);height:calc(var(--a) * 1.0735);
  transform-origin:50% 100%;clip-path:polygon(50% 0,100% 100%,0 100%);background:#000;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;}
.py-f::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 45% at 30% 100%,var(--c1) 0%,transparent 72%),radial-gradient(60% 45% at 85% 100%,var(--c2) 0%,transparent 72%),
    radial-gradient(40% 40% at 50% 10%,var(--c3) 0%,transparent 70%),linear-gradient(0deg,var(--c4),var(--c1) 45%,#000 75%);
  background-size:180% 180%;animation:cb-drift 14s ease-in-out infinite alternate;}
.py-f::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.7) 22%,#000 55%,rgba(0,0,0,.6) 85%,rgba(0,0,0,.2) 100%);}
.py-f0{transform:translateZ(calc(var(--a) / 2)) rotateX(27.76deg);}
.py-f1{transform:rotateY(90deg) translateZ(calc(var(--a) / 2)) rotateX(27.76deg);}
.py-f2{transform:rotateY(180deg) translateZ(calc(var(--a) / 2)) rotateX(27.76deg);}
.py-f3{transform:rotateY(-90deg) translateZ(calc(var(--a) / 2)) rotateX(27.76deg);}
.py-f1::before{animation-delay:-4s;} .py-f2::before{animation-delay:-8s;} .py-f3::before{animation-delay:-11s;}
.py-f1::after,.py-f3::after{background:linear-gradient(0deg,rgba(0,0,0,.45) 0%,#000 45%);}
.py-f>span{font-size:calc(var(--a) * .15);margin-bottom:calc(var(--a) * .2);}
.py-f2>span{opacity:.2;}
@keyframes ad-sway{from{transform:translateY(calc(var(--a) * .1)) rotateX(-14deg) rotateY(-26deg);}to{transform:translateY(calc(var(--a) * .1)) rotateX(-14deg) rotateY(18deg);}}

/* on white: white objects, dark word, the colour still at the rim */
html:not(.dark) .sp,html:not(.dark) .py-f{background:#fff;}
html:not(.dark) .sp::before{background:radial-gradient(50% 50% at 15% 20%,var(--c2) 0%,transparent 70%),radial-gradient(55% 55% at 90% 30%,var(--c1) 0%,transparent 70%),
    radial-gradient(60% 50% at 70% 95%,var(--c4) 0%,transparent 70%),radial-gradient(50% 50% at 10% 85%,var(--c3) 0%,transparent 70%),#fff;}
html:not(.dark) .sp::after{background:radial-gradient(circle at 50% 48%,#fff 0%,rgba(255,255,255,.94) 40%,rgba(255,255,255,.55) 60%,rgba(255,255,255,0) 74%);}
html:not(.dark) .py-f::after{background:linear-gradient(0deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,.7) 22%,#fff 55%,rgba(255,255,255,.6) 85%,rgba(255,255,255,.2) 100%);}
html:not(.dark) .py-f1::after,html:not(.dark) .py-f3::after{background:linear-gradient(0deg,rgba(255,255,255,.45) 0%,#fff 45%);}
html:not(.dark) .sp>span,html:not(.dark) .py-f>span{color:#151515;text-shadow:none;}
@media (max-width:820px){
  .v5-adds{padding-left:16px;padding-right:16px;}
  .ad-row{grid-template-columns:1fr;gap:72px;} .ad:nth-child(2){margin-top:0;} .ad p{font-size:18px;width:100%;}
}
@media (prefers-reduced-motion:reduce){ .sp,.sp::before,.py-rig,.py-f::before{animation:none;} }

/* the section labels start where the logo starts (the header's 20 px, 16 on phones) at every width; the rows stay
   centred in the 1440 frame */
.v5-get,.v5-adds{max-width:none;padding-left:20px;padding-right:20px;}
.v5-rows,.ad-row{width:100%;max-width:1400px;margin-left:auto;margin-right:auto;}
@media (max-width:820px){ .v5-get,.v5-adds{padding-left:16px;padding-right:16px;} }
/* the sphere's highlight read as a grey smudge: smaller and softer */
.sp::after{background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 9%),
    radial-gradient(circle at 50% 48%,#000 0%,rgba(0,0,0,.94) 40%,rgba(0,0,0,.55) 60%,rgba(0,0,0,0) 74%);}
/* a full roll on the way down (Markiian): each cube turns once over forwards as it travels to its landing, and comes
   out of the roll square-on. --st is the cube's own landing progress, so the roll and the fall are one motion */
.cb-rig,html.dark .cb-rig{transform:rotateX(calc(-18deg * (1 - var(--st,0)))) rotateY(calc(-24deg * (1 - var(--st,0)))) rotateY(calc(-360deg * var(--st,0)));}

/* ---- Add-ons, round 2 (Markiian): thesis's staircase instead of the sphere and pyramid — two steps, Website and
   Product on the risers, the two paragraphs under it. Reuses the How It Works stair; only the count changes. ---- */
.stz--2{height:calc(var(--run) * 2.3);}
.stz--2 .stz-rig{transform:translateY(calc(var(--rise) * .9)) rotateX(-26deg) rotateY(var(--ry,36deg));}
.stz--2 .stz-step{transform:translate3d(calc((var(--k) - .5) * var(--run)), calc(var(--h) / -2 + var(--rise-in, 0px)), 0);}
.stz--2 .stz-step .bx-left{padding-top:calc(var(--rise) * .27);}
.v4-phases--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.v5-adds .v4-phases p{font-size:20px;line-height:normal;font-weight:500;max-width:407px;}
html.dark .v5-adds .v4-phases p{color:rgba(255,255,255,.8);}
@media (max-width:820px){ .v4-phases--2{grid-template-columns:1fr;} .v5-adds .v4-phases p{font-size:18px;} }
/* closer to the reference: on black the steps are black and the form is drawn by the light — each step its own
   colours, the blurred copy behind made a touch larger so it spills along every seam and edge */
html.dark .stz--2 .stz-step .bx-f{background:#000;}
html.dark .stz--2 .stz-step .bx-top{background:#030303;}
.stz--2 .stz-light{filter:blur(calc(var(--run) * .085)) saturate(1.8) brightness(1.25);opacity:1;}
.stz--2 .stz-light .stz-rig{scale:1.035;}
.stz--2 .stz-light .stz-step[style*="--k:0"] i.bx-f{background:linear-gradient(160deg,#FF9F0A,#BF5AF2 60%,#5E5CE6);animation:none;}
.stz--2 .stz-light .stz-step[style*="--k:1"] i.bx-f{background:linear-gradient(160deg,#30D158,#FF375F 60%,#FF9F0A);animation:none;}

/* ---- Add-ons, round 3 (Markiian): the two side by side on one level and close together — black blocks after the
   reference, drawn by the light at their edges; a blurred colour field behind each spills into the seam. ---- */
.ab{display:flex;justify-content:center;gap:24px;}
.ab-it{--W:clamp(220px,24vw,360px);width:var(--W);display:flex;flex-direction:column;gap:56px;}
.ab-it p{margin:0;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:20px;line-height:normal;}
html.dark .ab-it p{color:#fff;}
.ab-box{--H:calc(var(--W) * .62);--D:calc(var(--W) * .55);position:relative;height:calc(var(--W) * .95);display:grid;place-items:center;perspective:1800px;}
.ab-it:first-child .ab-box{perspective-origin:calc(100% + 12px) 30%;} .ab-it:last-child .ab-box{perspective-origin:-12px 30%;}
.ab-glow{position:absolute;left:4%;right:4%;top:18%;bottom:14%;border-radius:12%;filter:blur(calc(var(--W) * .11));opacity:.7;
  background:linear-gradient(135deg,var(--c1),var(--c2));background-size:200% 200%;animation:cb-drift 12s ease-in-out infinite alternate;}
.ab-it:last-child .ab-glow{animation-delay:-6s;}
.ab-rig{position:relative;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-24deg);}
.ab-f{position:absolute;background:#000;display:grid;place-items:center;overflow:hidden;}
.ab-front{width:var(--W);height:var(--H);left:calc(var(--W) / -2);top:calc(var(--H) / -2);transform:translateZ(calc(var(--D) / 2));
  box-shadow:inset 0 0 calc(var(--W) * .09) color-mix(in srgb,var(--c1) 55%,transparent),inset 0 calc(var(--W) * -.05) calc(var(--W) * .12) color-mix(in srgb,var(--c2) 35%,transparent);}
.ab-top{width:var(--W);height:var(--D);left:calc(var(--W) / -2);top:calc(var(--D) / -2);transform:rotateX(90deg) translateZ(calc(var(--H) / 2));background:#050505;
  box-shadow:inset 0 0 calc(var(--W) * .07) color-mix(in srgb,var(--c2) 45%,transparent);}
.ab-right,.ab-left{width:var(--D);height:var(--H);left:calc(var(--D) / -2);top:calc(var(--H) / -2);}
.ab-right{transform:rotateY(90deg) translateZ(calc(var(--W) / 2));} .ab-left{transform:rotateY(-90deg) translateZ(calc(var(--W) / 2));}
.ab-front>span{font-family:'Tanker','Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:calc(var(--W) * .15);line-height:1;letter-spacing:.01em;color:#fff;text-shadow:0 0 3rem rgba(255,255,255,.3);transform:translateY(.05em);}
html:not(.dark) .ab-f{background:#fff;} html:not(.dark) .ab-front>span{color:#151515;text-shadow:none;}
@media (max-width:820px){ .ab{flex-direction:column;align-items:center;gap:72px;} .ab-it{--W:min(86vw,340px);} .ab-it p{font-size:18px;} }
@media (prefers-reduced-motion:reduce){ .ab-glow{animation:none;} }

/* ---- Add-ons, round 4 (Markiian): back to the shapes — the sphere stays, the pyramid becomes a hexagonal prism —
   on one level and close together. The prism: six sides round a regular hexagon (side = radius R, apothem .866 R),
   a face turned to you carrying the word, swaying slowly; black with the colour coming up from its foot. ---- */
.ad-row{display:flex;justify-content:center;gap:clamp(24px,4vw,72px);max-width:none;}
.ad{width:min(407px,42vw);}
.ad:nth-child(2){margin-top:0;}
.hp{--R:clamp(120px,11vw,160px);--H:calc(var(--R) * 1.35);width:320px;height:320px;display:grid;place-items:center;perspective:1600px;}
.hp-rig{position:relative;width:0;height:0;transform-style:preserve-3d;animation:hp-sway 10s ease-in-out infinite alternate;}
@keyframes hp-sway{from{transform:rotateX(-20deg) rotateY(-22deg);}to{transform:rotateX(-20deg) rotateY(22deg);}}
.hp-f{position:absolute;width:var(--R);height:var(--H);left:calc(var(--R) / -2);top:calc(var(--H) / -2);background:#000;overflow:hidden;
  display:grid;place-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  transform:rotateY(calc(var(--i) * 60deg)) translateZ(calc(var(--R) * .866));}
.hp-f::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 45% at 30% 100%,var(--c1) 0%,transparent 72%),radial-gradient(80% 45% at 85% 100%,var(--c2) 0%,transparent 72%),
    radial-gradient(70% 40% at 50% 0%,var(--c3) 0%,transparent 70%),linear-gradient(0deg,var(--c4),var(--c1) 45%,#000 75%);
  background-size:180% 180%;animation:cb-drift 14s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -2.3s);}
.hp-f::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.7) 24%,#000 55%,rgba(0,0,0,.65) 86%,rgba(0,0,0,.25) 100%);}
.hp-f:not([style*="--i:0"])::after{background:linear-gradient(0deg,rgba(0,0,0,.4) 0%,#000 50%,rgba(0,0,0,.6) 100%);}
.hp-f>span{position:relative;z-index:2;font-family:'Tanker','Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:calc(var(--R) * .21);line-height:1;letter-spacing:.01em;color:#fff;text-shadow:0 0 3rem rgba(255,255,255,.3);}
.hp-f[style*="--i:3"]>span{opacity:.2;}
.hp-cap{position:absolute;width:calc(var(--R) * 2);height:calc(var(--R) * 1.732);left:calc(var(--R) * -1);top:calc(var(--R) * -.866);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);transform:rotateX(90deg) translateZ(calc(var(--H) / 2));
  background:radial-gradient(60% 60% at 50% 50%,#000 30%,color-mix(in srgb,var(--c3) 45%,#000) 100%);}
html:not(.dark) .hp-f{background:#fff;} html:not(.dark) .hp-cap{background:radial-gradient(60% 60% at 50% 50%,#fff 30%,color-mix(in srgb,var(--c3) 40%,#fff) 100%);}
html:not(.dark) .hp-f::after{background:linear-gradient(0deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.7) 24%,#fff 55%,rgba(255,255,255,.65) 86%,rgba(255,255,255,.25) 100%);}
html:not(.dark) .hp-f:not([style*="--i:0"])::after{background:linear-gradient(0deg,rgba(255,255,255,.4) 0%,#fff 50%,rgba(255,255,255,.6) 100%);}
html:not(.dark) .hp-f>span{color:#151515;text-shadow:none;}
@media (max-width:820px){ .ad-row{flex-direction:column;align-items:center;gap:72px;} .ad{width:100%;} }
@media (prefers-reduced-motion:reduce){ .hp-rig,.hp-f::before{animation:none;} }
/* the sphere without the highlight spot (it read as a smudge) */
.sp::after{background:radial-gradient(circle at 50% 48%,#000 0%,rgba(0,0,0,.94) 40%,rgba(0,0,0,.55) 60%,rgba(0,0,0,0) 74%);}
/* Add-ons, round 5 (Markiian): the same cubes as What You Get — faces, colour light, word glow and resting angle —
   so the page has one language. Two side by side, close; each paragraph under its cube. */
.ab-it{--W:407px;width:min(407px,42vw);align-items:center;}
.ab-it p{width:100%;}
/* Add-ons, round 6 (Markiian): the wide blocks' shape, the cubes' colour logic — black faces, a four-colour blend
   drifting under each face, the black fade over it (front: lit at its top corner and its foot; top and sides: from
   one corner), the other add-on's word on the top and sides at 20 %. No glow behind, no inset light. */
.ab-it{width:var(--W);}
.ab-glow{display:none;}
.ab-f{color:#fff;text-shadow:0 0 3rem rgba(255,255,255,.3);box-shadow:none !important;background:#000 !important;}
.ab-f::before{content:"";position:absolute;inset:0;opacity:.6;
  background:radial-gradient(70% 70% at 100% 0%,var(--c1) 0%,transparent 72%),radial-gradient(80% 80% at 0% 100%,var(--c3) 0%,transparent 70%),
    radial-gradient(60% 60% at 70% 70%,var(--c4) 0%,transparent 75%),linear-gradient(135deg,var(--c2) 0%,var(--c1) 50%,var(--c3) 100%);
  background-size:220% 220%;animation:cb-drift 14s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -3.5s);}
.ab-front::before{opacity:.75;background:
    radial-gradient(90% 70% at 100% 0%,var(--c1) 0%,transparent 70%),radial-gradient(110% 55% at 20% 100%,var(--c3) 0%,transparent 72%),
    radial-gradient(60% 60% at 0% 0%,var(--c2) 0%,transparent 70%),linear-gradient(135deg,var(--c2) 0%,var(--c1) 55%,var(--c4) 100%);background-size:180% 180%;}
.ab-top::before{animation-delay:calc(var(--k) * -3.5s - 8s);} .ab-right::before{animation-delay:calc(var(--k) * -3.5s - 2s);}
.ab-f::after{content:"";position:absolute;inset:0;}
.ab-front::after{background:linear-gradient(185deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 32%,#000 55%,rgba(0,0,0,.72) 82%,rgba(0,0,0,.25) 100%);}
.ab-top::after{background:linear-gradient(351deg,#000 30%,rgba(0,0,0,0) 100%);}
.ab-right::after,.ab-left::after{background:linear-gradient(135deg,#000 36%,rgba(0,0,0,0) 100%);}
.ab-f>span{position:relative;z-index:1;font-family:'Tanker','Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:.01em;}
.ab-top>span,.ab-right>span,.ab-left>span{opacity:.2;font-size:calc(var(--W) * .12);}
.ab-right>span,.ab-left>span{font-size:calc(var(--W) * .09);}
html:not(.dark) .ab-f{background:#fff !important;color:#151515;text-shadow:none;}
html:not(.dark) .ab-front::after{background:linear-gradient(185deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 32%,#fff 55%,rgba(255,255,255,.72) 82%,rgba(255,255,255,.25) 100%);}
html:not(.dark) .ab-top::after{background:linear-gradient(351deg,#fff 30%,rgba(255,255,255,0) 100%);}
html:not(.dark) .ab-right::after,html:not(.dark) .ab-left::after{background:linear-gradient(135deg,#fff 36%,rgba(255,255,255,0) 100%);}
.ab-it{--W:clamp(220px,24vw,360px);width:var(--W);}   /* the round-3 size, so the two keep their gap */
.ab{gap:48px;}

/* ============================================================================
   How It Works — Figma 711-7659: "One focused design sprint, 4 phases over 4 weeks." (General Sans 25, at the logo's
   margin), 80 below it a 348 px stage. The stage is thesis.co's staircase (read from its DOM: lanes of black tread
   and riser faces chained along a ribbon, one word per lane sliding through the faces — each face holds the same word
   shifted back by its distance along the ribbon so it reads as one line round the corners — and a blur(24px) colour
   copy of the faces behind, so light leaks at every seam), turned horizontal: four lanes side by side in depth, each
   four long treads rising to the right. Built at a fixed 1242 × 348 and scaled to the frame by speedrun-v2.js (--zs).
   ========================================================================== */
.v5-how{padding:clamp(140px,12vw,220px) 20px 0;}
.v5-how .v5-label{margin:0 0 80px;}
html.dark .v5-how .v5-label{color:#fff;}
.rb{height:calc(348px * var(--zs,1));display:grid;place-items:center;padding:0 60px;margin-bottom:clamp(48px,5vw,80px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.rb-scale{width:1242px;height:348px;flex:none;display:grid;place-items:center;transform:scale(var(--zs,1));}
.rb-light,.rb-solid{grid-area:1 / 1;}
.rb-light{width:100%;height:100%;display:grid;place-items:center;filter:blur(22px) saturate(1.6) brightness(1.2);}
.rb-scale{perspective:2600px;}
.rb-light{perspective:2600px;}
.rb-rig{position:relative;width:0;height:0;transform-style:preserve-3d;transform:translateY(-10px) rotateX(-32deg) rotateY(18deg);}
.rb-lane{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:translateZ(var(--z));}
.rb-f{position:absolute;width:var(--w);height:46px;left:calc(var(--w) / -2);top:-23px;overflow:hidden;background:#000;
  -webkit-backface-visibility:visible;backface-visibility:visible;}
.rb-t{transform:translate3d(var(--x),var(--y),0) rotateX(90deg);}
.rb-r{transform:translate3d(var(--x),var(--y),0) rotateZ(-90deg) rotateX(90deg);}
.rb-light .rb-f{background:linear-gradient(90deg,var(--c1),var(--c2),var(--c1));background-size:200% 100%;animation:rb-film 9s linear infinite;animation-delay:calc(var(--l) * -2.2s);}
@keyframes rb-film{to{background-position:200% 0;}}
.rb-w{position:absolute;left:0;top:50%;white-space:nowrap;font-family:'Tanker','Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:34px;line-height:1;letter-spacing:.01em;color:#fff;text-shadow:0 0 3rem rgba(255,255,255,.3);
  transform:translate(calc(var(--sl,-200px) - var(--o)),-46%);}
html:not(.dark) .rb-solid .rb-f{background:#fff;} html:not(.dark) .rb-w{color:#151515;text-shadow:none;}
.v5-how .v4-phases{max-width:1402px;margin:0 auto;}
@media (max-width:820px){ .v5-how{padding-left:16px;padding-right:16px;} .rb{padding:0;} }
@media (prefers-reduced-motion:reduce){ .rb-light .rb-f{animation:none;} }
/* chunkier, like the reference: three treads a lane, taller risers, deeper lanes, the word larger */
.rb-f{height:60px;top:-30px;}
.rb-rig{transform:translateY(-6px) rotateX(-22deg) rotateY(16deg);}
.rb-w{font-size:44px;}

/* ---- How It Works, round 2 (Markiian: "does not look like the reference") — thesis's proportions and camera:
   square steps (tread = riser = 190, as thesis's faces are all one --width), lanes 110 wide, each lane a little ahead
   of the one behind it so a riser edge and a tread edge show at every seam; a near-orthographic iso view; black faces;
   the colour copy behind blurred 24 px and kept warm and soft (thesis's film: amber, violet, a little green). The
   staircase climbs left to right. ---- */
.rb{height:auto;padding:0;-webkit-mask-image:radial-gradient(70% 75% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(70% 75% at 50% 50%,#000 55%,transparent 100%);}
.rb-scale{width:1402px;height:640px;perspective:6000px;}
.rb-light{perspective:6000px;filter:blur(24px) saturate(1.3);opacity:.9;}
.rb-rig{transform:translate(40px,150px) rotateX(-30deg) rotateY(38deg);}
.rb-f{width:190px;height:110px;left:-95px;top:-55px;background:#000;}
.rb-light .rb-f{background:linear-gradient(90deg,var(--c1),var(--c2) 50%,var(--c1));background-size:200% 100%;}
.rb-w{font-size:58px;transform:translate(calc(var(--sl,-300px) - var(--o)),-46%);}
/* the names as plain text (Markiian: "the text shouldn't be on the ground"): upright over each lane's middle step;
   the lanes stagger less so the light reads as seams, not bars; the colour copy softer */
.rb{position:relative;}
.rb-lab{position:absolute;transform:translate(-50%,-50%);font-family:'Tanker','Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:calc(44px * var(--zs,1));line-height:1;letter-spacing:.01em;color:#fff;text-shadow:0 0 3rem rgba(255,255,255,.3);pointer-events:none;white-space:nowrap;}
html:not(.dark) .rb-lab{color:#151515;text-shadow:none;}
.rb-light{opacity:.75;filter:blur(24px) saturate(1.1);}
/* one phase a step, climbing left to right (week 1 on the lowest step, week 4 on the top one); the name is plain
   text over the step with its week above it */
.rb-scale{width:1402px;height:820px;}
.rb-rig{transform:translate(0,40px) rotateX(-30deg) rotateY(38deg);}
.rb-lab{display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%,-115%);}
.rb-lab em{font-family:'General Sans','Geist',sans-serif;font-style:normal;font-weight:500;font-size:calc(16px * var(--zs,1));text-transform:none;letter-spacing:0;opacity:.6;text-shadow:none;}
/* horizontal (Markiian): longer treads (270) and lower risers (120) so the climb runs across the band, the camera
   turned less so the run reads left to right; the fade only at the two ends */
.rb-scale{width:1402px;height:560px;}
.rb-rig{transform:translate(0,30px) rotateX(-30deg) rotateY(24deg);}
.rb-f{height:100px;top:-50px;}
.rb-t{width:270px;left:-135px;} .rb-r{width:120px;left:-60px;}
.rb{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
/* fit: the staircase measured 1734 × 917 in the band — scaled to .7 and centred in a 680 px band */
.rb-scale{height:680px;}
.rb-rig{transform:translate(252px,-11px) scale(.7) rotateX(-30deg) rotateY(24deg);}
.rb-lab{font-size:calc(40px * var(--zs,1));}
.rb-rig{transform:translate(70px,-60px) scale(.72) rotateX(-30deg) rotateY(24deg);}
.rb-rig{transform:translate(62px,49px) scale(.95) rotateX(-30deg) rotateY(24deg);}
.rb-scale{height:760px;} .v5-how .v5-label{margin-bottom:40px;}   /* room for the glow above and below the stair */

/* ---- How It Works, round 3 (Markiian's sketch): each phase a long black bar seen from its left end — the end face
   (a stepped profile, thesis's riser) at the left, the bar running right with the phase and its sentence in it.
   Four of them stacked, each a step further right, like the reference's stair laid on its side. The edges carry the
   reference's seam light: out of the dark, into the colour, and fading again toward the right; a blurred copy of each
   edge gives the glow. ---- */
.rb{display:none;}
.ph{list-style:none;margin:0;padding:0 0 0 clamp(0px,3vw,48px);display:flex;flex-direction:column;gap:28px;}
.ph-row{--cw:113px;position:relative;display:flex;align-items:flex-start;margin-left:calc(var(--k) * 56px);}
.ph-cap{flex:none;width:var(--cw);height:277px;overflow:visible;}
.ph-cap__fill{fill:#000;stroke:none;}
.ph-cap__line{fill:none;stroke-width:1.5;}
.ph-cap__glow{fill:none;stroke-width:6;filter:blur(7px);opacity:.8;}
.ph-bar{position:relative;flex:1;max-width:1031px;margin-left:-1px;margin-top:80px;height:196px;background:#000;
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 56px;}
.ph-edge{position:absolute;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,var(--c1) 0%,color-mix(in srgb,var(--c1) 50%,var(--c2)) 40%,var(--c2) 70%,transparent 100%);}
.ph-edge::after{content:"";position:absolute;left:0;right:0;top:-4px;height:10px;filter:blur(10px);opacity:.9;background:inherit;}
.ph-edge--t{top:0;} .ph-edge--b{bottom:0;}
.ph-n{font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:25px;color:rgba(255,255,255,.45);}
.ph-bar p{margin:0;max-width:30em;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:25px;line-height:1.35;color:#fff;}
html:not(.dark) .ph-cap__fill,html:not(.dark) .ph-bar{fill:#fff;background:#fff;}
html:not(.dark) .ph-bar p{color:#151515;} html:not(.dark) .ph-n{color:rgba(0,0,0,.45);}
@media (max-width:820px){
  .ph{padding:0;gap:20px;} .ph-row{margin-left:0;} .ph-cap{display:none;}
  .ph-bar{margin-top:0;height:auto;padding:28px 20px;} .ph-n,.ph-bar p{font-size:19px;}
}

/* ---- How It Works, round 4 (Markiian: "connected, as on the reference"): one solid stair laid on its side — four
   blocks flush on top of one another, each a step further right; their left end faces make one stepped edge, no
   line between an end face and its front. The light sits on the seams where the blocks meet and on the end faces'
   outer edges: out of the dark at the left, into the phase's colour, fading out to the right — a soft wash, a glow
   and a fine line, like the reference's leaks. Drawn as one SVG; the text sits on each block's front. ---- */
.ph2{position:relative;container-type:inline-size;}
.ph-svg{display:block;width:100%;height:auto;overflow:visible;}
.ph-front{fill:#000;} .ph-end{fill:#050505;} .ph-top{fill:#070707;}
.ph-svg g path{fill:none;}
.ph-wash path{stroke-width:34;opacity:.22;filter:blur(18px);}
.ph-glow path{stroke-width:7;opacity:.75;filter:blur(6px);}
.ph-line path{stroke-width:1.4;}
.ph2-list{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none;}
.ph2-list .ph-row{position:absolute;right:0;margin:0;display:flex;flex-direction:column;justify-content:center;gap:.2em;padding-left:4cqw;
  font-size:max(15px,1.78cqw);}
.ph2-list .ph-n{font-size:1em;}
.ph2-list p{margin:0;max-width:30em;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:1em;line-height:1.35;color:#fff;}
html:not(.dark) .ph-front,html:not(.dark) .ph-end,html:not(.dark) .ph-top{fill:#fff;}
html:not(.dark) .ph2-list p{color:#151515;}
@media (max-width:820px){
  .ph-svg{display:none;} .ph2-list{position:static;display:flex;flex-direction:column;gap:28px;}
  .ph2-list .ph-row{position:static;height:auto !important;padding:0;font-size:19px;}
}

/* ---- How It Works, round 5 (Markiian: "what is this neon… the colour is wrong, study the reference"). The reference's
   light is never a line: it is a soft leak at the edges, in a muted film — amber, sage, a grey steel blue — barely
   saturated, blurred wide. So: no stroked lines. Each stepped edge (flat out of the left fade, over the step, along
   the block) carries a dim wide glow, and a brighter soft light runs along it like the hero's rim light, the edges
   one after another so it flows right and down the stair. The whole field fades in at the left and out at the right. ---- */
@property --phc{syntax:'<color>';inherits:true;initial-value:#b8925a;}
@keyframes ph-hue{0%{--phc:#b8925a;}33%{--phc:#7e9c8c;}66%{--phc:#5d7896;}100%{--phc:#b8925a;}}
.ph-svg{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 62%,transparent 96%);mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 62%,transparent 96%);}
.ph-front{fill:#000;} .ph-end{fill:#030303;}
.ph-light{animation:ph-hue 17s linear infinite;}
.ph-light path{fill:none;stroke:var(--phc);stroke-linejoin:round;stroke-linecap:round;}
.ph-base{stroke-width:22;opacity:.22;filter:blur(16px);}
.ph-run{stroke-width:16;opacity:.75;filter:blur(12px);stroke-dasharray:220 1780;animation:ph-run 9s linear infinite;animation-delay:calc(var(--k) * 1.1s);}
.ph-core{stroke-width:3;opacity:.55;filter:blur(2.5px);stroke-dasharray:150 1850;stroke-dashoffset:-35;animation:ph-run2 9s linear infinite;animation-delay:calc(var(--k) * 1.1s);}
@keyframes ph-run{from{stroke-dashoffset:220;}to{stroke-dashoffset:-1000;}}
@keyframes ph-run2{from{stroke-dashoffset:185;}to{stroke-dashoffset:-1035;}}
.ph2-list p{color:#fff;}
@media (prefers-reduced-motion:reduce){ .ph-light,.ph-run,.ph-core{animation:none;} }
/* the form has to read between the runs: the resting glow brighter, a faint edge where the faces meet */
.ph-base{stroke-width:18;opacity:.45;filter:blur(12px);}
.ph-svg .ph-front,.ph-svg .ph-end{stroke:rgba(255,255,255,.045);stroke-width:1;}

/* ---- How It Works, round 6 (Markiian: "doesn't look like us… do it how I want"): the hero's own light, which is
   thesis's method. Each block's silhouette (its stepped end and its front) twice: behind, a copy filled with the
   hero's wall light — our colours, the two-colour band sliding along (hx-run) while the hues turn (hx-hue), each
   block a step behind the last — blurred; in front, the same silhouette in black with its lower edge lifted 3 px, so
   the light leaks out along every step-up and the edge under it, flowing right and down the stair. ---- */
.ph-svg{display:none;}
.ph3{position:relative;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 66%,transparent 98%);mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 66%,transparent 98%);}
.ph3-light,.ph3-solid{position:absolute;inset:0;}
.ph3 i{position:absolute;inset:0;}
.ph3-light{filter:blur(14px) saturate(1.45) brightness(1.15);}
.ph3-light i{background:linear-gradient(90deg,var(--lc) 0%,var(--ld) 50%,var(--lc) 100%);background-size:200% 100%;
  animation:hx-hue 9s linear infinite,hx-run 4.8s linear infinite;animation-delay:calc(var(--i) * -1.5s),calc(var(--i) * -.8s);}
.ph3-solid i{background:#000;}
html:not(.dark) .ph3-solid i{background:#fff;}
@media (max-width:820px){ .ph3{display:none;} }
@media (prefers-reduced-motion:reduce){ .ph3-light i{animation:none;} }
.ph2-list .ph-row{padding-left:0;}
/* the seams as open gaps (Markiian): 18 px of empty space under each block, so the same light that glows at the top
   and bottom of the stair fills them, not a thin line */
.ph3-light{filter:blur(10px) saturate(1.45) brightness(1.15);}
/* quieter (Markiian: the light took attention from the text): 5 px gaps, the light at half strength, less saturated */
.ph3-light{filter:blur(8px) saturate(.9) brightness(.85);opacity:.5;}
.ph3-light{filter:blur(8px) saturate(1.05) brightness(.95);opacity:.68;}   /* a step back up: present, under the text */

/* ---- Price — Figma 711-7659: "Price" (General Sans 25, at the logo margin); 80 below it, centred: "$10k" (48) and
   20 under it the included list in two 407 px columns, 20 apart, 20 px text with disc bullets indented 30. ---- */
.v5-price{padding:clamp(140px,12vw,220px) 20px 0;}
.v5-price .v5-label{margin:0 0 80px;}
.v5-price__in{display:flex;flex-direction:column;align-items:center;gap:20px;font-family:'General Sans','Geist',sans-serif;font-weight:500;}
.v5-price__num{margin:0;font-size:48px;line-height:normal;text-align:center;}
.v5-price__cols{display:flex;justify-content:center;align-items:flex-start;gap:20px;}
.v5-price__cols ul{width:407px;margin:0;padding:0;list-style:disc;font-size:20px;line-height:normal;}
.v5-price__cols li{margin-left:30px;}
html.dark .v5-price .v5-label,html.dark .v5-price__in{color:#fff;}
@media (max-width:820px){
  .v5-price{padding-left:16px;padding-right:16px;} .v5-price .v5-label{margin-bottom:48px;}
  .v5-price__cols{flex-direction:column;gap:0;} .v5-price__cols ul{width:100%;font-size:18px;}
}
/* light behind the price (Markiian), our playbook — the hero's: a copy of "$10k" filled with the hero's sliding,
   hue-turning wall light, blurred, sitting behind the white figure; a wider, fainter pool of the same light under it */
.v5-price__num{position:relative;isolation:isolate;}
.v5-price__num::before,.v5-price__num::after{content:attr(data-t);position:absolute;inset:0;z-index:-1;color:transparent;
  background:linear-gradient(90deg,var(--lc) 0%,var(--ld) 50%,var(--lc) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  animation:hx-hue 9s linear infinite,hx-run 4.8s linear infinite;}
.v5-price__num::before{filter:blur(10px) saturate(1.3);opacity:.9;}
.v5-price__num::after{-webkit-background-clip:border-box;background-clip:border-box;inset:-30% -60%;border-radius:50%;filter:blur(48px);opacity:.28;}
@media (prefers-reduced-motion:reduce){ .v5-price__num::before,.v5-price__num::after{animation:none;} }
/* "$10k" in Tanker at the cubes' word size (Brand, Website: 56.7 px at 1440 — the cube face × .305), with the cubes' glow */
.v5-price__num{font-family:'Tanker','Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1;
  font-size:calc(clamp(120px,13vw,186px) * .305);text-shadow:0 0 3rem rgba(255,255,255,.3);}
/* the phases in the content font (Markiian): General Sans 500, 20 px, normal leading — as the What You Get and
   Add-ons paragraphs; the "Phase N" line the same size in grey */
.ph2-list .ph-row{font-size:20px;gap:6px;}
.ph2-list p{line-height:normal;max-width:560px;}
@media (max-width:820px){ .ph2-list .ph-row{font-size:18px;} }


/* ============================================================================
   Work — Figma 714-7759: "Work" (General Sans 25), 20 below it the room, 1120 : 646, full width, on white. The room is
   a box seen from its open front: back wall, sides, ceiling and floor, cells a fifth of the height, the work hung in
   about half of them. The front of the floor fades to white, as in the frame. speedrun-work.js builds and moves it.
   ========================================================================== */
.v5-work{background:#fff;color:#151515;padding:clamp(120px,10vw,180px) 20px clamp(80px,8vw,140px);}
.v5-work .v5-label,html.dark .v5-work .v5-label{color:#151515;margin:0 0 20px;}
.wr{position:relative;width:100%;aspect-ratio:1120 / 646;overflow:hidden;background:#fff;perspective:var(--P,840px);perspective-origin:50% 50%;}
.wr-rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform;}
.wr-wall{position:absolute;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);gap:0;background:#fff;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;}
.wr-back{width:var(--W);height:var(--H);left:calc(var(--W) / -2);top:calc(var(--H) / -2);transform:translateZ(calc(var(--D) * -1));}
.wr-left,.wr-right{width:var(--D);height:var(--H);left:calc(var(--D) / -2);top:calc(var(--H) / -2);}
.wr-left{transform:translateX(calc(var(--W) / -2)) translateZ(calc(var(--D) / -2)) rotateY(90deg);background:#f6f6f6;}
.wr-right{transform:translateX(calc(var(--W) / 2)) translateZ(calc(var(--D) / -2)) rotateY(-90deg);background:#f6f6f6;}
.wr-ceil,.wr-floor{width:var(--W);height:var(--D);left:calc(var(--W) / -2);top:calc(var(--D) / -2);}
.wr-ceil{transform:translateY(calc(var(--H) / -2)) translateZ(calc(var(--D) / -2)) rotateX(-90deg);background:#fbfbfb;}
.wr-floor{transform:translateY(calc(var(--H) / 2)) translateZ(calc(var(--D) / -2)) rotateX(90deg);background:#f3f3f3;}
.wr-tile{position:relative;display:block;margin:0;padding:0;border:0;background:#eee;overflow:hidden;cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;}
.wr-tile img{display:block;width:100%;height:100%;object-fit:cover;}
.wr-tile:hover,.wr-tile:focus-visible{transform:translateZ(14px);box-shadow:0 14px 40px rgba(0,0,0,.16);z-index:1;outline:none;}
.wr-fade{position:absolute;left:0;right:0;bottom:0;height:16%;pointer-events:none;background:linear-gradient(transparent,#fff);}
@media (max-width:820px){ .v5-work{padding-left:16px;padding-right:16px;} .wr{aspect-ratio:3 / 4;} }

/* the detail view, the gallery's own (gallery.html), scoped to the room */
  .wr-detail{position:fixed;inset:0;z-index:200;display:none;
    background:rgba(250,249,245,.5);-webkit-backdrop-filter:blur(28px) saturate(1.1);backdrop-filter:blur(28px) saturate(1.1);
    opacity:0;transition:opacity .3s ease;}
  .wr-detail.on{display:block;}
  .wr-detail.in{opacity:1;}
  .wr-detail .stage{position:absolute;inset:80px var(--margin) 150px;display:flex;align-items:center;justify-content:center;}
  .wr-detail .piece{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;
    transform:scale(.985);opacity:0;transition:opacity .25s ease,transform .45s cubic-bezier(0,.01,.38,.95);}
  .wr-detail .piece.in{opacity:1;transform:none;}
  .wr-detail .piece img,.wr-detail .piece video,.wr-detail .live{box-shadow:0 24px 80px rgba(0,0,0,.2),0 4px 20px rgba(0,0,0,.2);}   /* Figma 645-4060 */
  .wr-detail .piece img,.wr-detail .piece video{display:block;max-width:min(1200px,calc(100vw - 2 * var(--margin)));max-height:min(625px,calc(100vh - 230px));width:auto;height:auto;}
  .wr-detail .live{position:relative;overflow:hidden;background:#3c3833;}
  /* the picture is the way through the set (Markiian: "hover the image → a left/right cursor; click the right side for the next, the left side for the one before"):
     the cursor is a black 32 tag with a white arrow — the key tags' look, solid */
  .wr-detail .piece.flip img,.wr-detail .piece.flip video{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2230%22%20height%3D%2230%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M9%2016h13.5M18%2011l5%205-5%205%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22/%3E%3C/svg%3E") 16 16,e-resize;}
  .wr-detail .piece.flip.back img,.wr-detail .piece.flip.back video{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2230%22%20height%3D%2230%22%20fill%3D%22%23000%22/%3E%3Cpath%20d%3D%22M23%2016H9.5M14%2011l-5%205%205%205%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22square%22/%3E%3C/svg%3E") 16 16,w-resize;}
  .wr-detail .live iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;}
  .wr-detail .hint{font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:15px;line-height:1.25;letter-spacing:.01em;color:var(--black);}
  .wr-detail .top{position:absolute;top:20px;right:var(--margin);display:flex;gap:8px;}
  .wr-detail .top .btn[hidden]{display:none;}   /* .btn sets its own display; Unmute only shows for a film with sound */
  /* the foot (Figma 645-4060): the name, General Sans 20 / 30, and its kind tag 12 on, 32 from the bottom; the count centred */
  .wr-detail .meta{position:absolute;left:var(--margin);bottom:32px;max-width:40vw;display:flex;align-items:center;gap:12px;}
  .wr-detail .meta .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:20px;line-height:30px;letter-spacing:-.012em;color:var(--black);}
  .wr-detail .meta .chip{flex:none;display:inline-flex;padding:2px 8px;background:rgba(0,0,0,.1);font-family:'Tanker','Anton',sans-serif;font-weight:400;font-size:20px;line-height:1.25;letter-spacing:.01em;color:rgba(0,0,0,.7);}
  .wr-detail .count{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:15px;line-height:1.25;color:rgba(0,0,0,.5);font-variant-numeric:tabular-nums;}
  /* the keys, top left on the Close button's line: small tags (10 % black, 20 tall, 4 pad) — Esc in Tanker 15, the arrows General Sans 13, 2 apart; the words 6 on; the two groups 20 apart */
  .wr-detail .keys{position:absolute;top:20px;left:var(--margin);height:40px;display:flex;align-items:center;gap:20px;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:15px;line-height:1.25;color:rgba(0,0,0,.5);}
  .wr-detail .keys>span{display:flex;align-items:center;gap:6px;}
  .wr-detail .keys .caps{display:flex;gap:2px;}
  .wr-detail kbd{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:2px 4px;box-sizing:border-box;background:rgba(0,0,0,.1);font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:13px;line-height:1.25;color:rgba(0,0,0,.7);}

/* ---- Work, round 2 (Markiian: "ugly… make it like this" — the Minifolio fly-through): the word stays on the black,
   outside; under it the white field, the frame's width, 1120 : 646. Pieces are plain pictures, no frames or shadows,
   scaled by their depth (speedrun-work.js). The cursor is a small ring, as in the film. ---- */
.v5-work{background:none;color:inherit;padding-bottom:0;}
.v5-work .v5-label,html.dark .v5-work .v5-label{color:#fff;margin:0 0 20px;}
html:not(.dark) .v5-work .v5-label{color:#151515;}
.wr{perspective:none;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%226%22%20fill%3D%22none%22%20stroke%3D%22%23151515%22%20stroke-width%3D%221.5%22/%3E%3C/svg%3E") 10 10,default;}
.wr-rig{left:0;top:0;width:100%;height:100%;transform:none !important;transform-style:flat;}
.wr-fade{display:none;}
.wr-card{position:absolute;left:0;top:0;margin:0;padding:0;border:0;background:#f2f2f2;cursor:inherit;transform-origin:50% 50%;will-change:transform,opacity;}
.wr-card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.wr-card:focus-visible{outline:2px solid #151515;outline-offset:4px;}
.wr{isolation:isolate;}   /* the cards' depth order stays inside the field (they sat over the detail view) */

/* ============================================================================
   Contact — Figma 714-7771: "Contact" (General Sans 25, at the logo margin); 20 under it, centred, an 800 × 400
   ellipse with a 407-wide block 122 from its top: the sentence (20) and, 20 under it, "Book a call" (48).
   The light is thesis.co/company's plane (a rendered film there): black, colour pooling in from the rim and fading
   to black toward the middle, the colours drifting round. Ours: a conic sweep of the hero's two cycling colours
   (hx-hue) turning slowly, under a radial black that leaves only the rim lit; a faint blurred copy outside.
   ========================================================================== */
@property --ea{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes el-turn{to{--ea:360deg;}}
.v5-contact{padding:clamp(140px,12vw,220px) 20px clamp(120px,10vw,180px);}
.v5-contact .v5-label{margin:0 0 20px;}
html.dark .v5-contact .v5-label{color:#fff;}
.el{position:relative;display:grid;place-items:center;width:min(800px,100%);aspect-ratio:2 / 1;margin:0 auto;text-decoration:none;color:#fff;isolation:isolate;}
.el-face,.el-glow{position:absolute;inset:0;border-radius:50%;}
.el-face{overflow:hidden;background:#000;}
.el-face::before,.el-glow{content:"";
  background:conic-gradient(from var(--ea),var(--lc),#000 22%,var(--ld) 40%,#000 58%,var(--lc) 76%,#000 88%,var(--lc));
  animation:el-turn 24s linear infinite,hx-hue 17.3s linear infinite;}
.el-face::before{position:absolute;inset:-2%;filter:blur(24px) saturate(1.2);opacity:.9;}
.el-face i{position:absolute;inset:0;background:radial-gradient(50% 50% at 50% 50%,#000 0%,#000 46%,rgba(0,0,0,.82) 62%,rgba(0,0,0,.25) 86%,rgba(0,0,0,0) 100%);}
.el-glow{z-index:-1;filter:blur(40px);opacity:.22;}
.el-txt{position:relative;width:min(407px,80%);display:flex;flex-direction:column;gap:20px;text-align:center;font-family:'General Sans','Geist',sans-serif;font-weight:500;line-height:normal;}
.el-p{font-size:20px;}
.el-cta{font-size:48px;transition:opacity .3s;}
.el:hover .el-cta{opacity:.75;}
.el:hover .el-face::before{opacity:1;}
html:not(.dark) .el-face{background:#000;}
@media (max-width:820px){ .v5-contact{padding-left:16px;padding-right:16px;} .el{aspect-ratio:1 / 1.1;} .el-p{font-size:16px;} .el-cta{font-size:34px;} }
@media (prefers-reduced-motion:reduce){ .el-face::before,.el-glow{animation:none;} }
.el-face::before{opacity:.78;filter:blur(26px) saturate(1);}   /* a touch quieter, as on the reference — the rim, not a lamp */
.v5-price__in{gap:56px;}   /* more air between the price and the list (Markiian) */

/* the foot: no site footer on this page, one line — the year and that we are not affiliated with a16z */
.v5-foot{padding:clamp(80px,8vw,140px) 20px 32px;}
.v5-foot p{margin:0;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:15px;line-height:1.25;color:rgba(0,0,0,.5);}
html.dark .v5-foot p{color:rgba(255,255,255,.45);}
.v5-legal{margin-top:8px!important;display:flex;gap:16px;}
.v5-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.v5-legal button{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.v5-legal [hidden]{display:none;}
@media (max-width:820px){ .v5-foot{padding-left:16px;padding-right:16px;} }

/* ============================================================================
   FAQ — Figma 714-7772: "FAQ" (General Sans 25, at the logo margin); 20 under it, centred, an 800 column of
   questions 20 apart, all General Sans 20; the open question at 50 % and its answer 20 under it, white.
   ========================================================================== */
.v5-faq{padding:clamp(120px,10vw,180px) 20px 0;}
.v5-faq .v5-label{margin:0 0 20px;}
html.dark .v5-faq .v5-label{color:#fff;}
.fq-list{width:min(800px,100%);margin:0 auto;display:flex;flex-direction:column;gap:20px;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:20px;line-height:normal;}
.fq summary{list-style:none;cursor:pointer;transition:opacity .25s;}
.fq summary::-webkit-details-marker{display:none;}
.fq summary:hover{opacity:.7;}
.fq[open] summary{opacity:.5;}
.fq p{margin:20px 0 0;}
html.dark .fq-list{color:#fff;}
html:not(.dark) .fq-list{color:#151515;}
@media (max-width:820px){ .v5-faq{padding-left:16px;padding-right:16px;} .fq-list{font-size:18px;} }
/* the plus and the close (Markiian): a 14 px plus at the right of each question, turning a quarter-and-a-half into
   a cross when the answer is open; it stays at full strength while the open question dims */
.fq summary{position:relative;padding-right:40px;opacity:1;}
.fq summary>span{transition:opacity .25s;}
.fq summary::before,.fq summary::after{content:"";position:absolute;right:4px;top:50%;width:14px;height:1.5px;margin-top:-.75px;background:currentColor;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.fq summary::after{transform:rotate(90deg);}
.fq[open] summary::before{transform:rotate(45deg);} .fq[open] summary::after{transform:rotate(135deg);}
.fq summary:hover{opacity:1;} .fq summary:hover>span{opacity:.7;}
.fq[open] summary{opacity:1;} .fq[open] summary>span{opacity:.5;}
.v5-contact{padding-bottom:clamp(40px,4vw,64px);} .v5-faq{padding-top:clamp(64px,6vw,100px);}   /* Contact → FAQ closer (Markiian): ~280 → ~160 at 1440 */
.fq summary:focus{outline:none;} .fq summary:focus-visible{outline:2px solid currentColor;outline-offset:6px;}   /* no ring after a mouse click; keyboard focus still shows */

/* the header over the white Work field (it was white on white): speedrun-work.js adds .v2-head--light while the
   field is under the header — dark type, dark tint on the tabs, the speedrun mark black, the button black */
html.dark .v2-head--light .v2-head__for{color:#151515;}
html.dark .v2-head--light .v2-head__nav .v2-chip{color:#151515;background:rgba(0,0,0,.06);}
html.dark .v2-head--light .v2-chip--logo img{filter:none;}
html.dark .v2-head--light .btn.v2-head__cta{--btn-bg:#151515;--btn-fg:#fff;}
.v2-head__for,.v2-head__nav .v2-chip,.v2-chip--logo img{transition:color .25s,background-color .25s,filter .25s;}
html.dark .v2-head--light .v2-chip--logo img{filter:invert(1);}   /* the mark is white in the file */
html.dark .v2-head--light .v2-head__nav .v2-chip{background:rgba(255,255,255,.72);}   /* frosted white, legible over the pieces */
/* the proof under the field (Page Copy v2 §6): three results on one line, the content font, the name bright and the
   result dimmer, 40 apart */
.wr-proof{margin:24px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:20px;line-height:normal;}
.wr-proof span{color:rgba(255,255,255,.55);} .wr-proof b{font-weight:500;color:#fff;}
html:not(.dark) .wr-proof span{color:rgba(0,0,0,.5);} html:not(.dark) .wr-proof b{color:#151515;}
@media (max-width:820px){ .wr-proof{flex-direction:column;align-items:flex-start;font-size:17px;} }
/* phones: without the tabs the header has nothing behind it, and the text ran under the logo — a soft fade to the
   ground behind the header line (no band on desktop, as asked) */
@media (max-width:820px){
  html.dark .v2-head{background:linear-gradient(#000 55%,rgba(0,0,0,0));}
  html:not(.dark) .v2-head{background:linear-gradient(#fff 55%,rgba(255,255,255,0));}
  html.dark .v2-head.v2-head--light{background:linear-gradient(#fff 55%,rgba(255,255,255,0));}
}

/* ---- phones (Markiian's mobile pass, 2026-10-29) ---- */
@media (max-width:820px){
  /* What you get: its label sat 16 further in than the logo (the pin's own padding) */
  .v5-pin{padding:0;}
  /* more air between a cube's paragraph and the next cube */
  .v5-rows{gap:96px;}
  /* How It Works: the stair drawn for the phone frame instead of the plain list */
  .ph2--d{display:none;}
  .ph2--m{display:block;}
  .ph2--m .ph3{display:block;}
  .ph2--m .ph2-list{position:absolute;inset:0;display:block;}
  .ph2--m .ph2-list .ph-row{position:absolute;right:14px;height:auto;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0;font-size:15px;}
  .ph2--m .ph2-list p{max-width:none;}
}
@media (min-width:821px){ .ph2--m{display:none;} }
@media (max-width:820px){ .v5-row{height:auto;} }   /* the desktop row is 320 tall; on a phone the cube and its paragraph stack, so the row grows (they overlapped the next cube) */

/* the detail view with the project's other pieces: a row of thumbnails under the piece, 72 tall, 8 apart, scrolling
   sideways when the project is long; the open one at full strength, the rest at 45 % */
.wr-detail.has-rel .stage{bottom:196px;}
.wr-rels{position:absolute;left:var(--margin,20px);right:var(--margin,20px);bottom:84px;height:72px;display:flex;justify-content:safe center;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
.wr-rels::-webkit-scrollbar{display:none;}
.wr-rel{flex:none;height:72px;margin:0;padding:0;border:0;background:#eee;cursor:pointer;opacity:.45;transition:opacity .25s,transform .25s;}
.wr-rel img{display:block;height:100%;width:auto;}
.wr-rel:hover{opacity:.8;} .wr-rel.on{opacity:1;}
.wr-rel:focus-visible{outline:2px solid #151515;outline-offset:2px;}
.wr-detail .piece video{display:block;max-width:min(1200px,calc(100vw - 40px));max-height:min(625px,calc(100vh - 230px));}
.wr-detail.has-rel .piece img,.wr-detail.has-rel .piece video{max-height:calc(100vh - 300px);}
@media (max-width:820px){ .wr-rels{bottom:72px;height:56px;justify-content:flex-start;} .wr-rel{height:56px;} .wr-detail.has-rel .stage{bottom:150px;} }
/* the hint under the field (Markiian): one line, the content font, dim */
.wr-hint{margin:20px 0 0;text-align:center;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:20px;line-height:normal;color:rgba(255,255,255,.5);}
html:not(.dark) .wr-hint{color:rgba(0,0,0,.5);}
@media (max-width:820px){ .wr-hint{font-size:17px;} }
/* phone stair, round 2 (Markiian: "why so many empty spaces"): blocks 118 tall in a 360 frame (were 176), the text
   centred in its block */
@media (max-width:820px){ .ph2--m .ph2-list .ph-row{height:var(--h) !important;justify-content:center;} }   /* an older phone rule forces height:auto !important on the rows */

/* ============================================================================
   2026-11-11 · after the review of the live page (agents, people, search)
   ========================================================================== */
/* The ring's headline copies and the words on the cubes are drawing, not reading (their blocks are aria-hidden).
   As real text a page reader got the headline nineteen times and every cube word three times, so the letters live
   in data-t and are written here. Same boxes: the rects were compared before and after at 1440 and 390. */
.hx-t::before{content:attr(data-t);white-space:pre-line;}
.cb-f>span::before,.ab-f>span::before{content:attr(data-t);}

/* Text ran under the logo and the tabs on desktop (the phases under the tabs, each section label under the logo).
   Phones already had a soft fade to the ground behind the header line; desktop gets the same one. It is the page's
   own colour, so on the black page nothing shows until something passes under it. Not the band that was removed. */
@media (min-width:821px){
  html.dark .v2-head{background:linear-gradient(#000 55%,rgba(0,0,0,0));}
  html:not(.dark) .v2-head{background:linear-gradient(#fff 55%,rgba(255,255,255,0));}
  html.dark .v2-head.v2-head--light{background:linear-gradient(#fff 55%,rgba(255,255,255,0));}
}

/* Reduced motion. Three things were wrong: the colour loops kept running (later rounds re-declared them after the
   earlier reduce rules), the hero's sentence never appeared (its words wait for a scroll value the script does not
   send in this mode), and the hero stayed pinned for two screens in which nothing changes. */
@media (prefers-reduced-motion:reduce){
  .v2 *,.v2 *::before,.v2 *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;}
  .v2-after .v2b-w{--t:1;--on:0;--g:0;}
  .v2 .sr-hero--hex{height:100svh;}
}

/* Contrast: the grey of "Phase N" and of the foot was 4.42 : 1 on black at 15–20 px; 50 % white is 5.3 : 1 */
.ph-n{color:rgba(255,255,255,.5);}
html.dark .v5-foot p{color:rgba(255,255,255,.5);}

/* A sentence for readers who do not get the pictures (screen readers, page readers): what the Work room holds */
.v5-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}