/* ================= MOTION + MYNT CARD SYSTEM ================= */

/* scroll reveal: only below-the-fold elements are pre-hidden by JS */
.rv{transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.pre{opacity:0;transform:translateY(34px)}
.pz{will-change:transform}
.media img.pz,.door img.pz{transform:scale(1.07)}

/* gold progress rail, after the deck's vertical node line */
.rail{position:fixed;left:26px;top:50%;transform:translateY(-50%);height:min(60vh,520px);width:14px;z-index:40;display:none}
.rail::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--line)}
.rail .fill{position:absolute;left:6px;top:0;width:1px;background:linear-gradient(var(--gold-hi),var(--gold));height:0}
.rail button{position:absolute;left:0;width:13px;height:13px;border-radius:50%;border:1px solid var(--dim);background:var(--black);padding:0;cursor:pointer;transform:translateY(-50%);transition:all .3s}
.rail button.on{border-color:var(--gold);background:var(--gold);box-shadow:0 0 14px rgba(201,168,76,.6)}
.rail button span{position:absolute;left:22px;top:50%;transform:translateY(-50%);white-space:nowrap;font:500 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);opacity:0;pointer-events:none;transition:opacity .2s}
.rail button:hover span,.rail button:focus-visible span{opacity:1}
@media (min-width:1300px){.rail{display:block}}

/* hex motif from the MYNT decks */
.hex-bg{position:relative;isolation:isolate}
.hex-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0L56 16.2V48.5L28 64.7L0 48.5V16.2Z M28 64.7V97' fill='none' stroke='%23C9A84C' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(ellipse at 85% 25%,#000 0%,transparent 55%);mask-image:radial-gradient(ellipse at 85% 25%,#000 0%,transparent 55%)}

/* pointer spotlight */
.spot{position:relative;isolation:isolate}
.spot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(640px circle at var(--mx,50%) var(--my,30%),rgba(201,168,76,.07),transparent 60%)}

/* ---------- the MYNT card (pure CSS 3D) ---------- */
.mcard{position:relative;width:340px;max-width:100%;aspect-ratio:85.6/54;transform-style:preserve-3d;--gx:50%;--ga:.35}
.mcard .slice,.mcard .face{position:absolute;inset:0;border-radius:3.7%/5.9%}
.mcard .slice{background:linear-gradient(90deg,#3b3a37,#9a978f 50%,#3b3a37)}
.mcard .face{backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mcard .front{transform:translateZ(2px)}
.mcard .back{transform:rotateY(180deg) translateZ(2px)}
.mc-metal,.mc-brush,.mc-glare{position:absolute;inset:0}
.mc-brush{background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,rgba(0,0,0,.06) 1px 2px,transparent 2px 3px);mix-blend-mode:overlay}
.mc-glare{background:linear-gradient(105deg,transparent calc(var(--gx) - 26%),rgba(255,255,255,var(--ga)) var(--gx),transparent calc(var(--gx) + 26%));mix-blend-mode:soft-light;pointer-events:none}
.mc-logo{position:absolute;right:8%;top:12%;width:22%;aspect-ratio:772/260;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background:var(--knock)}
.mc-chip{position:absolute;left:10.5%;top:36%;width:13.5%;aspect-ratio:1.3/1;border-radius:14%/18%;background:linear-gradient(135deg,#7d6526,#e9d08a 35%,#b5933f 60%,#f3e3ad 85%,#8a6e2c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.mc-chip svg{position:absolute;inset:0;width:100%;height:100%}
.mc-nfc{position:absolute;left:27%;top:40%;width:5.5%;opacity:.6}
.mc-name{position:absolute;left:10.5%;bottom:13%;font:400 clamp(7px,1.15em,15px)/1 var(--display);letter-spacing:.22em;color:transparent;background:var(--knock);-webkit-background-clip:text;background-clip:text}
.mc-stripe{position:absolute;left:0;right:0;top:11%;height:17%;background:linear-gradient(#0b0b0b,#1c1c1c 50%,#0b0b0b)}
.mc-sig{position:absolute;left:7%;top:38%;width:48%;height:10%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 4px,rgba(255,255,255,.06) 4px 8px);border-radius:2px}
.mc-mono{position:absolute;right:8%;bottom:12%;width:9%;opacity:.7}
.mc-fine{position:absolute;left:7%;bottom:12%;font:500 7px/1 var(--body);letter-spacing:.3em;color:rgba(255,255,255,.55)}
.mcard.light .mc-mono{filter:brightness(0);opacity:.5}
.mcard.light .mc-nfc{filter:invert(1);opacity:.45}
.mcard.light .mc-fine{color:rgba(0,0,0,.5)}
[data-finish="black"] .mc-metal{background:linear-gradient(120deg,#0d0d0d,#2a2a29 35%,#121212 55%,#303030 78%,#111)}
[data-finish="steel"] .mc-metal{background:linear-gradient(115deg,#7f8489,#dde1e4 28%,#80868b 52%,#cfd3d6 78%,#8b9095)}
[data-finish="gold"] .mc-metal{background:linear-gradient(115deg,#7a5c1d,#e9cf83 30%,#9a7b2f 52%,#f3e1a6 76%,#8a6a24)}
[data-finish="rose"] .mc-metal{background:linear-gradient(115deg,#8f6656,#ecc3b1 30%,#a7796a 55%,#f2d3c6 78%,#946a5b)}
[data-finish="green"] .mc-metal{background:linear-gradient(115deg,#0d3b33,#2a9d8f 35%,#114a40 58%,#3fb3a4 80%,#0e3a33)}
[data-finish="mirror"] .mc-metal{background:linear-gradient(100deg,#2b2d30 0%,#f4f6f8 18%,#55595e 30%,#fdfdfd 46%,#3c3f43 60%,#e9ecef 78%,#30333a 100%)}
[data-finish="mirror"] .mc-brush{display:none}
[data-finish="carbon"] .mc-metal{background:repeating-linear-gradient(45deg,#161616 0 4px,#232323 4px 8px),#1a1a1a}
[data-finish="carbon"] .mc-brush{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 4px,transparent 4px 8px);mix-blend-mode:normal}
[data-finish="veneer"] .mc-metal{background:linear-gradient(120deg,#5d6166,#a4a8ad 40%,#6c7075 70%,#9a9ea3)}
[data-finish="veneer"] .slice{background:#e8e6df}

/* ---------- home hero: scroll-spun card ---------- */
.scrolly{position:relative;height:165vh}
.scrolly .stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 66px);height:calc(100vh - 66px);height:calc(100svh - 66px);overflow:hidden;display:grid;align-items:center;isolation:isolate}
.scrolly .beam{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 30% 75% at 72% -12%,rgba(226,200,120,.22),transparent 70%),
  radial-gradient(ellipse 34% 10% at 72% 84%,rgba(201,168,76,.18),transparent 70%),
  var(--black)}
.scrolly .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.scrolly .grid>*{min-width:0}
.scrolly h1{margin-top:22px}
.scrolly .lede{margin-top:24px}
.scrolly .btns{margin-top:32px}
.card-stage{position:relative;perspective:1400px;display:grid;place-items:center;min-height:420px}
.card-stage .mcard{width:min(470px,92%)}
.card-shadow{position:absolute;left:50%;top:50%;width:min(380px,70%);height:44px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.9),transparent 70%);filter:blur(12px);transform:translate(-50%,170px)}
.mantra{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:40px;font:400 clamp(22px,2.6vw,34px)/1 var(--display);letter-spacing:.08em}
.mantra span{color:var(--dim);transition:color .5s}
.mantra span.on{color:var(--gold-hi)}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:500 11px/1 var(--body);letter-spacing:.3em;color:var(--dim);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .4s}
.scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- sound table ---------- */
.table{position:relative;border-radius:var(--r);overflow:hidden;background:
  radial-gradient(ellipse 60% 80% at 50% 0%,rgba(226,200,120,.13),transparent 70%),
  linear-gradient(#151514,#0b0b0b);border:1px solid var(--line);padding:clamp(18px,3vw,30px);display:grid;gap:14px}
.table .over{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.table .over p{font:500 12px/1.3 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi)}
.table .lay{display:grid;grid-template-columns:1fr 1fr;gap:18px;perspective:900px;min-height:230px;align-items:center}
.dropper{background:none;border:0;padding:16px 6px 0;cursor:pointer;display:grid;justify-items:center;gap:18px;color:var(--fg);font:inherit;border-radius:12px}
.dropper .tilt{transform:rotateX(56deg) rotateZ(-10deg);transform-style:preserve-3d;width:100%;display:grid;justify-items:center}
.dropper.mynt .tilt{transform:rotateX(56deg) rotateZ(9deg)}
.dropper .mcard{width:min(230px,100%)}
.dropper .lbl{display:grid;gap:4px;text-align:center}
.dropper .lbl b{font:400 24px/1 var(--display);letter-spacing:.06em}
.dropper .lbl span{font-size:13px;color:var(--muted)}
.dropper:hover .mcard{filter:brightness(1.15)}
.dropper .mcard.drop{animation:drop .62s cubic-bezier(.3,0,.6,1)}
@keyframes drop{0%{transform:translateZ(130px) rotateX(-12deg)}32%{transform:translateZ(0) rotateX(0)}46%{transform:translateZ(16px) rotateX(2deg)}56%{transform:translateZ(0)}64%{transform:translateZ(6px)}70%{transform:translateZ(0)}75%{transform:translateZ(2px)}79%,100%{transform:translateZ(0)}}
.tiersel{display:flex;gap:6px;flex-wrap:wrap}
.tiersel .chip{padding:8px 12px;font-size:12.5px}
.wave{height:90px;margin-top:0;background:rgba(0,0,0,.35)}

/* ---------- exploded layers (production) ---------- */
.explode{position:relative;height:190vh}
.explode .stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 66px);height:calc(100vh - 66px);height:calc(100svh - 66px);display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.explode .stage>*{min-width:0}
.stack{perspective:1600px;display:grid;place-items:center;height:100%}
.stack .rig{position:relative;width:min(420px,80%);aspect-ratio:85.6/54;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-30deg)}
.stack .ly{position:absolute;inset:0;border-radius:3.7%/5.9%;transform-style:preserve-3d;transition:box-shadow .3s}
.stack .ly.on{box-shadow:0 0 0 2px var(--gold),0 0 34px rgba(201,168,76,.5)}
.ly.l1{background:linear-gradient(115deg,rgba(255,255,255,.06),rgba(255,255,255,.24) 50%,rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.35)}
.ly.l2{background:linear-gradient(115deg,#1b1b1b,#3a3a39 40%,#151515 70%,#333)}
.ly.l3,.ly.l6{background:rgba(226,200,120,.18);border:1px dashed rgba(226,200,120,.55)}
.ly.l4{background:linear-gradient(120deg,#2b2a26,#4a463d)}
.ly.l5{background:#163631;border:1px solid #2A9D8F}
.ly.l5::after{content:"";position:absolute;inset:12%;border:2px solid rgba(201,168,76,.85);border-radius:6%;box-shadow:inset 0 0 0 6px rgba(201,168,76,.12)}
.ly.l7{background:linear-gradient(115deg,#7f8489,#dde1e4 28%,#80868b 52%,#cfd3d6 78%,#8b9095)}
.ly .chip-dot{position:absolute;left:10.5%;top:36%;width:13.5%;aspect-ratio:1.3/1;border-radius:14%/18%;background:linear-gradient(135deg,#7d6526,#e9d08a 40%,#b5933f)}
.layer-list{list-style:none;margin:24px 0 0;padding:0;display:grid}
.layer-list li{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--dim);transition:color .3s}
.layer-list li b{display:block;font:400 19px/1.2 var(--display);letter-spacing:.06em;color:inherit}
.layer-list li span{font-size:14px}
.layer-list li em{font-style:normal;font:400 16px/1.3 var(--display);color:var(--dim)}
.layer-list li.on{color:var(--fg)}
.layer-list li.on b,.layer-list li.on em{color:var(--gold-hi)}

/* finish configurator */
.config{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.config>*{min-width:0}
.config .card-stage{min-height:360px}
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sw-b{width:46px;height:46px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:transform .2s}
.sw-b:hover{transform:scale(1.08)}
.sw-b[aria-pressed="true"]{border-color:var(--gold);transform:scale(1.12)}
.finish-name{font:400 34px/1 var(--display);letter-spacing:.06em;margin-top:22px;color:var(--gold-hi)}

/* tiers */
.tilt-card{transform-style:preserve-3d;transition:transform .25s ease-out}
.tier{perspective:900px}
.tier .mcard{width:100%;margin-bottom:10px}
.tier button.hear{justify-self:start;background:none;border:1px solid var(--gold-lo);color:var(--gold-hi);border-radius:999px;padding:10px 15px;font:500 13px/1 var(--body);cursor:pointer;letter-spacing:.06em;margin-top:6px}
.tier button.hear:hover{background:var(--gold);color:var(--black)}

/* step line fill */
.steps .step{position:relative}
.steps .step::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--gold-hi);transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.steps .step.lit::before{width:100%}

/* roles line draw */
.roles .role{transition:background .4s}
.roles .role .who{transition:color .5s}

/* count-up stats */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.stat-row .s b{display:block;font:400 clamp(54px,7vw,92px)/1 var(--display);letter-spacing:.02em;color:var(--gold-hi)}
.stat-row .s p{color:var(--muted);font-size:15.5px;margin-top:8px}

@media (max-width:980px){
  .scrolly{height:145vh}
  .scrolly .grid{grid-template-columns:1fr;gap:6px}
  .scrolly .grid .card-stage{order:-1;min-height:230px}
  .card-stage .mcard{width:min(300px,76%)}
  .card-shadow{transform:translate(-50%,100px)}
  .mantra{margin-top:22px}
  .explode{height:165vh}
  .explode .stage{grid-template-columns:1fr;gap:0;align-content:center}
  .stack{height:38vh}
  .layer-list li{padding:6px 0}
  .layer-list li span{display:none}
  .config{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
}
@media (max-width:600px){
  .table .lay{gap:6px;min-height:170px}
  .scrolly h1{font-size:clamp(44px,13vw,64px)}
  .scroll-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .scrolly,.explode{height:auto}
  .scrolly .stage,.explode .stage{position:relative;top:0;height:auto;padding-block:60px}
  .rv.pre{opacity:1;transform:none}
  .dropper .mcard.drop{animation:none}
  .scroll-hint i{animation:none}
}

/* headline word reveal */
.split-w .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin-bottom:-.1em}
.split-w .w>span{display:inline-block;transform:translateY(108%);transition:transform 1s cubic-bezier(.16,.8,.2,1)}
.split-w.words-in .w>span{transform:none}
@media (prefers-reduced-motion:reduce){.split-w .w>span{transform:none;transition:none}}

/* MYNT hex grid revealed around the cursor in every spotlight section */
.spot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0L56 16.2V48.5L28 64.7L0 48.5V16.2Z M28 64.7V97' fill='none' stroke='%23C9A84C' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(380px circle at var(--mx,50%) var(--my,-400px),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);
  mask-image:radial-gradient(380px circle at var(--mx,50%) var(--my,-400px),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%)}
.spot.hex-bg::before{opacity:.3}

/* scroll-linked stat fade (values set by JS) */
.stat-row .s b,.stat-row .s p{will-change:opacity,transform}

/* cursor card */
.cursor-card{position:fixed;left:0;top:0;z-index:90;pointer-events:none;perspective:600px;opacity:0;transition:opacity .35s}
.cursor-card.on{opacity:1}
.cursor-card .mcard{width:58px;box-shadow:0 10px 24px rgba(0,0,0,.6)}
.cursor-card .mc-fine,.cursor-card .mc-name,.cursor-card .mc-sig,.cursor-card .mc-nfc{display:none}
.cursor-card .mc-glare{--ga:.5}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor-card{display:none}}

/* slit build layers */
.ly.s1,.ly.s7{background:linear-gradient(115deg,#1d1d1c,#3c3a35 40%,#191918 70%,#35332e);border:1px solid rgba(255,255,255,.18)}
.ly.s7{background:linear-gradient(115deg,#d9d6cf,#f3f1ec 45%,#c9c6bf)}
.ly.s2,.ly.s4,.ly.s6{background:rgba(226,200,120,.16);border:1px dashed rgba(226,200,120,.5)}
.ly.s3,.ly.s5{background:linear-gradient(115deg,#7f8489,#dde1e4 28%,#80868b 52%,#cfd3d6 78%,#8b9095)}
.ly.s3 .slit{position:absolute;left:0;top:47%;width:17%;height:2px;background:#0a0a0a;box-shadow:0 0 0 1px rgba(201,168,76,.7)}
.ly.s3 .slit::after{content:"";position:absolute;right:-2px;top:-12px;width:2px;height:26px;background:#0a0a0a;box-shadow:0 0 0 1px rgba(201,168,76,.7)}
.ly.s3.on .slit,.ly.s3.on .slit::after{box-shadow:0 0 10px 2px rgba(226,200,120,.9)}

/* build film */
.film{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:center}
.film>*{min-width:0}
.film-player{position:relative}
.film-cap{position:absolute;left:0;right:0;bottom:0;padding:70px 26px 22px;background:linear-gradient(0deg,rgba(10,10,10,.9),rgba(10,10,10,0));display:grid;gap:6px;pointer-events:none;opacity:0;transition:opacity .4s}
.film-cap.show{opacity:1}
.film-cap .fc-sub{font:500 12.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.film-cap .fc-title{font:400 clamp(26px,3.2vw,44px)/1 var(--display);letter-spacing:.04em;color:var(--fg)}
.film-fs{position:absolute;right:14px;top:14px;background:rgba(10,10,10,.6);border:1px solid rgba(245,245,240,.3);color:var(--fg);border-radius:999px;padding:8px 14px;font:500 12.5px/1 var(--body);cursor:pointer;z-index:2}
.film-fs:hover{border-color:var(--gold);color:var(--gold-hi)}
.film-player:fullscreen{border-radius:0;display:grid;place-items:center;background:#000}
.film-player:fullscreen video{object-fit:contain}
.film-player:fullscreen .film-cap{padding:120px 6vw 6vh}
.film-player:fullscreen .fc-title{font-size:clamp(40px,4.4vw,72px)}
.sample-pick{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--gold-lo);color:var(--gold-hi);border-radius:999px;padding:8px 14px;font-size:14px}
.sample-pick button{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit}
@media (max-width:980px){.film{grid-template-columns:1fr}}

/* ---------- card back is printed plastic with magstripe ---------- */
.mcard .back .mc-metal{background:linear-gradient(120deg,#121212,#1d1d1c 60%,#151515)!important}
.mcard .back .mc-brush{display:none}
.mcard.light .back .mc-metal{background:linear-gradient(120deg,#e8e6e0,#f4f2ed 60%,#e2e0da)!important}
.mcard.light .back .mc-fine{color:rgba(0,0,0,.45)}
.mcard.light .back .mc-mono{filter:brightness(0);opacity:.45}

/* ---------- direct-to-metal ink effects ---------- */
.mc-ink{position:absolute;inset:0;pointer-events:none;display:none;
  -webkit-mask-image:repeating-radial-gradient(circle at 78% 118%,#000 0 1.4px,transparent 1.6px 6.5px);
  mask-image:repeating-radial-gradient(circle at 78% 118%,#000 0 1.4px,transparent 1.6px 6.5px)}
[data-ink="gold"] .front .mc-ink{display:block;background:linear-gradient(115deg,#7a5c1d,#f3e1a6 var(--gx),#9a7b2f 70%,#e9cf83)}
[data-ink="shift"] .front .mc-ink{display:block;background:linear-gradient(115deg,#2a9d8f,#6a4cff calc(var(--gx) - 14%),#e2c878 var(--gx),#ff4f8b calc(var(--gx) + 16%),#2a9d8f)}
[data-ink="flake"] .front .mc-ink{display:block;-webkit-mask-image:none;mask-image:none;opacity:.85;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 .8px,transparent 1.3px) calc(var(--gx) * .2) 0/7px 7px,radial-gradient(circle,#e2c878 0 .9px,transparent 1.4px) 3px calc(var(--gx) * .15)/11px 9px,radial-gradient(circle,#bfe3ff 0 .7px,transparent 1.2px) 5px 2px/13px 12px}
[data-ink="tactile"] .front .mc-ink{display:block;background:rgba(255,255,255,.2);filter:drop-shadow(0 1px 0 rgba(0,0,0,.75)) drop-shadow(0 -1px 0 rgba(255,255,255,.35))}
[data-ink="uv"] .front .mc-ink{display:block;background:#c08bff;opacity:.04;transition:opacity .5s,filter .5s}
.uv-on [data-ink="uv"] .front .mc-ink{opacity:1;filter:drop-shadow(0 0 3px #b56cff) drop-shadow(0 0 8px #8a3dff)}
[data-ink="tint"] .front .mc-ink{display:block;-webkit-mask-image:none;mask-image:none;background:linear-gradient(120deg,rgba(42,157,143,.75),rgba(106,76,255,.55));mix-blend-mode:color}

/* ---------- Card Studio ---------- */
.studio-sec{padding-top:clamp(48px,7vw,84px)}
.studio{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:start}
.studio>*{min-width:0}
.studio-stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 82px);border-radius:var(--r);border:1px solid var(--line);overflow:hidden;min-height:520px;display:grid;grid-template-rows:auto 1fr auto;
  background:radial-gradient(ellipse 50% 70% at 50% -5%,rgba(226,200,120,.18),transparent 70%),radial-gradient(ellipse 40% 9% at 50% 88%,rgba(201,168,76,.14),transparent 70%),linear-gradient(#141413,#0a0a0a);transition:background .6s}
.studio-stage.uv-on{background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(138,61,255,.35),transparent 70%),linear-gradient(#120a1f,#07040d)}
.studio-stage.uv-on .mcard .face{filter:brightness(.55) saturate(.6)}
.stage-tools{display:flex;gap:8px;flex-wrap:wrap;padding:16px}
.stage-tools .chip{padding:9px 13px;font-size:13px}
.studio-card{position:relative;perspective:1300px;display:grid;place-items:center;cursor:grab;touch-action:none;padding:20px}
.studio-card:active{cursor:grabbing}
.studio-card .mcard{width:min(440px,86%)}
.studio-card .card-shadow{transform:translate(-50%,150px)}
.studio-card .mc-name{font-size:clamp(11px,1.6vw,17px)}
.stage-hint{text-align:center;font:500 11px/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--dim);padding:0 0 18px}
.studio-panel{display:grid;gap:8px}
.opt{border:0;border-bottom:1px solid var(--line);margin:0;padding:18px 0 20px}
.opt legend{font:400 24px/1 var(--display);letter-spacing:.06em;padding:0 0 14px;display:flex;align-items:baseline;gap:10px}
.opt legend span{font:500 12px/1 var(--body);color:var(--gold);letter-spacing:.14em}
.opt legend small{font:400 13px/1 var(--body);color:var(--dim);letter-spacing:.02em}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg .chip{padding:10px 14px;font-size:14px}
.opt-note{margin-top:12px;color:var(--muted);font-size:14.5px}
.name-in{font:400 22px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--fg);background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%}
.name-in:focus{border-color:var(--gold-lo);outline:none}
.summary{display:grid;gap:16px;padding-top:20px}
.summary p{color:var(--muted);font-size:15px}
.summary p b{color:var(--fg);font-weight:500}
@media (max-width:980px){.studio{grid-template-columns:1fr}.studio-stage{position:relative;top:0;min-height:400px}}

/* production layers: print + plastic back */
.ly.p1{background:repeating-radial-gradient(circle at 78% 118%,rgba(226,200,120,.85) 0 1.4px,transparent 1.6px 6.5px),rgba(201,168,76,.08);border:1px solid rgba(226,200,120,.45)}
.ly.b7{background:linear-gradient(120deg,#e8e6e0,#f4f2ed 60%,#e2e0da);border:1px solid rgba(0,0,0,.2)}
.ly.b7 .mag{position:absolute;left:0;right:0;top:12%;height:17%;background:#151515}

/* ---------- intro reveal (home, once per session) ---------- */
.intro{position:fixed;inset:0;z-index:200;background:#060606;display:grid;place-items:center;transition:opacity .7s ease .1s}
.intro.out{opacity:0;pointer-events:none}
.intro .mark{position:relative;display:grid;justify-items:center;gap:22px}
.intro img{width:min(190px,40vw);clip-path:inset(100% 0 0 0);animation:introUp 1s cubic-bezier(.2,.7,.2,1) .15s forwards}
.intro .sheen{position:absolute;inset:0 0 auto 0;height:100%;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);mix-blend-mode:overlay;transform:translateX(-120%);animation:introSheen 1.1s ease .9s forwards;-webkit-mask-image:linear-gradient(#000,#000);pointer-events:none}
.intro .rule{height:1px;width:0;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);animation:introRule 1s ease .7s forwards}
.intro .tag{font:500 11px/1 var(--body);letter-spacing:.42em;color:var(--gold-hi);text-transform:uppercase;opacity:0;animation:introFade .8s ease 1.1s forwards}
@keyframes introUp{to{clip-path:inset(0 0 0 0)}}
@keyframes introSheen{to{transform:translateX(120%)}}
@keyframes introRule{to{width:min(260px,60vw)}}
@keyframes introFade{to{opacity:1}}

/* knocked-out brand + name: the print is removed, exposing raw brushed stainless */
.mcard{--knock:linear-gradient(105deg,#6f7377 0%,#b9bdc1 calc(var(--gx) - 22%),#f7f8f9 var(--gx),#9a9ea3 calc(var(--gx) + 20%),#5f6367 100%)}
.mcard.light{--knock:linear-gradient(105deg,#2e3134 0%,#55595d calc(var(--gx) - 22%),#8d9196 var(--gx),#45494d calc(var(--gx) + 20%),#2a2d30 100%)}
[data-finish="gold"],[data-finish="rose"]{--knock:linear-gradient(105deg,#6f7377 0%,#a9adb1 calc(var(--gx) - 22%),#eef0f1 var(--gx),#8a8e93 calc(var(--gx) + 20%),#5f6367 100%)}

/* smoother 3D edges + a real bevel */
.mcard .face,.mcard .slice{outline:1px solid transparent;-webkit-transform-style:preserve-3d}
.mcard .face{border:1px solid transparent;background-clip:padding-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.45),inset 1px 0 0 rgba(255,255,255,.08),inset -1px 0 0 rgba(0,0,0,.3),0 0 1px rgba(0,0,0,.35)}
.mcard .slice{border:1px solid transparent;background-clip:padding-box}
.mc-metal::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 90% at var(--gx) -20%,rgba(255,255,255,.14),transparent 55%);pointer-events:none}

/* wordmark as an embedded mask so the knock-out works from any origin */
.mc-logo{-webkit-mask-image:url("data:image/png;base64,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");mask-image:url("data:image/png;base64,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")}

/* ================= WIDE LAYOUT =================
   Grid widens to 1640px with fluid gutters; imagery breaks out edge to edge;
   running text keeps a readable measure, anchored left. */
:root{--gut:clamp(20px,4vw,72px);--maxw:1640px}
html,body{overflow-x:clip}
.wrap{max-width:var(--maxw);padding-inline:var(--gut)}
.lede{max-width:62ch}
.item p,.step p,.role p,.tier p,.scene-body p,.blk p{max-width:60ch}
.split{gap:clamp(40px,5vw,96px)}
.grid3{gap:clamp(36px,3vw,56px) clamp(28px,3vw,56px)}

/* edge-to-edge breakouts */
.doors,.cta,.scene{margin-inline:calc(50% - 50vw)}
.doors{padding-inline:clamp(8px,1vw,16px);gap:clamp(8px,1vw,16px)}
.door{min-height:clamp(520px,62vh,760px);border-radius:10px}
.door .in{padding:clamp(28px,4vw,64px)}
.cta{border-radius:0}
.cta .in{max-width:none;padding-block:clamp(56px,9vw,140px);
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)))}
.cta .in>*{max-width:720px}
.scene{border-radius:0;max-height:84vh;aspect-ratio:16/7}
.scene .cap{padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)))}
.scene-body{gap:clamp(28px,3vw,56px)}

/* bigger stages on big screens */
.card-stage .mcard{width:min(560px,92%)}
.studio-card .mcard{width:min(540px,86%)}
.stack .rig{width:min(520px,82%)}
.config .card-stage{min-height:clamp(360px,42vw,520px)}
.config .card-stage .mcard{width:min(520px,90%)}
.studio{grid-template-columns:1.4fr 1fr}
.studio-stage{min-height:clamp(520px,62vh,720px)}
.film{grid-template-columns:2fr 1fr}
@media (max-width:980px){
  .doors{padding-inline:8px}
  .scene{aspect-ratio:4/3}
  .studio,.film{grid-template-columns:1fr}
}
@media (max-width:600px){.scene{aspect-ratio:4/5;max-height:none}}

/* photoreal WebGL card: canvas overflows the card box so rotation never clips */
.mcard.gl>.gl-card{position:absolute;left:50%;top:50%;width:160%;height:240%;transform:translate(-50%,-50%) translateZ(0);pointer-events:none;opacity:0;transition:opacity .6s}
.mcard.gl.gl-ready>.gl-card{opacity:1}
.mcard.gl.gl-ready>.slice,.mcard.gl.gl-ready>.face{visibility:hidden}
.mcard.gl{transform:none!important}
.studio-stage.uv-on .mcard.gl .face{filter:none}

/* page-to-page transitions (Chrome, Edge, Safari; others load normally) */
@view-transition{navigation:auto}
.site-head{view-transition-name:site-head}
::view-transition-old(root){animation:vtOut .35s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vtIn .55s cubic-bezier(.16,.8,.2,1) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-14px);filter:blur(4px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(22px);filter:blur(6px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* sound toggle */
.sound-tog{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 12px;font:500 13px/1 var(--body);cursor:pointer;margin-left:6px}
.sound-tog:hover{color:var(--fg);border-color:var(--dim)}
.sound-tog .bars{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.sound-tog .bars i{display:block;width:2px;height:3px;background:currentColor;border-radius:1px;transition:height .3s}
.sound-tog[aria-pressed="true"]{color:var(--gold-hi);border-color:var(--gold-lo)}
.sound-tog[aria-pressed="true"] .bars i{animation:eq 1s ease-in-out infinite}
.sound-tog[aria-pressed="true"] .bars i:nth-child(2){animation-delay:-.3s}
.sound-tog[aria-pressed="true"] .bars i:nth-child(3){animation-delay:-.6s}
.sound-tog[aria-pressed="true"] .bars i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
@media (max-width:820px){.sound-tog{margin:8px 0 0;justify-content:center}}

/* magnetic buttons */
.btn,.btn-sm,.chip{will-change:transform}

/* ---------- proof of metal ---------- */
.proof{position:relative;height:230vh}
.proof .stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 66px);height:calc(100vh - 66px);height:calc(100svh - 66px);overflow:hidden;display:grid;align-items:center;isolation:isolate}
.proof-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 45% 60% at 68% 50%,rgba(226,200,120,.10),transparent 70%)}
.proof-grid{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(24px,4vw,64px);align-items:center;width:100%}
.proof-grid>*{min-width:0}
.psteps{position:relative;min-height:280px;margin-top:22px}
.pstep{position:absolute;inset:0 auto auto 0;opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.pstep.on{opacity:1;transform:none}
.pstep b{display:block;font:400 clamp(56px,8vw,128px)/.95 var(--display);letter-spacing:.02em;color:var(--fg)}
.pstep b .pnum{color:var(--gold-hi)}
.pstep p{margin-top:16px;color:var(--muted);font-size:18px;max-width:38ch}
.proof-card{display:grid;place-items:center;perspective:1400px}
.proof-card .mcard{width:min(640px,92%)}
@media (max-width:980px){.proof{height:200vh}.proof-grid{grid-template-columns:1fr}.proof-card{order:-1}.proof-card .mcard{width:min(420px,80%)}.psteps{min-height:220px}.pstep b{font-size:clamp(48px,14vw,80px)}}
@media (prefers-reduced-motion:reduce){.proof{height:auto}.proof .stage{position:relative;height:auto;padding-block:60px}.pstep{position:relative;opacity:1;transform:none;margin-bottom:28px}.psteps{min-height:0}}

/* ---------- one card across pages ---------- */
.scrolly .mcard[data-gl],#sCard{view-transition-name:mynt-card}
::view-transition-group(mynt-card){animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

/* ---------- program wall ---------- */
.wall{perspective:1800px;margin-top:10px}
.wall-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wall-card{display:grid;gap:14px;text-decoration:none;color:var(--fg);transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.wall-card .mcard{width:100%}
.wall-card:hover,.wall-card:focus-visible{transform:translateZ(60px)}
.wall-card .wl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-inline:4px}
.wall-card .wl b{font:400 24px/1 var(--display);letter-spacing:.06em}
.wall-card .wl small{font:500 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.wall-card .mc-name{font-size:clamp(9px,1.1vw,15px)}
@media (max-width:980px){.wall-inner{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.wall-inner{grid-template-columns:1fr}}

/* ---------- logo drop zone ---------- */
.drop{display:grid;gap:6px;border:1px dashed var(--line);border-radius:12px;padding:18px;cursor:pointer;transition:border-color .2s,background .2s;text-align:center}
.drop b{font:400 20px/1 var(--display);letter-spacing:.06em}
.drop span{color:var(--dim);font-size:13.5px}
.drop:hover,.drop.over{border-color:var(--gold-lo);background:rgba(201,168,76,.05)}
.drop.has b{color:var(--gold-hi)}
.studio-stage.over{outline:2px dashed var(--gold);outline-offset:-8px}

/* ---------- layered designer ---------- */
.studio{grid-template-columns:minmax(0,1.35fr) minmax(380px,1fr)}
.studio-panel{gap:0}
.opt{padding:16px 0 18px}
.opt-h{font:400 22px/1 var(--display);letter-spacing:.06em;display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.opt-h span{font:500 12px/1 var(--body);color:var(--gold);letter-spacing:.14em}
.opt-h small{font:400 12.5px/1 var(--body);color:var(--dim);letter-spacing:.02em}
.opt-h em{font-style:normal}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.seg .chip{padding:9px 12px;font-size:13.5px}
.color-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.swatch-btn{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.swatch-btn:hover{border-color:var(--gold-lo)}
.hex{width:96px;font:500 14px/1 ui-monospace,Consolas,monospace;text-transform:uppercase;background:var(--ink);border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:9px 10px}
.color-note{color:var(--dim);font-size:13px}
.wheel{margin-top:12px}
.wheel input[type=color]{width:100%;height:44px;border:0;background:none}
.layers{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.layer{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:4px 6px 4px 4px;background:var(--ink);transition:border-color .2s}
.layer.on{border-color:var(--gold)}
.layer.off{opacity:.5}
.ly-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--fg);text-align:left;cursor:pointer;padding:6px}
.ly-sw{flex:none;width:26px;height:26px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.ly-tx{min-width:0;display:grid}
.ly-tx b{font:500 14px/1.2 var(--body)}
.ly-tx small{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ly-act{display:flex;gap:2px}
.ly-b{background:none;border:0;color:var(--muted);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:14px}
.ly-b:hover{background:var(--steel);color:var(--fg)}
.add-row label.chip{cursor:pointer}
.ed-grid{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.ed-grid>*{min-width:0}
.ed-ctrl{display:grid;gap:10px}
.fld{display:grid;gap:5px;font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.fld select,.fld input:not([type=range]){font:400 14.5px/1.3 var(--body);color:var(--fg);background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.fld input[type=range]{accent-color:var(--gold)}
.sw-row{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);cursor:pointer}
.sw-row input{accent-color:var(--gold);width:16px;height:16px}
.sel-flag{margin-left:auto;align-self:center;font:500 12px/1 var(--body);letter-spacing:.06em;color:var(--black);background:var(--gold);border-radius:999px;padding:7px 11px}
#backColor{width:44px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--ink);padding:2px}
@media (max-width:1200px){.ed-grid{grid-template-columns:1fr}}
@media (max-width:980px){.studio{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}}

/* ---------- Design Lab studio v2: recipes, checks, flat view ---------- */
.paths3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 22px}
.path3{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--ink);color:var(--fg);text-decoration:none;cursor:pointer;transition:border-color .2s}
.path3 b{font:500 15px/1.2 var(--body)}
.path3 span{font-size:13px;color:var(--dim)}
.path3:hover,.path3:focus-visible,.path3.on{border-color:var(--gold)}
.path3:focus-within{border-color:var(--gold)}
.studio-card{grid-template-areas:"c"}
.studio-card>.mcard,.studio-card>.flat2d{grid-area:c}
.flat2d{width:min(540px,86%);height:auto;aspect-ratio:85.6/53.98;border-radius:3.7%/5.9%;box-shadow:0 30px 60px rgba(0,0,0,.55);transform-origin:50% 50%;transition:transform .15s}
.studio-stage.is-3d .flat2d{display:none}
.studio-stage.is-flat .studio-card>.mcard{visibility:hidden}
.studio-stage.is-flat .card-shadow{opacity:.6}
.studio-card:focus-visible{outline:2px solid var(--gold);outline-offset:-6px;border-radius:var(--r)}
.stage-msg{margin:0 16px 8px;padding:10px 14px;border-radius:10px;font-size:13.5px;border:1px solid var(--line);background:rgba(20,20,18,.85);color:var(--fg)}
.stage-msg.ok{border-color:rgba(120,200,150,.5)}
.stage-msg.warn{border-color:rgba(230,170,60,.6)}
.stage-msg.err{border-color:rgba(230,90,90,.7)}
.stage-note{text-align:center;font-size:12.5px;color:var(--muted);margin:0 0 6px}
.stage-note b{color:var(--gold);font-weight:500}
.why{font-size:12.5px;color:var(--dim);margin:8px 0 0;line-height:1.45}
.why.bad{color:#ff8a80}
.why.note{color:#e7c77e}
.why b{color:var(--fg);font-weight:500}
.recipes{display:grid;gap:6px}
.recipe{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--ink);cursor:pointer}
.recipe.on{border-color:var(--gold)}
.recipe input{accent-color:var(--gold);margin-top:3px}
.recipe span{display:grid;gap:2px}
.recipe b{font:500 14px/1.3 var(--body)}
.recipe small{font-size:12px;color:var(--dim);line-height:1.4}
.budget{display:grid;gap:6px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.budget>div{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center}
.budget em{font-style:normal;color:var(--dim);margin-left:4px}
.meter{height:6px;border-radius:3px;background:var(--steel);overflow:hidden}
.meter i{display:block;height:100%;background:var(--gold);transition:width .3s}
.meter.over i{background:#ff6b6b}
#coat .why{display:inline-block;margin:0 0 0 8px}
.chip:disabled,.chip.disabled{opacity:.4;cursor:not-allowed}
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.sw{display:flex;align-items:center;gap:8px;padding:7px 11px 7px 7px;border:1px solid var(--line);border-radius:999px;background:var(--ink);color:var(--fg);font-size:13px;cursor:pointer}
.sw i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.sw[aria-pressed=true]{border-color:var(--gold)}
.ed-ctrl .seg{display:flex;flex-wrap:wrap;gap:6px}
.fld output{color:var(--fg);margin-left:6px}
.nudges{display:flex;gap:6px}
.nudges .chip{width:40px;padding:8px 0;text-align:center}
.layer.bad{border-color:rgba(255,107,107,.7)}
.ly-b:disabled{opacity:.25;cursor:default}
.ly-b:focus-visible,.ly-main:focus-visible,.chip:focus-visible,.sw:focus-visible,label.chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.issues{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.iss{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--ink);font-size:13.5px}
.iss .msg{flex:1 1 220px;color:var(--fg);line-height:1.4}
.iss .lvl{font:600 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:5px 7px;border-radius:5px}
.iss.block{border-color:rgba(255,107,107,.55)}
.iss.block .lvl{background:#5a1f1f;color:#ffb3ad}
.iss.warn .lvl{background:#4d3a12;color:#f5d48a}
.iss.note .lvl{background:#1f2a33;color:#a9c6e0}
.iss .fixb{padding:7px 11px;font-size:12.5px}
.linkb{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:12.5px;padding:4px}
#checkHead{font-size:13px;letter-spacing:.02em}
#checkHead.ok{color:#8fd6a8}
#checkHead.bad{color:#ff8a80}
.sumd{margin-top:12px;font-size:13.5px;color:var(--muted)}
.sumd summary{cursor:pointer;color:var(--fg)}
.summary-l{margin:8px 0 0;padding-left:18px;display:grid;gap:4px;line-height:1.45}
.save-status{font-size:13.5px;color:var(--fg);margin:0 0 10px}
.save-status .dim{color:var(--dim);margin-left:6px}
.btn.is-blocked{opacity:.55}
.btns.small{margin-top:12px;gap:8px}
.btns.small .chip{padding:8px 12px;font-size:12.5px;cursor:pointer}
.persobox{display:grid;gap:6px}
.persobox small{color:var(--dim);font-size:12px}
.studio-stage.guides-on .stage-hint{opacity:.5}
@media (max-width:760px){.paths3{grid-template-columns:1fr}.budget>div{grid-template-columns:96px 1fr}.budget>div b{grid-column:1/-1}.stage-tools{gap:6px;padding:12px}.stage-tools .chip{padding:8px 10px;font-size:12.5px}#sceneSel{display:none}}
.persobox .sw-row{align-items:flex-start}
.persobox .sw-row span{display:grid;gap:2px;color:var(--fg)}
.persobox .sw-row input{margin-top:2px}
/* the preview is sealed: nothing it draws (WebGL reflections, UV glow, blend modes, the oversized canvas) can paint, blend or
   composite outside its own box, and the card can't paint over the toolbar */
.studio-stage{isolation:isolate;contain:paint;overflow:clip}
.studio-stage .stage-tools,.studio-stage .stage-msg,.studio-stage .stage-note,.studio-stage .stage-hint{position:relative;z-index:2}
.studio-stage .studio-card{position:relative;z-index:1;overflow:clip;contain:paint;isolation:isolate;perspective:none}
.studio-stage .studio-card .mcard{transform-style:flat}
.studio-stage .studio-card .mcard>.slice,.studio-stage .studio-card .mcard>.face{display:none}
/* ---------- build panel: collapsible steps ---------- */
.studio-panel .acc{border-bottom:1px solid var(--line)}
.acc-h{margin:0;font:inherit}
.acc-b{width:100%;display:flex;align-items:baseline;gap:12px;padding:18px 2px;background:none;border:0;color:var(--fg);cursor:pointer;text-align:left}
.acc-b .n{font:500 12px/1 var(--body);color:var(--gold);letter-spacing:.14em;flex:none}
.acc-b .t{font:400 22px/1 var(--display);letter-spacing:.06em;flex:none}
.acc-b .v{margin-left:auto;font:400 13px/1.3 var(--body);color:var(--dim);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:12px}
.acc-b .v.bad{color:#ff8a80}.acc-b .v.ok{color:#8fd6a8}
.acc-b .chev{flex:none;width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-3px) rotate(45deg);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.acc.open .acc-b .chev{transform:translateY(1px) rotate(-135deg)}
.acc-b:hover .t,.acc.open .acc-b .t{color:#fff}
.acc-b:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.acc-p{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .38s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.acc.open .acc-p{grid-template-rows:1fr;opacity:1}
.acc-in{min-height:0;overflow:hidden}
.acc.open .acc-in{padding:0 2px 20px}
.acc.open .acc-b .v{opacity:.55}
.why.lead{margin:0 0 12px}
.tiers{display:grid;gap:8px}
.tierc{display:grid;gap:4px;text-align:left;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--ink);color:var(--fg);cursor:pointer;transition:border-color .2s,background .2s}
.tierc b{font:400 20px/1 var(--display);letter-spacing:.06em}
.tierc span{font-size:13px;color:var(--dim);line-height:1.45}
.tierc.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,var(--ink))}
.tierc:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lock{font:500 10.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:999px;padding:3px 7px;margin-left:6px;vertical-align:middle}
.chip[aria-checked=true]{background:var(--fg);color:var(--black);border-color:var(--fg)}
.recipe.locked{opacity:.55;cursor:not-allowed}
.editor{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.015);animation:edin .3s ease}
.ed-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.ed-h em{font:400 20px/1 var(--display);letter-spacing:.06em;font-style:normal}
.iss .fixb.alt{border-color:var(--gold);color:var(--gold)}
@keyframes edin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.acc-p,.acc-b .chev{transition:none}.editor{animation:none}}
.iss.upsell{margin:8px 0 0;border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.iss.upsell b{color:var(--gold);font-weight:500}
.chiprow{margin-top:14px}
.chipdot{display:inline-block;width:14px;height:11px;border-radius:3px;margin-right:8px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.tplline{font-size:13px;color:var(--muted);margin:-8px 0 18px}
.tplline a,.tplbox a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.tplline .dim{color:var(--dim)}
.tplbox{margin-top:14px;padding:12px 14px;border:1px dashed var(--line);border-radius:10px;font-size:13px;color:var(--muted);line-height:1.5}
.tplbox b{color:var(--fg);font-weight:500}
.tplbox ul{margin:6px 0 0;padding-left:18px;display:grid;gap:3px}