/* Meshbooth identity. Every rule is scoped to .p-meshbooth; tokens are --mb-*; keyframes are mb-*.
   Nordic forge in daylight: blued iron, pale stone, oak, one ember, gold as the maker's mark. */
.p-meshbooth {
  --mb-iron: #121A24; --mb-iron2: #1B2A3E; --mb-black: #0C1117; --mb-edge: #2C3A4F; --mb-rivet: #3A4658;
  --mb-gold: #CB9341; --mb-goldl: #E4B86A; --mb-bronze: #7A4E16; --mb-ember: #E0672A; --mb-emberh: #FFB25E;
  --mb-oak: #3A2819; --mb-oakg: #5A3D26; --mb-paper: #F2F0EF; --mb-mist: #A9B0BA; --mb-stone: #EBEBEB;
  --mb-granite: #D6D0C6; --mb-stonedge: #D3CFC8; --mb-ink: #16191D; --mb-slate: #555B63; --mb-ring: #6E7A89;
  --mb-d: 'Barlow Condensed', 'Arial Narrow', sans-serif; --mb-t: 'Source Serif 4', Georgia, serif;
  --mb-m: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
  /* chrome tokens (the only way a product colours the shared header/footer) */
  --chrome-bg: #121A24; --chrome-fg: #F2F0EF; --chrome-muted: #A9B0BA; --chrome-rule: #2C3A4F;
  --chrome-accent: #CB9341; --chrome-accent-fg: #121A24; --chrome-accent-hi: #E4B86A; --focus: #E4B86A;
  background: var(--mb-iron); color: var(--mb-paper); font: 400 18px/1.6 var(--mb-t);
}
.p-meshbooth .d { font-family: var(--mb-d); font-weight: 600; letter-spacing: .005em; }
.p-meshbooth .m { font: 12.5px/1.5 var(--mb-m); }
.p-meshbooth h1, .p-meshbooth h2, .p-meshbooth h3 { margin: 0; font-family: var(--mb-d); font-weight: 600; line-height: 1.04; }
.p-meshbooth h2 { font-size: clamp(34px, 3.6vw, 52px); }
.p-meshbooth .lead { max-width: 720px; margin: 12px 0 30px; }
.p-meshbooth .on-light { background: var(--mb-paper); color: var(--mb-ink); }
.p-meshbooth .on-light .lead, .p-meshbooth .on-light .cap { color: var(--mb-slate); }
.p-meshbooth .on-stone { background: var(--mb-stone); color: var(--mb-ink); }
.p-meshbooth .on-stone .lead, .p-meshbooth .on-stone .cap { color: var(--mb-slate); }
.p-meshbooth .on-granite { background: var(--mb-granite); color: var(--mb-ink); }
.p-meshbooth .cap { color: var(--mb-mist); }
.p-meshbooth .sec { padding: 88px 0; }
@media (max-width: 760px) { .p-meshbooth .sec { padding: 60px 0; } }
.p-meshbooth .grain { background-image: url(../textures/stone-grain.png); background-size: 256px; }

/* ---- product bar lockup ---- */
.p-meshbooth .lockup { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--mb-paper); font: 700 21px/1 'Barlow Semi Condensed', var(--mb-d); letter-spacing: .01em; }
.p-meshbooth .lockup svg { width: 30px; height: 27px; color: var(--mb-gold); }
.p-meshbooth .lockup b { color: var(--mb-gold); font-weight: 700; }
.p-meshbooth .pbar .btn { height: 40px; font-size: 17px; padding: 0 14px; }
@media (max-width: 760px) { .p-meshbooth .pbar .btn { display: none; } }

/* ---- buttons (microinteraction: gold heats, press is a hammer tap) ---- */
.p-meshbooth .btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border: 0; border-radius: 2px; background: var(--mb-gold); color: var(--mb-iron); font: 600 19px/1 var(--mb-d); letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: background .16s ease, box-shadow .16s ease, transform .08s linear; box-shadow: inset 0 -2px 0 rgba(12,17,23,.28); }
.p-meshbooth .btn:hover { background: var(--mb-goldl); box-shadow: inset 0 -2px 0 rgba(12,17,23,.28), 0 0 0 4px rgba(228,184,106,.14); }
.p-meshbooth .btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(12,17,23,.28); }
.p-meshbooth .btn:focus-visible { outline: 2px solid var(--mb-goldl); outline-offset: 3px; }
.p-meshbooth .btn svg { width: 18px; height: 18px; }
.p-meshbooth .link { color: var(--mb-goldl); font: 600 19px/1 var(--mb-d); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-thickness .16s; }
.p-meshbooth .link:hover { text-decoration-thickness: 2px; }
.p-meshbooth .on-light .link, .p-meshbooth .on-stone .link, .p-meshbooth .on-granite .link { color: var(--mb-bronze); }
.p-meshbooth .opens { font: 14px/1.2 system-ui, sans-serif; color: var(--mb-mist); }

/* ---- hallmarks (status marks) ---- */
.p-meshbooth .hm { flex: none; width: 11px; height: 11px; margin-top: .5em; border-radius: 50%; background: var(--mb-bronze); box-shadow: 0 0 0 1.5px var(--mb-goldl); }
.p-meshbooth .hm.open { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mb-ring); }
.p-meshbooth .on-light .hm.open, .p-meshbooth .on-granite .hm.open { box-shadow: inset 0 0 0 1.5px var(--mb-slate); }
.p-meshbooth .ic { width: 26px; height: 26px; color: var(--mb-goldl); flex: none; }
.p-meshbooth .on-light .ic, .p-meshbooth .on-stone .ic { color: var(--mb-bronze); }

/* ---- plates (iron frame, rivets, gold inlay) ---- */
.p-meshbooth .plate { position: relative; background: var(--mb-black); border: 1px solid var(--mb-edge); padding: 10px; }
.p-meshbooth .plate::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(203,147,65,.3); pointer-events: none; }
.p-meshbooth .rv { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--mb-rivet); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.p-meshbooth .rv.a { top: 2px; left: 2px; } .p-meshbooth .rv.b { top: 2px; right: 2px; } .p-meshbooth .rv.c { bottom: 2px; left: 2px; } .p-meshbooth .rv.d { bottom: 2px; right: 2px; }
.p-meshbooth .strap { height: 22px; position: relative; background: linear-gradient(var(--mb-iron2), var(--mb-iron2)) center / 100% 14px no-repeat; border-block: 1px solid var(--mb-black); }
.p-meshbooth .strap::before, .p-meshbooth .strap::after { content: ""; position: absolute; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--mb-rivet); box-shadow: 30px 0 0 var(--mb-rivet); }
.p-meshbooth .strap::before { left: 24px; } .p-meshbooth .strap::after { right: 54px; }

/* ================= HERO: MODEL -> MESHBOOTH -> LISTING PACK ================= */
.p-meshbooth .hero { position: relative; overflow: hidden; }
.p-meshbooth .hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 22px; padding: 40px 0 44px; }
.p-meshbooth .hero__head { grid-column: 1 / span 7; align-self: center; }
.p-meshbooth .hero__rest { grid-column: 8 / span 5; align-self: end; }
.p-meshbooth .hero__name { display: flex; align-items: center; gap: 9px; font: 600 22px/1 var(--mb-d); color: var(--mb-goldl); margin-bottom: 12px; }
.p-meshbooth .hero__name svg { width: 22px; height: 20px; flex: none; color: var(--mb-gold); }
.p-meshbooth .hero__promise { display: block; font-size: clamp(40px, 4.3vw, 62px); line-height: 1.01; color: var(--mb-paper); }
.p-meshbooth .hero__sub { color: var(--mb-mist); font-size: 18px; line-height: 1.5; margin: 0 0 18px; }
.p-meshbooth .hero__acts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.p-meshbooth .hero__opens { margin: 8px 0 0; }
.p-meshbooth .hero__price { margin: 10px 0 0; font: 600 19px/1.3 var(--mb-d); }
.p-meshbooth .tested { display: grid; gap: 4px; font-size: 15px; line-height: 1.5; color: var(--mb-mist); }
.p-meshbooth .tested span { display: flex; gap: 9px; }
.p-meshbooth .hero__tested { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; column-gap: 28px; }

.p-meshbooth .forge-stage { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; align-items: start; }
.p-meshbooth .stage { position: relative; }
.p-meshbooth .glow { position: absolute; inset: 0 -8% -16% -8%; background: radial-gradient(ellipse 50% 36% at 50% 62%, rgba(224,103,42,.24), rgba(224,103,42,0) 100%); opacity: 0; pointer-events: none; }
.p-meshbooth .glow.on { animation: mb-warm 3.3s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes mb-warm { 0% { opacity: 0; } 27% { opacity: 1; } 100% { opacity: .5; } }
.p-meshbooth .steps { position: relative; list-style: none; margin: 0 0 10px; padding: 0; display: flex; align-items: center; gap: 8px; font: 600 17px/1 var(--mb-d); letter-spacing: .02em; }
.p-meshbooth .steps li[data-step] { display: flex; align-items: center; gap: 7px; padding: 7px 11px 7px 8px; border: 1px solid var(--mb-edge); color: var(--mb-ring); transition: color .3s, background .3s, border-color .3s; }
.p-meshbooth .steps b { display: grid; place-items: center; min-width: 26px; height: 20px; padding: 0 4px; font-weight: 600; font-size: 13px; letter-spacing: .06em; border: 1px solid currentColor; }
.p-meshbooth .steps li.done { color: var(--mb-goldl); }
.p-meshbooth .steps li.on { color: var(--mb-iron); background: var(--mb-goldl); border-color: var(--mb-goldl); }
.p-meshbooth .steps .arr { flex: 1; max-width: 70px; height: 2px; background: var(--mb-rivet); position: relative; }
.p-meshbooth .steps .arr::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--mb-rivet); }
.p-meshbooth .stage .plate { padding: 8px; }
.p-meshbooth .screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.p-meshbooth .screen .shot, .p-meshbooth .screen .shot img, .p-meshbooth .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-meshbooth .screen .shot.intro { opacity: 0; }
.p-meshbooth .screen.intro .shot.intro { opacity: 1; }
.p-meshbooth .screen video { opacity: 0; }                  /* instant swap: the two files share frames */
.p-meshbooth .screen.intro.playing #hv-intro { opacity: 1; }
.p-meshbooth .screen.looping #hv-loop { opacity: 1; }
.p-meshbooth .screen__tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; background: rgba(12,17,23,.78); color: var(--mb-paper); border-left: 2px solid var(--mb-gold); }
.p-meshbooth .screen__press { position: absolute; right: 16px; bottom: 16px; width: min(34%, 240px); height: auto; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, box-shadow .12s; box-shadow: 0 0 0 1px var(--mb-edge); }
.p-meshbooth .screen__press.show { opacity: 1; transform: none; box-shadow: 0 0 0 2px var(--mb-gold), 0 10px 26px -8px rgba(0,0,0,.8); }
.p-meshbooth .screen__press.down { transform: translateY(1px) scale(.985); box-shadow: 0 0 0 2px var(--mb-goldl), 0 0 26px 6px rgba(228,184,106,.5); }
.p-meshbooth .stage__bar { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.p-meshbooth .stage__bar button { flex: none; background: transparent; color: var(--mb-paper); border: 1px solid var(--mb-edge); padding: 7px 12px; font: 600 16px/1 var(--mb-d); cursor: pointer; transition: border-color .16s, color .16s; }
.p-meshbooth .stage__bar button:hover { border-color: var(--mb-gold); color: var(--mb-goldl); }
.p-meshbooth .stage__bar button[aria-pressed="true"] { color: var(--mb-goldl); border-color: var(--mb-gold); }
.p-meshbooth .stage__bar .cap { margin: 0 0 0 6px; font-size: 12px; line-height: 1.45; }

/* the folder (real files, real sizes; the animation only reveals them in Meshbooth's order) */
.p-meshbooth .pack { background: var(--mb-black); border: 1px solid var(--mb-edge); margin-top: 41px; }
.p-meshbooth .pack__h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--mb-edge); font: 600 17px/1 var(--mb-d); }
.p-meshbooth .pack__h .ic { width: 20px; height: 20px; }
.p-meshbooth .pack__h em { margin-left: auto; font-style: normal; color: var(--mb-goldl); font-variant-numeric: tabular-nums; }
.p-meshbooth .pack__list { list-style: none; margin: 0; padding: 6px; display: grid; gap: 1px; }
.p-meshbooth .pack__list button { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 6px; background: transparent; border: 0; border-radius: 2px; color: var(--mb-paper); font: 12.5px/1.3 var(--mb-m); text-align: left; cursor: zoom-in; transition: background .16s; }
.p-meshbooth .pack__list button:hover { background: var(--mb-iron2); }
.p-meshbooth .pack__list button:focus-visible { outline: 2px solid var(--mb-goldl); outline-offset: -2px; }
.p-meshbooth .pack__list .th { width: 46px; height: 28px; display: grid; place-items: center; background: #000; overflow: hidden; }
.p-meshbooth .pack__list .th img { width: 100%; height: 100%; object-fit: cover; }
.p-meshbooth .pack__list .th .ic { width: 18px; height: 18px; }
.p-meshbooth .pack__list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-meshbooth .pack__list .sz { color: var(--mb-mist); font-variant-numeric: tabular-nums; }
.p-meshbooth .badge { display: inline-block; margin-left: 7px; padding: 1px 5px; background: var(--mb-goldl); color: var(--mb-iron); font: 700 11px/1.4 var(--mb-m); vertical-align: 1px; }
.p-meshbooth .badge.differs { background: var(--mb-ember); color: #fff; }
.p-meshbooth .pack__list li { transition: opacity .35s ease, transform .35s ease; }
.p-meshbooth .pack__list li.wait { opacity: .14; }
.p-meshbooth .pack__list li.wait .badge { opacity: 0; }
.p-meshbooth .pack__list li.new button { background: rgba(203,147,65,.16); box-shadow: inset 2px 0 0 var(--mb-gold); }
.p-meshbooth .pack__foot { margin: 0; padding: 9px 12px; border-top: 1px solid var(--mb-edge); font: 600 17px/1.2 var(--mb-d); color: var(--mb-goldl); transition: opacity .4s; }
.p-meshbooth .pack__foot.wait { opacity: 0; }
.p-meshbooth .pack__note { margin: 0; padding: 0 12px 11px; color: var(--mb-mist); font-size: 11.5px; }

/* the viewer */
.p-meshbooth .viewer { width: min(1180px, 94vw); max-height: 92vh; padding: 0; border: 1px solid var(--mb-edge); background: var(--mb-iron); color: var(--mb-paper); }
.p-meshbooth .viewer::backdrop { background: rgba(8,11,15,.82); }
.p-meshbooth .viewer__bar { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-bottom: 1px solid var(--mb-edge); }
.p-meshbooth .viewer__bar h2 { font: 600 14px/1.2 var(--mb-m); }
.p-meshbooth .viewer__bar span { color: var(--mb-mist); }
.p-meshbooth .viewer__x { margin-left: auto; background: transparent; color: var(--mb-paper); border: 1px solid var(--mb-edge); padding: 6px 12px; font: 600 16px/1 var(--mb-d); cursor: pointer; }
.p-meshbooth .viewer__x:hover { border-color: var(--mb-gold); color: var(--mb-goldl); }
.p-meshbooth .viewer__body { padding: 12px; display: grid; place-items: center; }
.p-meshbooth .viewer__body img, .p-meshbooth .viewer__body video { max-width: 100%; max-height: 72vh; width: auto; height: auto; }
.p-meshbooth .viewer__body p { margin: 12px 0 0; text-align: center; }
.p-meshbooth .viewer__body .stats { width: 100%; max-height: 66vh; }
.p-meshbooth .viewer__cap { margin: 0; padding: 0 12px 12px; color: var(--mb-mist); }
.p-meshbooth .xcheck { width: min(560px, 100%); padding: 18px; background: var(--mb-black); border-left: 3px solid var(--mb-gold); font: 14px/1.5 var(--mb-m); }
.p-meshbooth .xcheck p { margin: 0 0 10px; text-align: left; }
.p-meshbooth .xcheck ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.p-meshbooth .xcheck li { display: grid; gap: 2px; padding: 10px; background: var(--mb-iron2); }
.p-meshbooth .xcheck li span { color: var(--mb-mist); font-size: 12px; }
.p-meshbooth .xcheck li b { font: 600 26px/1 var(--mb-d); }
.p-meshbooth .xcheck .verdict { display: flex; gap: 9px; color: var(--mb-goldl); margin: 0; }

@media (max-width: 1100px) {
  .p-meshbooth .hero__head { grid-column: 1 / span 7; } .p-meshbooth .hero__rest { grid-column: 8 / span 5; }
  .p-meshbooth .forge-stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
@media (max-width: 900px) {
  .p-meshbooth .hero__grid { grid-template-columns: minmax(0, 1fr); padding: 28px 0 40px; row-gap: 20px; }
  .p-meshbooth .hero__head, .p-meshbooth .hero__rest, .p-meshbooth .forge-stage, .p-meshbooth .hero__tested { grid-column: 1; }
  .p-meshbooth .hero__head { order: 1; } .p-meshbooth .forge-stage { order: 2; } .p-meshbooth .hero__rest { order: 3; } .p-meshbooth .hero__tested { order: 4; grid-template-columns: 1fr; }
  .p-meshbooth .forge-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .p-meshbooth .pack { margin-top: 0; }
  .p-meshbooth .steps { font-size: 15px; gap: 5px; }
  .p-meshbooth .steps li[data-step] { padding: 6px 7px 6px 6px; gap: 5px; }
  .p-meshbooth .steps b { min-width: 22px; font-size: 11px; }
  .p-meshbooth .steps .arr { max-width: 18px; min-width: 8px; }
  .p-meshbooth .stage__bar { flex-wrap: wrap; }
  .p-meshbooth .stage__bar .cap { flex-basis: 100%; margin: 4px 0 0; }
  .p-meshbooth .screen__press { width: 44%; right: 8px; bottom: 8px; }
  .p-meshbooth .screen__tag { display: none; }                 /* on phones the steps above say it */
}

/* ================= BENEFITS ================= */
.p-meshbooth .benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--mb-stonedge); }
.p-meshbooth .benefit { padding: 26px 24px 8px 0; border-right: 1px solid var(--mb-stonedge); margin-right: 24px; }
.p-meshbooth .benefit:last-child { border-right: 0; margin-right: 0; }
.p-meshbooth .benefit h3 { font-size: 25px; margin: 14px 0 8px; }
.p-meshbooth .benefit p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--mb-slate); }
@media (max-width: 900px) { .p-meshbooth .benefits { grid-template-columns: 1fr 1fr; } .p-meshbooth .benefit:nth-child(2) { border-right: 0; margin-right: 0; } }
@media (max-width: 560px) { .p-meshbooth .benefits { grid-template-columns: 1fr; } .p-meshbooth .benefit { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--mb-stonedge); padding-bottom: 20px; } }

/* ================= CHAIN: MODEL -> MESHBOOTH -> LISTING PACK ================= */
.p-meshbooth .chain { display: grid; grid-template-columns: 1.25fr 56px .8fr 56px 1fr; align-items: stretch; }
.p-meshbooth .station { background: #fff; border: 1px solid var(--mb-stonedge); padding: 14px 14px 18px; display: flex; flex-direction: column; transition: border-color .6s, box-shadow .6s; }
.p-meshbooth .station.hot { border-color: var(--mb-gold); box-shadow: 0 0 0 3px rgba(203,147,65,.18); }
.p-meshbooth .station .no { font: 600 14px/1 var(--mb-d); letter-spacing: .08em; color: var(--mb-bronze); }
.p-meshbooth .station h3 { font-size: 27px; margin: 6px 0 12px; }
.p-meshbooth .station figure { margin: 0; position: relative; }
.p-meshbooth .station p { font-size: 15.5px; line-height: 1.5; color: var(--mb-slate); margin: 12px 0 0; }
.p-meshbooth .stamp { position: absolute; right: -10px; bottom: -12px; width: 54px; height: 54px; border-radius: 50%; background: var(--mb-iron); box-shadow: 0 0 0 2px var(--mb-gold); display: grid; place-items: center; }
.p-meshbooth .stamp svg { width: 32px; height: 29px; color: var(--mb-gold); }
.p-meshbooth .station__panel { background: #232323; display: flex; justify-content: center; padding: 8px 0 0; }
.p-meshbooth .station__panel img { width: min(100%, 230px); }
.p-meshbooth .files { list-style: none; margin: 0; padding: 12px; background: var(--mb-iron); color: var(--mb-paper); display: grid; gap: 7px; }
.p-meshbooth .files li { display: grid; grid-template-columns: 20px 1fr auto; gap: 9px; align-items: center; font: 12.5px/1.2 var(--mb-m); }
.p-meshbooth .files svg { width: 18px; height: 18px; color: var(--mb-goldl); }
.p-meshbooth .files i { font-style: normal; color: var(--mb-mist); }
.p-meshbooth .files li { opacity: 1; }
.p-meshbooth .files.arm li { opacity: .25; transition: opacity .3s; }
.p-meshbooth .files.arm li.lit { opacity: 1; }
.p-meshbooth .conn { position: relative; }
.p-meshbooth .conn::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--mb-rivet); }
.p-meshbooth .conn::after { content: ""; position: absolute; right: 4px; top: calc(50% - 5px); border: 6px solid transparent; border-left-color: var(--mb-rivet); }
.p-meshbooth .dot { position: absolute; top: calc(50% - 4px); left: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--mb-ember); box-shadow: 0 0 12px 3px rgba(224,103,42,.55); opacity: 0; }
.p-meshbooth .dot.go { animation: mb-travel .7s cubic-bezier(.45,0,.2,1) forwards; }
@keyframes mb-travel { 0% { opacity: 1; left: 6px; } 88% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 14px); } }
.p-meshbooth .sparks { position: absolute; left: 50%; top: 45%; pointer-events: none; }
.p-meshbooth .sparks i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--mb-goldl); opacity: 0; }
.p-meshbooth .sparks.go i { animation: mb-spark .52s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes mb-spark { 0% { opacity: 1; transform: translate(0,0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)); } }
.p-meshbooth .rules-note { font-size: 15px; color: var(--mb-slate); margin: 22px 0 0; }
@media (max-width: 900px) {
  .p-meshbooth .chain { grid-template-columns: 1fr; }
  .p-meshbooth .conn { height: 44px; }
  .p-meshbooth .conn::before { left: 50%; right: auto; top: 4px; bottom: 4px; width: 2px; height: auto; }
  .p-meshbooth .conn::after { left: calc(50% - 5px); right: auto; top: auto; bottom: 0; border-left-color: transparent; border-top-color: var(--mb-rivet); }
  .p-meshbooth .dot.go { animation-name: mb-travel-v; }
}
@keyframes mb-travel-v { 0% { opacity: 1; left: calc(50% - 4px); top: 4px; } 88% { opacity: 1; } 100% { opacity: 0; left: calc(50% - 4px); top: calc(100% - 12px); } }

/* ================= PACK (outputs) ================= */
.p-meshbooth .studio { position: relative; aspect-ratio: 4 / 3; overflow: hidden; user-select: none; background: #000; }
.p-meshbooth .studio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-meshbooth .studio .dark { clip-path: inset(0 0 0 var(--split, 50%)); }
.p-meshbooth .studio .handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; background: var(--mb-gold); transform: translateX(-1px); pointer-events: none; }
.p-meshbooth .studio .handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--mb-iron) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4B86A' stroke-width='2'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 0 0 2px var(--mb-gold); }
.p-meshbooth .studio input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.p-meshbooth .studio .lbl { position: absolute; top: 12px; font: 600 15px/1 var(--mb-d); padding: 6px 9px; background: rgba(12,17,23,.72); color: var(--mb-paper); pointer-events: none; }
.p-meshbooth .studio .lbl.l { left: 12px; } .p-meshbooth .studio .lbl.r { right: 12px; }
.p-meshbooth .studio:focus-within .handle::after { box-shadow: 0 0 0 2px var(--mb-goldl), 0 0 0 5px rgba(228,184,106,.35); }
.p-meshbooth .pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.p-meshbooth .card.studio-card { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.p-meshbooth .card { margin: 0; background: #fff; border: 1px solid var(--mb-stonedge); padding: 12px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.p-meshbooth .card:hover { transform: translateY(-3px); border-color: var(--mb-gold); box-shadow: 0 10px 24px -14px rgba(18,26,36,.45); }
.p-meshbooth .card .pl { display: block; font: 600 13px/1 var(--mb-d); letter-spacing: .1em; color: var(--mb-bronze); margin: 2px 0 10px; }
.p-meshbooth .card figcaption { margin-top: 10px; color: var(--mb-slate); }
.p-meshbooth .vid { position: relative; background: var(--mb-black); }
.p-meshbooth .vid video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.p-meshbooth .vid button { position: absolute; right: 8px; bottom: 8px; background: var(--mb-iron); color: var(--mb-paper); border: 1px solid var(--mb-edge); padding: 6px 10px; font: 600 15px/1 var(--mb-d); cursor: pointer; }
.p-meshbooth .tags { display: grid; gap: 9px; }
.p-meshbooth .tag { display: flex; gap: 10px; align-items: center; background: var(--mb-iron); color: var(--mb-paper); padding: 11px 12px; border-left: 3px solid var(--mb-gold); font: 12.5px/1.5 var(--mb-m); }
.p-meshbooth .tag svg { width: 20px; height: 20px; color: var(--mb-goldl); flex: none; }
.p-meshbooth .stats { background: var(--mb-black); color: var(--mb-paper); padding: 14px; font: 12px/1.6 var(--mb-m); white-space: pre; overflow: auto; margin: 0; max-height: 262px; }
.p-meshbooth .stats .k { color: var(--mb-goldl); }
@media (max-width: 900px) { .p-meshbooth .pack-grid { grid-template-columns: 1fr 1fr; } .p-meshbooth .card.studio-card { grid-row: auto; } }
@media (max-width: 560px) { .p-meshbooth .pack-grid { grid-template-columns: 1fr; } .p-meshbooth .card.studio-card { grid-column: auto; } }

/* ================= CHECKED ================= */
.p-meshbooth .checked { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; }
.p-meshbooth .checked .plate { background: var(--mb-iron); }
.p-meshbooth .checked p { margin: 0 0 14px; }
.p-meshbooth .checked .limit { color: var(--mb-slate); }
@media (max-width: 900px) { .p-meshbooth .checked { grid-template-columns: 1fr; } }

/* ================= THE FORGE ================= */
.p-meshbooth .forge { display: grid; grid-template-columns: 6fr 5fr; gap: 48px; align-items: center; }
.p-meshbooth .forge__art { position: relative; cursor: pointer; }
.p-meshbooth .forge__art svg { width: 100%; height: auto; overflow: visible; }
.p-meshbooth .forge__art .hint { position: absolute; left: 0; bottom: -6px; font: 12px/1 var(--mb-m); color: var(--mb-ring); }
.p-meshbooth .forge-lowpoly .fx-hammer-pivot { transform-box: view-box; transform-origin: 1030px 128px; transform: rotate(-14deg); }
.p-meshbooth .forge-lowpoly.strike .fx-hammer-pivot { animation: mb-strike 1.1s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes mb-strike { 0% { transform: rotate(-14deg); } 42% { transform: rotate(-22deg); } 60% { transform: rotate(7deg); } 70% { transform: rotate(5deg); } 100% { transform: rotate(-14deg); } }
.p-meshbooth .forge-lowpoly .fx-spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.p-meshbooth .forge-lowpoly.strike .fx-spark { animation: mb-fx-spark .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.64s + var(--i) * 12ms); }
@keyframes mb-fx-spark { 0% { opacity: 0; transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) scale(.4); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--dx) * .35), calc(var(--dy) * .35 - 20px)) scale(.9); } }
.p-meshbooth .forge-lowpoly .fx-glow { opacity: .35; }
.p-meshbooth .forge-lowpoly.strike .fx-glow { animation: mb-heat 1.6s ease-out forwards; animation-delay: .6s; }
@keyframes mb-heat { 0% { opacity: .35; } 18% { opacity: 1; } 100% { opacity: .45; } }
.p-meshbooth .forge h2 { margin-bottom: 18px; }
.p-meshbooth .forge p { color: var(--mb-mist); margin: 0 0 16px; }
@media (max-width: 900px) { .p-meshbooth .forge { grid-template-columns: 1fr; gap: 28px; } }

/* ================= OTHER MODELS ================= */
.p-meshbooth .others { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.p-meshbooth .others figure { margin: 0; }
.p-meshbooth .others .frame { overflow: hidden; border: 1px solid var(--mb-edge); }
.p-meshbooth .others img { transition: transform .5s ease; }
.p-meshbooth .others figure:hover img { transform: scale(1.03); }
.p-meshbooth .others figcaption { margin-top: 10px; }
@media (max-width: 760px) { .p-meshbooth .others { grid-template-columns: 1fr; } }

/* ================= TESTED + LIMITATIONS ================= */
.p-meshbooth .ledgers { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.p-meshbooth .ledgers h3 { font-size: 26px; margin-bottom: 8px; }
.p-meshbooth .ledgers ul, .p-meshbooth .limits { list-style: none; margin: 0; padding: 0; }
.p-meshbooth .ledgers li { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid #c4bdb2; font-size: 16.5px; line-height: 1.45; }
.p-meshbooth .refund { margin: 26px 0 0; font-weight: 600; }
.p-meshbooth .limits { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.p-meshbooth .limits li { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--mb-stonedge); font-size: 16.5px; line-height: 1.5; color: var(--mb-ink); }
.p-meshbooth .limits li:first-child { grid-column: 1 / -1; font-weight: 600; }
@media (max-width: 760px) { .p-meshbooth .ledgers, .p-meshbooth .limits { grid-template-columns: 1fr; } }

/* ================= PRICE ================= */
.p-meshbooth .price { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.p-meshbooth .medal { position: relative; width: min(100%, 400px); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 42% 36%, #FBFAF8, var(--mb-stone) 58%, var(--mb-granite)); box-shadow: 0 0 0 2px var(--mb-gold), 0 0 0 9px var(--mb-iron2), 0 0 0 10px var(--mb-edge), 0 24px 60px -24px rgba(0,0,0,.7); }
.p-meshbooth .medal::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 1px solid rgba(122,78,22,.35); pointer-events: none; }
.p-meshbooth .eagle-forge { width: 70%; height: auto; transform: translate(-3%, 2%); }
.p-meshbooth .eagle-forge .eb { opacity: 0; }
.p-meshbooth .eagle-forge .ew { opacity: .6; transition: opacity .4s ease; }
.p-meshbooth .eagle-forge.forged .eb { animation: mb-band .26s ease forwards; animation-delay: calc(var(--i) * 90ms); }
.p-meshbooth .eagle-forge.forged .ew { opacity: .16; transition-delay: 1.35s; }
.p-meshbooth .eagle-forge.forged .eg { animation: mb-glint .5s ease-out 1.5s forwards; }
@keyframes mb-band { to { opacity: 1; } }
@keyframes mb-glint { 0% { opacity: 0; } 40% { opacity: .9; } 100% { opacity: 0; } }
.p-meshbooth .oak { position: relative; background: var(--mb-oak) url(../textures/oak.webp) center / cover; border: 1px solid #1d130b; padding: 30px 30px; max-width: 660px; }
.p-meshbooth .oak::before, .p-meshbooth .oak::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: var(--mb-iron2); border-block: 1px solid var(--mb-black); }
.p-meshbooth .oak::before { top: 24px; } .p-meshbooth .oak::after { bottom: 24px; }
.p-meshbooth .oak .inset { position: relative; z-index: 1; background: var(--mb-oak); padding: 22px 22px; border-block: 1px solid rgba(203,147,65,.5); }
.p-meshbooth .oak h3 { font-size: 23px; color: var(--mb-goldl); margin-bottom: 8px; }
.p-meshbooth .oak .amt { font: 600 72px/1 var(--mb-d); color: var(--mb-paper); }
.p-meshbooth .oak .then { color: var(--mb-goldl); font-size: 18px; margin-left: 8px; }
.p-meshbooth .oak .btn { margin-top: 18px; }
.p-meshbooth .oak ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; font-size: 16.5px; line-height: 1.45; }
.p-meshbooth .oak li { display: flex; gap: 11px; }
@media (max-width: 900px) { .p-meshbooth .price { grid-template-columns: 1fr; } .p-meshbooth .medal { width: min(100%, 260px); } .p-meshbooth .oak { padding: 26px 16px; } }

/* ================= FAQ ================= */
.p-meshbooth .faq { max-width: 860px; }
.p-meshbooth .faq details { border-bottom: 1px solid var(--mb-stonedge); }
.p-meshbooth .faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font: 600 23px/1.2 var(--mb-d); color: var(--mb-ink); }
.p-meshbooth .faq summary::-webkit-details-marker { display: none; }
.p-meshbooth .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--mb-bronze); border-bottom: 2px solid var(--mb-bronze); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.p-meshbooth .faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.p-meshbooth .faq details p { margin: 0 0 18px; color: var(--mb-slate); }

/* ================= CLOSING CTA + COLOPHON ================= */
.p-meshbooth .closing { text-align: center; }
.p-meshbooth .closing h2 { margin-bottom: 10px; }
.p-meshbooth .closing p { color: var(--mb-mist); margin: 0 auto 26px; max-width: 560px; }
.p-meshbooth .closing .acts { display: flex; justify-content: center; gap: 18px; align-items: center; flex-wrap: wrap; }
.p-meshbooth .ship { color: var(--mb-paper); opacity: .32; width: 100%; max-width: 1000px; margin: 0 auto 26px; }
.p-meshbooth .colophon { border-top: 1px solid var(--mb-edge); padding: 34px 0 30px; color: var(--mb-mist); }
.p-meshbooth .colophon p { margin: 0 0 6px; }

/* ================= PHONE BUY BAR ================= */
.p-meshbooth .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 60px; display: none; align-items: center; gap: 10px; padding: 0 14px; background: var(--mb-iron); border-top: 1px solid var(--mb-edge); transform: translateY(100%); transition: transform .22s ease-out; font: 600 17px/1 var(--mb-d); }
.p-meshbooth .buybar svg { width: 26px; height: 23px; color: var(--mb-gold); }
.p-meshbooth .buybar .btn { margin-left: auto; height: 42px; font-size: 17px; padding: 0 14px; }
.p-meshbooth .buybar.show { transform: none; }
@media (max-width: 760px) { .p-meshbooth .buybar { display: flex; } }

@media (prefers-reduced-motion: reduce) {
  .p-meshbooth .glow.on { animation: none; opacity: .55; }
  .p-meshbooth .pack__list li, .p-meshbooth .screen video, .p-meshbooth .screen__press { transition: none; }
  .p-meshbooth .dot, .p-meshbooth .sparks { display: none; }
  .p-meshbooth .files.arm li { opacity: 1; }
  .p-meshbooth .eagle-forge .eb { opacity: 1; animation: none !important; } .p-meshbooth .eagle-forge .ew { opacity: .16; }
  .p-meshbooth .forge-lowpoly .fx-hammer-pivot, .p-meshbooth .forge-lowpoly .fx-spark, .p-meshbooth .forge-lowpoly .fx-glow { animation: none !important; }
  .p-meshbooth .card, .p-meshbooth .others img, .p-meshbooth .btn { transition: none; }
  .p-meshbooth .buybar { transition: none; }
}