/* Printara AI Mold Maker landing page (/ai-mold-maker/).
   Page-scoped: does not load /css/style.css. Same tokens and section components as the AI Laser Cut Generator, AI 3D
   Generator and AI Diorama Generator landing pages, so all four read as one family: dark field, cyan + violet, Space
   Grotesk headlines, Inter body. Own parts: the casting film on the stage with its six chapters beside it (each with a
   real frame as its thumbnail and a progress bar), the film button (play, pause, replay), the pins for the spout, the
   telltale riser and the fill port, the dimension rails, the eight mold types with their diagrams and server prices,
   the "where it is built" card, the real example with its report, and the labelled print files. */
@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}
.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) .hud-hint,html:not(.js) .hud-mid,html:not(.js) .hud-pause{display:none}

.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}
@media (min-width:900px){html.js .state-chip{display:inline-flex}}
.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}
.ro-v[hidden]{display:none}
.ro-v span+span::before{content:"\0B7";margin:0 7px;color:var(--text-3)}

/* the chapters beside the stage: shell, silicone, master out, turned over, resin, the cast */
.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::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, chapters 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}
  .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 .toggles,.hero-acts .filmb{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}}

.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}
.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)}
}

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

.case-stage{font-family:var(--ff-d);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.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}

/* S6 output formats: the print files of the example 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}
.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){.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)}
.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-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 casting film, the mold types, the example, the print files ================= */
/* the film button: play, pause, replay share one button; the state picks the icon */
.filmb{min-width:178px}
.filmb svg{display:none}
.filmb[hidden]{display:none}
.filmb[data-state="play"] .i-play,.filmb[data-state="pause"] .i-pause,.filmb[data-state="replay"] .i-replay{display:block}
.hero-acts .toggles{flex:0 1 auto}
html:not(.js) .toggles{display:none}

/* the state chip: the chapter on the stage, its dot in the chapter's colour */
.hero[data-story="build"] .state-chip::before{background:#B8C2CC}
.hero[data-story="silicone"] .state-chip::before,.hero[data-story="open"] .state-chip::before{background:#2FD6C3}
.hero[data-story="turn"] .state-chip::before{background:var(--violet-text)}
.hero[data-story="resin"] .state-chip::before{background:#FFB347}
.hero[data-story="release"] .state-chip::before{background:#EFE6D2;box-shadow:0 0 0 3px rgba(239,230,210,.16)}
/* pins: the spout, the riser and the fill port (teal or amber by the liquid), the parts of the open mold (cyan) */
.pin{pointer-events:none;--dot:12px}
.pin .pin-dot{font-size:0}
.pin.anc .pin-dot{background:#2FD6C3;box-shadow:0 0 0 3px rgba(47,214,195,.24),0 2px 8px rgba(0,0,0,.6)}
.pin.anc.amber .pin-dot{background:#FFB347;box-shadow:0 0 0 3px rgba(255,179,71,.24),0 2px 8px rgba(0,0,0,.6)}
.pin.part .pin-dot{background:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.2),0 2px 8px rgba(0,0,0,.6)}
.readout .ro-1{color:var(--text)}
.readout .ro-x{color:var(--text-2)}

/* the chapter thumbnails: a real frame of the chapter, zoomed onto its subject by the generator */
.s-thumb img{transform-origin:50% 50%}
@media (min-width:1180px){.srow,.sbtn{min-height:70px;grid-template-columns:58px minmax(0,1fr)}.s-thumb{width:58px;height:58px}}
@media (min-width:1180px) and (max-height:860px){.story{padding-top:clamp(18px,4vh,40px)}.srow,.sbtn{min-height:60px;grid-template-columns:48px minmax(0,1fr)}.s-thumb{width:48px;height:48px}.s-m{display:none}}
/* tablets: the six chapters as a two-column grid, so they fit the first screen */
@media (min-width:900px) and (max-width:1179px){.story-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 6px}
  .srow,.sbtn{grid-template-columns:40px minmax(0,1fr);min-height:50px}.s-thumb{width:40px;height:40px}.s-t{font-size:13.5px}}
/* the chapter on the stage shows how far it has played */
.sbtn[aria-current] .s-prog{opacity:1}
.s-prog i{transform:scaleX(var(--p,0))}

/* S3 the eight mold types */
.kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(28px,3.2vw,44px)}
.kind{display:flex;flex-direction:column;padding:18px 18px 20px;border-radius:var(--r-l);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.kind-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.kind-dg{flex:none;width:72px;height:54px;padding:6px 8px;border-radius:12px;background:#0B1016;box-shadow:inset 0 0 0 1px var(--line-2);overflow:visible}
.kind-dg .dp{fill:none;stroke:#B8C2CC;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.kind-dg .dm{fill:#5E6878;stroke:none}
.kind-dg .ds{fill:rgba(47,214,195,.34);stroke:none}
.kind-dg .dz{fill:none;stroke:#FFB347;stroke-width:1.6;stroke-dasharray:2.2 2;stroke-linecap:round}
.kind-dg .dc{fill:rgba(184,194,204,.18);stroke:#B8C2CC;stroke-width:1.4;stroke-dasharray:3 2}
.kind-price{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;font-family:var(--ff-d);font-weight:500;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.25}
.kp-free{color:var(--cyan)}
.kp-srv{color:var(--text-3)}
.kind .h3{font-size:18.5px}
.kind-t{margin-top:8px;color:var(--text-2);font-size:14.5px;line-height:1.55}
.kind-m{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:6px}
.kind-m div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;font-size:13.5px;line-height:1.45;padding-top:6px;border-top:1px solid var(--line)}
.kind-m dt{font-family:var(--ff-d);font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding-top:1px}
.kind-m dd{margin:0;color:var(--text)}
.kind-dots{display:none}
@media (max-width:1179px){.kinds{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones: the eight types are a swipe row with dots, like the steps (a column of eight cards was about 2,700 px) */
@media (max-width:639px){
  .kinds{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;align-items:stretch;
    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}
  .kinds::-webkit-scrollbar{display:none}
  .kind{padding:16px;scroll-snap-align:start}
  .kind-t{font-size:14px}
  html.js .kind.rv{opacity:1;transform:none}
  .kind-dots{display:flex;justify-content:center;gap:7px;margin-top:12px}
  .kind-dots i{width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:width .25s var(--ease),background .25s}
  .kind-dots i.on{width:18px;background:var(--cyan)}
}

/* S4 how it works: the "where" card stands in for a panel */
.where{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px 18px}
.where-row{padding:14px 16px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.where-row.on{background:rgba(0,229,255,.06);box-shadow:inset 0 0 0 1.5px rgba(0,229,255,.5)}
.where-t{font-family:var(--ff-d);font-weight:600;font-size:16px;color:var(--text)}
.where-v{margin-top:2px;font-family:var(--ff-d);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.where-row:not(.on) .where-v{color:var(--text-2)}
.where-d{margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--text-2)}
.where-n{text-align:center;font-family:var(--ff-d);font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}

/* S5 the real example: two stills of the mold, its report as a list */
.case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,2.6vw,36px);align-items:start;margin-top:clamp(28px,3.2vw,44px);padding:18px;border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.case-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ex-img{border-radius:var(--r);overflow:hidden;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.ex-img img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.ex-fig figcaption{display:flex;align-items:flex-start;gap:6px;margin-top:8px;font-size:12.5px;line-height:1.35;color:var(--text-2)}
.case-body{padding:4px 6px 4px 0}
.case-body .h3{margin-top:8px;font-size:clamp(21px,1.8vw,25px);letter-spacing:-.02em}
.case-facts{margin-top:14px;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.case-facts div{display:grid;grid-template-columns:minmax(118px,.42fr) minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45}
.case-facts dt{color:var(--text-3)}
.case-facts dd{margin:0;color:var(--text);font-variant-numeric:tabular-nums}
.case-text{margin-top:16px;color:var(--text-2);line-height:1.6;font-size:15px;max-width:62ch}
.case-note{margin-top:10px;font-size:13px;line-height:1.5;color:var(--text-3)}
.ex-a .ex-img img{transform:scale(1.04);transform-origin:50% 54%}
@media (max-width:1023px){.case{grid-template-columns:1fr;gap:18px}.case-body{padding:0 4px 4px}}
@media (max-width:639px){.case{padding:14px}.case-figs{gap:10px}.case-facts div{grid-template-columns:1fr;gap:2px}}

/* S6 output formats: the print files, labelled */
.ps-img{position:relative;background:var(--bg)}
.ps-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 55%}
.ps-call{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:3px 8px;border-radius:7px;background:rgba(7,9,14,.86);box-shadow:inset 0 0 0 1px var(--line-2);
  font-family:var(--ff-d);font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);white-space:nowrap;pointer-events:none}
@media (max-width:479px){.ps-call{font-size:9.5px;padding:2px 6px}}

/* S8 tutorial: its own section (after the use cases) */
.cv-tut .tut-grid{padding-top:0;border-top:0}

/* S10: two stills in the collage */
/* S10: the closing words beside one still of the print files, feathered into the page */
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:24px}
.cta-art{position:relative;aspect-ratio:4/3;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%)}
.cta-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%;transform:scale(1.02);transition:transform 1.2s var(--ease)}
html.js .cta:not(.in) .cta-art img{transform:scale(1.05) translateY(10px)}
@media (max-width:767px){.cta-grid{grid-template-columns:1fr}.cta-art{order:-1;margin:0 -8px}}
/* S7: the main tile's still is the whole mold, so the tile is taller and the still smaller than on the other pages */
.t-paint{min-height:560px}
.t-paint img{height:58%;object-position:50% 30%}
@media (max-width:767px){.t-paint{min-height:0}.t-paint img{height:auto}}
@media (max-width:767px){.hero-acts .toggles{display:flex;flex:1 1 100%}.hero-acts .filmb{flex:1 1 auto;min-width:0}}
@media (max-width:639px){.fmt-list{grid-template-columns:1fr}}

/* this page's sections, measured per breakpoint (content box; tools/seo/mold-browser-check.cjs compares them with the real heights) */
.cv-kinds{contain-intrinsic-size:auto 1013px}.cv-how{contain-intrinsic-size:auto 1764px}.cv-ex{contain-intrinsic-size:auto 842px}.cv-fmt{contain-intrinsic-size:auto 892px}.cv-uses{contain-intrinsic-size:auto 1071px}.cv-tut{contain-intrinsic-size:auto 691px}.cv-faq{contain-intrinsic-size:auto 798px}.cv-cta{contain-intrinsic-size:auto 432px}
@media (max-width:1179px){.cv-kinds{contain-intrinsic-size:auto 1414px}.cv-how{contain-intrinsic-size:auto 1572px}.cv-ex{contain-intrinsic-size:auto 853px}.cv-fmt{contain-intrinsic-size:auto 991px}.cv-uses{contain-intrinsic-size:auto 1321px}.cv-tut{contain-intrinsic-size:auto 672px}.cv-faq{contain-intrinsic-size:auto 822px}.cv-cta{contain-intrinsic-size:auto 331px}}
@media (max-width:767px){.cv-kinds{contain-intrinsic-size:auto 728px}.cv-how{contain-intrinsic-size:auto 1069px}.cv-ex{contain-intrinsic-size:auto 1532px}.cv-fmt{contain-intrinsic-size:auto 1824px}.cv-uses{contain-intrinsic-size:auto 1628px}.cv-tut{contain-intrinsic-size:auto 1024px}.cv-faq{contain-intrinsic-size:auto 912px}.cv-cta{contain-intrinsic-size:auto 743px}}

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