:root{--qr:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' shape-rendering='crispEdges'%3E%3Cg fill='%2315201A'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='0' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='0' y='4' width='1' height='1'/%3E%3Crect x='0' y='5' width='1' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3Crect x='1' y='0' width='1' height='1'/%3E%3Crect x='1' y='6' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='2' y='4' width='1' height='1'/%3E%3Crect x='2' y='6' width='1' height='1'/%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='3' y='2' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='3' y='4' width='1' height='1'/%3E%3Crect x='3' y='6' width='1' height='1'/%3E%3Crect x='4' y='0' width='1' height='1'/%3E%3Crect x='4' y='2' width='1' height='1'/%3E%3Crect x='4' y='3' width='1' height='1'/%3E%3Crect x='4' y='4' width='1' height='1'/%3E%3Crect x='4' y='6' width='1' height='1'/%3E%3Crect x='5' y='0' width='1' height='1'/%3E%3Crect x='5' y='6' width='1' height='1'/%3E%3Crect x='6' y='0' width='1' height='1'/%3E%3Crect x='6' y='1' width='1' height='1'/%3E%3Crect x='6' y='2' width='1' height='1'/%3E%3Crect x='6' y='3' width='1' height='1'/%3E%3Crect x='6' y='4' width='1' height='1'/%3E%3Crect x='6' y='5' width='1' height='1'/%3E%3Crect x='6' y='6' width='1' height='1'/%3E%3Crect x='14' y='0' width='1' height='1'/%3E%3Crect x='14' y='1' width='1' height='1'/%3E%3Crect x='14' y='2' width='1' height='1'/%3E%3Crect x='14' y='3' width='1' height='1'/%3E%3Crect x='14' y='4' width='1' height='1'/%3E%3Crect x='14' y='5' width='1' height='1'/%3E%3Crect x='14' y='6' width='1' height='1'/%3E%3Crect x='15' y='0' width='1' height='1'/%3E%3Crect x='15' y='6' width='1' height='1'/%3E%3Crect x='16' y='0' width='1' height='1'/%3E%3Crect x='16' y='2' width='1' height='1'/%3E%3Crect x='16' y='3' width='1' height='1'/%3E%3Crect x='16' y='4' width='1' height='1'/%3E%3Crect x='16' y='6' width='1' height='1'/%3E%3Crect x='17' y='0' width='1' height='1'/%3E%3Crect x='17' y='2' width='1' height='1'/%3E%3Crect x='17' y='3' width='1' height='1'/%3E%3Crect x='17' y='4' width='1' height='1'/%3E%3Crect x='17' y='6' width='1' height='1'/%3E%3Crect x='18' y='0' width='1' height='1'/%3E%3Crect x='18' y='2' width='1' height='1'/%3E%3Crect x='18' y='3' width='1' height='1'/%3E%3Crect x='18' y='4' width='1' height='1'/%3E%3Crect x='18' y='6' width='1' height='1'/%3E%3Crect x='19' y='0' width='1' height='1'/%3E%3Crect x='19' y='6' width='1' height='1'/%3E%3Crect x='20' y='0' width='1' height='1'/%3E%3Crect x='20' y='1' width='1' height='1'/%3E%3Crect x='20' y='2' width='1' height='1'/%3E%3Crect x='20' y='3' width='1' height='1'/%3E%3Crect x='20' y='4' width='1' height='1'/%3E%3Crect x='20' y='5' width='1' height='1'/%3E%3Crect x='20' y='6' width='1' height='1'/%3E%3Crect x='0' y='14' width='1' height='1'/%3E%3Crect x='0' y='15' width='1' height='1'/%3E%3Crect x='0' y='16' width='1' height='1'/%3E%3Crect x='0' y='17' width='1' height='1'/%3E%3Crect x='0' y='18' width='1' height='1'/%3E%3Crect x='0' y='19' width='1' height='1'/%3E%3Crect x='0' y='20' width='1' height='1'/%3E%3Crect x='1' y='14' width='1' height='1'/%3E%3Crect x='1' y='20' width='1' height='1'/%3E%3Crect x='2' y='14' width='1' height='1'/%3E%3Crect x='2' y='16' width='1' height='1'/%3E%3Crect x='2' y='17' width='1' height='1'/%3E%3Crect x='2' y='18' width='1' height='1'/%3E%3Crect x='2' y='20' width='1' height='1'/%3E%3Crect x='3' y='14' width='1' height='1'/%3E%3Crect x='3' y='16' width='1' height='1'/%3E%3Crect x='3' y='17' width='1' height='1'/%3E%3Crect x='3' y='18' width='1' height='1'/%3E%3Crect x='3' y='20' width='1' height='1'/%3E%3Crect x='4' y='14' width='1' height='1'/%3E%3Crect x='4' y='16' width='1' height='1'/%3E%3Crect x='4' y='17' width='1' height='1'/%3E%3Crect x='4' y='18' width='1' height='1'/%3E%3Crect x='4' y='20' width='1' height='1'/%3E%3Crect x='5' y='14' width='1' height='1'/%3E%3Crect x='5' y='20' width='1' height='1'/%3E%3Crect x='6' y='14' width='1' height='1'/%3E%3Crect x='6' y='15' width='1' height='1'/%3E%3Crect x='6' y='16' width='1' height='1'/%3E%3Crect x='6' y='17' width='1' height='1'/%3E%3Crect x='6' y='18' width='1' height='1'/%3E%3Crect x='6' y='19' width='1' height='1'/%3E%3Crect x='6' y='20' width='1' height='1'/%3E%3Crect x='0' y='8' width='1' height='1'/%3E%3Crect x='0' y='9' width='1' height='1'/%3E%3Crect x='0' y='11' width='1' height='1'/%3E%3Crect x='1' y='8' width='1' height='1'/%3E%3Crect x='1' y='9' width='1' height='1'/%3E%3Crect x='1' y='11' width='1' height='1'/%3E%3Crect x='1' y='12' width='1' height='1'/%3E%3Crect x='2' y='8' width='1' height='1'/%3E%3Crect x='2' y='9' width='1' height='1'/%3E%3Crect x='2' y='10' width='1' height='1'/%3E%3Crect x='2' y='12' width='1' height='1'/%3E%3Crect x='3' y='8' width='1' height='1'/%3E%3Crect x='3' y='12' width='1' height='1'/%3E%3Crect x='4' y='9' width='1' height='1'/%3E%3Crect x='4' y='11' width='1' height='1'/%3E%3Crect x='4' y='12' width='1' height='1'/%3E%3Crect x='5' y='8' width='1' height='1'/%3E%3Crect x='5' y='9' width='1' height='1'/%3E%3Crect x='5' y='11' width='1' height='1'/%3E%3Crect x='6' y='9' width='1' height='1'/%3E%3Crect x='6' y='11' width='1' height='1'/%3E%3Crect x='6' y='12' width='1' height='1'/%3E%3Crect x='7' y='8' width='1' height='1'/%3E%3Crect x='7' y='10' width='1' height='1'/%3E%3Crect x='7' y='11' width='1' height='1'/%3E%3Crect x='8' y='0' width='1' height='1'/%3E%3Crect x='8' y='1' width='1' height='1'/%3E%3Crect x='8' y='4' width='1' height='1'/%3E%3Crect x='8' y='9' width='1' height='1'/%3E%3Crect x='8' y='11' width='1' height='1'/%3E%3Crect x='8' y='12' width='1' height='1'/%3E%3Crect x='8' y='14' width='1' height='1'/%3E%3Crect x='8' y='16' width='1' height='1'/%3E%3Crect x='9' y='0' width='1' height='1'/%3E%3Crect x='9' y='4' width='1' height='1'/%3E%3Crect x='9' y='9' width='1' height='1'/%3E%3Crect x='9' y='14' width='1' height='1'/%3E%3Crect x='9' y='15' width='1' height='1'/%3E%3Crect x='9' y='17' width='1' height='1'/%3E%3Crect x='9' y='19' width='1' height='1'/%3E%3Crect x='9' y='20' width='1' height='1'/%3E%3Crect x='10' y='0' width='1' height='1'/%3E%3Crect x='10' y='2' width='1' height='1'/%3E%3Crect x='10' y='3' width='1' height='1'/%3E%3Crect x='10' y='4' width='1' height='1'/%3E%3Crect x='10' y='6' width='1' height='1'/%3E%3Crect x='10' y='7' width='1' height='1'/%3E%3Crect x='10' y='12' width='1' height='1'/%3E%3Crect x='10' y='13' width='1' height='1'/%3E%3Crect x='10' y='14' width='1' height='1'/%3E%3Crect x='10' y='17' width='1' height='1'/%3E%3Crect x='10' y='18' width='1' height='1'/%3E%3Crect x='10' y='19' width='1' height='1'/%3E%3Crect x='10' y='20' width='1' height='1'/%3E%3Crect x='11' y='2' width='1' height='1'/%3E%3Crect x='11' y='3' width='1' height='1'/%3E%3Crect x='11' y='4' width='1' height='1'/%3E%3Crect x='11' y='5' width='1' height='1'/%3E%3Crect x='11' y='12' width='1' height='1'/%3E%3Crect x='11' y='17' width='1' height='1'/%3E%3Crect x='11' y='18' width='1' height='1'/%3E%3Crect x='11' y='19' width='1' height='1'/%3E%3Crect x='12' y='0' width='1' height='1'/%3E%3Crect x='12' y='1' width='1' height='1'/%3E%3Crect x='12' y='2' width='1' height='1'/%3E%3Crect x='12' y='3' width='1' height='1'/%3E%3Crect x='12' y='4' width='1' height='1'/%3E%3Crect x='12' y='5' width='1' height='1'/%3E%3Crect x='12' y='6' width='1' height='1'/%3E%3Crect x='12' y='7' width='1' height='1'/%3E%3Crect x='12' y='8' width='1' height='1'/%3E%3Crect x='12' y='9' width='1' height='1'/%3E%3Crect x='12' y='10' width='1' height='1'/%3E%3Crect x='12' y='13' width='1' height='1'/%3E%3Crect x='12' y='14' width='1' height='1'/%3E%3Crect x='12' y='15' width='1' height='1'/%3E%3Crect x='12' y='16' width='1' height='1'/%3E%3Crect x='12' y='17' width='1' height='1'/%3E%3Crect x='13' y='9' width='1' height='1'/%3E%3Crect x='13' y='10' width='1' height='1'/%3E%3Crect x='13' y='11' width='1' height='1'/%3E%3Crect x='13' y='12' width='1' height='1'/%3E%3Crect x='13' y='14' width='1' height='1'/%3E%3Crect x='13' y='15' width='1' height='1'/%3E%3Crect x='13' y='18' width='1' height='1'/%3E%3Crect x='13' y='20' width='1' height='1'/%3E%3Crect x='14' y='12' width='1' height='1'/%3E%3Crect x='14' y='13' width='1' height='1'/%3E%3Crect x='14' y='14' width='1' height='1'/%3E%3Crect x='14' y='18' width='1' height='1'/%3E%3Crect x='14' y='19' width='1' height='1'/%3E%3Crect x='15' y='13' width='1' height='1'/%3E%3Crect x='15' y='15' width='1' height='1'/%3E%3Crect x='15' y='16' width='1' height='1'/%3E%3Crect x='15' y='17' width='1' height='1'/%3E%3Crect x='15' y='18' width='1' height='1'/%3E%3Crect x='15' y='19' width='1' height='1'/%3E%3Crect x='16' y='9' width='1' height='1'/%3E%3Crect x='16' y='13' width='1' height='1'/%3E%3Crect x='16' y='14' width='1' height='1'/%3E%3Crect x='16' y='15' width='1' height='1'/%3E%3Crect x='16' y='16' width='1' height='1'/%3E%3Crect x='16' y='17' width='1' height='1'/%3E%3Crect x='17' y='11' width='1' height='1'/%3E%3Crect x='17' y='17' width='1' height='1'/%3E%3Crect x='17' y='19' width='1' height='1'/%3E%3Crect x='18' y='9' width='1' height='1'/%3E%3Crect x='18' y='10' width='1' height='1'/%3E%3Crect x='18' y='13' width='1' height='1'/%3E%3Crect x='18' y='14' width='1' height='1'/%3E%3Crect x='18' y='15' width='1' height='1'/%3E%3Crect x='18' y='18' width='1' height='1'/%3E%3Crect x='19' y='9' width='1' height='1'/%3E%3Crect x='19' y='11' width='1' height='1'/%3E%3Crect x='19' y='12' width='1' height='1'/%3E%3Crect x='19' y='17' width='1' height='1'/%3E%3Crect x='19' y='20' width='1' height='1'/%3E%3Crect x='20' y='8' width='1' height='1'/%3E%3Crect x='20' y='9' width='1' height='1'/%3E%3Crect x='20' y='10' width='1' height='1'/%3E%3Crect x='20' y='12' width='1' height='1'/%3E%3Crect x='20' y='13' width='1' height='1'/%3E%3Crect x='20' y='14' width='1' height='1'/%3E%3Crect x='20' y='16' width='1' height='1'/%3E%3Crect x='20' y='17' width='1' height='1'/%3E%3Crect x='20' y='20' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E")}
/* szewald.de v6 - colour per business side, CSS 3D scenes, expanded views, micro-interactions */

/* ---------- each side gets its accent ---------- */
body{--acc:var(--acc1);--acc-soft:var(--acc1-soft);--acc-deep:var(--acc1-deep)}
body.side-lager{--acc:var(--acc2);--acc-soft:var(--acc2-soft);--acc-deep:var(--acc2-deep)}
::selection{background:var(--acc);color:var(--ink)}
.dot{background:var(--acc-deep);box-shadow:0 0 0 4px var(--acc-soft)}
.proof .dot{background:var(--acc-deep)}

/* accent buttons: moss / resin fill with dark text, used on green sections */
.btn-acc{background:var(--acc);color:var(--ink)}
.btn-acc2{background:var(--acc2);color:var(--ink)}
.btn-acc1{background:var(--acc1);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn-acc:hover,.btn-acc1:hover,.btn-acc2:hover{filter:brightness(1.06)}}

/* buttons lean toward the cursor (vars live on the button itself) */
.btn{transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--sc,1))}
.btn:active{--sc:.97;transform:translate(var(--tx,0px),var(--ty,0px)) scale(.97)}
.btn.mag{transition:transform 260ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.btn .arr{width:18px;height:18px;overflow:hidden;display:inline-grid;flex:none}
.btn .arr svg{grid-area:1/1;width:18px;height:18px}
@media (hover:hover) and (pointer:fine){
  .btn:hover .arr svg,.spot:hover .more svg{animation:slidethru 420ms var(--ease-out)}
}
@keyframes slidethru{0%{transform:none}45%{transform:translateX(120%)}46%{transform:translateX(-120%)}100%{transform:none}}

/* headings rise in word by word (replaces the block fade on these headings) */
html.js .rv.wr{opacity:1;transform:none}
.wr .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wr .w>span{display:inline-block}
html.js .wr .w>span{transform:translateY(105%);transition:transform 900ms var(--ease-out);transition-delay:calc(var(--i) * 45ms)}
html.js .wr.in .w>span{transform:none}

/* check marks draw themselves */
html.js .draw svg{stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset 700ms var(--ease-out) var(--dd,200ms)}
html.js .in .draw svg,html.js .draw.in svg{stroke-dashoffset:0}

/* step numbers light up when the line reaches them */
.st .n{transition:background-color 400ms ease,border-color 400ms ease,color 400ms ease}
.st.in .n{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.track i{background:linear-gradient(90deg,var(--tanne),var(--acc-deep))}

/* icon circles */
.ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc-deep);flex:none}
.ico svg{width:22px;height:22px}

/* ---------- cards tilt in 3D on hover ---------- */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 500ms var(--ease-out),border-color 250ms ease}
.tilt.moving{transition:transform 120ms linear,border-color 250ms ease}

/* home offer cards pick up their side's colour */
.spot.web{--acc:var(--acc1);--acc-soft:var(--acc1-soft);--acc-deep:var(--acc1-deep)}
.spot.lag{--acc:var(--acc2);--acc-soft:var(--acc2-soft);--acc-deep:var(--acc2-deep)}
.spot .for{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 12px 6px 8px;border-radius:999px;background:var(--acc-soft);color:var(--ink)}
.spot .for i{width:8px;height:8px;border-radius:50%;background:var(--acc-deep)}
.spot.dark .for{background:rgba(234,241,236,.1);color:var(--on-tanne)}
.spot.dark .for i{background:var(--acc)}
.spot li svg{color:var(--acc-deep)}
.spot.dark li svg,.spot.dark .more{color:var(--acc)}
.spot:not(.dark) .more{color:var(--tanne)}

/* =====================================================================
   3D scene on the home hero: browser, tablet, phone, crate, notifications
   ===================================================================== */
.home-hero .hero-grid2{display:grid;gap:30px;align-items:center}
.dio{position:relative;height:420px;perspective:1500px;perspective-origin:50% 40%;pointer-events:none}
.dio-rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(16deg + var(--dy,0deg))) rotateY(calc(-24deg + var(--dx,0deg)));transition:transform 900ms var(--ease-out)}
.di{position:absolute;transform-style:preserve-3d}
.di>.sh{position:absolute;left:8%;right:8%;bottom:-38px;height:40px;border-radius:50%;background:radial-gradient(closest-side,rgba(17,41,30,.28),transparent);transform:rotateX(90deg) translateZ(-20px);filter:blur(4px)}
.d-browser{left:2%;top:12%;width:62%;transform:translate3d(0,0,40px)}
.d-tablet{left:40%;top:-2%;width:54%;transform:translate3d(0,0,-120px)}
.d-phone{left:58%;top:30%;width:19%;transform:translate3d(0,0,120px)}
.d-crate{left:73%;top:60%;transform:translate3d(0,0,170px) rotateY(-16deg) rotateX(-36deg)}
.win3{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 40px 70px -30px rgba(17,41,30,.45),0 0 0 1px rgba(17,41,30,.08)}
.win3 .bar{height:18px;display:flex;align-items:center;gap:4px;padding:0 8px;background:#F2F4F1;border-bottom:1px solid #E1E6E0}
.win3 .bar i{width:6px;height:6px;border-radius:50%;background:#D3D9D3}
.win3 img,.tab3 img,.ph3 img{display:block;width:100%;height:auto}
.tab3{border-radius:16px;padding:7px;background:var(--device);box-shadow:0 40px 70px -30px rgba(17,41,30,.5)}
.tab3 img{border-radius:10px}
.ph3{border-radius:22px;padding:5px;background:var(--device-2);box-shadow:0 40px 60px -24px rgba(17,41,30,.6)}
.ph3 img{border-radius:17px;aspect-ratio:390/760;object-fit:cover;object-position:top}
/* a wooden crate with a QR label (cuboid from three faces) */
.crate .fr{background:linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,0)),repeating-linear-gradient(180deg,var(--wood) 0 28px,var(--wood-3) 28px 30px)}
.crate .tp{background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)),repeating-linear-gradient(90deg,var(--wood) 0 34px,var(--wood-2) 34px 36px)}
.crate .sd{background:linear-gradient(rgba(60,40,10,.25),rgba(60,40,10,.25)),repeating-linear-gradient(180deg,var(--wood) 0 28px,var(--wood-3) 28px 30px)}
.qr-label{position:absolute;left:12px;top:14px;display:flex;gap:8px;align-items:center;background:#fff;border-radius:6px;padding:6px 8px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.qr-label .qr{width:30px;height:30px;outline:0;opacity:1}
.qr-label b{display:block;font-size:10px;line-height:1.2;color:var(--ink)}
.qr-label span{display:block;font-size:9px;color:var(--muted)}
.qr{background:var(--qr) center/100% 100% no-repeat}
/* floating notifications */
.d-toast{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:#fff;box-shadow:0 24px 40px -18px rgba(17,41,30,.45),0 0 0 1px rgba(17,41,30,.06);font-size:12.5px;line-height:1.3;white-space:nowrap}
.d-toast b{display:block;font-size:13px}
.d-toast span{color:var(--muted)}
.d-toast .ti{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none}
.d-toast .ti svg{width:16px;height:16px}
.t-wa{left:56%;top:-4%;transform:translate3d(0,0,200px)}
.t-wa .ti{background:var(--acc1);color:var(--ink)}
.t-ok{left:30%;top:86%;transform:translate3d(0,0,230px)}
.t-ok .ti{background:var(--acc2);color:var(--ink)}
/* entrance + gentle float (a few rounds, then rest) */
@media (prefers-reduced-motion:no-preference){
  html.js .dio .di{opacity:0}
  html.js .dio.go .di{animation:dio-in 1100ms var(--ease-out) both}
  .dio.go .d-tablet{animation-delay:100ms!important}.dio.go .d-browser{animation-delay:220ms!important}
  .dio.go .d-phone{animation-delay:360ms!important}.dio.go .d-crate{animation-delay:480ms!important}
  .dio.go .t-wa{animation-delay:1300ms!important}.dio.go .t-ok{animation-delay:2100ms!important}
  .dio .di>.flt{animation:float 6s ease-in-out 1.6s 3}
  .dio .d-phone>.flt{animation-duration:5s}.dio .d-crate>.flt{animation-duration:7s}
}
@keyframes dio-in{from{opacity:0;translate:0 26px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes float{50%{transform:translateY(-8px)}}
@media (max-width:899px){.dio{height:300px;margin-top:10px}.d-toast{font-size:11px;padding:8px 10px 8px 8px}.d-crate{scale:.75}}
@media (min-width:900px){.home-hero .hero-grid2{grid-template-columns:1fr 1fr;gap:20px}.dio{height:500px}}

/* =====================================================================
   Websites: a site comes apart into its layers as you scroll
   ===================================================================== */
.xpl{position:relative}
.xpl-in{display:grid;gap:36px;align-items:center}
.xpl-list{list-style:none;display:grid;gap:4px;margin-top:30px}
.xpl-list li{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center;padding:12px;border-radius:16px;transition:background-color 300ms ease;cursor:pointer}
.xpl-list li.on{background:var(--card);box-shadow:0 0 0 1px var(--line)}
.xpl-list b{display:block;font-size:16.5px}
.xpl-list li>div>span{display:block;font-size:14.5px;color:var(--muted)}
.xpl-list li .ico{transition:background-color 300ms ease,color 300ms ease}
.xpl-list li.on .ico{background:var(--acc);color:var(--ink)}
.xpl-extra{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip2{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--acc-soft);font-size:14px;font-weight:500}
.chip2 svg{width:16px;height:16px;color:var(--acc-deep)}
.stage{position:relative;height:440px;perspective:1600px}
.stack{position:absolute;left:50%;top:56%;width:300px;height:200px;margin:-100px 0 0 -150px;transform-style:preserve-3d;transform:rotateX(52deg) rotateZ(-34deg)}
.lyr{position:absolute;inset:0;border-radius:12px;background:#fff;transition:transform 800ms var(--ease-out),opacity 500ms ease,box-shadow 300ms ease;box-shadow:0 0 0 1px rgba(17,41,30,.1),0 20px 30px -20px rgba(17,41,30,.35);padding:14px;display:grid;gap:8px;align-content:start}
.lyr.on{box-shadow:0 0 0 2px var(--acc-deep),0 30px 40px -20px rgba(17,41,30,.45)}
.lyr .tag{position:absolute;right:-12px;top:-12px;transform:rotateZ(36deg) rotateX(-56deg);transform-origin:center;background:var(--tanne);color:var(--on-tanne);font-size:11px;font-weight:600;padding:5px 9px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity 300ms ease}
.lyr.on .tag{opacity:1}
.lyr i{display:block;border-radius:5px;background:#E6EBE5;height:10px}
.lyr i.a{background:var(--acc)}
.lyr i.t{background:var(--tanne);height:14px;width:60%}
.lyr .row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lyr .row i{height:40px}
.lyr .stars{color:var(--acc2-deep);font-size:13px;letter-spacing:2px}
@media (min-width:980px){.xpl{height:250vh}.xpl-sticky{position:sticky;top:90px;min-height:calc(100vh - 120px);display:flex;align-items:center}.xpl-in{grid-template-columns:.9fr 1.1fr;gap:60px}.stage{height:560px}.stack{width:400px;height:262px;margin:-131px 0 0 -200px}}

/* =====================================================================
   Websites: example gallery + Lager feature zoom -> expanded view
   ===================================================================== */
.gal{display:grid;gap:14px;margin-top:44px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.gcard{position:relative;display:block;text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:8px 8px 14px;cursor:zoom-in;font:inherit;color:inherit}
.gcard .thumb{border-radius:10px;overflow:hidden;aspect-ratio:16/10;position:relative;background:#eee}
.gcard .thumb .fit{position:absolute;inset:0;height:auto!important}
.gcard>b{display:block;margin:12px 6px 0;font-size:15.5px}
.gcard>span{display:block;margin:2px 6px 0;font-size:13.5px;color:var(--muted)}
.gcard .zoom{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.12);transform:scale(.85);opacity:0;transition:opacity 200ms ease,transform 200ms var(--ease-out)}
.gcard .zoom svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.gcard:hover .zoom{opacity:1;transform:none}.gcard:hover{border-color:var(--line-2)}}
.gcard:focus-visible .zoom{opacity:1;transform:none}

dialog.xv{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;overflow:hidden}
dialog.xv::backdrop{background:rgba(17,41,30,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity 300ms ease}
dialog.xv.open::backdrop{opacity:1}
.xv-card{position:absolute;inset:16px;margin:auto;max-width:1180px;max-height:820px;background:var(--paper);border-radius:22px;box-shadow:0 60px 120px -40px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden;transform-origin:0 0}
.xv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px 24px;border-bottom:1px solid var(--line)}
.xv-head h3{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.01em}
.xv-head p{font-size:14px;color:var(--muted)}
.xv-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);cursor:pointer;display:grid;place-items:center;flex:none;transition:transform 160ms var(--ease-out)}
.xv-close:active{transform:scale(.94)}
.xv-close svg{width:18px;height:18px}
.xv-body{flex:1;overflow:auto;padding:20px 24px 24px;display:grid;gap:20px;align-content:start}
.xv-views{display:grid;gap:20px;align-items:end}
.xv-views .win{width:100%}
.xv-views .phone{display:block;width:min(230px,70%);margin:0 auto}
.xv-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:14px 24px;border-top:1px solid var(--line);background:var(--card)}
.xv-foot p{font-size:14px;color:var(--muted);max-width:560px}
.xv-big{transform-origin:0 0}
.xv-big .mini{font-size:15px}
@media (min-width:900px){.xv-views{grid-template-columns:1fr 230px}.xv-views .phone{width:100%}}
.zoom-btn{position:absolute;right:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font-size:13px;font-weight:600;cursor:zoom-in;transition:transform 160ms var(--ease-out),border-color 200ms ease}
.zoom-btn svg{width:15px;height:15px}
.zoom-btn:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.zoom-btn:hover{border-color:var(--ink)}}
.fp-panel{padding-top:58px}
@media (min-width:980px){.fp-panel{padding-top:64px}}

/* =====================================================================
   Lager: a shelf in 3D, a phone scans a box
   ===================================================================== */
.scan-sec .split2{display:grid;gap:30px;align-items:center}
.scene3{position:relative;height:420px;perspective:1400px;perspective-origin:50% 30%}
.shelf{position:absolute;left:50%;top:50%;width:420px;height:300px;margin:-150px 0 0 -210px;transform-style:preserve-3d;transform:rotateX(-14deg) rotateY(28deg)}
.cub{position:absolute;transform-style:preserve-3d}
.cub .f{position:absolute;left:0;top:0}
.cub .fr{width:var(--w);height:var(--h);transform:translateZ(calc(var(--d) / 2))}
.cub .tp{width:var(--w);height:var(--d);transform:translateY(calc(var(--d) / -2)) rotateX(90deg)}
.cub .sd{width:var(--d);height:var(--h);transform:translateX(calc(var(--w) - var(--d) / 2)) rotateY(90deg)}
.cub .lf{width:var(--d);height:var(--h);transform:translateX(calc(var(--d) / -2)) rotateY(-90deg)}
.post .f{background:var(--post)}.post .sd,.post .lf{background:var(--post-2)}.post .tp{background:var(--post-3)}
.board .fr{background:var(--board)}.board .tp{background:var(--board-2)}.board .sd{background:var(--post-3)}
.carton .fr{background:linear-gradient(180deg,var(--bin),var(--bin-b))}.carton .tp{background:var(--bin-2)}.carton .sd{background:var(--bin-3)}
.carton .fr::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:14%;transform:translateX(-50%);background:rgba(255,255,255,.18)}
.carton .lab{position:absolute;left:8px;bottom:8px;width:34%;aspect-ratio:1;background:#fff;border-radius:3px;padding:3px;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.carton .lab .qr{width:100%;height:100%}
@media (prefers-reduced-motion:no-preference){.carton.hit{transition:transform 700ms var(--ease-out)}}
.carton.hit .fr{box-shadow:0 0 0 3px var(--acc),0 0 40px 6px color-mix(in srgb,var(--acc) 60%,transparent)}
.scene3.done .carton.hit{transform:var(--base) translateZ(70px)}
.scene3.done .carton.hit .fr{background:linear-gradient(180deg,var(--acc2-soft),var(--acc2))}
.phone3{position:absolute;right:4%;bottom:6%;width:132px;transform:translateZ(0);border-radius:22px;background:var(--device-2);padding:6px;box-shadow:0 30px 50px -20px rgba(0,0,0,.5);opacity:0;translate:40px 20px;transition:opacity 500ms ease,translate 900ms var(--ease-out)}
.phone3 .sc{border-radius:17px;background:#0d1411;aspect-ratio:9/17;position:relative;overflow:hidden;display:grid;place-items:center}
.phone3 .vf{width:66%;aspect-ratio:1;border-radius:12px;box-shadow:0 0 0 2px var(--acc);position:relative;overflow:hidden}
.phone3 .vf .qr{position:absolute;inset:14%;opacity:.85;filter:invert(1)}
.phone3 .beam{position:absolute;left:0;right:0;top:0;height:2px;background:var(--acc);box-shadow:0 0 12px 2px var(--acc);opacity:0}
.scene3.go .phone3{opacity:1;translate:0 0}
@media (prefers-reduced-motion:no-preference){.scene3.go .beam{animation:beam 1200ms ease-in-out 700ms 2 both}}
@keyframes beam{0%{top:4%;opacity:1}50%{top:92%;opacity:1}100%{top:4%;opacity:1}}
.callout{position:absolute;left:30%;top:2%;max-width:240px;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 24px 40px -18px rgba(17,41,30,.45),0 0 0 1px rgba(17,41,30,.06);font-size:13.5px;opacity:0;transform:translateY(10px) scale(.96);transition:opacity 400ms ease,transform 500ms var(--ease-out)}
.callout b{display:flex;align-items:center;gap:8px;font-size:14.5px}
.callout b i{width:18px;height:18px;border-radius:50%;background:var(--acc);display:grid;place-items:center}
.callout b svg{width:12px;height:12px}
.callout span{display:block;color:var(--muted);margin-top:4px}
.scene3.done .callout{opacity:1;transform:none}
.replay{margin-top:22px}
@media (max-width:899px){.scene3{height:320px}.shelf{transform:rotateX(-14deg) rotateY(28deg) scale(.72)}.phone3{width:100px}}
@media (min-width:900px){.scan-sec .split2{grid-template-columns:.85fr 1.15fr;gap:60px}}

/* problems as cards with icons */
.probs.cards>div{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}

/* home principles get icons */
.pr .ico,.probs .ico{background:none;width:auto;height:auto;justify-content:start;color:var(--acc-deep)}
.pr .ico{margin-bottom:14px}.pr .ico svg,.probs .ico svg{width:28px;height:28px}

/* receipt: the zero gets a highlighter stroke once printed */
.rl.zero span:last-child{position:relative;z-index:0}
.rl.zero span:last-child::before{content:"";position:absolute;left:-4px;right:-4px;top:55%;height:46%;background:var(--acc1);z-index:-1;border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease-out) 1300ms}
html:not(.js) .rl.zero span:last-child::before,.printer.in .rl.zero span:last-child::before{transform:none}

/* count-up numbers keep their width */
[data-count]{font-variant-numeric:tabular-nums}

/* moving order card on the Lager board */
.tk.mover{position:relative;z-index:3}
.tk.flash{box-shadow:0 0 0 2px var(--acc)}

/* picker (preview only) */
.picker{position:fixed;left:14px;bottom:14px;z-index:70;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:12px;box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
.picker b{display:block;margin-bottom:8px;font-size:12px}
.picker div{display:flex;gap:8px}
.picker button{display:flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--paper);border-radius:999px;padding:5px 10px 5px 5px;cursor:pointer;font-size:12px}
.picker button[aria-pressed="true"]{border-color:var(--ink);background:#fff}
.picker i{width:16px;height:16px;border-radius:50%}
@media (max-width:699px){.picker{bottom:84px}}

@media (prefers-reduced-motion:reduce){
  html.js .wr .w>span{transform:none;transition:none}
  html.js .draw svg{stroke-dashoffset:0;transition:none}
  .tilt{transform:none!important}
  .scene3 .phone3{opacity:1;translate:0 0;transition:none}
  .scene3 .callout{opacity:1;transform:none}
  .rl.zero span:last-child::before{transform:none;transition:none}
  .btn .arr svg{animation:none!important}
}
.qr{display:block}
.btn-line{background:transparent}
.crate .lf{background:linear-gradient(rgba(60,40,10,.12),rgba(60,40,10,.12)),repeating-linear-gradient(180deg,var(--wood) 0 28px,var(--wood-3) 28px 30px)}
@media (min-width:1100px){.dio{margin-right:-40px}}
.dio .flt{transform-style:preserve-3d}
/* the crate keeps real depth: no opacity animation on it (opacity flattens 3D) */
html.js .dio .d-crate{opacity:1}
@media (prefers-reduced-motion:no-preference){html.js .dio.go .d-crate{animation:crate-in 1100ms var(--ease-out) 480ms both}}
@keyframes crate-in{from{translate:0 70px;scale:.9}to{translate:0 0;scale:1}}
.cub .f{backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* richer layer mock-ups */
.lyr{padding:12px;gap:7px;overflow:hidden}
.lyr .hdr{display:flex;align-items:center;gap:6px}
.lyr .lg{width:26%;height:12px;border-radius:4px;background:var(--tanne)}
.lyr .nv{width:9%;height:6px;border-radius:3px;background:#C9D2CA}
.lyr .cta{margin-left:auto;width:20%;height:14px;border-radius:999px;background:var(--acc1)}
.lyr .hero{flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:8px;min-height:120px}
.lyr .ht{display:grid;gap:6px;align-content:center}
.lyr .ht i{height:9px}
.lyr .ht i.big{height:16px;background:var(--ink);width:90%}
.lyr .img{border-radius:10px;background:linear-gradient(135deg,var(--acc1-soft),var(--acc1) 60%,var(--acc2));}
.lyr .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.lyr .cards3>div{border-radius:8px;background:#F3F5F2;padding:7px;display:grid;gap:5px;min-height:96px;align-content:end}
.lyr .cards3 .pr{width:50%;height:12px;border-radius:999px;background:var(--acc1)}
.lyr .rev{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lyr .rev>div{border-radius:8px;background:#F3F5F2;padding:8px;display:grid;gap:5px;min-height:90px}
.lyr .stars{color:var(--acc2);font-size:12px;letter-spacing:1px;line-height:1}
.lyr .ct{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:110px}
.lyr .ct .btns{display:grid;gap:6px;align-content:start}
.lyr .wa{height:20px;border-radius:999px;background:#197A49}
.lyr .ph2{height:20px;border-radius:999px;border:1.5px solid #C9D2CA}
.lyr .map{border-radius:8px;background:repeating-linear-gradient(45deg,#E5ECE4 0 10px,#DCE5DB 10px 20px);position:relative}
.lyr .map::after{content:"";position:absolute;left:50%;top:40%;width:12px;height:12px;border-radius:50% 50% 50% 0;background:var(--tanne);transform:rotate(-45deg)}
.lyr .lgl{display:grid;gap:6px;padding-top:6px}
.lyr .lgl i{height:6px;background:#D5DCD5}
.lyr i{background:#D5DCD5}
@media (max-width:899px){
  .dio{height:330px;margin:20px -20px 0;overflow:visible}
  .dio-rig{scale:.66;transform-origin:42% 30%}
  .shelf{transform:rotateX(-14deg) rotateY(28deg) scale(.6);margin-left:-250px}
  .scene3{height:300px}
  .phone3{width:92px;right:2%}
  .callout{max-width:200px;font-size:12.5px}
  .picker{left:8px;right:auto;padding:8px}
  .picker b{display:none}
  .picker .nm{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .picker button{padding:4px}
}

/* critic round 2 */
@media (min-width:1100px){.dio{margin-top:-150px!important}}
@media (max-width:899px){.dio{margin-top:56px}.d-crate>.flt{scale:.6}}
.xv-big{zoom:1.4}
.xv-card{height:fit-content}
@media (max-width:979px){.zoom-btn{display:none}.fp-panel{padding-top:18px}}
.xpl-list li{cursor:default}
@media (prefers-reduced-motion:reduce){.xpl{height:auto}.xpl-sticky{position:static}}
.picker div{flex-wrap:wrap}

/* interactive web background (home hero), quieter behind the text */
.web-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to left,#000 38%,rgba(0,0,0,.32) 80%);mask-image:linear-gradient(to left,#000 38%,rgba(0,0,0,.32) 80%)}
@media (max-width:899px){.web-bg{-webkit-mask-image:linear-gradient(to top,#000 35%,rgba(0,0,0,.25) 80%);mask-image:linear-gradient(to top,#000 35%,rgba(0,0,0,.25) 80%)}}

/* fluid background (home hero): silky flow on the right, fading to the page colour behind the text */
.flow-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to left,#000 30%,rgba(0,0,0,.55) 58%,transparent 88%);mask-image:linear-gradient(to left,#000 30%,rgba(0,0,0,.55) 58%,transparent 88%)}
.flow-bg.flow-fallback{background:radial-gradient(60% 70% at 85% 40%,var(--acc1-soft),transparent 70%)}
@media (max-width:899px){.flow-bg{-webkit-mask-image:linear-gradient(to top,#000 30%,transparent 85%);mask-image:linear-gradient(to top,#000 30%,transparent 85%)}}

@media (max-width:899px){.home-hero .dio{margin-top:84px}}

/* review fixes (14 Oct): homepage kicker, letter recipients, personal welcome on /websites/?name= */
.kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;padding:7px 14px 7px 11px;border-radius:999px;background:var(--acc1-soft);color:var(--ink);font-size:14.5px;font-weight:600}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--acc1-deep);flex:none}
.post-note{margin-top:18px;font-size:14.5px;color:var(--muted);max-width:520px}
.post-note a{color:var(--tanne);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.welcome{margin-top:22px;padding:20px 22px;border-radius:18px;background:var(--acc1-soft);border:1px solid color-mix(in srgb,var(--acc1-deep) 22%,transparent);max-width:540px}
.welcome .w-hi{font-family:var(--serif);font-size:clamp(24px,3vw,30px);line-height:1.15;color:var(--ink)}
.welcome .w-t{margin-top:10px;color:var(--ink-2);font-size:16px}
.welcome .cta{margin-top:16px}
.welcome[hidden],.post-note[hidden]{display:none!important}
.cta[hidden]{display:none!important}