/* Homepage only. The article pages keep /style.css (Archivo and IBM Plex).
   Geist and Geist Mono are self-hosted under the SIL Open Font License 1.1:
   /fonts/Geist-OFL.txt and /fonts/GeistMono-OFL.txt. */
@font-face{font-family:"Geist";src:url(/fonts/geist-latin-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geist-mono-latin-var.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{--ink:#0A0B0F;--ink2:#30333B;--mut:#5C606B;--line:#E6E8EE;--line2:#EEF0F4;--bg:#FAFAFB;--soft:#F4F5F7;
--acc:#C8005F;--g2:#6D28D9;--g3:#1D4ED8;--ok:#047857;--grad:linear-gradient(100deg,#C8005F,#6D28D9 55%,#1D4ED8);
--r-tile:24px;--r-in:12px;--f:"Geist",system-ui,sans-serif;--m:"Geist Mono",ui-monospace,monospace}
*{box-sizing:border-box}html,body{margin:0}html{overflow-x:clip;scroll-padding-top:88px}body{background:#fff;color:var(--ink);font:400 16px/1.55 var(--f);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}section,header{position:relative}.wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.04em}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:999px;background:var(--acc);color:#fff;font:500 16px var(--f);white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 8px 20px -10px rgba(200,0,95,.6)}
.btn.ink{background:var(--ink);box-shadow:0 8px 20px -10px rgba(10,11,15,.5)}.btn.sec{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line) inset}.btn.sm{height:40px;padding:0 20px;font-size:14px}
.link{font:500 16px var(--f);color:var(--acc)}.link::after{content:" \203A"}
/* glass pill */
.pill{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:32px;height:56px;padding:0 8px 0 24px;border-radius:999px;
 background:rgba(255,255,255,.8);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 0 0 1px rgba(10,11,15,.08),0 8px 32px -12px rgba(10,11,15,.3)}
.pill img{height:22px;width:auto;display:block}.pill a{white-space:nowrap}.pill .ln{display:flex;gap:24px;font:500 14px var(--f);color:var(--ink2)}
/* hero */
.hero{padding:168px 0 80px;text-align:center}
.eyebrow{display:block;font:500 15px var(--f);color:var(--acc);margin-bottom:24px;letter-spacing:0}
.hl{display:block;font-size:88px;line-height:1.02;letter-spacing:-.05em}
.sub{font-size:20px;line-height:1.5;color:var(--mut);max-width:640px;margin:24px auto 40px}
.ctas{display:flex;gap:32px;align-items:center;justify-content:center}.offer-line{margin:16px 0 0;font-size:14px;color:var(--mut)}
/* hero photo (print shop). Copy sits over the empty navy table on
   the left; object-position keeps the flyer stack and its QR in frame on the
   right. The scrim is light and covers the text side only, never the QR. */
.hero{display:flex;align-items:flex-end;min-height:clamp(640px,56.25vw,1000px);padding:0;text-align:left;color:#fff;background:#1B2B42;overflow:hidden}
.hero .hc{z-index:1;max-width:none;width:100%;margin:0;padding:128px 24px 72px max(24px,5vw)}
.hero h1{max-width:clamp(520px,34vw,640px)}
.hero .eyebrow{color:#fff;opacity:.9}
.hero .hl{font-size:clamp(48px,4.6vw,72px);text-shadow:0 1px 24px rgba(9,14,30,.35)}
.hero .sub{color:rgba(255,255,255,.88);max-width:430px;margin:20px 0 32px}
.hero .ctas{justify-content:flex-start}.hero .link{color:#fff}.hero .offer-line{color:rgba(255,255,255,.8)}
.hbg{position:absolute;inset:0;z-index:0;display:block}
.hbg img{display:block;width:100%;height:100%;object-fit:cover;object-position:80% 55%}
.hbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,14,30,.55) 0,rgba(9,14,30,.3) 30%,rgba(9,14,30,0) 48%)}
/* story (pinned) */
.story{height:300vh;background:#000}
/* Story backgrounds: one photo per state (the .sbg pictures in index.html).
   home.js puts .on on the active one; it fades in over the old one (~600ms),
   and the old one drops out only once it is covered. Without JS the first
   stays on. object-position keeps each QR in frame and right of the copy
   column; a state whose QR sits elsewhere can override it with
   .sbg[data-state="x"]{--pos:..;--pos-m:..} (desktop / phone), and a phone crop
   whose QR is too small to scan can zoom in on it with --zoom-m and --zo-m. */
.stick{position:sticky;top:0;height:100vh;min-height:760px;overflow:hidden;color:#fff;background:#0B0B0C}
.stage{isolation:isolate}
.sbg{position:absolute;inset:0;overflow:hidden;opacity:0;z-index:0;transition:opacity 0s .6s}
.sbg.on{opacity:1;z-index:1;transition:opacity .6s ease}
.sbg img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,70% 60%)}
.stick .shade{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.88) 0,rgba(0,0,0,.8) calc(max(24px,50% - 600px) + 480px),rgba(0,0,0,0) calc(max(24px,50% - 600px) + 600px))}
/* Scan frame: corners and an "Opens:" chip around the active photo's QR, never over it.
   home.js places it from the picture's data-qr / data-qr-m box and shows it with .on;
   without JS it stays hidden. */
.focus{position:absolute;z-index:3;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none;transition:left .6s ease,top .6s ease,width .6s ease,height .6s ease,opacity .3s}
.focus.on{opacity:1}
.focus i{position:absolute;width:24px;height:24px;border:2px solid #fff;opacity:.95}
.focus i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:10px 0 0 0}.focus i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.focus i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 10px}.focus i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 10px 0}
.focus span{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);font:500 12px var(--m);background:rgba(10,11,15,.72);backdrop-filter:blur(8px);padding:4px 10px;border-radius:999px;white-space:nowrap;color:#fff}.focus span b{font-weight:500}
.copy{position:absolute;left:max(24px,calc(50% - 600px));top:0;bottom:0;width:520px;display:flex;flex-direction:column;justify-content:center;padding-top:40px}
.copy h2{font-size:56px;line-height:1.04}.copy .ro{margin:40px 0 0;font:500 14px var(--f);color:#A1A3AA}
.scenes{margin-top:12px}
.scene{padding:20px 0;border-top:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:20px}.scene:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.scene .w{font:500 36px/1.1 var(--f);letter-spacing:-.035em;color:#8E9098;flex:1;transition:color .3s}.scene .u2{font:400 13px var(--m);color:#8E9098;transition:color .3s}
.scene.on .w{color:#fff}.scene.on .u2{color:#E6E6EA}.scene .dot{width:8px;height:8px;border-radius:50%;background:#55575E;flex:none;transition:all .3s}.scene.on .dot{background:var(--acc);box-shadow:0 0 0 4px rgba(200,0,95,.35)}
.fixed{margin:32px 0 0;font:400 14px var(--m);color:#E6E6EA}.fixed code{font:inherit;background:rgba(255,255,255,.12);padding:4px 10px;border-radius:8px;color:#fff}
.copy p.b{color:#B4B6BD;font-size:16px;margin:16px 0 0;max-width:480px}
.prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.12)}.prog b{display:block;height:100%;width:0;background:#fff}
/* manifesto */
.mani{height:720px;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.48)),url(/img/print-table-1280.jpg) 50% 60%/cover;background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.48)),image-set(url(/img/print-table-1280.webp) type("image/webp"),url(/img/print-table-1280.jpg) type("image/jpeg"));display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.mani p{font:500 72px/1.06 var(--f);letter-spacing:-.05em;margin:0;max-width:960px;text-shadow:0 2px 30px rgba(0,0,0,.35)}
/* handoff: seam + grid chapter */
.product{background:var(--bg);padding:0 0 128px}
.gridbg{position:absolute;left:0;right:0;top:0;height:1240px;background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:48px 48px;background-position:center 0;
 -webkit-mask-image:linear-gradient(#000,#000 40%,transparent);mask-image:linear-gradient(#000,#000 40%,transparent);pointer-events:none}
.seam{position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad)}
.chap{position:relative;text-align:center;padding:0 0 64px}
.chip0{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 14px 0 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line),0 4px 12px -6px rgba(10,11,15,.15);font:500 13px var(--f);color:var(--ink2);transform:translateY(-50%)}
.chip0 i{width:8px;height:8px;border-radius:50%;background:var(--grad)}
.chap h2{margin-top:56px;font-size:64px;line-height:1.04;letter-spacing:-.05em}.chap h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.chap p{font-size:18px;color:var(--mut);max-width:680px;margin:24px auto 0}
/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;position:relative;z-index:1}
.t{background:#fff;border-radius:var(--r-tile);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(10,11,15,.04),0 12px 32px -20px rgba(10,11,15,.18);padding:32px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.t .lb{display:flex;align-items:center;gap:8px;font:500 12px var(--m);color:var(--mut);letter-spacing:.02em}.t .lb b{width:6px;height:6px;border-radius:2px;background:var(--acc)}
.t .lb .ex{margin-left:auto;font:500 11px var(--f);color:#6D28D9;background:#F3EEFF;padding:3px 8px;border-radius:999px;letter-spacing:0}
.t h3{font-size:20px;font-weight:600;margin:12px 0 4px;letter-spacing:-.025em}.t p.d{margin:0;color:var(--mut);font-size:14px;max-width:440px}
.s7{grid-column:span 7}.s5{grid-column:span 5}.s4{grid-column:span 4}.s3{grid-column:span 3}.s8{grid-column:span 8}.s12{grid-column:span 12}
.rA{height:448px}.rB{height:368px}
/* generator: the live "paste a link" preview (try-qr.js) */
.gen{display:grid;grid-template-columns:minmax(0,1fr) 216px;grid-template-areas:"ctl qr" "go qr";column-gap:24px;margin-top:auto;align-items:end}
.try{display:contents}.try[hidden]{display:none}.js .try[hidden]{display:contents}
.gctl{grid-area:ctl;display:flex;flex-direction:column;gap:12px;min-width:0}
.gen .go{grid-area:go;padding-top:12px}
.inp{height:44px;border-radius:var(--r-in);box-shadow:0 0 0 1px var(--line) inset;display:flex;align-items:center;gap:8px;padding:0 6px 0 12px}
.inp input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:400 14px var(--m);color:var(--ink);padding:0;outline:0}
.inp input::placeholder{color:var(--ink);opacity:1}
.inp:focus-within{box-shadow:0 0 0 1.5px var(--ink) inset}.inp:has(input[aria-invalid="true"]){box-shadow:0 0 0 1.5px #B92418 inset}
.inp label{font:500 11px var(--f);color:var(--g2);background:#F3EEFF;padding:4px 8px;border-radius:6px;white-space:nowrap}
.row{display:flex;gap:8px;align-items:center}.row .sp{flex:1}
.chip{height:36px;padding:0 12px;border-radius:8px;border:0;background:#fff;box-shadow:0 0 0 1px var(--line) inset;display:flex;align-items:center;font:500 13px var(--f);color:var(--mut);cursor:pointer}
.chip[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--ink) inset;color:var(--ink)}
.dotc{width:24px;height:24px;padding:0;border:0;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;cursor:pointer}.dotc[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink)}
.dotc.c-ink{background:#14161C}.dotc.c-berry{background:#9D174D}.dotc.c-violet{background:#4C1D95}.dotc.c-navy{background:#1E3A8A}
.try-msg{font-size:12px;color:var(--mut);margin:0;min-height:0;overflow-wrap:anywhere}.try-msg:empty{display:none}.try-msg.bad{color:#B92418}
.gctl .note{font-size:12px;color:var(--mut);margin:4px 0 0;max-width:360px}
.qrbox{grid-area:qr;align-self:end;width:216px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 16px 32px -16px rgba(10,11,15,.3)}
.try-preview{aspect-ratio:1;display:grid;place-items:center;padding:12px;text-align:center;font-size:13px;color:var(--mut)}
.try-preview.live{padding:8px}.try-preview svg{display:block;width:100%;height:auto;pointer-events:none}
/* destination */
.short{margin-top:20px;display:flex;align-items:center;gap:8px;height:44px;border-radius:var(--r-in);background:var(--bg);box-shadow:0 0 0 1px var(--line) inset;padding:0 12px;font:500 13px var(--m)}
.short em{margin-left:auto;font:500 11px var(--f);font-style:normal;color:var(--mut)}
.dests{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.dst{height:48px;border-radius:var(--r-in);box-shadow:0 0 0 1px var(--line) inset;display:flex;align-items:center;gap:12px;padding:0 12px;font:400 14px var(--f)}
.dst .rd{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1.5px #C5C9D2 inset}.dst small{margin-left:auto;font:400 12px var(--m);color:var(--mut)}
.dst.on{box-shadow:0 0 0 1.5px var(--acc) inset,0 0 0 4px #FCE7F1}.dst.on .rd{box-shadow:0 0 0 5px var(--acc) inset}
.t .foot{margin-top:auto;padding-top:16px;font-size:13px;color:var(--mut)}
/* stats */
.big{display:flex;align-items:baseline;gap:8px;margin-top:16px}.big b{font:600 40px/1 var(--f);letter-spacing:-.04em}.big span{font-size:13px;color:var(--mut)}
.spark{display:block;margin-top:16px;height:96px}
.brk{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-top:auto;font-size:13px}.brk div{display:flex;justify-content:space-between;border-top:1px solid var(--line2);padding-top:8px}.brk span:first-child{color:var(--mut)}
/* checks */
.cks{margin-top:auto;display:flex;flex-direction:column}
.ck{display:flex;align-items:center;gap:12px;height:48px;border-top:1px solid var(--line2);font-size:14px}.ck:first-child{border-top:0}
.ck i{width:20px;height:20px;border-radius:50%;background:#E6F6EF;color:var(--ok);display:grid;place-items:center;font:700 11px var(--f);font-style:normal;flex:none}
.ck b{font:600 14px var(--f);min-width:72px}.ck span{color:var(--mut);font-size:13px}
/* privacy */
.ipcard{margin-top:auto;border-radius:var(--r-in);box-shadow:0 0 0 1px var(--line) inset;padding:4px 12px;font:400 12.5px var(--m)}
.ipcard div{display:flex;justify-content:space-between;height:36px;align-items:center;border-top:1px solid var(--line2)}.ipcard div:first-child{border-top:0}.ipcard span:first-child{color:var(--mut)}
.ipcard .ip span:last-child{font-family:var(--f);font-weight:600}
.t a.more{font:500 13px var(--f);color:var(--acc);margin-top:12px}
/* pricing tile */
.pt{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;flex:1}
.pp{border-radius:16px;box-shadow:0 0 0 1px var(--line) inset;padding:18px;display:flex;flex-direction:column}
.pp.rec{box-shadow:0 0 0 1.5px transparent inset;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:1.5px solid transparent}
.pp h4{margin:0;font:600 15px var(--f);display:flex;justify-content:space-between;align-items:center}.pp h4 small{font:500 10.5px var(--f);color:#fff;background:var(--grad);padding:2px 8px;border-radius:999px}
.pp .pr{margin:12px 0 2px;font-size:13px;color:var(--mut)}.pp .pr b{font:600 30px/1 var(--f);letter-spacing:-.04em;color:var(--ink)}
.pp .bl{font-size:12px;color:var(--mut);margin:0}.pp ul{list-style:none;padding:0;margin:12px 0 16px;font-size:13px;flex:1}.pp li{padding:3px 0}
.pp .btn{height:40px;font-size:14px;width:100%}.pp.rec .btn{background:var(--acc)}.pp .btn.sec{box-shadow:0 0 0 1px var(--line) inset}
.pnote{margin:12px 0 0;font-size:12px;color:var(--mut)}.pnote b{color:var(--ink);font-weight:500}
.t ul.hs{padding-left:18px;margin:16px 0 0;font-size:14px;color:var(--ink2)}.t ul.hs li{margin:6px 0}
/* moves */
.mv{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:16px}
.mvi{padding:8px 24px 4px;border-left:1px solid var(--line2)}.mvi:first-child{border-left:0;padding-left:0}
.mvi .n{font:500 12px var(--m);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.mvi h4{margin:8px 0 4px;font:600 17px var(--f);letter-spacing:-.02em}.mvi p{margin:0;font-size:14px;color:var(--mut)}
.uses{display:grid;grid-template-columns:repeat(3,1fr) 1.15fr;gap:16px;margin-top:20px}.u .ph{height:200px;border-radius:var(--r-in);background:center/cover;box-shadow:0 0 0 1px var(--line)}.u h4{margin:12px 0 2px;font:600 14px var(--f)}.u p{margin:0;font-size:13px;color:var(--mut)}
.ul2{display:flex;flex-direction:column;gap:16px;padding:16px;border-radius:var(--r-in);background:var(--bg);box-shadow:0 0 0 1px var(--line) inset}.ul2 .u h4{margin-top:0}
.u .ph.pack{background-image:url(/img/packaging.jpg);background-position:center 55%}.u .ph.shop{background-image:url(/img/storefront.jpg);background-position:center 46%}.u .ph.event{background-image:url(/img/poster.jpg);background-position:62% 62%}
/* faq */
.faqs{padding:128px 0 0;position:relative}.faqs .g{display:grid;grid-template-columns:360px 1fr;gap:80px}.h2{font-size:48px;line-height:1.06;letter-spacing:-.045em}
.faq{border-bottom:1px solid var(--line);padding:24px 0}.faq:first-child{border-top:1px solid var(--line)}.faq summary{list-style:none;display:flex;justify-content:space-between;gap:24px;font:600 17px var(--f);letter-spacing:-.01em;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mut);font-weight:400}.faq[open] summary::after{content:"\2212"}.faq p{margin:12px 0 0;color:var(--mut);max-width:640px}
/* close */
.close{background:#000;color:#fff;text-align:center;padding:160px 0 128px}
.close h2{font-size:88px;line-height:1.02;letter-spacing:-.05em}.close p{color:#B4B6BD;font-size:18px;max-width:600px;margin:24px auto 40px}
.close .q{width:200px;margin:80px auto 0;border-radius:24px;overflow:hidden;background:#fff}.close .q img{display:block;width:100%;height:auto}.close .qc{font:400 13px var(--m);color:#8E9098;margin:16px auto 0;max-width:none}
footer{background:#000;color:#8E9098;font-size:14px;padding:0 0 64px}footer .wrap{display:flex;justify-content:space-between;gap:48px;padding-top:40px}footer .top::before{content:"";position:absolute;left:24px;right:24px;top:0;border-top:1px solid rgba(255,255,255,.14)}
footer img{height:22px;width:auto;display:block}footer .who{max-width:520px;margin:16px 0 0}footer .addr{margin:8px 0 0}footer .fl{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px 24px;max-width:700px;align-content:flex-start}footer a{color:#D8D9DE}
footer .more{display:block;padding-top:32px;font-size:13px}footer .more p{margin:0 0 8px}footer .more a{text-decoration:underline;text-decoration-color:rgba(216,217,222,.35);text-underline-offset:2px}
/* reveal: only when scripts run (js-flag.js), so nothing stays hidden without them */
.js .rv{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}.js .rv.in{opacity:1;transform:none}
.js .spark path:last-of-type{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.2s ease .2s}.js .in .spark path:last-of-type{stroke-dashoffset:0}
/* reduced motion: no pinning, no scrubbing, no transitions; everything starts visible */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}
 .story{height:auto}.stick{position:relative;height:900px}
 .js .rv{opacity:1;transform:none}.js .spark path:last-of-type{stroke-dashoffset:0}}
@media (max-width:900px){
 .pill{top:12px;width:calc(100% - 24px);justify-content:space-between;gap:12px;padding:0 6px 0 18px;height:52px}.pill .ln{gap:0;margin-left:auto}.pill .ln a:not([href$='#pricing']){display:none}
 .hero{padding:112px 0 48px}.eyebrow{font-size:13px;margin-bottom:16px}.hl{font-size:44px}.sub{font-size:17px;margin:16px auto 24px;padding:0 4px}.ctas{flex-direction:column;gap:16px}
 .hero{display:block;min-height:0;padding:0}.hero .hc{padding:104px 20px 32px}.hero .hl{font-size:44px}.hero .sub{margin:16px 0 24px;padding:0}.hero .ctas{align-items:flex-start}
 .hbg{position:relative;inset:auto}.hbg img{height:auto;aspect-ratio:3/5;max-height:640px;object-position:80% 55%}
 .hbg::after{background:linear-gradient(#1B2B42,rgba(27,43,66,0) 16%)}
 .story{height:auto}.stick{position:relative;height:auto;min-height:0;background:#000}
 /* mobile: the 900x1200 crops. The stage grows with the width (up to 820px) and
    object-position keeps all three QRs in frame; the fade at the bottom stays below them. */
 .stage{position:relative;height:min(max(560px,90vw),820px)}.sbg img{object-position:var(--pos-m,60% 80%);transform:scale(var(--zoom-m,1));transform-origin:var(--zo-m,50% 50%)}
 .focus i{width:16px;height:16px}.focus span{font-size:11px;padding:3px 8px}
 .stick .shade{display:none}.stage::after{content:"";position:absolute;inset:auto 0 0 0;z-index:2;height:40px;background:linear-gradient(transparent,#000)}
 .copy{position:relative;left:auto;width:auto;padding:40px 20px 64px}.copy h2{font-size:40px}.prog{display:none}
 .scene{flex-wrap:wrap;gap:4px 16px;padding:16px 0}.scene .w{font-size:28px}.scene .u2{flex-basis:100%;padding-left:24px;font-size:12px}
 .uses>.u:first-child{grid-column:1/-1}.uses>.ul2{grid-column:1/-1}
 .mani{height:520px;background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.48)),url(/img/print-table-800.jpg);background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.48)),image-set(url(/img/print-table-800.webp) type("image/webp"),url(/img/print-table-800.jpg) type("image/jpeg"))}.mani p{font-size:40px;padding:0 24px}
 .chap h2{font-size:40px}.chap h2 em{display:block}.chap p{font-size:16px}.chap{padding-bottom:40px}
 .bento{grid-template-columns:1fr}.bento>.t{grid-column:auto;height:auto}.t{padding:24px}
 .gen{grid-template-columns:minmax(0,1fr);grid-template-areas:"qr" "ctl" "go";row-gap:16px;justify-items:center}.gctl,.gen .go{width:100%}.gen .go{padding-top:0}.row{flex-wrap:wrap}.uses{grid-template-columns:1fr 1fr}.qrbox{width:200px}
 .pt,.mv,.faqs .g,.brk{grid-template-columns:1fr}.mvi{border-left:0;padding:12px 0}.h2,.close h2{font-size:40px}.faqs{padding-top:96px}.faqs .g{gap:24px}
 .close{padding:112px 0 96px}.product{padding-bottom:96px}footer .wrap{flex-direction:column}footer .top::before{left:20px;right:20px}footer .fl{justify-content:flex-start}.wrap{padding:0 20px}
}
@media (min-width:901px){.stage{position:absolute;inset:0}}
/* narrow desktop: a narrower copy column so the QRs stay clear of the copy and its shade.
   The scene labels drop to 28px with the example URL under them, so each label stays on
   one line and the whole column fits a 1024x768 screen below the nav. */
@media (min-width:901px) and (max-width:1199px){
 .stick .shade{background:linear-gradient(90deg,rgba(0,0,0,.88) 0,rgba(0,0,0,.8) 404px,rgba(0,0,0,0) 464px)}
 .copy{width:400px}.copy h2{font-size:48px}.copy .ro{margin-top:28px}.fixed{margin-top:24px}
 .scene{flex-wrap:wrap;gap:2px 16px;padding:14px 0}.scene .w{font-size:28px;white-space:nowrap}.scene .u2{flex-basis:100%;padding-left:24px;font-size:12px}}