/* Meshbooth landing v2 (2026-09-25). Every rule is scoped to .p-meshbooth; keyframes are mb-*.
   Light page (paper, white cards, ink text); navy only where the product shows: hero, demo, renders, price.
   Gold is a fill (buttons, badges) or an accent on navy; on paper the accent is bronze (gold on paper is 2.4:1). */
.p-meshbooth {
  --paper: #F2F0EF; --paper2: #E8E4DF; --card: #FFFFFF; --line: #D9D3CB;
  --ink: #121A24; --ink2: #3E4A59;
  --navy: #121A24; --navy2: #1B2A3E; --black: #0C1117; --edge: #2C3A4F; --rivet: #3A4658; --mist: #C9D0D9;
  --gold: #CB9341; --gold2: #E4B86A; --bronze: #8A5A1C; --ember: #E0672A;
  --fd: 'Barlow Condensed', 'Arial Narrow', sans-serif; --fs: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --ft: 'Source Serif 4', Georgia, serif; --fm: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
  /* chrome tokens: the shared header and footer, light */
  --chrome-bg: #F2F0EF; --chrome-fg: #121A24; --chrome-muted: #3E4A59; --chrome-rule: #D9D3CB;
  --chrome-accent: #121A24; --chrome-accent-fg: #FFFFFF; --chrome-accent-hi: #8A5A1C; --focus: #8A5A1C;
  background: var(--paper); color: var(--ink); font: 400 18px/1.55 var(--ft);
}
.p-meshbooth .m { font: 12.5px/1.5 var(--fm); }
.p-meshbooth h1, .p-meshbooth h2, .p-meshbooth h3 { margin: 0; font-family: var(--fd); font-weight: 700; line-height: 1.03; letter-spacing: .003em; }
.p-meshbooth h2 { font-size: clamp(32px, 4.2vw, 48px); }
.p-meshbooth .sec { padding: 76px 0; }
.p-meshbooth .alt { background: var(--paper2); }
.p-meshbooth .lead { max-width: 46em; margin: 10px 0 0; color: var(--ink2); }
.p-meshbooth .grain { background-image: url(../textures/stone-grain.png); background-size: 256px; }
@media (max-width: 760px) { .p-meshbooth .sec { padding: 52px 0; } .p-meshbooth { font-size: 17px; } }
/* dark areas: light focus ring */
.p-meshbooth .hero :focus-visible, .p-meshbooth .demo :focus-visible, .p-meshbooth .price :focus-visible,
.p-meshbooth .buybar :focus-visible, .p-meshbooth .pack :focus-visible, .p-meshbooth .viewer :focus-visible,
.p-meshbooth .forge :focus-visible { outline-color: var(--gold2); }

/* ---- buttons: gold fill with navy text (6.5:1); press is a hammer tap ---- */
.p-meshbooth .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border: 0; border-radius: 4px; background: var(--gold); color: var(--navy); font: 700 20px/1 var(--fs); letter-spacing: .01em; text-decoration: none; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(12,17,23,.25); transition: background .16s ease, box-shadow .16s ease, transform .08s linear; }
.p-meshbooth .btn:hover { background: var(--gold2); box-shadow: inset 0 -2px 0 rgba(12,17,23,.25), 0 0 0 4px rgba(228,184,106,.18); }
.p-meshbooth .btn:active { transform: translateY(1px); }
.p-meshbooth .btn svg { width: 18px; height: 18px; }
.p-meshbooth .btn--navy { background: var(--navy); color: #fff; box-shadow: none; }
.p-meshbooth .btn--navy:hover { background: var(--navy2); box-shadow: none; }
.p-meshbooth .btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.p-meshbooth .btn--line:hover { background: var(--card); box-shadow: inset 0 0 0 2px var(--ink); }

/* ---- small marks ---- */
.p-meshbooth .ic { width: 26px; height: 26px; flex: none; color: var(--bronze); }
.p-meshbooth .hm { flex: none; display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--bronze); box-shadow: 0 0 0 1.5px var(--gold2); }
.p-meshbooth .hm.open { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink2); }

/* ---- iron plate: frame, rivets, gold inlay (renders only) ---- */
.p-meshbooth .plate { position: relative; background: var(--black); border: 1px solid var(--edge); padding: 8px; }
.p-meshbooth .plate::after { content: ""; position: absolute; inset: 7px; 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(--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; }

/* ================= HEADER (light) ================= */
.p-meshbooth .pbar { height: 60px; }
.p-meshbooth .lockup { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 700 23px/1 var(--fs); letter-spacing: .01em; }
.p-meshbooth .lockup img { width: 34px; height: auto; }
.p-meshbooth .lockup b { color: var(--bronze); font-weight: 700; }
.p-meshbooth .pbar__nav a { font-size: 15px; }
.p-meshbooth .pbar .btn { min-height: 40px; padding: 0 16px; font-size: 17px; margin-left: 8px; }
@media (max-width: 900px) { .p-meshbooth .pbar .btn { margin-left: auto; } }
@media (max-width: 760px) { .p-meshbooth .pbar { height: 56px; } .p-meshbooth .pbar .btn { display: none; } }

/* ================= 1. HERO ================= */
.p-meshbooth .hero { background-color: var(--navy); color: #fff; }
.p-meshbooth .hero__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 52px; align-items: center; padding: 76px 0 80px; }
.p-meshbooth .hero__name { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font: 600 20px/1 var(--fd); letter-spacing: .03em; color: var(--gold2); }
.p-meshbooth .hero__name svg { width: 24px; height: 22px; color: var(--gold); }
.p-meshbooth .hero h1 { font-size: clamp(42px, 5.1vw, 68px); line-height: .99; color: #fff; }
.p-meshbooth .hero h1 em { font-style: normal; color: var(--gold2); }
.p-meshbooth .hero__sub { max-width: 32em; margin: 20px 0 28px; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--mist); }
.p-meshbooth .hero__fine { margin: 14px 0 0; font: 600 17px/1.35 var(--fs); letter-spacing: .01em; color: var(--mist); }
.p-meshbooth .hero__fine b { color: var(--gold2); font-weight: 700; }
.p-meshbooth .hero__shot { margin: 0; }
.p-meshbooth .hero__shot img { width: 100%; }
.p-meshbooth .hero__shot figcaption { margin-top: 9px; color: var(--mist); }
@media (max-width: 900px) {
  .p-meshbooth .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 34px 0 40px; }
  .p-meshbooth .hero__name { font-size: 18px; margin-bottom: 14px; }
  .p-meshbooth .hero .btn { width: 100%; }
}

/* ================= 2. MODEL -> MESHBOOTH -> 9-FILE LISTING PACK ================= */
.p-meshbooth .flow__title { font-size: clamp(27px, 3.4vw, 42px); text-transform: uppercase; letter-spacing: .025em; }
.p-meshbooth .flow__title .to { color: var(--bronze); margin: 0 .12em; }
.p-meshbooth .flow { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, .64fr) 46px minmax(0, 1.12fr); align-items: center; margin-top: 34px; }
.p-meshbooth .flow__step { position: relative; margin: 0; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; transition: border-color .45s, box-shadow .45s; }
.p-meshbooth .flow__step .no { position: absolute; z-index: 2; top: -12px; left: 12px; min-width: 32px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 3px; background: var(--navy); color: var(--gold2); font: 700 14px/1 var(--fd); letter-spacing: .08em; }
.p-meshbooth .flow__img { position: relative; overflow: hidden; border-radius: 3px; background: var(--black); aspect-ratio: 4 / 3; }
.p-meshbooth .flow__img img { width: 100%; height: 100%; object-fit: cover; }
.p-meshbooth .flow__img.panel { background: #232323; aspect-ratio: 4 / 5; container-type: inline-size; }
.p-meshbooth .flow__img.panel img { object-position: 50% 100%; }
/* the Create Listing Pack button inside the panel image (420 x 710: x 24-366, 10 px from the bottom, 55 px high) */
.p-meshbooth .flow__img .press { position: absolute; left: calc(24 / 420 * 100cqw); width: calc(342 / 420 * 100cqw); bottom: calc(10 / 420 * 100cqw); height: calc(55 / 420 * 100cqw); border-radius: 4px; box-shadow: 0 0 0 2px var(--gold2), 0 0 24px 6px rgba(228,184,106,.5); opacity: 0; }
.p-meshbooth .flow__step figcaption { margin-top: 10px; font: 700 18px/1.25 var(--fs); color: var(--ink); }
.p-meshbooth .flow__arr { position: relative; align-self: center; height: 40px; }
.p-meshbooth .flow__arr::before { content: ""; position: absolute; left: 8px; right: 10px; top: 50%; height: 2px; background: var(--line); }
.p-meshbooth .flow__arr::after { content: ""; position: absolute; right: 4px; top: calc(50% - 6px); border: 7px solid transparent; border-left-color: var(--bronze); }
.p-meshbooth .flow__arr .dot { position: absolute; top: calc(50% - 4px); left: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 12px 3px rgba(224,103,42,.55); opacity: 0; }
.p-meshbooth .flow[data-step="1"] .flow__model, .p-meshbooth .flow[data-step="2"] .flow__mb, .p-meshbooth .flow[data-step="3"] .flow__pack { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(203,147,65,.22); }
.p-meshbooth .flow[data-step="1"] .a1 .dot { animation: mb-travel .7s cubic-bezier(.45,0,.2,1) forwards; }
.p-meshbooth .flow[data-step="2"] .a2 .dot { animation: mb-travel .7s cubic-bezier(.45,0,.2,1) .45s forwards; }
.p-meshbooth .flow[data-step="2"] .press { animation: mb-press 1.1s ease-out forwards; }
@keyframes mb-travel { 0% { opacity: 1; left: 8px; } 88% { opacity: 1; } 100% { opacity: 0; left: calc(100% - 16px); } }
@keyframes mb-travel-v { 0% { opacity: 1; top: 2px; } 88% { opacity: 1; } 100% { opacity: 0; top: calc(100% - 10px); } }
@keyframes mb-press { 0% { opacity: 0; transform: scale(1); } 25% { opacity: 1; transform: scale(.985); } 45% { opacity: 1; transform: scale(1); } 100% { opacity: .35; } }

/* the folder: real files, real sizes; the animation only reveals them in Meshbooth's order */
.p-meshbooth .pack { background: var(--black); border: 1px solid var(--edge); border-radius: 3px; color: #fff; }
.p-meshbooth .pack__h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--edge); font: 700 17px/1 var(--fs); }
.p-meshbooth .pack__h .ic { width: 20px; height: 20px; color: var(--gold2); }
.p-meshbooth .pack__h em { margin-left: auto; font-style: normal; color: var(--gold2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.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: #fff; font: 12.5px/1.3 var(--fm); text-align: left; cursor: zoom-in; transition: background .16s; }
.p-meshbooth .pack__list button:hover { background: var(--navy2); }
.p-meshbooth .pack__list button:focus-visible { outline: 2px solid var(--gold2); 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; color: var(--gold2); }
.p-meshbooth .pack__list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-meshbooth .pack__list .sz { color: var(--mist); font-variant-numeric: tabular-nums; }
.p-meshbooth .badge { display: inline-block; margin-left: 7px; padding: 1px 5px; background: var(--gold2); color: var(--navy); font: 700 11px/1.4 var(--fm); vertical-align: 1px; }
.p-meshbooth .badge.differs { background: var(--ember); color: #fff; }
.p-meshbooth .pack__list li { transition: opacity .3s 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,.18); box-shadow: inset 2px 0 0 var(--gold); }
.p-meshbooth .pack__foot { margin: 0; padding: 9px 12px; border-top: 1px solid var(--edge); font: 700 17px/1.2 var(--fs); color: var(--gold2); transition: opacity .4s; }
.p-meshbooth .pack__foot.wait { opacity: 0; }
.p-meshbooth .pack__note { margin: 0; padding: 0 12px 11px; color: var(--mist); font-size: 11.5px; }

@media (max-width: 900px) {
  .p-meshbooth .flow { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); grid-template-areas: "m a1 p" "a2 a2 a2" "k k k"; align-items: start; margin-top: 28px; }
  .p-meshbooth .flow__model { grid-area: m; } .p-meshbooth .flow__mb { grid-area: p; } .p-meshbooth .a1 { grid-area: a1; } .p-meshbooth .a2 { grid-area: a2; } .p-meshbooth .flow__pack { grid-area: k; }
  .p-meshbooth .flow__step { padding: 8px; }
  .p-meshbooth .flow__img.panel { aspect-ratio: 4 / 3; }
  .p-meshbooth .flow__step figcaption { font-size: 15.5px; margin-top: 7px; }
  .p-meshbooth .a1 { align-self: start; margin-top: calc((100vw - 32px - 30px) / 2 * .375 - 12px); height: 24px; }
  .p-meshbooth .a1::before { left: 3px; right: 6px; } .p-meshbooth .a1::after { right: 0; }
  .p-meshbooth .a2 { height: 44px; width: 24px; justify-self: center; }
  .p-meshbooth .a2::before { left: 11px; right: auto; top: 4px; bottom: 10px; width: 2px; height: auto; }
  .p-meshbooth .a2::after { left: 5px; right: auto; top: auto; bottom: -4px; border-left-color: transparent; border-top-color: var(--bronze); }
  .p-meshbooth .a2 .dot { left: 8px; }
  .p-meshbooth .flow[data-step="1"] .a1 .dot { animation-duration: .5s; }
  .p-meshbooth .flow[data-step="2"] .a2 .dot { animation-name: mb-travel-v; }
}

/* ================= 3. BENEFITS ================= */
.p-meshbooth .benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.p-meshbooth .benefit { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 22px 22px 20px; }
.p-meshbooth .benefit .ic { width: 30px; height: 30px; }
.p-meshbooth .benefit h3 { font-size: 29px; margin: 14px 0 8px; }
.p-meshbooth .benefit p { margin: 0; color: var(--ink2); font-size: 17px; line-height: 1.5; }
@media (max-width: 900px) { .p-meshbooth .benefits { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; } .p-meshbooth .benefit { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding: 18px; } .p-meshbooth .benefit h3 { margin: 0 0 6px; font-size: 26px; } .p-meshbooth .benefit p { grid-column: 2; } }

/* ================= 3b. YOUR TIME (2026-09-26) =================
   Only measured facts on the left (one click; 4 to 6.5 min on the test PC; the steps are core.Job.steps in order).
   The calculator on the right runs on the visitor's own numbers; its example values are labelled as examples. */
.p-meshbooth .time__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: start; margin-top: 30px; }
.p-meshbooth .who { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.p-meshbooth .who li { display: flex; align-items: baseline; gap: 16px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.p-meshbooth .who__k { flex: 0 0 8.6em; font: 700 21px/1.15 var(--fs); letter-spacing: .01em; color: var(--bronze); }
.p-meshbooth .who__v { font-size: 17px; line-height: 1.45; color: var(--ink2); }
.p-meshbooth .who__v b { font: 700 1.06em/1 var(--fs); color: var(--ink); }
.p-meshbooth .who li.who__mb { background-color: var(--navy); border-color: var(--edge); }
.p-meshbooth .who__mb .who__k { color: var(--gold2); }
.p-meshbooth .who__mb .who__v { color: var(--mist); }
.p-meshbooth .jobs { list-style: none; counter-reset: job; margin: 18px 0 0; padding: 0; columns: 2; column-gap: 28px; }
.p-meshbooth .jobs li { counter-increment: job; break-inside: avoid; position: relative; padding: 8px 0 8px 38px; border-top: 1px solid var(--line); font-size: 16.5px; line-height: 1.45; }
.p-meshbooth .jobs li::before { content: counter(job, decimal-leading-zero); position: absolute; left: 0; top: 9px; font: 600 13px/1.5 var(--fm); color: var(--bronze); }
.p-meshbooth .time .note { margin-top: 12px; font-size: 15px; }
.p-meshbooth .calc { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 24px 24px 22px; }
.p-meshbooth .calc h3 { font-size: 29px; margin-bottom: 14px; }
.p-meshbooth .calc__ex { margin: -8px 0 16px; font: 700 14px/1.3 var(--fs); letter-spacing: .06em; text-transform: uppercase; color: var(--bronze); }
.p-meshbooth .calc__f { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; margin: 0 0 12px; }
.p-meshbooth .calc__f label { font: 600 17px/1.3 var(--fs); color: var(--ink); }
.p-meshbooth .calc__f output { font: 700 21px/1 var(--fs); color: var(--ink); font-variant-numeric: tabular-nums; }
.p-meshbooth .calc__f input { grid-column: 1 / -1; width: 100%; height: 30px; margin: 0; accent-color: var(--bronze); cursor: pointer; }
.p-meshbooth .calc__chart { display: grid; gap: 12px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.p-meshbooth .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: baseline; }
.p-meshbooth .bar__k { font: 600 16px/1.2 var(--fs); color: var(--ink2); }
.p-meshbooth .bar__v { font: 700 19px/1 var(--fs); font-variant-numeric: tabular-nums; }
.p-meshbooth .bar__t { grid-column: 1 / -1; height: 16px; background: var(--paper2); border-radius: 3px; overflow: hidden; }
.p-meshbooth .bar__t i { display: block; height: 100%; min-width: 4px; border-radius: 3px; transition: width .35s ease; }
.p-meshbooth .bar.hand .bar__t i { background: var(--ink2); }
.p-meshbooth .bar.mb .bar__t i { background: var(--gold); }
.p-meshbooth .calc__out { margin: 18px 0 0; font-size: 17.5px; line-height: 1.5; }
.p-meshbooth .calc__out b { font-weight: 600; color: var(--bronze); }
.p-meshbooth .calc__fine { margin: 12px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink2); }
@media (max-width: 900px) {
  .p-meshbooth .time__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 24px; }
  .p-meshbooth .jobs { columns: 1; }
}
@media (max-width: 760px) {
  .p-meshbooth .who li { flex-direction: column; gap: 2px; padding: 12px 16px; }
  .p-meshbooth .who__k { flex: none; }
  .p-meshbooth .calc { padding: 20px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .p-meshbooth .bar__t i { transition: none; } }

/* ================= 4. DEMO ================= */
.p-meshbooth .demo { position: relative; max-width: 1000px; margin: 30px auto 0; padding: 16px 16px 14px; background-color: var(--navy); color: #fff; border-radius: 8px; }
.p-meshbooth .stage { position: relative; }
.p-meshbooth .glow { position: absolute; inset: 0 -6% -14% -6%; 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 { list-style: none; margin: 0 0 12px; padding: 0; display: flex; align-items: center; gap: 8px; font: 700 17px/1 var(--fs); letter-spacing: .01em; }
.p-meshbooth .steps li[data-step] { display: flex; align-items: center; gap: 7px; padding: 7px 11px 7px 8px; border: 1px solid var(--edge); border-radius: 3px; color: var(--mist); transition: color .3s, background .3s, border-color .3s; white-space: nowrap; }
.p-meshbooth .steps b { display: grid; place-items: center; min-width: 26px; height: 20px; padding: 0 4px; font: 700 13px/1 var(--fd); letter-spacing: .06em; border: 1px solid currentColor; }
.p-meshbooth .steps li.done { color: var(--gold2); }
.p-meshbooth .steps li.on { color: var(--navy); background: var(--gold2); border-color: var(--gold2); }
.p-meshbooth .steps .arr { flex: 1; max-width: 60px; min-width: 8px; height: 2px; background: var(--rivet); position: relative; }
.p-meshbooth .steps .arr::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--rivet); }
.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: #fff; border-left: 2px solid var(--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(--edge); }
.p-meshbooth .screen__press.show { opacity: 1; transform: none; box-shadow: 0 0 0 2px var(--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(--gold2), 0 0 26px 6px rgba(228,184,106,.5); }
.p-meshbooth .stage__bar { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.p-meshbooth .stage__bar button { flex: none; background: transparent; color: #fff; border: 1px solid var(--edge); border-radius: 3px; padding: 8px 13px; font: 700 16px/1 var(--fs); cursor: pointer; transition: border-color .16s, color .16s; }
.p-meshbooth .stage__bar button:hover { border-color: var(--gold); color: var(--gold2); }
.p-meshbooth .stage__bar button[aria-pressed="true"] { color: var(--gold2); border-color: var(--gold); }
.p-meshbooth .stage__bar .cap { margin: 0 0 0 6px; color: var(--mist); font-size: 12px; line-height: 1.45; }
@media (max-width: 760px) {
  .p-meshbooth .demo { padding: 10px 10px 12px; margin-top: 24px; border-radius: 6px; }
  .p-meshbooth .steps { font-size: 14.5px; 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: 14px; min-width: 6px; }
  .p-meshbooth .plate { padding: 6px; } .p-meshbooth .plate::after { inset: 5px; }
  .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 */
}
@media (max-width: 760px) { .p-meshbooth .steps b { display: none; } .p-meshbooth .steps li[data-step] { padding: 6px 8px; } }

/* ================= 5. OUTPUTS ================= */
/* "What you get" on the hero's own iron (navy + stone grain): the white cards and the model buttons stand out
   like pieces on a workbench. No glow, no gradient: the brand's rules. */
.p-meshbooth .forge { background-color: var(--navy); color: #fff; }
/* the brand sprayed on the iron, faint (build_graffiti.py, opacity baked in): the name as a throw-up top right, the
   eagle stencil bottom right, a tag with a crown bottom left; in the side margins of wide screens, ONE CLICK through
   a stencil and MB in bubble letters on the left, a HELLO sticker on the right. On narrower screens they sit behind
   the cards and peek out between them. The section's own background, never on a render. */
.p-meshbooth .forge.grain {
  background-image: url(../img/meshbooth/graffiti-throwup-v2.webp), url(../img/meshbooth/graffiti-eagle-v2.webp),
                    url(../img/meshbooth/graffiti-tag-v2.webp), url(../img/meshbooth/graffiti-crown-v2.webp),
                    url(../img/meshbooth/graffiti-stencil-v2.webp), url(../img/meshbooth/graffiti-bubble-v2.webp),
                    url(../img/meshbooth/graffiti-slap-v2.webp), url(../textures/stone-grain.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: 940px auto, 420px auto, 581px auto, 150px auto, 460px auto, 380px auto, 300px auto, 256px;
  background-position: right max(0px, calc(50% - 700px)) top 18px, right max(12px, calc(50% - 700px)) bottom 16px,
                       left max(0px, calc(50% - 720px)) bottom 24px, left calc(max(0px, 50% - 720px) + 24px) bottom 222px,
                       left max(0px, calc(50% - 940px)) top 34%, left max(0px, calc(50% - 920px)) top 62%,
                       right max(0px, calc(50% - 930px)) top 40%, 0 0;
}
@media (max-width: 760px) {
  .p-meshbooth .forge.grain { background-size: 560px auto, 260px auto, 320px auto, 90px auto, 280px auto, 220px auto, 180px auto, 256px;
    background-position: right -60px top 8px, right 6px bottom 10px, left -10px bottom 14px, left 14px bottom 130px,
                         left -20px top 36%, left -10px top 64%, right -10px top 46%, 0 0; }
}
.p-meshbooth .forge h2 { color: #fff; }
.p-meshbooth .forge > .wrap > .lead, .p-meshbooth .forge > .wrap > .note { color: var(--mist); }
.p-meshbooth .forge .also .also__h { color: var(--gold2); }
.p-meshbooth .forge .btn--line { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); }
.p-meshbooth .forge .btn--line:hover { background: var(--navy2); box-shadow: inset 0 0 0 2px #fff; }
/* the cards are paper on the iron: their text keeps the ink colour, not the section's white */
.p-meshbooth .forge .tile, .p-meshbooth .forge .also__i, .p-meshbooth .forge .pick button { border-color: var(--edge); color: var(--ink); }
.p-meshbooth .forge .tile:hover, .p-meshbooth .forge .pick button:hover { border-color: var(--gold); }
.p-meshbooth .forge .pick button[aria-pressed="true"] { border-color: var(--gold2); box-shadow: inset 0 0 0 2px var(--gold2), 0 0 0 3px rgba(228,184,106,.25); }
/* the model picker: one real run per model (build_models_assets.py), the pressed one ringed in gold */
.p-meshbooth .pick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.p-meshbooth .pick button { flex: 0 0 auto; width: 120px; display: grid; gap: 6px; padding: 5px 5px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: 700 15px/1.1 var(--fs); text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .08s linear; }
.p-meshbooth .pick button:hover { border-color: var(--gold); }
.p-meshbooth .pick button:active { transform: translateY(1px); }
.p-meshbooth .pick button[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold), 0 6px 16px -10px rgba(18,26,36,.5); }
.p-meshbooth .pick img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; background: var(--paper2); }
.p-meshbooth .pick span { padding: 0 3px; }
@media (max-width: 760px) {
  /* one row that scrolls sideways; the edge of the next button shows there is more */
  .p-meshbooth .pick { flex-wrap: nowrap; overflow-x: auto; margin: 18px -16px 0; padding: 2px 16px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .p-meshbooth .pick::-webkit-scrollbar { display: none; }
  .p-meshbooth .pick button { width: 108px; scroll-snap-align: start; }
}
/* swapping a model: the old picture dims until the new one has loaded */
.p-meshbooth .tile__media img { transition: opacity .28s ease; }
.p-meshbooth .tile__media img.swap { opacity: .25; }
.p-meshbooth .pick__note { margin-top: 14px; }
/* CC BY asks for title, author, source and licence where the models are shown, so this line never changes */
.p-meshbooth .forge .pick__credits { margin-top: 6px; font-size: 14.5px; }
.p-meshbooth .forge .pick__credits a { color: var(--gold2); text-underline-offset: 2px; }
/* four pictures, two across: the section sells with what the pack LOOKS like */
.p-meshbooth .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.p-meshbooth .tile { margin: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.p-meshbooth .tile:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 26px -16px rgba(18,26,36,.45); }
.p-meshbooth .tile__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--black); }
.p-meshbooth .tile__media > img, .p-meshbooth .tile__media video { width: 100%; height: 100%; object-fit: cover; }
.p-meshbooth .tile figcaption { padding: 14px 16px 16px; }
.p-meshbooth .tile h3 { display: flex; align-items: baseline; gap: 10px; font-size: 26px; }
.p-meshbooth .tile h3 .n { margin-left: auto; white-space: nowrap; font: 700 14px/1 var(--fs); letter-spacing: .03em; color: var(--bronze); }
.p-meshbooth .tile p { margin: 6px 0 0; color: var(--ink2); font-size: 16.5px; line-height: 1.45; }
.p-meshbooth .tile .fn { margin-top: 8px; font: 12px/1.4 var(--fm); color: var(--ink2); }
/* a file name or a size never breaks in the middle ("1600 ×" / "1200"); the line wraps at the separators */
.p-meshbooth .tile .fn span { white-space: nowrap; }
/* compare: before / after (hero) and light / dark (outputs); the overlay shows right of the split */
.p-meshbooth .compare { position: relative; overflow: hidden; user-select: none; background: #000; }
.p-meshbooth .compare.ba { aspect-ratio: 16 / 9; }
.p-meshbooth .compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-meshbooth .compare .over { clip-path: inset(0 0 0 var(--split, 50%)); }
.p-meshbooth .compare .handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; background: var(--gold); transform: translateX(-1px); pointer-events: none; }
.p-meshbooth .compare .handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--navy) 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(--gold); }
.p-meshbooth .compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.p-meshbooth .compare .lbl { position: absolute; top: 10px; padding: 5px 8px; background: rgba(12,17,23,.74); color: #fff; font: 700 14px/1 var(--fs); pointer-events: none; }
.p-meshbooth .compare .lbl.l { left: 10px; } .p-meshbooth .compare .lbl.r { right: 10px; }
.p-meshbooth .compare:focus-within .handle::after { box-shadow: 0 0 0 2px var(--gold2), 0 0 0 5px rgba(228,184,106,.35); }
/* turntable */
.p-meshbooth .vid button { position: absolute; right: 8px; bottom: 8px; background: var(--navy); color: #fff; border: 1px solid var(--edge); border-radius: 3px; padding: 6px 10px; font: 700 15px/1 var(--fs); cursor: pointer; }
/* stats.json as saved: only the file viewer of the hero folder shows it now */
.p-meshbooth .stats { background: var(--black); color: #fff; padding: 14px; font: 12px/1.6 var(--fm); white-space: pre; overflow: auto; margin: 0;
  scrollbar-width: thin; scrollbar-color: var(--rivet) transparent; }
.p-meshbooth .stats::-webkit-scrollbar { width: 8px; height: 8px; }
.p-meshbooth .stats::-webkit-scrollbar-track { background: transparent; }
.p-meshbooth .stats::-webkit-scrollbar-thumb { background: var(--rivet); border-radius: 4px; }
.p-meshbooth .stats .k { color: var(--gold2); }
/* "Also in the folder": the three files that are not pictures (GLB, FBX, stats.json), said in words.
   Luis, 2026-09-25: no code on screen, it does not sell. The pictures above carry the section. */
.p-meshbooth .also { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 22px; }
.p-meshbooth .also .also__h { grid-column: 1 / -1; margin: 0; font: 700 14px/1 var(--fs); letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); }
.p-meshbooth .also__i { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; }
.p-meshbooth .also__i > .ic { margin-top: 2px; }
.p-meshbooth .also__i > div { flex: 1; min-width: 0; }
.p-meshbooth .also h3 { display: flex; align-items: baseline; gap: 10px; font-size: 22px; }
.p-meshbooth .also h3 .n { margin-left: auto; white-space: nowrap; font: 700 14px/1 var(--fs); letter-spacing: .03em; color: var(--bronze); }
.p-meshbooth .also p { margin: 6px 0 0; color: var(--ink2); font-size: 16px; line-height: 1.45; }
.p-meshbooth .also .fn { margin-top: 8px; font: 12px/1.4 var(--fm); }
.p-meshbooth .also .fn span { white-space: nowrap; }
/* the verdict, as the stamp the hero folder shows */
.p-meshbooth .also .ok { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; padding: 3px 7px 3px 5px; vertical-align: 1px; color: var(--bronze); box-shadow: inset 0 0 0 1.5px var(--gold); border-radius: 2px; font: 700 13px/1 var(--fs); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.p-meshbooth .also .ok .ic { width: 14px; height: 14px; color: var(--bronze); }
@media (max-width: 760px) { .p-meshbooth .also { grid-template-columns: minmax(0, 1fr); } }
.p-meshbooth .tiles__more { margin-top: 20px; text-align: center; }
.p-meshbooth .tiles__more .btn { min-width: 220px; }
@media (max-width: 900px) { .p-meshbooth .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 760px) {
  .p-meshbooth .tiles { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .p-meshbooth .tiles.is-collapsed .tile:nth-child(n+3) { display: none; }
}
@media (min-width: 761px) { .p-meshbooth .tiles__more { display: none; } }

/* ================= 5b. OTHER MODELS ================= */
.p-meshbooth .others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.p-meshbooth .others figure { margin: 0; }
.p-meshbooth .others .frame { overflow: hidden; border-radius: 6px; background: var(--black); }
.p-meshbooth .others img { width: 100%; transition: transform .5s ease; }
.p-meshbooth .others figure:hover img { transform: scale(1.03); }
.p-meshbooth .others figcaption { margin-top: 8px; color: var(--ink2); }
.p-meshbooth .others__note { margin-top: 14px; font-size: 15px; }
@media (max-width: 760px) {
  .p-meshbooth .others { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 6px; scrollbar-width: thin; }
  .p-meshbooth .others figure { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ================= 6. COMPATIBILITY ================= */
.p-meshbooth .chips { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.p-meshbooth .chip { display: flex; align-items: center; gap: 10px; padding: 11px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font: 700 19px/1.1 var(--fs); }
.p-meshbooth .chip b { color: var(--bronze); font-weight: 700; }
.p-meshbooth .chip.soon { background: transparent; border: 1.5px dashed var(--ink2); }
.p-meshbooth .note { max-width: 46em; margin: 16px 0 0; color: var(--ink2); font-size: 16.5px; }
@media (max-width: 760px) { .p-meshbooth .chip { font-size: 17.5px; padding: 10px 15px; } }

/* ================= 7. PRICE ================= */
.p-meshbooth .price { position: relative; max-width: 760px; margin: 0 auto; padding: 44px 28px 36px; text-align: center; background-color: var(--navy); color: #fff; border: 1px solid var(--edge); border-radius: 8px; }
.p-meshbooth .price::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(203,147,65,.3); border-radius: 4px; pointer-events: none; }
.p-meshbooth .price h2 { display: flex; align-items: center; justify-content: center; gap: 9px; font: 600 20px/1.2 var(--fd); letter-spacing: .03em; color: var(--gold2); }
.p-meshbooth .price h2 svg { width: 24px; height: 22px; color: var(--gold); flex: none; }
.p-meshbooth .price__amt { margin: 16px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.p-meshbooth .price .amt { font: 700 clamp(78px, 12vw, 112px)/.95 var(--fd); color: #fff; }
.p-meshbooth .price .was { font: 600 30px/1 var(--fs); color: var(--mist); text-decoration-thickness: 2px; }
.p-meshbooth .price__until { margin: 8px 0 24px; font: 700 20px/1.3 var(--fs); color: var(--gold2); }
.p-meshbooth .price .btn { position: relative; z-index: 1; }
.p-meshbooth .price__fine { margin: 16px 0 0; color: var(--mist); font-size: 16px; }
.p-meshbooth .price__inc { margin: 8px 0 0; color: var(--mist); font-size: 15px; }
@media (max-width: 760px) { .p-meshbooth .price { padding: 36px 18px 28px; } .p-meshbooth .price .btn { width: 100%; } }

/* ================= 8. FAQ + TECHNICAL DETAILS ================= */
.p-meshbooth .faq h2, .p-meshbooth .faq details { max-width: 880px; }
.p-meshbooth .faq h2 { margin-bottom: 20px; }
.p-meshbooth .faq details { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.p-meshbooth .faq summary { list-style: none; cursor: pointer; position: relative; padding: 16px 48px 16px 18px; font: 700 21px/1.25 var(--fs); color: var(--ink); }
.p-meshbooth .faq summary::-webkit-details-marker { display: none; }
.p-meshbooth .faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--bronze); border-bottom: 2px solid var(--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; padding: 0 18px 18px; color: var(--ink2); }
.p-meshbooth .faq details.tech { margin-top: 18px; background: transparent; border: 1.5px dashed var(--ink2); }
.p-meshbooth .faq details.tech summary { font-size: 18px; color: var(--ink2); }
.p-meshbooth .tech__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; padding: 0 18px 18px; color: var(--ink2); font-size: 15.5px; line-height: 1.5; }
.p-meshbooth .tech__body h3 { margin: 12px 0 6px; font: 700 18px/1.2 var(--fs); color: var(--ink); }
.p-meshbooth .tech__body ul { margin: 0; padding-left: 18px; }
.p-meshbooth .tech__body li { margin: 3px 0; }
.p-meshbooth .tech__body p { margin: 8px 0 0; }
@media (max-width: 760px) { .p-meshbooth .tech__body { grid-template-columns: minmax(0, 1fr); } .p-meshbooth .faq summary { font-size: 19.5px; } }

/* ================= FOOTER (light) ================= */
.p-meshbooth .sfoot { background: var(--paper); }
.p-meshbooth .sfoot__fine { margin-top: 10px; }

/* ================= PHONE BUY BAR ================= */
.p-meshbooth .buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 62px; display: none; align-items: center; gap: 10px; padding: 0 14px; background: var(--navy); color: #fff; border-top: 1px solid var(--edge); transform: translateY(100%); transition: transform .22s ease-out; font: 700 17px/1 var(--fs); }
.p-meshbooth .buybar svg { width: 26px; height: 23px; flex: none; color: var(--gold); }
.p-meshbooth .buybar b { color: var(--gold2); }
.p-meshbooth .buybar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-meshbooth .buybar.show { transform: none; }
@media (max-width: 760px) { .p-meshbooth .buybar { display: flex; } }

/* ================= FILE VIEWER ================= */
.p-meshbooth .viewer { width: min(1180px, 94vw); max-height: 92vh; padding: 0; border: 1px solid var(--edge); background: var(--navy); color: #fff; }
.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(--edge); }
.p-meshbooth .viewer__bar h2 { font: 600 14px/1.2 var(--fm); }
.p-meshbooth .viewer__bar span { color: var(--mist); }
.p-meshbooth .viewer__x { margin-left: auto; background: transparent; color: #fff; border: 1px solid var(--edge); padding: 6px 12px; font: 700 16px/1 var(--fs); cursor: pointer; }
.p-meshbooth .viewer__x:hover { border-color: var(--gold); color: var(--gold2); }
.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(--mist); }
/* the full demo film, with sound (2026-09-28): a button under the demo box, the film in a viewer-style dialog */
/* 2026-09-28: a big poster card under the demo box, and a text link in the hero, both open the film */
.p-meshbooth .film__card { position: relative; display: block; width: 100%; max-width: 1000px; margin: 22px auto 0; padding: 0; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; background: var(--black); cursor: pointer; }
.p-meshbooth .film__card img { display: block; width: 100%; height: auto; opacity: .8; transition: opacity .2s ease, transform .5s ease; }
.p-meshbooth .film__card:hover img, .p-meshbooth .film__card:focus-visible img { opacity: 1; transform: scale(1.015); }
.p-meshbooth .film__big { position: absolute; left: 50%; top: 44%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 10px rgba(203,147,65,.28), 0 12px 32px rgba(0,0,0,.5); transition: transform .16s ease; }
.p-meshbooth .film__big::after { content: ""; position: absolute; left: 43px; top: 33px; border-left: 34px solid var(--navy); border-top: 23px solid transparent; border-bottom: 23px solid transparent; }
.p-meshbooth .film__card:hover .film__big { transform: scale(1.06); }
.p-meshbooth .film__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px; background: linear-gradient(rgba(12,17,23,0), rgba(12,17,23,.92)); color: var(--mist); font: 600 18px/1.25 var(--fs); text-align: center; }
.p-meshbooth .film__label b { display: block; margin-bottom: 4px; font: 700 34px/1.05 var(--fd); color: #fff; }
.p-meshbooth .hero__film { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 0; background: none; border: 0; color: #fff; font: 700 18px/1.3 var(--fs); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; cursor: pointer; }
.p-meshbooth .hero__film i { width: 0; height: 0; border-left: 12px solid var(--gold2); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.p-meshbooth .hero__film:hover { color: var(--gold2); }
.p-meshbooth .film__card[hidden], .p-meshbooth .hero__film[hidden] { display: none; }   /* without JS the film cannot open */
.p-meshbooth .film video { width: 100%; height: auto; max-height: 74vh; background: var(--black); }
@media (max-width: 760px) { .p-meshbooth .film .viewer__body { padding: 6px; } .p-meshbooth .film__big { width: 76px; height: 76px; margin: -38px 0 0 -38px; } .p-meshbooth .film__big::after { left: 29px; top: 22px; border-left-width: 24px; border-top-width: 16px; border-bottom-width: 16px; } .p-meshbooth .film__label { padding: 26px 12px 12px; font-size: 15px; } .p-meshbooth .film__label b { font-size: 24px; } }
@media (max-width: 900px) and (orientation: portrait) { .p-meshbooth .film video { max-height: 68vh; } }
.p-meshbooth .xcheck { width: min(560px, 100%); padding: 18px; background: var(--black); border-left: 3px solid var(--gold); font: 14px/1.5 var(--fm); }
.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(--navy2); }
.p-meshbooth .xcheck li span { color: var(--mist); font-size: 12px; }
.p-meshbooth .xcheck li b { font: 700 26px/1 var(--fd); }
.p-meshbooth .xcheck .verdict { display: flex; align-items: center; gap: 9px; color: var(--gold2); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .p-meshbooth .glow.on { animation: none; opacity: .55; }
  .p-meshbooth .others img, .p-meshbooth .pack__list li, .p-meshbooth .screen video, .p-meshbooth .screen__press, .p-meshbooth .flow__step { transition: none; }
  .p-meshbooth .flow__arr .dot, .p-meshbooth .flow__img .press { display: none; }
  .p-meshbooth .tile, .p-meshbooth .btn, .p-meshbooth .buybar { transition: none; }
}