/* Printara AI 3D Generator landing page (/ai-3d-generator/).
   Page-scoped: does not load /css/style.css. Same tokens and section components as the AI Diorama Generator page
   (ai-diorama-generator/assets/diorama-landing.css), so both read as one family: dark field, cyan + violet,
   Space Grotesk headlines, Inter body. Own parts: the picture-to-print steps beside the stage (with the tour progress),
   the state chip, the "Your picture" card label, the dimension rail, the "what you can create" cards with their
   pictures, the Studio panels in How it works and the picture, model, file triptychs. */
@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}
.explode{min-width:188px}
.explode[aria-pressed="true"] .b-meta{display:none}
.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 reference inset, the dimension rail, plain dots for the print setup */
.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}
.state-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet-text);transition:background .3s}
.hero[data-story="model"] .state-chip::before{background:var(--cyan)}
.hero[data-story="print"] .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}}
/* "Your picture" on the card of reveal frame 0: the viewer places it on the card's top-left corner (manifest reveal.card) */
.card-label{position:absolute;left:0;top:0;z-index:4;display:none;align-items:center;gap:7px;padding:6px 11px 6px 9px;border-radius:9px;background:rgba(7,9,14,.9);
  box-shadow:inset 0 0 0 1px rgba(0,229,255,.38),0 10px 24px -10px rgba(0,0,0,.8);font-family:var(--ff-d);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);
  white-space:nowrap;pointer-events:none;transform-origin:0 0;opacity:0;transition:opacity .3s var(--ease)}
.card-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet-text)}
html.js .card-label{display:inline-flex}
.card-label.on{opacity:1}
.state-chip{transition:box-shadow .3s,opacity .3s}
.hero.card-on .state-chip{opacity:0}
.ref-inset{position:absolute;z-index:4;left:calc(var(--fl) + 6px);bottom:calc(var(--fb) + 6px);width:72px;padding:0;border:0;border-radius:10px;background:var(--surface);cursor:pointer;
  box-shadow:0 0 0 1px var(--line-2),0 10px 26px -12px rgba(0,0,0,.8);overflow:hidden;transition:opacity .3s,transform .3s var(--ease);-webkit-tap-highlight-color:transparent}
.ref-inset[hidden]{display:none}
.ref-inset img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.ref-inset span{position:absolute;left:0;right:0;bottom:0;padding:3px 0 4px;background:linear-gradient(180deg,transparent,rgba(7,9,14,.86) 45%);font-family:var(--ff-d);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--text)}
.ref-inset:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--line-accent),0 12px 28px -12px rgba(0,0,0,.8)}
.hero[data-story="picture"] .ref-inset,.hero[data-story="print"] .ref-inset,.hero.playing .ref-inset{opacity:0;pointer-events:none;transform:scale(.94)}
.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}
.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}
.pins.static .pin{pointer-events:none;cursor:default;--dot:12px}
.pins.static .pin-dot{font-size:0;background:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.2),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:"\00B7";margin:0 7px;color:var(--text-3)}

/* the steps beside the stage: picture, generated model, print file */
.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-picture{height:76px}
.s-thumb.s-model img,.s-thumb.s-print img{transform:scale(1.3);object-position:50% 46%}
.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}
  .ref-inset{display:none}
}
@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}.s-thumb.s-picture{height:64px}
}

/* 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,.s-thumb.s-picture{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}
  .ref-inset{display:none}
  .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}
  .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,.s-thumb.s-picture{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}
  .ref-inset{width:84px}
}
@media (max-width:767px){
  :root{--nav-h:56px}
  .card-label{font-size:10.5px;padding:4px 8px 4px 7px;border-radius:7px}
  .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}
  .ref-inset{left:var(--gut);bottom:40px;width:56px;border-radius:9px}
  .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/ai3d-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 1970px}.cv-ex{contain-intrinsic-size:auto 820px}.cv-fmt{contain-intrinsic-size:auto 970px}
.cv-uses{contain-intrinsic-size:auto 893px}.cv-faq{contain-intrinsic-size:auto 614px}.cv-cta{contain-intrinsic-size:auto 382px}
@media (max-width:1179px){.cv-how{contain-intrinsic-size:auto 1908px}.cv-ex{contain-intrinsic-size:auto 786px}.cv-fmt{contain-intrinsic-size:auto 1023px}
  .cv-uses{contain-intrinsic-size:auto 1619px}.cv-faq{contain-intrinsic-size:auto 616px}.cv-cta{contain-intrinsic-size:auto 300px}}
@media (max-width:767px){.cv-how{contain-intrinsic-size:auto 2087px}.cv-ex{contain-intrinsic-size:auto 1265px}.cv-fmt{contain-intrinsic-size:auto 1505px}
  .cv-uses{contain-intrinsic-size:auto 1731px}.cv-faq{contain-intrinsic-size:auto 724px}.cv-cta{contain-intrinsic-size:auto 684px}}

/* 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 card per category; the picture it was made from fades in on hover or on its button */
.cr-head{max-width:760px}
.mk-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(26px,3vw,40px)}
.mk-fig{height:100%;display:flex;flex-direction:column;border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:box-shadow .3s}
.mk-fig:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.mk-stage{position:relative;aspect-ratio:4/3;background:var(--bg);overflow:hidden}
.mk-model,.mk-pic{position:absolute;inset:0;width:100%;height:100%;transition:opacity .45s var(--ease),transform .8s var(--ease)}
.mk-model{object-fit:contain}
.mk-pic{object-fit:contain;background:#CBCBCB;opacity:0;padding:0}
.mk-fig:hover .mk-model{transform:scale(1.03)}
@media (hover:hover){.mk-fig:hover .mk-pic{opacity:1}}
.mk-fig.show .mk-pic{opacity:1}
.mk-ref{position:absolute;right:16px;top:-74px;width:92px;padding:0;border:0;border-radius:11px;overflow:hidden;background:#fff;cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 16px 30px -14px rgba(0,0,0,.9);transform:rotate(2.5deg);transform-origin:100% 100%;transition:transform .35s var(--ease),box-shadow .2s;-webkit-tap-highlight-color:transparent}
.mk-ref:hover,.mk-fig.show .mk-ref{transform:rotate(0) scale(1.04);box-shadow:0 0 0 2px var(--cyan),0 16px 30px -14px rgba(0,0,0,.9)}
.mk-ref img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.mk-ref span{position:absolute;left:0;right:0;bottom:0;padding:12px 0 5px;background:linear-gradient(180deg,transparent,rgba(7,9,14,.84));font-family:var(--ff-d);font-weight:600;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;text-align:center;color:#fff}
.mk-cap{position:relative;padding:16px 124px 18px 18px;display:flex;flex-direction:column;gap:6px;min-height:104px}
.mk-k{font-family:var(--ff-d);font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.mk-cap .h3{font-size:19px}
.mk-facts{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.mk-facts li{padding:3px 8px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:12.5px;line-height:1.4;color:var(--text-2);white-space:nowrap}
.mk-dots,.mk-hint{display:none}
@media (max-width:1023px){.mk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
/* phones: the cards become a swipeable row, the next card peeks in, dots follow the scroll */
@media (max-width:639px){
  .mk-grid{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}
  .mk-grid::-webkit-scrollbar{display:none}
  .mk{scroll-snap-align:start}
  html.js .mk.rv{opacity:1;transform:none}
  .mk-cap{padding-right:108px}
  .mk-ref{width:80px;top:-64px}
  .mk-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
  .mk-dots i{width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:width .25s var(--ease),background .25s}
  .mk-dots i.on{width:18px;background:var(--cyan)}
  .mk-hint{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--text-3)}
  .mk-hint svg{width:16px;height:16px;color:var(--cyan)}
}

/* 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:2/1;background:#0B1016;border-bottom:1px solid var(--line);overflow:hidden}
.step-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.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}
.how-foot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;align-items:stretch;margin-top:16px}
.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-slot.is-text{display:flex;gap:12px;align-items:flex-start;padding:16px 18px}
.measure-slot.is-text svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--cyan)}
.measure-slot.is-text p{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.55;color:var(--text-2)}
.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;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))}.how-foot{grid-template-columns: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}
}

/* 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 video{display:block;width:100%;height:100%;object-fit:cover;background:#0B1016}
.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}}

/* S5 real examples: two cases side by side; each shows picture, model and file, then its story */
.ex-head{max-width:760px}
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,36px);margin-top:clamp(28px,3.2vw,44px);align-items:start}
.case2{display:flex;flex-direction:column;gap:18px;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)}
.case2-body{padding:0 4px 4px}
.case2-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}
.case2-body p:not(.case-stage):not(.case-tags){margin-top:10px;color:var(--text-2);line-height:1.6;font-size:15px}
.case2-body .link{margin-top:12px}
.tri{display:grid;grid-template-columns:minmax(0,.8fr) 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-ref .tri-img{background:#fff}
.tri-ref .tri-img img{aspect-ratio:4/5;object-fit:cover}
.tri-mid .tri-img img,.tri-file .tri-img img{aspect-ratio:1/1;object-fit:cover}
.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){.cases{grid-template-columns:1fr}}
@media (max-width:639px){
  .case2{padding:14px;gap:14px}
  .tri{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
  .tri-arrow{display:none}
  .tri-cell figcaption{font-size:11.5px;gap:5px}
}

/* S6 output formats: the real Export tab 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-shot{position:sticky;top:calc(var(--nav-h) + 28px);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}
.fmt-shot img{display:block;width:100%;height:auto;max-height:min(520px,calc(100vh - var(--nav-h) - 170px));object-fit:contain;padding:16px 16px 0;margin:0 auto}
.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}
.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-shot{position:relative;top:0;display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);align-items:center}.fmt-shot img{max-height:300px;padding:12px}.fmt-shot figcaption{padding:12px 16px 12px 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:70%;object-fit:cover;object-position:50% 28%;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) 44%,rgba(7,9,14,.92) 66%,var(--bg) 74%)}
.t-paint .tile-in{position:relative;z-index:1;padding:26px}
.tile-note{font-size:13px!important;color:var(--text-3)!important}
.tile-media{width:112px;height:112px;margin:-4px 0 14px -4px;border-radius:16px;overflow:hidden;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.tile-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.18)}
.t-fdm{grid-column:7/span 3}
.t-proto{grid-column:10/span 3}
.t-gift{grid-column:1/span 4}
.t-etsy{grid-column:5/span 8;flex-direction:row;align-items:stretch;gap:24px;padding:16px 24px 16px 16px;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-direction:column;gap:4px;margin-top:12px}
.t-etsy .tile-links .link{margin-top:0}
@media (max-width:1179px){.t-paint{grid-column:1/span 12}.t-fdm{grid-column:1/span 6}.t-proto{grid-column:7/span 6}.t-gift{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-fdm,.t-proto,.t-gift,.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-fdm,.t-proto,.t-gift{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:18px;align-items:start}.t-fdm .tile-media,.t-proto .tile-media,.t-gift .tile-media{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}
  .t-fdm,.t-proto,.t-gift{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:14px;align-items:start}
  .t-fdm .tile-media,.t-proto .tile-media,.t-gift .tile-media{grid-row:1/span 3;width:84px;height:84px;margin:0}
  .t-fdm p,.t-proto p,.t-gift p{margin-top:6px;font-size:14.5px}.tile .h3{font-size:19px}
  .tile-photo{aspect-ratio:2/1}.t-paint{min-height:380px}}

/* 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}
.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}

/* 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)}