/* Ported verbatim from handoff-2026/assets/devmode.css (2026-09-22). */
/* Developer Mode – egna moduler i VNCE-känslan. Laddas efter vnce.css. */
.dm-hero{position:relative;background:#08080C;color:#F8F8F8;padding-top:clamp(150px,16vw,220px);isolation:isolate;text-align:center;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:88px 88px}
.dm-hero .glow{position:absolute;left:-10%;right:-10%;bottom:-40%;height:110%;z-index:0;filter:blur(80px);background:radial-gradient(ellipse 45% 60% at 50% 100%,rgba(0,123,255,.8),transparent 60%),radial-gradient(ellipse 35% 50% at 18% 95%,rgba(106,59,255,.7),transparent 55%),radial-gradient(ellipse 35% 50% at 84% 95%,rgba(106,59,255,.5),transparent 55%);animation:vn-glow 18s ease-in-out infinite alternate}
.dm-hero .vw{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.dm-hero .vn-pill{border-color:rgba(255,255,255,.22);color:#fff;background:#14141A}
html main.vnce .dm-hero h1,main.vnce .dm-hero h1{margin-top:28px;font-size:clamp(64px,12.5vw,210px);font-weight:600;letter-spacing:-.06em;line-height:.86;color:#fff}
.dm-hero h1 span{display:block;animation:vn-rise .9s cubic-bezier(.2,.8,.2,1) both}
.dm-hero h1 span+span{animation-delay:.12s;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.9)}
.dm-hero h1 .g{background:linear-gradient(90deg,#BDB2FF 0%,#7C5CFF 30%,#3D8BFF 50%,#7C5CFF 70%,#BDB2FF 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:vn-rise .9s cubic-bezier(.2,.8,.2,1) both,vn-shimmer 6s linear infinite}
.dm-hero .sub{margin-top:28px;font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:#DAE0E4;max-width:56ch;animation:vn-rise .9s .3s cubic-bezier(.2,.8,.2,1) both}
.dm-hero .vn-actions{margin-top:32px;justify-content:center;animation:vn-rise .9s .4s cubic-bezier(.2,.8,.2,1) both}
.dm-hero .vbtn.s{background:#23232A;color:#fff}.dm-hero .vbtn.s:hover{background:#2E2E36}
.dm-hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 70% at 50% 45%,#08080C 30%,transparent 100%);pointer-events:none}
.dm-stagez{position:relative;z-index:2;width:min(980px,100%);margin:clamp(56px,7vw,100px) auto -120px;perspective:1600px;perspective-origin:50% -20%}
.dm-side{position:absolute;top:8%;width:38%;height:90%;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;filter:blur(3px);z-index:0;animation:dm-side 1.6s .5s cubic-bezier(.2,.8,.2,1) both}
.dm-side.l{left:-22%;transform:rotateY(28deg) rotateX(6deg)}.dm-side.r{right:-22%;transform:rotateY(-28deg) rotateX(6deg)}
@keyframes dm-side{from{opacity:0;transform:translateY(120px)}}
.dm-term{position:relative;z-index:1;background:#141416;border-radius:12px;color:#DADCE1;font:13.5px/1.65 var(--mono);overflow:hidden;box-shadow:0 60px 140px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1) inset;transform-origin:50% 100%;transform:rotateX(7deg);animation:dm-rise 1.5s .25s cubic-bezier(.2,.8,.2,1) both;text-align:left}
@keyframes dm-rise{from{opacity:0;transform:rotateX(32deg) translateY(180px)}}
.dm-term .bar{height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#1C1C21;font:12px var(--font);color:#9AA0AE}
.dm-term .bar i{width:10px;height:10px;border-radius:50%;background:#3A3E4A}
.dm-term .bar span{margin-left:10px}
.dm-term .bar em{margin-left:auto;font-style:normal;display:inline-flex;align-items:center;gap:6px;color:#29D583;font-weight:500}
.dm-term .bar em::before{content:"";width:6px;height:6px;border-radius:50%;background:#29D583;box-shadow:0 0 0 3px rgba(41,213,131,.25)}
.dm-term .body{padding:22px 24px 26px;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.dm-term .ln{display:flex;gap:12px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;white-space:pre-wrap;word-break:break-word}
.dm-term .ln.in{opacity:1;transform:none}
.dm-term .pr{color:#58AAFF}.dm-term .ok{color:#29D583}.dm-term .dim{color:#7A7E83}.dm-term .add{color:#9FE8C2}.dm-term .mod{color:#FFD27A}.dm-term .hl{color:#F1F1F3}
.dm-term .cur{display:inline-block;width:8px;height:15px;background:#DADCE1;vertical-align:-2px;animation:vn-blink 1s steps(1) infinite}
.dm-after{padding-top:clamp(180px,19.2vw,264px)}
.dm-after .vn-marq{margin-top:0}
/* pipeline */
.dm-pipe{position:relative;margin-top:clamp(64px,8vw,110px);border-radius:12px;overflow:hidden;padding:clamp(48px,6vw,96px) clamp(24px,4vw,64px);isolation:isolate;background:#2A5CF6;color:#fff}
.dm-pipe .bands{position:absolute;inset:-12% -30%;z-index:0;filter:blur(28px);background:linear-gradient(90deg,#2C5BFF 0 18%,#9B8CFF 21% 27%,#4A78FF 30% 43%,#D3C4F4 45% 51%,#3F6CFF 53% 63%,#8AA3FF 65% 69%,#2A5AF7 71% 100%);animation:vn-bands 22s ease-in-out infinite alternate}
.dm-pipe .glow{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 40% 55% at 34% 42%,rgba(255,176,225,.6),transparent 70%)}
html main.vnce .dm-pipe h2{position:relative;z-index:3;color:#fff;text-align:center;font-size:clamp(34px,4.6vw,68px);font-weight:600;letter-spacing:-.04em;line-height:1;text-wrap:balance}
.dm-pipe .row{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:clamp(10px,1.6vw,24px);margin-top:clamp(40px,5vw,72px)}
.dm-node{background:rgba(255,255,255,.14);backdrop-filter:blur(12px);border-radius:10px;padding:clamp(20px,2.4vw,34px);box-shadow:0 0 0 1px rgba(255,255,255,.28) inset;display:flex;flex-direction:column}
.dm-node .k{font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.dm-node b{display:block;font-size:clamp(22px,2.3vw,36px);font-weight:600;letter-spacing:-.03em;margin-top:12px;line-height:1}
.dm-node p{margin-top:12px;font-size:14.5px;line-height:1.5;opacity:.92}
.dm-node.dark{background:#141416;box-shadow:none}
.dm-node .stamp{margin-top:auto;padding-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.dm-node .stamp span{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border-radius:4px;background:rgba(41,213,131,.15);color:#29D583}
.dm-arr{align-self:center;width:clamp(28px,4.5vw,80px);height:1px;background:rgba(255,255,255,.55);position:relative;overflow:visible}
.dm-arr::after{content:"";position:absolute;right:-2px;top:-4px;border:4.5px solid transparent;border-left-color:#fff}
.dm-arr i{position:absolute;top:-2px;left:0;width:18px;height:5px;border-radius:3px;background:#fff;animation:dm-run 1.5s linear infinite}
@keyframes dm-run{to{left:100%}}
/* diff */
.dm-diff{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,90px);align-items:center;padding-top:clamp(108px,14.4vw,204px)}
.dm-diff .vn-h2{font-size:clamp(34px,4.4vw,66px)}
.dm-diff .lead{margin-top:24px;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:var(--ink-2);max-width:44ch}
.dm-code{background:#0F0F13;border-radius:12px;font:13px/1.75 var(--mono);color:#C9CBD1;overflow:hidden;box-shadow:0 40px 100px rgba(16,24,40,.28)}
.dm-code .fn{padding:12px 18px;background:#17171C;font-size:12px;color:#9AA0AE;display:flex;gap:10px;align-items:center}
.dm-code .fn b{color:#F1F1F3;font-weight:500}.dm-code .fn em{margin-left:auto;font-style:normal;color:#29D583}
.dm-code pre{margin:0;padding:14px 0;counter-reset:l;font:inherit;overflow-x:auto}
.dm-code .r{display:grid;grid-template-columns:48px 1fr;padding-right:18px;white-space:pre}
.dm-code .r::before{counter-increment:l;content:counter(l);text-align:right;padding-right:16px;color:#4A4F57}
.dm-code .r.a{background:rgba(41,213,131,.1);color:#9FE8C2}.dm-code .r.d{background:rgba(233,123,134,.12);color:#F0A6AE;text-decoration:line-through}
.dm-code .r i{display:inline-block;height:9px;border-radius:3px;background:#2A2A32;vertical-align:middle;width:var(--w,120px)}
.dm-code .r.a i{background:rgba(41,213,131,.35)}
.dm-code .st{margin:14px 18px 18px;padding:14px 16px;border-radius:8px;background:rgba(0,123,255,.12);color:#9CC8FF;display:flex;gap:12px;align-items:center;font:13.5px var(--font)}
.dm-code .st i{width:22px;height:22px;border-radius:50%;background:#29D583;flex:none;display:grid;place-items:center}
.dm-code .st i::after{content:"";width:5px;height:9px;border-right:2px solid #08080C;border-bottom:2px solid #08080C;transform:rotate(45deg);margin-top:-2px}
.dm-code .st b{color:#F1F1F3;font-weight:500}
/* seal */
.dm-seal{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:center;padding-top:clamp(108px,14.4vw,204px)}
.dm-badge{width:clamp(200px,22vw,320px);aspect-ratio:1;position:relative}
.dm-badge svg.ring{width:100%;height:100%;animation:dm-spin 36s linear infinite}
.dm-badge .c{position:absolute;inset:27%;border-radius:50%;background:linear-gradient(135deg,#007BFF,#6A3BFF);display:grid;place-items:center;color:#fff;box-shadow:0 20px 60px rgba(0,123,255,.35)}
.dm-badge .c svg{width:44%;height:44%}
@keyframes dm-spin{to{transform:rotate(360deg)}}
.dm-seal .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:clamp(28px,3vw,44px)}
.dm-seal .cols div{border-top:1px solid var(--ink);padding-top:22px}
.dm-seal .cols b{display:block;font-size:clamp(20px,1.8vw,28px);font-weight:600;letter-spacing:-.03em}
.dm-seal .cols p{margin-top:10px;font-size:15px;color:var(--ink-2);line-height:1.5}
/* timeline */
.dm-tl{padding-top:clamp(108px,14.4vw,204px)}
.dm-tl .lead{margin-top:24px;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:var(--ink-2);max-width:52ch}
.dm-track{position:relative;margin-top:clamp(56px,7vw,96px);height:2px;background:var(--line)}
.dm-track .fill{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,#007BFF,#6A3BFF);transition:width 2.4s cubic-bezier(.2,.8,.2,1)}
.dm-tlw.in .dm-track .fill{width:100%}
.dm-ticks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:-10px}
.dm-ticks div{position:relative;padding-top:36px}
.dm-ticks div::before{content:"";position:absolute;top:0;left:0;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.dm-ticks div:last-child::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 6px rgba(0,123,255,.2);animation:vn-pulse 1.6s ease-in-out infinite}
.dm-ticks .t{font:600 12px var(--mono);letter-spacing:.16em;color:var(--blue)}
.dm-ticks b{display:block;font-size:clamp(20px,1.8vw,28px);font-weight:600;letter-spacing:-.03em;margin-top:8px}
.dm-ticks p{font-size:14.5px;color:var(--ink-2);margin-top:8px;line-height:1.5;max-width:28ch}
/* bento */
.dm-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);gap:16px;margin-top:clamp(48px,6vw,88px)}
.dm-bento>div{border-radius:10px;padding:clamp(22px,2.4vw,32px);background:var(--paper);display:flex;flex-direction:column;justify-content:flex-end;gap:10px;position:relative;overflow:hidden;isolation:isolate;transition:transform .3s}
.dm-bento>div:hover{transform:translateY(-3px)}
.dm-bento .big{grid-column:span 2;grid-row:span 2;background:#141416;color:#F8F8F8;padding:0}
.dm-bento .big .slot{flex:1;min-height:260px;background:#F1F2F4;--slot-bg:#F1F2F4}
.dm-bento .big .slot image-slot{display:block;width:100%;height:100%}
.dm-bento .big .tx{padding:clamp(22px,2.4vw,32px)}
.dm-bento .wide{grid-column:span 2}
.dm-bento .k{font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.dm-bento h3{font-size:clamp(20px,1.9vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.dm-bento p{font-size:15px;color:var(--ink-2);line-height:1.5}
html main.vnce .dm-bento .big h3{font-size:clamp(28px,3vw,48px);color:#fff}
.dm-bento .big p{color:#DAE0E4}.dm-bento .big .k{color:#58AAFF}
.dm-bento .grad{background:linear-gradient(135deg,#007BFF,#6A3BFF);color:#fff}
html main.vnce .dm-bento .grad h3{color:#fff}.dm-bento .grad p{color:rgba(255,255,255,.9)}.dm-bento .grad .k{color:#fff}
/* manifesto */
.dm-man{padding-top:clamp(120px,15.6vw,216px);text-align:center}
.dm-man .eb{font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.dm-man p.m{margin:24px auto 0;font-size:clamp(32px,5vw,84px);font-weight:600;letter-spacing:-.048em;line-height:.98;max-width:18ch;text-wrap:balance}
.dm-man .g{background:linear-gradient(90deg,#007BFF,#6A3BFF 60%,#BDB2FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.dm-man .sub{margin:28px auto 0;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:var(--ink-2);max-width:52ch}
.dm-man .vn-actions{justify-content:center;margin-top:32px}
/* faq cards */
.dm-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,64px)}
.dm-faq div{padding:clamp(22px,2.4vw,32px);border:1px solid var(--line);border-radius:10px;transition:border-color .2s}
.dm-faq div:hover{border-color:var(--blue)}
.dm-faq b{display:block;font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.dm-faq p{margin-top:12px;font-size:15.5px;color:var(--ink-2);line-height:1.55}
/* cta split */
.dm-cta{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);border-radius:12px;overflow:hidden;margin:clamp(108px,14.4vw,192px) 0 clamp(48px,6vw,96px)}
.dm-cta .l{background:#141416;color:#F8F8F8;padding:clamp(40px,5vw,80px);display:flex;flex-direction:column;justify-content:center}
html main.vnce .dm-cta h2{color:#fff;font-size:clamp(36px,4.6vw,72px);font-weight:600;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
.dm-cta .l p{margin-top:20px;font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:#DAE0E4;max-width:46ch}
.dm-cta .l .vn-actions{margin-top:32px}
.dm-cta .r{position:relative;background:#2A5CF6;isolation:isolate;min-height:340px;display:grid;place-items:center;padding:40px}
.dm-cta .r .bands{position:absolute;inset:-12% -30%;z-index:0;filter:blur(28px);background:linear-gradient(90deg,#2A5AF7 0 22%,#8AA3FF 25% 30%,#3F6CFF 33% 45%,#D3C4F4 47% 53%,#4A78FF 56% 68%,#9B8CFF 70% 76%,#2C5BFF 79% 100%);animation:vn-bands 26s ease-in-out infinite alternate-reverse}
.dm-cta .r .dep{position:relative;z-index:3;background:#141416;color:#DADCE1;font:14px/1.6 var(--mono);padding:18px 22px;border-radius:10px;box-shadow:0 30px 80px rgba(20,20,60,.4);display:grid;gap:6px;min-width:min(100%,320px)}
.dm-cta .r .dep .pr{color:#58AAFF}.dm-cta .r .dep .ok{color:#29D583}
@media(max-width:1000px){.dm-diff,.dm-seal,.dm-cta{grid-template-columns:1fr}.dm-stagez{margin-bottom:-80px}.dm-after{padding-top:120px}.dm-side{display:none}.dm-pipe .row{grid-template-columns:1fr;gap:12px}.dm-arr{width:1px;height:36px;justify-self:center}.dm-arr::after{right:-4px;top:auto;bottom:-2px;border:4.5px solid transparent;border-top-color:#fff}.dm-arr i{display:none}.dm-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.dm-seal .cols{grid-template-columns:1fr}.dm-ticks{gap:10px}.dm-ticks b{font-size:18px}.dm-ticks p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.dm-term,.dm-side,.dm-hero h1 span,.dm-hero h1 .g,.dm-hero .sub,.dm-hero .vn-actions,.dm-hero .glow,.dm-arr i,.dm-badge svg.ring{animation:none}.dm-term{transform:none}}
@media(max-width:600px){.dm-bento{grid-template-columns:1fr}.dm-bento .big,.dm-bento .wide{grid-column:span 1}.dm-faq{grid-template-columns:1fr}.dm-track{display:none}.dm-ticks{grid-template-columns:1fr;gap:0;margin-top:clamp(40px,6vw,64px)}.dm-ticks div{padding:0 0 28px 34px;border-left:2px solid var(--line)}.dm-ticks div::before{left:-10px;top:0}.dm-ticks div:last-child{border-left-color:transparent}.dm-ticks b{font-size:20px}.dm-ticks p{font-size:14.5px}}
/* ljus hero (sidan följer VNCE) */
.dm-hero{background:#fff;color:var(--ink);background-image:linear-gradient(rgba(29,29,29,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(29,29,29,.05) 1px,transparent 1px)}
.dm-hero::before{background:radial-gradient(ellipse 60% 70% at 50% 45%,#fff 30%,transparent 100%)}
.dm-hero .glow{opacity:.35}
.dm-hero .vn-pill{border-color:var(--line);color:var(--ink);background:#fff}
html main.vnce .dm-hero h1,main.vnce .dm-hero h1{color:var(--ink)}
.dm-hero h1 span+span{-webkit-text-stroke:2px rgba(29,29,29,.85)}
.dm-hero .sub{color:var(--ink-2)}
.dm-hero .vbtn.s{background:#F0F0F0;color:var(--ink)}.dm-hero .vbtn.s:hover{background:#E4E4E4}
.dm-side{background:linear-gradient(180deg,rgba(29,29,29,.06),rgba(29,29,29,.02));box-shadow:0 0 0 1px rgba(29,29,29,.1) inset}
/* ---- mobil ---- */
@media(max-width:600px){
html main.vnce .dm-hero h1,main.vnce .dm-hero h1{font-size:clamp(52px,15vw,64px)}
.dm-hero .vn-pill{white-space:normal}
.dm-stagez{margin-bottom:-60px}.dm-after{padding-top:90px}
.dm-term{font-size:12.5px}.dm-term .body{padding:16px 16px 20px;min-height:300px}
.dm-diff,.dm-seal,.dm-tl,.vn-sec,.dm-man{padding-top:72px}
.dm-pipe{padding:36px 18px}.dm-node{padding:18px}
.dm-code .r{grid-template-columns:36px 1fr;font-size:12px}
.dm-badge{width:180px}
.dm-cta{margin-top:72px}.dm-cta .l{padding:32px 22px}.dm-cta .r{padding:28px 18px;min-height:260px}
}

/* ---- WP port additions (dm_* blocks, 2026-09-22) ---- */
/* dm_bento: <image-slot id="devmode-demo"> → image field. With an image the picture covers the slot (has-img);
   without, the slot stays the design's empty light-grey panel. */
.dm-bento .big .slot{position:relative;overflow:hidden;aspect-ratio:3/2} /* the design's <image-slot> is aspect-ratio 3/2 */
.dm-bento .big .slot.has-img{background:#141416}
.dm-bento .big .slot.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
/* "Publiceras snart" chip: moved to the end of vnce.css (shared by every light page). */