/* Printara AI Laser Cut Generator landing page (/ai-laser-cut-generator/).
   Page-scoped: does not load /css/style.css. Same tokens and section components as the AI Diorama Generator and
   AI 3D Generator landing pages (their review branches), so all three read as one family: dark field, cyan + violet,
   Space Grotesk headlines, Inter body. Own parts: the text brief card on the uncut sheets, the four steps beside the
   stage (brief, sheets, box, lid, with the tour progress), two toggles (Lay it flat, Open the lid), the dimension
   rails, the kit cards with their cutting sheets, the paper brief cards in the examples, the paper decal page and the
   real cut file with its layer legend. */
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin-wght.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"SG Fallback";src:local("Arial");size-adjust:104%;ascent-override:90%;descent-override:24%}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22%}

:root{
  --bg:#07090E;--bg-2:#0C0F15;--surface:#111620;--surface-2:#161B26;--hover:#1C212E;
  --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.13);--line-accent:rgba(0,229,255,.32);
  --text:#F0F2F5;--text-2:#A3AFC0;--text-3:#8A97A8;
  --cyan:#00E5FF;--cyan-dark:#00A8CC;--cyan-glow:rgba(0,229,255,.14);
  --violet:#7C3AED;--violet-text:#B39DFA;--violet-wash:rgba(124,58,237,.13);--violet-line:rgba(124,58,237,.32);
  --grad:linear-gradient(135deg,#00E5FF 0%,#7C3AED 100%);
  --ink-on-cyan:#07090E;
  --ff-d:"Space Grotesk","SG Fallback",ui-sans-serif,system-ui,sans-serif;
  --ff-b:"Inter","Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
  --nav-h:64px;--gut:clamp(16px,3.4vw,48px);--maxw:1240px;
  --r-s:8px;--r:12px;--r-l:16px;--r-xl:24px;
  --sec-pad:clamp(48px,4.6vw,66px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff-b);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
p,h1,h2,h3,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0}
::selection{background:rgba(0,229,255,.28);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--cyan);color:var(--ink-on-cyan);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.wrap{max-width:calc(var(--maxw) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---------- buttons ---------- */
.b{--bh:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--bh);padding:0 20px;border-radius:var(--r);border:0;
  font-family:var(--ff-b);font-size:15.5px;font-weight:600;letter-spacing:-.005em;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s,color .18s,border-color .18s;-webkit-tap-highlight-color:transparent;user-select:none}
.b svg{width:18px;height:18px;flex:none}
.b:active{transform:translateY(1px)}
.b-primary{background:var(--cyan);color:var(--ink-on-cyan);box-shadow:inset 0 -3px 0 0 var(--cyan-dark),0 10px 26px -12px rgba(0,229,255,.55)}
.b-primary:hover{box-shadow:inset 0 -3px 0 0 var(--cyan-dark),0 0 0 4px var(--cyan-glow),0 12px 30px -10px rgba(0,229,255,.6);transform:translateY(-1px)}
.b-primary:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 0 var(--cyan-dark)}
.b-ghost{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 -3px 0 0 rgba(255,255,255,.04)}
.b-ghost:hover{background:var(--hover);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.b-sm{--bh:40px;padding:0 16px;font-size:14.5px;border-radius:10px}
.b-meta{font-family:var(--ff-d);font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-variant-numeric:tabular-nums;
  padding:4px 7px;border-radius:6px;background:rgba(255,255,255,.06);margin-left:2px}
.b[aria-busy="true"]{cursor:progress}
.toggles{display:flex;gap:10px;flex-wrap:wrap}
.explode{min-width:156px}.lidb{min-width:168px}
.b-ghost[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--line-accent),inset 0 -3px 0 0 rgba(0,229,255,.12);color:#fff}
.link{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line-accent);padding:4px 0;transition:border-color .2s,color .2s}
.link svg{width:16px;height:16px;flex:none;transition:transform .2s var(--ease)}
.link:hover{border-bottom-color:var(--cyan);color:#fff}
.link:hover svg{transform:translateX(3px)}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);background:rgba(7,9,14,.82);
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.solid{border-bottom-color:var(--line)}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gut)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand-mark{width:30px;height:30px}
.brand-name{font-family:var(--ff-d);font-weight:700;font-size:20px;letter-spacing:-.03em}
.nav-links{display:flex;gap:2px;position:absolute;left:50%;transform:translateX(-50%)}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--text-2);text-decoration:none;padding:10px 14px;border-radius:9px;transition:background .2s,color .2s}
.nav-links a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.nav-acts{display:flex;align-items:center;gap:8px}
.nav-login{background:transparent;box-shadow:none;color:var(--text-2)}
.nav-login:hover{background:rgba(255,255,255,.05);box-shadow:none;color:var(--text)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--bg)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;line-height:24px;color:var(--text-3)}
.crumbs li+li::before{content:"/";margin-right:6px;color:rgba(255,255,255,.22)}
.crumbs a{color:var(--text-2);text-decoration:none;display:inline-block;min-height:24px}
.crumbs a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.pill{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:6px 12px;border-radius:999px;background:var(--violet-wash);box-shadow:inset 0 0 0 1px var(--violet-line);
  color:var(--violet-text);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.pill::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--grad)}
.hero-top h1{margin:16px 0 0;font-family:var(--ff-d);font-weight:700;letter-spacing:-.04em;line-height:.98;font-size:clamp(46px,4.5vw,66px);text-wrap:balance}
.dlp .tl-lead{margin:18px 0 0;font-size:clamp(16.5px,1.2vw,18px);line-height:1.58;color:var(--text-2);max-width:42ch;text-wrap:pretty}
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;width:100%}
.facts li{display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 8px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.02);
  font-family:var(--ff-d);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.12)}
.hero-note{display:none}
.micro{display:flex;align-items:flex-start;gap:8px;margin-top:12px;width:100%;font-size:13.5px;line-height:1.45;color:var(--text-3)}
.micro svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--cyan)}

/* viewer */
.viewer{position:relative;z-index:1}
.hero-top{position:relative;z-index:5}
.stage{position:absolute;inset:0;z-index:1;outline:none;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;container-type:size;
  /* the square frame is fitted into the stage area (frame box insets); the viewer reads the same numbers, so poster and canvas line up.
     --cx/--cy/--cw/--ch = manifest image.content, written into the markup by the generator */
  --cx:.1236;--cy:.1132;--cw:.7653;--ch:.7861}
.stage.dragging{cursor:grabbing}
.stage:focus-visible{box-shadow:inset 0 0 0 2px var(--cyan)}
.poster,.canvas{position:absolute}
.poster{pointer-events:none;transition:opacity .4s;max-width:none;left:50%;top:50%;height:92%;width:auto;aspect-ratio:1/1;transform:translate(-50%,-50%)}
@supports (width:1cqw){
  .poster{transform:none;
    --aw:calc(100cqw - var(--fl) - var(--fr));--ah:calc(100cqh - var(--ft) - var(--fb));
    --d:min(calc(var(--aw) / (var(--cw) * var(--ov))), calc(var(--ah) / var(--ch)));
    width:var(--d);height:var(--d);
    left:calc(var(--fl) + (var(--aw) - var(--cw) * var(--d)) / 2 - var(--cx) * var(--d));
    top:calc(var(--ft) + (var(--ah) - var(--ch) * var(--d)) / 2 - var(--cy) * var(--d))}
}
.poster.gone{opacity:0}
html:not(.js) #poster{display:none}
.canvas{inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s}
.canvas.on{opacity:1}
.frame-box{position:absolute;left:var(--fl);right:var(--fr);top:var(--ft);bottom:var(--fb);pointer-events:none;z-index:2}
.corner{position:absolute;width:20px;height:20px;border:0 solid rgba(255,255,255,.2);transition:opacity .3s}
.corner.tl{left:-10px;top:-6px;border-top-width:1.5px;border-left-width:1.5px}
.corner.tr{right:-10px;top:-6px;border-top-width:1.5px;border-right-width:1.5px}
.corner.bl{left:-10px;bottom:-6px;border-bottom-width:1.5px;border-left-width:1.5px}
.corner.br{right:-10px;bottom:-6px;border-bottom-width:1.5px;border-right-width:1.5px}
.fx{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse 70% 42% at 50% 0%,rgba(124,58,237,.10),transparent 70%),radial-gradient(ellipse 50% 30% at 50% 100%,rgba(0,229,255,.035),transparent 70%)}

/* pins: part labels that follow the scene */
.pins{position:absolute;inset:0;pointer-events:none;z-index:3}
.pin{position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;
  transform:translate3d(-200px,-200px,0);transition:opacity .25s,visibility .25s;will-change:transform;--dot:22px}
.pin.off{opacity:0;visibility:hidden;pointer-events:none}
.pin-dot{position:absolute;left:calc(var(--dot) / -2);top:calc(var(--dot) / -2);width:var(--dot);height:var(--dot);display:grid;place-items:center;border-radius:50%;
  background:rgba(7,9,14,.86);box-shadow:inset 0 0 0 1.5px var(--cyan),0 4px 14px rgba(0,0,0,.5);
  font-family:var(--ff-d);font-weight:600;font-size:10px;font-variant-numeric:tabular-nums;color:var(--text);transition:transform .2s var(--ease),background .2s}
.pin-label{position:absolute;left:0;top:0;transform:translate3d(var(--lx,16px),var(--ly,-13px),0);height:26px;display:flex;align-items:center;
  font-family:var(--ff-d);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text);white-space:nowrap;
  background:rgba(7,9,14,.86);padding:0 8px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line-2);transition:opacity .2s}
.pin.nolabel .pin-label{opacity:0;pointer-events:none}
.pin.rest .pin-label{color:var(--text-2)}
.pin.rest .pin-dot{background:rgba(7,9,14,.72)}
.pin.dim .pin-dot{opacity:.55}
.pin:hover .pin-label,.pin.hot .pin-label,.pin.sel .pin-label{opacity:1;color:var(--text);pointer-events:auto}
.pin:hover .pin-dot,.pin.hot .pin-dot{transform:scale(1.12)}
.pin.sel .pin-dot{background:var(--cyan);color:var(--ink-on-cyan);transform:scale(1.15);box-shadow:0 0 0 4px rgba(0,229,255,.22),0 4px 14px rgba(0,0,0,.5)}
.pin.sel .pin-label{box-shadow:inset 0 0 0 1px var(--line-accent);color:#fff}

/* inspect zoom: a soft vignette around the chosen part; on desktop nothing of the zoomed frame spills under the copy */
.vig{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(circle at var(--vx,50%) var(--vy,45%),transparent 0,transparent 24%,rgba(7,9,14,.55) 48%,rgba(7,9,14,.86) 78%)}
.stage.zoomed .vig{opacity:1}

.spinner{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;background:rgba(17,22,32,.94);
  box-shadow:inset 0 0 0 1px var(--line-2);padding:9px 13px;border-radius:10px;font-family:var(--ff-d);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.spinner.on{opacity:1;visibility:visible}
.spinner i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--cyan);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.hud-hint{position:absolute;z-index:5;left:var(--gut);bottom:24px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--text-2);pointer-events:none}
.hud-hint svg{width:24px;height:24px;padding:4px;border-radius:7px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-2)}
.hint-m{display:none}
.hud-pause{position:absolute;z-index:6;left:calc(var(--gut) + 150px);bottom:14px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--text-2);cursor:pointer;transition:background .2s,color .2s}
.hud-pause:hover{background:rgba(255,255,255,.06);color:var(--text)}
.hud-pause svg{width:18px;height:18px}
.hud-pause .i-play,.hud-pause[data-paused="true"] .i-pause{display:none}
.hud-pause[data-paused="true"] .i-play{display:block}
.hud-pause[hidden]{display:none}
.hud-mid{position:absolute;z-index:5;bottom:28px;left:calc(var(--fl) + (100% - var(--fl) - var(--fr)) / 2);transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  font-family:var(--ff-d);font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap}
.hud-v{color:var(--text);min-width:4ch}
.load{width:84px;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden;margin-left:6px;transition:opacity .5s}
.load i{display:block;height:100%;width:0;background:var(--grad);transition:width .25s}
.load.done{opacity:0}
.readout{position:absolute;z-index:5;bottom:20px;left:calc(var(--fl) + (100% - var(--fl) - var(--fr)) / 2);transform:translate(-50%,6px);display:flex;gap:10px;align-items:center;white-space:nowrap;
  font-family:var(--ff-d);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums;background:rgba(17,22,32,.92);color:var(--text);
  padding:9px 13px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line-2);opacity:0;transition:opacity .25s,transform .25s var(--ease);pointer-events:none}
.readout.on{opacity:1;transform:translate(-50%,0)}
.readout .ro-k{color:var(--cyan)}
.hud-static{position:absolute;z-index:5;left:var(--gut);bottom:24px;font-size:13px;color:var(--text-3)}
.hud-hint,.hud-mid,.corner,.hud-pause{transition:opacity .3s var(--ease)}
.hero.playing .hud-hint,.hero.playing .hud-mid,.hero.playing .hud-pause{opacity:0}
.hero.spin .hud-mid{opacity:0}
html:not(.js) .explode,html:not(.js) .hud-hint,html:not(.js) .hud-mid,html:not(.js) .hud-pause{display:none}

/* this page's stage parts: the state chip, the text brief card, the dimension rails, plain dots for the labels */
.state-chip{position:absolute;left:12px;top:6px;display:none;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:8px;background:rgba(7,9,14,.8);
  box-shadow:inset 0 0 0 1px var(--line-2);font-family:var(--ff-d);font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);white-space:nowrap;transition:box-shadow .3s,opacity .3s}
.state-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet-text);transition:background .3s}
.hero[data-story="sheets"] .state-chip::before{background:#FFB347}
.hero[data-story="box"] .state-chip::before{background:var(--cyan)}
.hero[data-story="lid"] .state-chip::before{background:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.18)}
@media (min-width:900px){html.js .state-chip{display:inline-flex}}
.hero.brief-on .state-chip{opacity:0}
/* the text brief: a white card with a cyan edge the viewer lays on the empty front middle of the uncut sheets
   (manifest reveal.brief); it stands clear of the warm plywood */
.brief-card,.brief-mini{background:#FFFFFF;color:#1D2027;font-family:var(--ff-b);text-align:left}
.brief-card{position:absolute;left:0;top:0;z-index:4;width:270px;padding:14px 16px 11px 18px;border-radius:12px;pointer-events:none;transform-origin:50% 50%;
  box-shadow:0 0 0 2px rgba(0,229,255,.9),0 0 26px -4px rgba(0,229,255,.45),0 28px 56px -18px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.brief-card::before,.brief-mini::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 3px 3px 0;background:#00C8E0}
.brief-card.on{opacity:1;visibility:visible}
html:not(.js) .brief-card{display:none}
.bc-k{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-d);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#00788A}
.bc-k::before{content:"";width:6px;height:6px;border-radius:50%;background:#00B8D4}
.bc-t{margin-top:7px;font-family:var(--ff-d);font-weight:700;font-size:16px;line-height:1.15;letter-spacing:-.01em;color:#12141A}
.bc-s{margin-top:2px;font-family:var(--ff-d);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#5D6370}
.bc-l{list-style:none;margin-top:9px;display:flex;flex-direction:column;gap:3px}
.bc-l li{position:relative;padding-left:11px;font-size:11.5px;line-height:1.42;color:#30343D}
.bc-l li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:1px;background:#8FD9E6}
.bc-n{margin-top:9px;padding-top:7px;border-top:1px dashed rgba(0,0,0,.16);font-size:10.5px;line-height:1.35;color:#5F6572}
.measure{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s}
.measure.on{opacity:1}
.m-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.m-rail,.m-tick{stroke:var(--cyan);stroke-width:1.5px;stroke-linecap:round;transition:opacity .25s}
.m-rail.off,.m-tick.off{opacity:0}
.m-label{position:absolute;left:0;top:0;padding:4px 8px;border-radius:7px;background:rgba(7,9,14,.88);box-shadow:inset 0 0 0 1px rgba(0,229,255,.4);
  font-family:var(--ff-d);font-weight:600;font-size:12.5px;letter-spacing:.02em;color:var(--cyan);white-space:nowrap;font-variant-numeric:tabular-nums;transition:opacity .25s}
.m-label.off{opacity:0}
.pins.static .pin{pointer-events:none;cursor:default;--dot:12px}
.pins.static .pin-dot{font-size:0;background:#FFB347;box-shadow:0 0 0 3px rgba(255,179,71,.22),0 2px 8px rgba(0,0,0,.6)}
.pins.static .pin-label{pointer-events:none}
.ro-v[hidden]{display:none}
.ro-v span+span::before{content:"\0B7";margin:0 7px;color:var(--text-3)}

/* the steps beside the stage: text brief, cutting sheets, assembled box, open lid */
.story-k{margin:0 0 12px;font-family:var(--ff-d);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.story-list{list-style:none;display:flex;flex-direction:column;gap:6px;position:relative}
.srow,.sbtn{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"thumb n" "thumb t" "thumb m";column-gap:14px;align-items:center;align-content:center;min-height:78px;padding:7px 10px 7px 7px;border-radius:14px}
.srow.has-btn{display:block;padding:0;min-height:0}
.sbtn{width:100%;border:0;background:transparent;text-align:left;cursor:pointer;transition:background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.sbtn:hover{background:rgba(255,255,255,.04)}
.sbtn[aria-current]{background:rgba(0,229,255,.06);box-shadow:inset 0 0 0 1px rgba(0,229,255,.22)}
.s-thumb{grid-area:thumb;position:relative;width:64px;height:64px;border-radius:11px;overflow:hidden;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2)}
.s-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.s-thumb.s-sheets img{transform:scale(1.25)}
.s-thumb.s-box img,.s-thumb.s-lid img{transform:scale(1.32);object-position:50% 50%}
.s-doc{position:absolute;inset:9px 13px;display:flex;flex-direction:column;gap:4px;padding:7px 6px 7px 8px;border-radius:4px;background:#fff;transform:rotate(-3deg);box-shadow:inset 3px 0 0 #00C8E0,0 6px 14px -6px rgba(0,0,0,.8)}
.s-doc i{display:block;height:3px;border-radius:1px;background:#9AA3B2}
.s-doc i:first-child{height:4px;width:80%;background:#12141A}
.s-doc i:nth-child(3){width:86%}.s-doc i:nth-child(5){width:62%}
.s-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .25s}
.sbtn[aria-current] .s-thumb::after{box-shadow:inset 0 0 0 1.5px var(--cyan)}
.s-n{grid-area:n;font-family:var(--ff-d);font-weight:500;font-size:11.5px;letter-spacing:.06em;color:var(--text-3);font-variant-numeric:tabular-nums}
.s-t{grid-area:t;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--text-2);transition:color .2s}
.sbtn[aria-current] .s-t,.sbtn:hover .s-t,html:not(.js) .s-t{color:var(--text)}
.sbtn[aria-current] .s-n{color:var(--cyan)}
/* the tour: a thin bar under the step that comes next fills until the stage moves on */
.srow,.sbtn{position:relative}
.s-prog{position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;opacity:0;transition:opacity .25s}
.s-prog i{display:block;height:100%;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:0 50%}
.sbtn .s-prog{grid-column:1/-1}
.srow.next .s-prog{opacity:1}
.srow.next .s-prog i{transform:scaleX(1);transition:transform var(--tour-ms,2600ms) linear}
.srow.next .s-n::after{content:" \00B7  up next";color:var(--cyan);letter-spacing:.06em}
.s-short{display:none}
.s-m{grid-area:m;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--text-3)}
.story-note{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--text-3);max-width:32ch}

/* desktop hero: copy left, stage centre, steps right */
@media (min-width:1180px){
  .hero{display:grid;--copy-w:min(450px,31vw);--parts-w:248px;
    grid-template-columns:var(--gut) var(--copy-w) minmax(0,1fr) var(--parts-w) var(--gut);grid-template-rows:auto auto minmax(0,1fr);
    height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));min-height:600px;max-height:1060px;
    --fl:calc(var(--gut) + var(--copy-w) + 28px);--fr:calc(var(--gut) + var(--parts-w) + 16px);--ft:22px;--fb:84px;--ov:.95}
  .hero-top{grid-column:2;grid-row:1;position:relative;z-index:5;padding-top:clamp(26px,5vh,60px)}
  .viewer{grid-column:1/-1;grid-row:1/-1;min-height:0}
  .hero-acts{grid-column:2;grid-row:2;align-self:start;position:relative;z-index:5}
  .story{grid-column:4;grid-row:1/-1;align-self:start;position:relative;z-index:5;padding-top:clamp(30px,8vh,96px)}
  .hero-acts .b-primary{padding:0 18px}
}
@media (min-width:1180px) and (max-height:820px){
  .facts{display:none}
  .hero-top h1{font-size:clamp(42px,4vw,56px)}
}
@media (min-width:1180px) and (max-height:760px){
  .story-note{display:none}
  .srow,.sbtn{min-height:68px;grid-template-columns:54px minmax(0,1fr)}
  .s-thumb{width:54px;height:54px}
}

/* tablets and small laptops (900 to 1179 px): copy and steps left, the stage right, all in the first screen */
@media (min-width:900px) and (max-width:1179px){
  .hero{display:grid;--copy-w:min(420px,41vw);
    grid-template-columns:var(--gut) var(--copy-w) minmax(0,1fr) var(--gut);grid-template-rows:auto auto auto minmax(0,1fr);
    height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));min-height:620px;max-height:940px;
    --fl:calc(var(--gut) + var(--copy-w) + 18px);--fr:var(--gut);--ft:22px;--fb:62px;--ov:1}
  .hero-top{grid-column:2;grid-row:1;padding-top:clamp(18px,3.4vh,40px)}
  .pill{display:none}
  .hero-top h1{margin-top:12px;font-size:clamp(40px,4.6vw,52px)}
  .dlp .tl-lead{font-size:16px;margin-top:12px}
  .viewer{grid-column:1/-1;grid-row:1/-1;min-height:0}
  .hero-acts{grid-column:2;grid-row:2;position:relative;z-index:5;margin-top:20px}
  .hero-acts .b{padding:0 16px}
  .facts{display:none}
  .story{grid-column:2;grid-row:3;position:relative;z-index:5;margin-top:18px}
  .story-list{flex-direction:column;gap:2px}
  .srow,.sbtn{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"thumb n" "thumb t";min-height:56px;padding:5px 8px 5px 5px;column-gap:12px}
  .srow.has-btn{padding:0;min-height:0}
  .s-thumb{width:44px;height:48px;border-radius:9px}
  .s-m{display:none}
  .s-t{font-size:14.5px}
  .story-note{display:none}
  .story-k{margin-bottom:6px}
  .fx{display:none}
}
@media (min-width:900px) and (max-width:1179px) and (max-height:800px){.micro{display:none}.story-k{display:none}}

/* stacked hero: phones and narrow tablets, DOM order = visual order */
@media (max-width:899px){
  .hero{display:flex;flex-direction:column;padding-bottom:28px}
  .hero-top{padding:18px var(--gut) 0;max-width:760px;order:1}
  .viewer{order:3}.hero-acts{order:2}.story{order:4}
  .dlp .tl-lead{max-width:60ch}
  .viewer{height:clamp(320px,56vh,640px);height:clamp(320px,56svh,640px);margin-top:18px;--fl:var(--gut);--fr:var(--gut);--ft:10px;--fb:44px;--ov:1}
  .fx{display:none}
  .stage{overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
  .hero-acts{padding:0 var(--gut);margin-top:22px}
  .facts{margin-top:14px}
  .story{margin-top:22px}
  .story-k{padding:0 var(--gut)}
  .story-list{flex-direction:row;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding:0 var(--gut);padding:2px var(--gut) 6px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  .story-list.end{-webkit-mask-image:none;mask-image:none}
  .s-doc{inset:6px 6px;gap:3px;padding:5px 4px 5px 6px}.s-doc i{height:2.5px}.s-doc i:nth-child(n+4){display:none}
  .story-list::-webkit-scrollbar{display:none}
  .story-list li{flex:none;scroll-snap-align:start}
  .srow,.sbtn{grid-template-columns:34px auto;grid-template-areas:"thumb n" "thumb t";column-gap:10px;row-gap:0;min-height:52px;padding:6px 14px 6px 6px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2)}
  .srow.has-btn{background:none;box-shadow:none;padding:0;min-height:0}
  .sbtn[aria-current]{background:var(--cyan-glow);box-shadow:inset 0 0 0 1px var(--cyan)}
  .s-thumb{width:34px;height:40px;border-radius:8px}
  .s-m{display:none}
  .s-n{font-size:10.5px;line-height:1.2}
  .s-t{font-size:14px;white-space:nowrap}
  .story-note{padding:0 var(--gut);max-width:none}
  .hud-mid{bottom:14px}
  .readout{bottom:8px}
  .hud-hint{bottom:12px}
  .hud-pause{bottom:2px}
}
@media (max-width:767px){
  :root{--nav-h:56px}
  .nav-links,.nav-login{display:none}
  .nav .b-sm{--bh:44px}
  .pill{display:none}
  .crumbs ol{font-size:13px}
  .hero-top{padding-top:12px}
  .hero-top h1{margin-top:10px;font-size:clamp(36px,10.4vw,44px)}
  .dlp .tl-lead{font-size:16px;line-height:1.5;margin-top:12px}
  .viewer{height:min(102vw,470px);margin-top:6px;--fl:var(--gut);--fr:var(--gut);--ft:34px;--fb:38px;--ov:.92}
  /* phones: the model, then the three steps (they drive the stage), then the actions */
  .viewer{order:2}.story{order:3;margin-top:8px}.hero-acts{order:4;margin-top:14px}
  .story-k{margin-bottom:6px}
  .story-note{display:none}
  .s-full{display:none}.s-short{display:inline}
  .hero-note{display:block;margin-top:14px;font-size:13px;line-height:1.5;color:var(--text-3)}
  .frame-box .corner{display:none}
  .hero-acts{margin-top:8px;gap:8px}
  .hero-acts .b{flex:1 1 0;padding:0 12px;min-width:0}
  .hero-acts .b-primary{flex:1 1 100%;padding:0 16px}
  .hero-acts .explode{flex:1 1 100%}
  .facts{margin-top:4px}
  .facts li{font-size:11px;padding:5px 8px 5px 7px}
  .hint-d{display:none}.hint-m{display:inline}
  .hud-hint{left:50%;transform:translateX(-50%);bottom:6px;font-size:12.5px;background:rgba(7,9,14,.82);padding:4px 10px 4px 4px;border-radius:10px}
  .hud-hint svg{width:22px;height:22px;padding:3px}
  .hud-pause{left:auto;right:var(--gut);bottom:0}
  .hud-mid{display:none}
  .hero.spin .readout.on,.hero.playing .readout.on{opacity:1}
  .readout{bottom:auto;top:2px;padding:6px 10px;font-size:11px}
  .readout .ro-x{display:none}
  .m-label{font-size:11.5px;padding:3px 7px}
}
@media (max-width:767px) and (max-height:760px){
  .viewer{height:min(92vw,440px)}
  .story-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

@media (max-width:359px){.hero-acts .b,.hero-acts .b-primary{flex:1 1 100%}.s-t{font-size:13px}}

/* ---------- sections ---------- */
.sec{position:relative;padding:var(--sec-pad) 0}
.sec-alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kicker{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.kicker::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--grad)}
.h2{font-family:var(--ff-d);font-weight:700;letter-spacing:-.03em;line-height:1.04;font-size:clamp(30px,3.3vw,48px);text-wrap:balance;max-width:20ch}
.lead{margin-top:18px;font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--text-2);max-width:56ch;text-wrap:pretty}
.h3{font-family:var(--ff-d);font-weight:600;letter-spacing:-.015em;line-height:1.2;font-size:clamp(19px,1.6vw,22px)}
.ui{display:inline-block;font-family:var(--ff-d);font-weight:500;font-size:.88em;letter-spacing:0;color:var(--text);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);
  padding:1px 7px;border-radius:6px;white-space:nowrap;line-height:1.5}
.tag{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:600;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.inline{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-accent);text-underline-offset:3px;transition:text-decoration-color .2s}
.inline:hover{text-decoration-color:var(--cyan)}

/* sections below the first screens are laid out and painted only near the viewport; the sizes are the measured
   heights per breakpoint (tools/seo/laser-browser-check.cjs prints them), "auto" keeps the real height once rendered */
.cv{content-visibility:auto;contain-intrinsic-size:auto 800px}
/* the content box only: the section padding (48 to 66 px each side, more on the CTA) comes on top */
.cv-how{contain-intrinsic-size:auto 2506px}.cv-ex{contain-intrinsic-size:auto 1597px}.cv-fmt{contain-intrinsic-size:auto 880px}
.cv-uses{contain-intrinsic-size:auto 933px}.cv-faq{contain-intrinsic-size:auto 737px}.cv-cta{contain-intrinsic-size:auto 430px}
@media (max-width:1179px){.cv-how{contain-intrinsic-size:auto 2353px}.cv-ex{contain-intrinsic-size:auto 1792px}.cv-fmt{contain-intrinsic-size:auto 974px}
  .cv-uses{contain-intrinsic-size:auto 1183px}.cv-faq{contain-intrinsic-size:auto 737px}.cv-cta{contain-intrinsic-size:auto 316px}}
@media (max-width:767px){.cv-how{contain-intrinsic-size:auto 2105px}.cv-ex{contain-intrinsic-size:auto 3293px}.cv-fmt{contain-intrinsic-size:auto 1842px}
  .cv-uses{contain-intrinsic-size:auto 1532px}.cv-faq{contain-intrinsic-size:auto 857px}.cv-cta{contain-intrinsic-size:auto 685px}}

/* reveal on scroll (motion allowed, JS on) */
html.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0) * 60ms)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none}}

/* S3 what you can create: one row per real kit (input, cutting sheet, assembled) and its story */
.cr-head{max-width:760px}
.cr-more{margin-top:22px;max-width:76ch;font-size:15px;line-height:1.6;color:var(--text-2)}
@media (max-width:639px){.cr-more{font-size:14.5px}}

/* S4 how it works: six cards with the real Studio panel of each step; tablets two columns, phones swipe */
.how-head{max-width:760px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3.2vw,44px)}
.step{display:flex;flex-direction:column;border-radius:var(--r-l);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.step-fig{position:relative;aspect-ratio:4/5;background:#0C1016;border-bottom:1px solid var(--line);overflow:hidden}
.step-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10px}
.step-cut .step-img{padding:12px 8px}
.step-b{padding:16px 18px 18px}
.step-n{font-family:var(--ff-d);font-weight:600;font-size:12px;letter-spacing:.08em;color:var(--cyan);font-variant-numeric:tabular-nums}
.step-b .h3{margin-top:4px;font-size:19px}
.step-b p:not(.step-n){margin-top:6px;color:var(--text-2);font-size:14.5px;line-height:1.55}
.how-dots{display:none}
.measure-slot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border-radius:var(--r-l);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.measure-slot video{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;background:#0B1016}
.measure-draft{display:flex;align-items:center;justify-content:center;gap:10px;min-height:150px;padding:16px;text-align:center;font-size:13px;line-height:1.45;color:var(--text-3);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px);box-shadow:inset 0 0 0 1px rgba(124,58,237,.4)}
.measure-draft svg{flex:none;width:20px;height:20px;color:var(--violet-text)}
.measure-slot figcaption{display:flex;flex-direction:column;gap:6px;justify-content:center;padding:14px 18px;font-size:14px;line-height:1.55;color:var(--text-2)}
.ms-k{font-family:var(--ff-d);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.how-note{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:16px 18px;border-radius:var(--r-l);background:rgba(0,229,255,.045);box-shadow:inset 0 0 0 1px rgba(0,229,255,.16);font-size:14.5px;color:var(--text-2);line-height:1.55}
.how-note svg{flex:none;width:18px;height:18px;color:var(--cyan);margin-top:2px}
@media (max-width:1023px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){
  .steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:0 var(--gut) 6px;scroll-padding:0 var(--gut);scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .step{scroll-snap-align:start}
  html.js .step.rv{opacity:1;transform:none}
  .how-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
  .how-dots i{width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:width .25s var(--ease),background .25s}
  .how-dots i.on{width:18px;background:var(--cyan)}
  .measure-slot{grid-template-columns:1fr}
  .measure-draft{min-height:110px}
}

/* S4b tutorial: the Academy lesson video and five short lines */
.tut{margin-top:clamp(36px,3.8vw,56px)}
.tut-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,4vw,56px);row-gap:24px;align-items:start;padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.vid{position:relative;border-radius:var(--r-l);overflow:hidden;background:#0B1016;box-shadow:inset 0 0 0 1px var(--line-2),0 30px 60px -36px rgba(0,0,0,.8);aspect-ratio:16/9}
.vid-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html:not(.js) .vid-poster,html:not(.js) .vid>video{display:none}
.vid video{position:relative;display:block;width:100%;height:100%;object-fit:cover;background:transparent}
.vid-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;border:0;padding:0;background:linear-gradient(180deg,rgba(7,9,14,0) 40%,rgba(7,9,14,.45));cursor:pointer;color:var(--ink-on-cyan)}
.vid-play[hidden]{display:none}
.vid-play svg{width:76px;height:76px;padding:20px 18px 20px 22px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 10px rgba(0,229,255,.18),0 18px 40px -12px rgba(0,229,255,.6);transition:transform .2s var(--ease)}
.vid-play:hover svg{transform:scale(1.06)}
.vid-cap{margin-top:12px;font-family:var(--ff-d);font-weight:600;font-size:15px;color:var(--text)}
.vid-cap span{display:block;margin-top:3px;font-family:var(--ff-b);font-weight:400;font-size:13.5px;color:var(--text-3)}
.tut-side .h2{font-size:clamp(24px,2.3vw,34px)}
.tut-list{list-style:none;counter-reset:tut;margin-top:18px;border-top:1px solid var(--line)}
.tut-list li{counter-increment:tut;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--text-2);line-height:1.55;font-size:14.5px}
.tut-list li::before{content:counter(tut,decimal-leading-zero);font-family:var(--ff-d);font-weight:500;font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums;padding-top:3px}
.academy{margin-top:16px}
.academy-k{font-family:var(--ff-d);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--text-2)}
.academy ul{list-style:none;margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 20px}
.academy li a{display:flex;align-items:center;gap:10px;padding:6px 0;text-decoration:none;font-weight:600;font-size:14px;line-height:1.35}
.academy li a svg{flex:none;width:26px;height:26px;padding:7px;border-radius:8px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--cyan)}
.academy li a:hover{color:#fff}
.academy-all{margin-top:8px;font-size:14px}
@media (max-width:1023px){.tut-grid{grid-template-columns:1fr}}

.kits{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);margin-top:clamp(28px,3.2vw,44px)}
.kit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,2.6vw,36px);align-items:center;padding:18px;border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.case-stage{font-family:var(--ff-d);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.kit-body{padding:0 6px 4px 0}
.kit-body .h3{margin-top:8px;font-size:clamp(21px,1.8vw,25px);letter-spacing:-.02em}
.case-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kit-body p:not(.case-stage):not(.case-tags){margin-top:10px;color:var(--text-2);line-height:1.6;font-size:15px}
.kit-body .link{margin-top:12px}
.tri{display:grid;grid-template-columns:minmax(0,.86fr) 18px minmax(0,1fr) 18px minmax(0,1fr);align-items:end}
.tri-cell{min-width:0}
.tri-img{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.tri-img img{width:100%;height:auto;display:block}
.tri-pic .tri-img{background:#fff;aspect-ratio:4/5}
.tri-pic .tri-img img{width:100%;height:100%;object-fit:contain}
.tri-brief .tri-img{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,229,255,.5)}
.brief-mini{position:relative;padding:12px 12px 10px 15px}
.brief-mini .bc-k{font-size:11px;gap:5px}.brief-mini .bc-k::before{width:5px;height:5px}
.brief-mini .bc-t{margin-top:5px;font-size:13px;line-height:1.18}
.brief-mini .bc-s{font-size:11px;letter-spacing:.08em}
.brief-mini .bc-l{margin-top:7px;gap:3px}
.brief-mini .bc-l li{font-size:11.5px;line-height:1.38;padding-left:9px}
.brief-mini .bc-l li::before{width:3px;height:3px}
.brief-mini .bc-n{margin-top:7px;padding-top:6px;font-size:11px}
.decal{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:14px;align-items:center;margin-top:14px;padding:12px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
.decal-img{border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
.decal-img img{width:100%;height:auto}
.decal figcaption{font-size:13.5px;line-height:1.5;color:var(--text-2)}
.decal-k{display:block;margin-bottom:3px;font-family:var(--ff-d);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.tri-mid .tri-img img,.tri-file .tri-img img{aspect-ratio:1/1;object-fit:cover}
.tri-brief{align-self:stretch;display:flex;flex-direction:column}
.tri-brief .tri-img{flex:1 1 auto}
.tri-file .tri-img{box-shadow:inset 0 0 0 1px var(--line-accent)}
.tri-cell figcaption{display:flex;align-items:flex-start;gap:6px;margin-top:8px;min-height:2.7em;font-size:12.5px;line-height:1.35;color:var(--text-2)}
.tri-n{font-family:var(--ff-d);font-weight:500;font-size:11px;letter-spacing:.06em;color:var(--text-3);font-variant-numeric:tabular-nums;padding-top:1px}
.tri-file figcaption{color:var(--text)}
.tri-arrow{display:grid;place-items:center;align-self:center;color:var(--cyan);margin-bottom:2.7em}
.tri-arrow svg{width:16px;height:16px}
.swatches{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px;padding:10px 12px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
.sw-k{font-size:12.5px;color:var(--text-3)}
.swatches ul{list-style:none;display:flex;flex-wrap:wrap;gap:5px}
.swatches li{width:18px;height:18px;border-radius:5px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
@media (max-width:1023px){.kit{grid-template-columns:1fr;gap:18px}.kit-body{padding:0 4px 4px}}
@media (max-width:639px){
  .kit{padding:14px;gap:14px}
  .decal{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:12px}.decal figcaption{font-size:13px}
  /* phones: the input on its own row at full width (readable), the sheet and the kit side by side under it */
  .tri{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 10px;align-items:start}
  .tri-ref{grid-column:1/-1}
  .tri-brief{align-self:auto}
  .tri-pic .tri-img{aspect-ratio:16/11}
  .tri-arrow{display:none}
  .tri-cell figcaption{font-size:12px;gap:5px;min-height:0}
}

/* S6 output formats: the real cut file of the hero's sheet 2 on the left (it stays in view), what each file is for on the right */
.fmt-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,4vw,64px);row-gap:32px;align-items:start;margin-top:clamp(32px,3.6vw,48px)}
.fmt-left{position:sticky;top:calc(var(--nav-h) + 28px);display:flex;flex-direction:column;gap:20px}
.fmt-shot{position:relative;border-radius:var(--r-xl);background:#0B1016;box-shadow:inset 0 0 0 1px var(--line-2),0 30px 60px -36px rgba(0,0,0,.8);overflow:hidden}
.sheet-img{position:relative;margin:14px 14px 0;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 18px 40px -24px rgba(0,0,0,.9)}
.sheet-img img{display:block;width:100%;height:auto}
.sh-call{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);pointer-events:none}
.sh-call i{position:absolute;inset:0;border-radius:4px;border:1.5px dashed rgba(0,150,180,.9);background:rgba(0,229,255,.06)}
.sh-call b{position:absolute;left:0;bottom:calc(100% + 4px);padding:2px 7px;border-radius:5px;background:#07090E;color:#fff;font-family:var(--ff-d);font-weight:600;font-size:11px;letter-spacing:.04em;white-space:nowrap}
.sh-call b:empty{display:none}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 18px 0}
.legend li{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-d);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.legend li::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--c)}
.lg-cut{--c:#FF3B3B}.lg-score{--c:#2FBF4A}.lg-engrave{--c:#4D6BFF}
.legend .lg-engrave::before{height:9px;width:12px;border-radius:2px}
.fmt-shot figcaption{padding:12px 18px 16px;font-size:13.5px;line-height:1.55;color:var(--text-3)}
.fmt-blocks{display:flex;flex-direction:column;gap:20px}
.fmt-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fmt-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--text-2);line-height:1.4}
.fmt-list li svg{flex:none;width:16px;height:16px;color:var(--text-3)}
.fmt-list .ext{flex:none;min-width:44px;font-family:var(--ff-d);font-weight:600;font-size:12px;letter-spacing:.08em;color:var(--cyan)}
.fmt-list .fmt-sup{grid-column:1/-1;box-shadow:inset 0 0 0 1px var(--line-accent)}
.fmt-block p{margin-top:8px;color:var(--text-2);line-height:1.6}
.fmt-colour{padding:14px 16px;border-radius:var(--r);background:var(--violet-wash);box-shadow:inset 0 0 0 1px var(--violet-line);color:var(--text);font-size:14.5px;line-height:1.55}
.fmt-list .ext{min-width:40px}
.review-k{font-family:var(--ff-d);font-weight:600;font-size:17px}
.review{margin-top:10px;display:flex;flex-direction:column;gap:6px;list-style:none;counter-reset:rv}
.review li{counter-increment:rv;padding:9px 12px 9px 44px;position:relative;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2);font-size:14.5px;line-height:1.5}
.review li::before{content:counter(rv);position:absolute;left:12px;top:8px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line-2);font-family:var(--ff-d);font-weight:600;font-size:12px;color:var(--text)}
@media (max-width:1023px){.fmt-grid{grid-template-columns:1fr}.fmt-left{position:relative;top:0}}
@media (max-width:479px){.sheet-img{margin:10px 10px 0}.sh-call b{font-size:9.5px;padding:1px 5px}.legend{padding:10px 14px 0}}
@media (max-width:479px){.fmt-list li{padding:8px 10px;font-size:13px;gap:8px}.fmt-list li svg{display:none}.fmt-list .ext{min-width:38px}.review li{font-size:14px}}

/* S7 use cases: bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(180px,auto);gap:16px;margin-top:clamp(28px,3.2vw,44px)}
.tile{position:relative;border-radius:var(--r-xl);padding:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;display:flex;flex-direction:column}
.tile .h3{font-size:21px}
.tile p{margin-top:10px;color:var(--text-2);font-size:15px;line-height:1.6;max-width:46ch}
.tile .link{margin-top:16px;align-self:flex-start}
.tile-k{font-family:var(--ff-d);font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.t-paint{grid-column:1/span 6;padding:0;background:var(--bg);min-height:420px;justify-content:flex-end}
.t-paint img{position:absolute;left:0;right:0;top:0;width:100%;height:64%;object-fit:contain;object-position:50% 20%;transform:scale(1.04);transition:transform .9s var(--ease)}
.t-paint.in img,html:not(.js) .t-paint img{transform:none}
.t-paint::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,14,0) 52%,rgba(7,9,14,.9) 70%,var(--bg) 78%)}
.t-paint .tile-in{position:relative;z-index:1;padding:26px}
.tile-note{font-size:13px!important;color:var(--text-3)!important}
.tile-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 0 16px;border-radius:14px;background:rgba(0,229,255,.06);box-shadow:inset 0 0 0 1px rgba(0,229,255,.22);color:var(--cyan)}
.tile-icon svg{width:26px;height:26px}
.t-s1{grid-column:7/span 3}
.t-s2{grid-column:10/span 3}
.t-s3{grid-column:1/span 4}
.t-etsy{grid-column:5/span 8;flex-direction:row;align-items:stretch;gap:24px;padding:24px 28px;background:linear-gradient(135deg,rgba(0,229,255,.06),rgba(124,58,237,.08));box-shadow:inset 0 0 0 1px var(--line-2)}
.tile-photo{position:relative;flex:0 0 42%;border-radius:16px;overflow:hidden;background:#000;min-height:200px}
.tile-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.photo-note{position:absolute;left:8px;right:8px;bottom:8px;padding:5px 8px;border-radius:7px;background:rgba(7,9,14,.82);font-size:11.5px;line-height:1.35;color:var(--text-2)}
.t-etsy .tile-main{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:8px 0}
.t-etsy .tile-links{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:12px}
.t-etsy .tile-links .link{margin-top:0}
@media (max-width:1179px){.t-paint{grid-column:1/span 12}.t-s1{grid-column:1/span 6}.t-s2{grid-column:7/span 6}.t-s3{grid-column:1/span 5}.t-etsy{grid-column:6/span 7;flex-direction:column}.tile-photo{flex:none;aspect-ratio:5/4}}
@media (max-width:1023px){.bento{grid-template-columns:1fr}.tile,.t-paint,.t-s1,.t-s2,.t-s3,.t-etsy{grid-column:1/-1;grid-row:auto}.t-paint{min-height:0;aspect-ratio:1/1}.t-etsy{padding:16px}}
@media (min-width:640px) and (max-width:1023px){.t-s1,.t-s2,.t-s3{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;align-items:start}.t-s1 .tile-icon,.t-s2 .tile-icon,.t-s3 .tile-icon{grid-row:1/span 3;margin:0}}
@media (max-width:767px){.tile{padding:18px}.t-paint{padding:0;aspect-ratio:auto;min-height:420px}.t-paint .tile-in{padding:18px}
  .bento{grid-auto-rows:auto}
  .t-paint{min-height:0}.t-paint img{position:relative;height:auto;aspect-ratio:5/4;object-fit:contain;object-position:50% 50%;transform:none}
  .t-paint::after{display:none}.t-paint .tile-in{padding:0 18px 18px}
  .t-s1,.t-s2,.t-s3{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start}
  .t-s1 .tile-icon,.t-s2 .tile-icon,.t-s3 .tile-icon{grid-row:1/span 3;width:44px;height:44px;margin:0}
  .t-s1 p,.t-s2 p,.t-s3 p{margin-top:6px;font-size:14.5px}.tile .h3{font-size:19px}
  .tile-photo{aspect-ratio:2/1}}

/* S9 FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;row-gap:28px}
.faq-head{grid-column:1/span 4;position:sticky;top:calc(var(--nav-h) + 32px)}
.faq-list{grid-column:6/span 7;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;min-height:44px;
  font-family:var(--ff-d);font-weight:600;font-size:18px;letter-spacing:-.01em;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:9px;height:9px;margin-right:6px;border-right:1.6px solid var(--text-3);border-bottom:1.6px solid var(--text-3);transform:translateY(-3px) rotate(45deg);transition:transform .18s var(--ease)}
.faq-list details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.faq-list summary:hover::after{border-color:var(--text)}
.faq-list details p{padding:0 0 20px;color:var(--text-2);line-height:1.7;max-width:68ch}
@media (max-width:1023px){.faq-head,.faq-list{grid-column:1/-1}.faq-head{position:relative;top:0}}
@media (max-width:767px){.faq-list summary{font-size:16.5px;padding:16px 0}}

/* S10 CTA: a colour collage of the gallery models */
.cta{position:relative;overflow:hidden;padding:clamp(56px,6vw,88px) 0;min-height:420px;display:flex;align-items:center;border-top:1px solid var(--line)}
.cta-collage{position:absolute;right:max(-20px,calc((100vw - 1560px) / 2));top:50%;width:min(720px,54vw);aspect-ratio:6/5;transform:translateY(-50%);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
.cl{position:absolute;width:40%;aspect-ratio:1/1;transition:transform 1.2s var(--ease)}
.cl img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.cl-1{left:30%;top:2%;width:44%}
.cl-2{left:4%;top:28%}
.cl-3{left:58%;top:40%;width:42%}
.cl-4{left:28%;top:56%;width:36%}
.cl-5{left:68%;top:0;width:30%}
.cta.in .cl,html:not(.js) .cl{transform:none}
html.js .cta:not(.in) .cl{transform:translateY(14px) scale(.98)}
.cta-in{position:relative;z-index:1;max-width:560px}
.cta-in .h2{max-width:14ch}
.cta-in .lead{margin-top:16px}
.cta-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:28px}
.cta-in .micro{margin-top:14px}
.about{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--text-3);line-height:1.6;max-width:56ch}
.more{border-top:1px solid var(--line);padding:26px 0}
.more-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px}
.more-k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-right:6px}
.more ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 22px}
.more a{display:inline-block;padding:10px 0;color:var(--text-2);text-decoration:none;font-weight:500;font-size:15px}
.more a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}
@media (max-width:767px){
  .cta{flex-direction:column;align-items:stretch;padding:0 0 64px;min-height:0}
  .cta-collage{position:relative;right:auto;top:auto;width:100%;transform:none;aspect-ratio:6/4.4;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 62%,transparent 100%)}
  .cta-in{margin-top:-36px}
}

/* footer */
.foot{border-top:1px solid var(--line);padding:30px 0 40px;font-size:14px;color:var(--text-3)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot a{color:var(--text-2);text-decoration:none;display:inline-block;padding:8px 0}
.foot a:hover{color:var(--text)}
.foot p{padding:8px 0;max-width:64ch}

/* this page: the open lid holds still (no drag hint); the two toggles share a row */
.hero.lidopen .hud-hint,.hero.lidopen .hud-pause{opacity:0}
.hero-acts .toggles{flex:0 1 auto}
@media (max-width:767px){
  .hero-acts .toggles{flex:1 1 100%;gap:8px}
  .hero-acts .toggles .b{flex:1 1 0;min-width:0;padding:0 10px}
  .brief-card{padding:10px 11px 8px 14px;border-radius:10px}
  .brief-card .bc-x{display:none}
  .brief-card .bc-t{font-size:13.5px}.brief-card .bc-l li{font-size:10.5px}.brief-card .bc-n{font-size:9.5px}
}
/* before the viewer runs, the brief card already lies where the viewer will put it (the poster's own box: --cx..--ch,
   --ov, the frame box insets), so the first paint shows the sheets with the brief on them */
@supports (width:1cqw){
  html.js .viewer:not(.ready):not(.static) .brief-card{opacity:1;visibility:visible;
    --aw:calc(100cqw - var(--fl) - var(--fr));--ah:calc(100cqh - var(--ft) - var(--fb));
    --d:min(calc(var(--aw) / (var(--cw) * var(--ov))), calc(var(--ah) / var(--ch)));
    width:clamp(220px, calc(var(--d) * var(--bw)), 300px);
    transform:translate(calc(var(--fl) + (var(--aw) - var(--cw) * var(--d)) / 2 - var(--cx) * var(--d) + var(--bx) * var(--d)), calc(var(--ft) + (var(--ah) - var(--ch) * var(--d)) / 2 - var(--cy) * var(--d) + var(--by) * var(--d))) translate(-50%,-50%) rotate(var(--br))}
  @media (max-width:767px){html.js .viewer:not(.ready):not(.static) .brief-card{width:clamp(184px, calc(var(--d) * .56), 232px)}}
}
.viewer.static .brief-card{display:none}
html:not(.js) .toggles{display:none}
.cl{mix-blend-mode:lighten}

/* LANGUAGE VERSIONS (tools/seo/landing-i18n.mjs, 5 Oct 2026): the latin-ext glyphs of the same font releases for Czech, declared
   after the latin faces and limited by unicode-range, so a browser downloads them only for a page that uses such a
   letter (the English page loads nothing new); the system fonts and line breaking of Japanese and Korean; the
   footer language switcher. */
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin-ext-wght.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-ext-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
html:lang(ja){--ff-d:"Space Grotesk","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;--ff-b:"Inter","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans JP",sans-serif}
html:lang(ko){--ff-d:"Space Grotesk","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;--ff-b:"Inter","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
html:lang(ja) body,html:lang(ko) body{line-height:1.75}
html:lang(ja) body{line-break:strict;overflow-wrap:anywhere}
/* Japanese headings break between phrases, not inside a word (タイタ|ン). Chrome 119+; elsewhere the usual breaks */
html:lang(ja) :is(h1,h2,h3){word-break:auto-phrase}
html:lang(ko) body{word-break:keep-all;overflow-wrap:anywhere}
html:lang(ja) :is(h1,h2,h3),html:lang(ko) :is(h1,h2,h3){letter-spacing:0;line-height:1.3}
.foot-lang a[aria-current]{color:var(--text)}