/* Meat delivery page: 3D cut picker hero, cut ring, scroll-driven route, slot board and the page-wide 3D scroll motion. */
:root { --mt-red: #c62f3a; --mt-wine: #4a1418; --mt-ink: #1c1214; --mt-mut: #6b5f61; --mt-line: #ece4e2; --mt-cream: #fbf6f3; --mt-ease: cubic-bezier(.2, .8, .2, 1); }

/* ---------- Hero: 3D cut picker ---------- */
.pp-hero.lay-cut3d .pp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.mt-hero { position: relative; perspective: 1500px; min-height: 500px; display: grid; place-items: center; }
.mt-hero-rig { position: relative; width: 100%; height: 500px; transform-style: preserve-3d; transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 6deg)); transition: transform .6s var(--mt-ease); }
.mt-hero-photo { position: absolute; inset: 6% 8% 6% 0; margin: 0; border-radius: 26px; overflow: hidden; transform: translateZ(-60px); box-shadow: 0 40px 70px -40px rgba(40,10,10,.6); }
.mt-hero-photo img { width: 100%; height: 100%; object-fit: cover; scale: 1.08; transition: scale 6s ease; }
.mt-hero:hover .mt-hero-photo img { scale: 1.16; }
.mt-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(74,20,24,.1), rgba(74,20,24,.45)); }
.mt-hero-phone { position: absolute; right: 4%; top: 50%; width: min(250px, 52%); translate: 0 -50%; display: grid; gap: 7px; padding: 14px 12px 16px; border: 8px solid #1b1214; border-radius: 34px; background: #fff; transform: translateZ(90px); box-shadow: 0 40px 60px -30px rgba(0,0,0,.6); font-family: var(--sv-font); }
.mt-hp-top { display: flex; justify-content: space-between; align-items: center; margin: 0 0 4px; }
.mt-hp-top b { font-size: .95rem; color: var(--mt-ink); }
.mt-hp-top span { padding: 3px 8px; border-radius: 999px; background: #e7f6ec; color: #16793a; font: 700 .6rem var(--sv-font); }
.mt-hero-phone > small { font: 700 .58rem var(--sv-font); letter-spacing: .1em; text-transform: uppercase; color: var(--mt-mut); }
.mt-hp-cuts { display: grid; gap: 5px; }
.mt-hp-cuts button { display: flex; justify-content: space-between; gap: 6px; padding: 8px 10px; border: 1px solid var(--mt-line); border-radius: 10px; background: var(--mt-cream); font: 600 .7rem var(--sv-font); color: var(--mt-ink); cursor: pointer; text-align: left; transition: border-color .2s, background .2s, transform .2s; }
.mt-hp-cuts button i { font-style: normal; color: var(--mt-mut); font-weight: 500; }
.mt-hp-cuts button[aria-checked="true"] { border-color: var(--mt-red); background: #fff1f0; transform: translateX(3px); }
.mt-hp-weights { display: flex; gap: 5px; }
.mt-hp-weights button { flex: 1; padding: 7px 4px; border: 1px solid var(--mt-line); border-radius: 9px; background: #fff; font: 700 .68rem var(--sv-font); color: var(--mt-ink); cursor: pointer; }
.mt-hp-weights button[aria-checked="true"] { background: var(--mt-wine); border-color: var(--mt-wine); color: #fff; }
.mt-hp-total { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: 12px; background: var(--mt-ink); color: #fff; }
.mt-hp-total span { font-size: .6rem; opacity: .75; } .mt-hp-total b { font: 800 1.1rem var(--sv-font); }
.mt-hp-add { padding: 9px; border: 0; border-radius: 11px; background: var(--mt-red); color: #fff; font: 700 .74rem var(--sv-font); cursor: pointer; transition: transform .15s; }
.mt-hp-add:active { transform: scale(.96); }
.mt-hp-toast { position: absolute; left: 50%; bottom: -16px; translate: -50% 0; margin: 0; padding: 6px 12px; border-radius: 999px; background: #16a34a; color: #fff; font: 700 .64rem var(--sv-font); white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; pointer-events: none; }
.mt-hp-toast.on { opacity: 1; transform: none; }
.mt-hero-float { position: absolute; display: grid; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: 0 20px 36px -18px rgba(0,0,0,.45); font-family: var(--sv-font); animation: mtFloat 6s ease-in-out infinite; }
.mt-hero-float b { font-size: .78rem; color: var(--mt-ink); } .mt-hero-float span { font-size: .66rem; color: var(--mt-mut); }
.mt-hero-float.f1 { left: 2%; top: 12%; transform: translateZ(130px); }
.mt-hero-float.f2 { left: 6%; bottom: 14%; transform: translateZ(150px); animation-delay: -2s; }
.mt-hero-float.f3 { right: 0; top: 2%; transform: translateZ(170px); animation-delay: -4s; }
.mt-hero-float::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; position: absolute; left: -3px; top: -3px; box-shadow: 0 0 0 3px #fff; }

/* ---------- 3D cut ring ---------- */
.mt-ring { margin-top: 26px; }
.mt-ring-stage { position: relative; height: 340px; perspective: 1300px; touch-action: pan-y; cursor: grab; user-select: none; }
.mt-ring-stage.dragging { cursor: grabbing; }
.mt-ring-track { --r: calc(var(--n) * 44px + 130px); position: absolute; left: 50%; top: 20px; width: 190px; height: 240px; margin: 0 0 0 -95px; padding: 0; list-style: none; transform-style: preserve-3d; transform: translateZ(calc(var(--r) * -1)) rotateX(-7deg) rotateY(var(--rot, 0deg)); transition: transform .8s var(--mt-ease); }
.mt-ring-stage.dragging .mt-ring-track { transition: none; }
.mt-ring-card { position: absolute; inset: 0; transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); backface-visibility: hidden; }
.mt-ring-card button { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; padding: 18px; border: 0; border-radius: 22px; color: #fff; text-align: left; cursor: pointer;
  background: radial-gradient(120% 80% at 30% 0%, #7a2a30, var(--mt-wine) 65%); box-shadow: 0 30px 50px -28px rgba(40,10,10,.7), inset 0 1px 0 rgba(255,255,255,.12); transition: transform .4s var(--mt-ease), filter .4s; filter: brightness(.72) saturate(.85); }
.mt-ring-card.is-front button { filter: none; transform: scale(1.06); }
.mt-ring-card button:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.mt-ring-card img { position: absolute; top: 18px; left: 18px; width: 56px; height: 56px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.14); filter: brightness(0) invert(1); }
.mt-ring-card b { font: 800 1.15rem var(--sv-font); }
.mt-ring-card span { font: 600 .8rem var(--sv-font); opacity: .8; }
.mt-ring-card em { position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: 999px; background: #22c55e; font: 700 .64rem var(--sv-font); font-style: normal; }
.mt-ring-floor { position: absolute; left: 10%; right: 10%; bottom: 8px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(74,20,24,.25), transparent); filter: blur(6px); }
.mt-ring-ctl { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 4px 0 18px; }
.mt-ring-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--mt-line); background: #fff; font-size: 1.1rem; cursor: pointer; transition: background .2s, transform .2s; }
.mt-ring-arrow:hover { background: var(--mt-wine); color: #fff; transform: scale(1.06); }
.mt-ring-hint { margin: 0; font-size: .8rem; color: var(--mt-mut); }
.mt-ring-detail { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--mt-line); box-shadow: 0 24px 40px -32px rgba(40,10,10,.45); animation: mtIn .45s var(--mt-ease) both; }
.mt-ring-detail[hidden] { display: none; }
.mt-kicker { margin: 0 0 4px; font: 700 .68rem var(--sv-font); letter-spacing: .12em; text-transform: uppercase; color: var(--mt-red); }
.mt-ring-detail h3 { margin: 0 0 6px; font: 800 1.4rem var(--sv-font); color: var(--mt-ink) !important; }
.mt-ring-detail p { margin: 0; color: var(--mt-mut); font-size: .92rem; }
.mt-ring-opts small { display: block; margin-bottom: 6px; font: 700 .68rem var(--sv-font); color: var(--mt-mut); text-transform: uppercase; letter-spacing: .08em; }
.mt-ring-opts p { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-ring-opts span { padding: 6px 12px; border-radius: 999px; background: var(--mt-cream); border: 1px solid var(--mt-line); font: 600 .8rem var(--sv-font); color: var(--mt-ink); }
.mt-ring-price { font: 800 1.6rem var(--sv-font); color: var(--mt-wine); white-space: nowrap; }

/* ---------- Scroll-driven route ---------- */
.mt-route { margin-top: 26px; padding: 26px; border-radius: 28px; background: linear-gradient(160deg, #2a0f12, var(--mt-wine)); color: #fff; box-shadow: 0 40px 70px -40px rgba(40,10,10,.7); }
.mt-route-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.mt-route-head small { display: block; font: 700 .68rem var(--sv-font); letter-spacing: .12em; text-transform: uppercase; color: #fca5a5; }
.mt-route-head b { font: 800 1.2rem var(--sv-font); }
.mt-thermo { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.mt-thermo i { grid-row: 1 / 3; position: relative; width: 12px; height: 46px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; }
.mt-thermo em { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h, 20%); border-radius: inherit; background: linear-gradient(#60a5fa, #22d3ee); transition: height .6s var(--mt-ease), background .6s; }
.mt-thermo span { font: 800 1.4rem var(--sv-font); } .mt-thermo small { color: rgba(255,255,255,.6); font-size: .62rem; letter-spacing: .06em; }
.mt-road-scene { perspective: 900px; margin: 22px 0 8px; }
.mt-road { position: relative; height: 70px; border-radius: 16px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 40px, transparent 40px 60px), #1b0b0d; transform: rotateX(48deg); transform-style: preserve-3d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mt-road-fill { position: absolute; left: 0; top: 50%; height: 4px; width: var(--p, 0%); translate: 0 -50%; border-radius: 999px; background: linear-gradient(90deg, #f87171, #fde68a); box-shadow: 0 0 18px rgba(253,230,138,.6); }
.mt-road-stop { position: absolute; top: 50%; left: calc(var(--k) / (var(--n) - 1) * 96% + 2%); width: 16px; height: 16px; translate: -50% -50%; border-radius: 50%; background: #3b1a1d; box-shadow: 0 0 0 3px rgba(255,255,255,.2); transition: background .3s, box-shadow .3s; }
.mt-road-stop.on { background: #fde68a; box-shadow: 0 0 0 4px rgba(253,230,138,.3), 0 0 16px #fde68a; }
.mt-box { position: absolute; top: 50%; left: calc(var(--p, 0%) * .96 + 2%); width: 38px; height: 30px; translate: -50% -110%; transform: rotateX(-48deg) translateZ(18px); transform-style: preserve-3d; transition: left .25s linear; }
.mt-box span { position: absolute; inset: 0; border-radius: 7px; background: linear-gradient(#ef4444, #b91c1c); box-shadow: 0 10px 18px -6px rgba(0,0,0,.6), inset 0 -6px 0 rgba(0,0,0,.18); }
.mt-box span::after { content: ""; position: absolute; left: 50%; top: 4px; width: 14px; height: 8px; translate: -50% 0; border: 2px solid rgba(255,255,255,.75); border-bottom: 0; border-radius: 6px 6px 0 0; }
.mt-stops { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.mt-stops li { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); opacity: .45; transform: translateY(8px); transition: opacity .4s, transform .4s var(--mt-ease), background .4s, border-color .4s; }
.mt-stops li.on { opacity: 1; transform: none; background: rgba(255,255,255,.1); }
.mt-stops li.now { border-color: #fde68a; box-shadow: 0 0 0 1px #fde68a inset; }
.mt-stops b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.12); font: 700 .74rem var(--sv-font); }
.mt-stops li.on b { background: #fde68a; color: var(--mt-wine); }
.mt-stops strong { font: 700 .88rem var(--sv-font); }
.mt-stops p { margin: 2px 0 0; font-size: .76rem; color: rgba(255,255,255,.7); }
.mt-stops time { font: 600 .72rem var(--sv-font); color: #fca5a5; }

/* ---------- Slot board ---------- */
.mt-slots { margin-top: 26px; padding: 24px; border-radius: 26px; background: #fff; border: 1px solid var(--mt-line); box-shadow: 0 30px 50px -40px rgba(40,10,10,.5); }
.mt-slot-days { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.mt-slot-days button { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--mt-line); background: var(--mt-cream); font: 700 .86rem var(--sv-font); color: var(--mt-ink); cursor: pointer; transition: background .2s, color .2s; }
.mt-slot-days button[aria-selected="true"] { background: var(--mt-wine); border-color: var(--mt-wine); color: #fff; }
.mt-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; animation: mtIn .4s var(--mt-ease) both; }
.mt-slot-grid[hidden] { display: none; }
.mt-slot { display: grid; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--mt-line); background: #fff; text-align: left; cursor: pointer; transition: transform .25s var(--mt-ease), box-shadow .25s, border-color .25s; }
.mt-slot:hover:not(:disabled) { transform: translateY(-4px) rotateX(6deg); box-shadow: 0 18px 30px -20px rgba(40,10,10,.5); }
.mt-slot b { font: 800 1rem var(--sv-font); color: var(--mt-ink); }
.mt-slot i { display: block; height: 6px; border-radius: 999px; background: #f1ebe9; overflow: hidden; }
.mt-slot em { display: block; height: 100%; width: var(--fill); border-radius: inherit; background: linear-gradient(90deg, #22c55e, #f59e0b 70%, #ef4444); background-size: 300px 100%; }
.mt-slot span { font: 600 .74rem var(--sv-font); color: var(--mt-mut); }
.mt-slot:disabled { opacity: .55; cursor: not-allowed; background: #faf7f6; }
.mt-slot[aria-pressed="true"] { border-color: #16a34a; box-shadow: 0 0 0 2px #16a34a inset; }
.mt-slot-note { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--mt-cream); font: 600 .86rem var(--sv-font); color: var(--mt-ink); }
.mt-slot-note.ok { background: #e7f6ec; color: #16793a; }
.mt-feats { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mt-feats li:nth-child(7):last-child { grid-column: span 2; }
@media (max-width: 1000px) { .mt-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mt-feats li:nth-child(7):last-child { grid-column: 1 / -1; } }
.mt-feats li { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--mt-line); }
.mt-feats img { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #fff1f0; }
.mt-feats b { font: 700 .95rem var(--sv-font); color: var(--mt-ink); }
.mt-feats p { margin: 0; font-size: .84rem; color: var(--mt-mut); line-height: 1.5; }

/* ---------- Page-wide 3D motion (meat.js adds these classes) ---------- */
.mt-tilt { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateZ(0); transition: transform .35s var(--mt-ease), box-shadow .35s; will-change: transform; }
.mt-tilt:hover { box-shadow: 0 26px 40px -28px rgba(40,10,10,.55); }
.mt-rise { opacity: 0; transform: perspective(1000px) rotateX(14deg) translateY(40px); transform-origin: 50% 100%; transition: opacity .8s var(--mt-ease), transform .9s var(--mt-ease); transition-delay: calc(var(--d, 0) * 80ms); }
.mt-rise.in { opacity: 1; transform: none; }
.mt-progress { position: fixed; left: 0; top: 0; z-index: 60; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--mt-red), #f59e0b); pointer-events: none; }
body:has(.mt-hero) main .sv-sec .sv-title::before { content: none !important; display: none !important; }

@keyframes mtFloat { 50% { translate: 0 -10px; } }
@keyframes mtIn { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 900px) {
  .pp-hero.lay-cut3d .pp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .mt-hero, .mt-hero-rig { min-height: 0; height: 460px; }
  .mt-ring-detail { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mt-stops { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .mt-hero-phone { right: 50%; translate: 50% -50%; width: 72%; }
  .mt-hero-float.f1, .mt-hero-float.f3 { display: none; }
  .mt-hero-float.f2 { left: 0; bottom: 0; }
  .mt-ring-stage { height: 300px; }
  .mt-ring-track { width: 160px; height: 210px; margin-left: -80px; --r: calc(var(--n) * 28px + 70px); }
  .mt-route { padding: 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-hero-rig, .mt-tilt { transform: none !important; }
  .mt-rise { opacity: 1; transform: none; transition: none; }
  .mt-hero-float { animation: none; }
  .mt-ring-track, .mt-box { transition: none; }
}

/* ---------- Transparent cut-out photos (Pixabay) ---------- */
/* Ring cards: the cut-out floats above the card in depth instead of a small white icon. */
.mt-ring-card img[src*="/products/cuts/"] { top: 14px; left: 50%; width: 90%; height: 58%; padding: 0; border-radius: 0; background: none; filter: drop-shadow(0 18px 16px rgba(0,0,0,.45)); object-fit: contain; translate: -50% 0; transform: translateZ(40px); transition: transform .5s var(--mt-ease), scale .5s var(--mt-ease); }
.mt-ring-card button:has(img[src*="/products/cuts/"]) { transform-style: preserve-3d; background: radial-gradient(90% 60% at 50% 30%, #fff 0, #f6ece8 55%, #ead9d3 100%); color: var(--mt-ink); }
.mt-ring-card button:has(img[src*="/products/cuts/"]) span { color: var(--mt-mut); opacity: 1; }
.mt-ring-card.is-front img[src*="/products/cuts/"] { scale: 1.12; transform: translateZ(70px) rotate(-4deg); }
/* Hero: three cut-outs drift around the phone at different depths and follow the tilt. */
.mt-hero-cut { position: absolute; width: 150px; height: auto; filter: drop-shadow(0 24px 20px rgba(40,10,10,.45)); pointer-events: none; animation: mtDrift 7s ease-in-out infinite; }
.mt-hero-cut.c1 { left: 24%; bottom: 2%; width: 190px; transform: translateZ(200px) rotate(-10deg); }
.mt-hero-cut.c2 { left: 30%; top: 4%; width: 120px; transform: translateZ(160px) rotate(18deg); animation-delay: -2.5s; }
.mt-hero-cut.c3 { right: -10%; bottom: -8%; width: 140px; transform: translateZ(230px) rotate(8deg); animation-delay: -5s; }
@keyframes mtDrift { 50% { translate: 0 -14px; } }
@media (max-width: 520px) {
  .mt-hero-cut.c1 { left: -2%; width: 120px; }
  .mt-hero-cut.c2 { left: 2%; top: 0; width: 84px; }
  .mt-hero-cut.c3 { right: -2%; width: 100px; }
}
@media (prefers-reduced-motion: reduce) { .mt-hero-cut { animation: none; } }

/* =========================================================
   Round 2: business-model deck, build staircase, module orbit, tech layers, 3D FAQ
   ========================================================= */
.mt-fan-hint { margin: 14px 0 0; text-align: center; font-size: .8rem; color: var(--mt-mut); }

/* ---------- 3D fanned card deck ---------- */
.mt-fan { margin-top: 30px; perspective: 1600px; }
.mt-fan-deck { --spread: 1; position: relative; height: 380px; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }
.mt-fan:hover .mt-fan-deck, .mt-fan.is-open .mt-fan-deck { --spread: 1.32; }
.mt-fan-card { --mid: calc((var(--n) - 1) / 2); --off: calc(var(--k) - var(--mid)); position: absolute; left: 50%; top: 20px; width: 240px; height: 320px; margin-left: -120px; transform-origin: 50% 160%;
  transform: translateX(calc(var(--off) * 118px * var(--spread))) rotate(calc(var(--off) * 5deg * var(--spread))) translateY(calc(var(--off) * var(--off) * 6px)); transition: transform .7s var(--mt-ease); z-index: calc(10 - var(--k)); }
.mt-fan-card.is-on { transform: translateY(-26px) translateZ(140px) rotate(0deg); z-index: 50; }
.mt-fan-card button { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .8s var(--mt-ease); }
.mt-fan-card.is-flipped button { transform: rotateY(180deg); }
.mt-fan-card button:focus-visible { outline: 3px solid var(--mt-red); outline-offset: 4px; border-radius: 22px; }
.mt-fan-face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; text-align: left; backface-visibility: hidden; box-shadow: 0 30px 50px -28px rgba(20,10,10,.6); }
.mt-fan-face.is-front { justify-content: flex-end; color: #fff; background: radial-gradient(130% 80% at 20% 0%, #7a2a30, var(--mt-wine) 60%, #2a0d10); }
.mt-fan-face.is-front::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px); pointer-events: none; }
.mt-fan-face.is-front b { position: absolute; top: 20px; left: 22px; font: 800 2.6rem var(--sv-font); color: rgba(255,255,255,.18); }
.mt-fan-face strong { font: 800 1.2rem/1.2 var(--sv-font); }
.mt-fan-face small { font-size: .84rem; line-height: 1.5; color: rgba(255,255,255,.8); }
.mt-fan-face i { font: 600 .72rem var(--sv-font); font-style: normal; color: #fca5a5; }
.mt-fan-face.is-back { transform: rotateY(180deg); background: #fff; border: 1px solid var(--mt-line); color: var(--mt-ink); }
.mt-fan-face.is-back em { font: 700 .66rem var(--sv-font); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--mt-red); }
.mt-fan-face.is-back ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.mt-fan-face.is-back li { position: relative; padding-left: 22px; font-size: .84rem; line-height: 1.4; color: var(--mt-ink); }
.mt-fan-face.is-back li::before { content: "\2713"; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--mt-red); color: #fff; font: 700 .55rem/1 system-ui, sans-serif; }

/* ---------- 3D build staircase ---------- */
.mt-build { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.mt-stairs-scene { position: relative; perspective: 1100px; padding: 46px 18px 10px 0; }
.mt-stairs { display: flex; align-items: flex-end; gap: 18px; height: 360px; margin: 0; padding: 0 0 0 4px; list-style: none; transform: rotateX(10deg) rotateY(-16deg); transform-style: preserve-3d; }
.mt-stairs li { flex: 1 1 0; min-width: 0; }
.mt-stairs button { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; width: 100%; height: calc(110px + var(--k) * 52px); padding: 14px 12px; border: 0; border-radius: 14px 14px 6px 6px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #fff 0%, #f6ece8 100%); box-shadow: 10px -10px 0 #e3d2cc, 10px -10px 0 1px #d8c3bc, 0 24px 34px -22px rgba(40,10,10,.55);
  transform-origin: 50% 100%; transform: scaleY(.12); opacity: .35; transition: transform .9s var(--mt-ease), opacity .6s, background .3s, box-shadow .3s; }
.mt-build.in .mt-stairs button { transform: none; opacity: 1; transition-delay: calc(var(--k) * 130ms), calc(var(--k) * 130ms), 0s, 0s; }
.mt-step-top { display: flex; flex-direction: column; gap: 8px; font: 700 .86rem/1.25 var(--sv-font); color: var(--mt-ink); }
.mt-step-top b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--mt-wine); color: #fff; font-size: .8rem; }
.mt-step-side { display: none; }
.mt-stairs button[aria-pressed="true"] { background: linear-gradient(180deg, var(--mt-red), #7a1820); box-shadow: 10px -10px 0 #5a1016, 10px -10px 0 1px #4a0d12, 0 30px 40px -20px rgba(198,47,58,.6); }
.mt-stairs button[aria-pressed="true"] .mt-step-top { color: #fff; }
.mt-stairs button[aria-pressed="true"] .mt-step-top b { background: #fff; color: var(--mt-red); }
.mt-stairs button:hover { filter: brightness(1.03); }
.mt-stairs button:focus-visible { outline: 3px solid var(--mt-red); outline-offset: 4px; }
.mt-flag { position: absolute; right: 6%; top: 0; padding: 6px 12px; border-radius: 999px; background: #16a34a; color: #fff; font: 700 .72rem var(--sv-font); box-shadow: 0 12px 24px -12px rgba(22,163,74,.8); animation: mtFloat 4s ease-in-out infinite; }
.mt-build-card { padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--mt-line); box-shadow: 0 30px 50px -40px rgba(40,10,10,.5); }
.mt-build-card[hidden] { display: none; }
.mt-build-card h3 { margin: 0 0 8px; font: 800 1.4rem var(--sv-font); color: var(--mt-ink) !important; }
.mt-build-card > p { margin: 0 0 14px; color: var(--mt-mut); line-height: 1.6; }
.mt-build-card small { display: block; margin-bottom: 8px; font: 700 .68rem var(--sv-font); letter-spacing: .1em; text-transform: uppercase; color: var(--mt-mut); }
.mt-build-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mt-build-card li { padding: 6px 12px; border-radius: 999px; background: var(--mt-cream); border: 1px solid var(--mt-line); font: 600 .8rem var(--sv-font); color: var(--mt-ink); animation: mtPop .45s var(--mt-ease) both; }
.mt-build-own { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 18px 22px; border-radius: 18px; background: linear-gradient(120deg, var(--mt-wine), #2a0d10); color: #fff; }
.mt-build-own b { font: 800 1.05rem var(--sv-font); }
.mt-build-own span { flex: 1 1 320px; font-size: .88rem; color: rgba(255,255,255,.78); }
.mt-build-own .sv-btn { background: #fff !important; color: var(--mt-wine) !important; }

/* ---------- Module coverflow (module_orbit) ---------- */
.mt-flow { margin-top: 26px; }
.mt-flow-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 10px; }
.mt-flow-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--mt-line); background: #fff; font: 700 .86rem var(--sv-font); color: var(--mt-ink); cursor: pointer; transition: background .3s, color .3s, transform .3s; }
.mt-flow-tabs button i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff1f0; color: var(--mt-red); font-style: normal; }
.mt-flow-tabs button[aria-selected="true"] { background: var(--mt-wine); border-color: var(--mt-wine); color: #fff; transform: translateY(-2px); }
.mt-flow-tabs button[aria-selected="true"] i { background: #fff; }
.mt-flow-tabs button:focus-visible { outline: 3px solid var(--mt-red); outline-offset: 3px; }
.mt-flow-stage { position: relative; height: 470px; perspective: 1300px; touch-action: pan-y; }
.mt-flow-phone { --d: 0; --ad: 0; position: absolute; left: 50%; top: 20px; width: 240px; height: 420px; margin-left: -120px; padding: 18px 14px; border: 9px solid #1b1214; border-radius: 38px; background: #fff; box-shadow: 0 40px 60px -34px rgba(40,10,10,.6); cursor: pointer; overflow: hidden;
  transform: translateX(calc(var(--d) * 230px)) translateZ(calc(var(--ad) * -180px)) rotateY(calc(var(--d) * -38deg)); opacity: calc(1 - var(--ad) * .28); filter: saturate(calc(1 - var(--ad) * .4)); z-index: calc(20 - var(--ad)); transition: transform .8s var(--mt-ease), opacity .6s, filter .6s; }
.mt-flow-phone.is-front { cursor: default; box-shadow: 0 50px 80px -36px rgba(122,42,48,.6); }
.mt-flow-phone h3 { margin: 0 0 12px; font: 700 .86rem var(--sv-font); color: var(--mt-mut) !important; }
.mt-flow-phone ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mt-flow-phone li { padding: 12px; border-radius: 12px; background: var(--mt-cream); border-left: 3px solid var(--mt-red); font: 600 .82rem var(--sv-font); color: var(--mt-ink); }
.mt-flow-phone.is-front li { animation: mtSlide .45s var(--mt-ease) both; animation-delay: calc(var(--i) * 80ms); }
.mt-flow-bar { position: absolute; left: 50%; bottom: 10px; width: 90px; height: 4px; translate: -50% 0; border-radius: 999px; background: #1b1214; opacity: .7; }
.mt-os-top { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; }
.mt-os-top b { font: 800 1rem var(--sv-font); color: var(--mt-ink); }
.mt-os-top span { padding: 3px 8px; border-radius: 999px; background: #e7f6ec; color: #16793a; font: 700 .6rem var(--sv-font); }
@keyframes mtSlide { from { opacity: 0; transform: translateX(16px); } }

/* ---------- Technology board (stack_layers) ---------- */
.mt-board { margin-top: 26px; perspective: 1600px; }
.mt-board-plane { position: relative; display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr) minmax(0, 30%); grid-template-rows: repeat(var(--rows), minmax(170px, auto)); gap: 26px 0; padding: 34px 28px; border-radius: 30px;
  background: radial-gradient(70% 90% at 50% 50%, #fff 0%, #fbf6f3 55%, #f3e7e2 100%); border: 1px solid var(--mt-line);
  background-image: radial-gradient(70% 90% at 50% 50%, rgba(255,255,255,.9), rgba(251,246,243,.6)), repeating-linear-gradient(0deg, rgba(122,42,48,.05) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(122,42,48,.05) 0 1px, transparent 1px 32px);
  box-shadow: 0 50px 80px -50px rgba(40,10,10,.5); transform-style: preserve-3d; transform: rotateX(var(--rx, 14deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--mt-ease); }
.mt-board-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mt-wire { fill: none; stroke: rgba(122,42,48,.28); stroke-width: 2; stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; animation: mtDash 1.2s linear infinite; }
.mt-pulse { fill: var(--mt-red); filter: drop-shadow(0 0 6px rgba(198,47,58,.8)); }
@keyframes mtDash { to { stroke-dashoffset: -26; } }
.mt-hub { grid-column: 2; grid-row: 1 / span var(--rows); align-self: center; justify-self: center; position: relative; z-index: 2; display: grid; place-items: center; align-content: center; gap: 4px; width: 190px; height: 190px; border-radius: 50%; text-align: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #a3363f, var(--mt-wine) 60%, #2a0d10); box-shadow: 0 0 0 12px rgba(198,47,58,.08), 0 0 0 26px rgba(198,47,58,.05), 0 40px 60px -26px rgba(74,20,24,.8); transform: translateZ(60px); }
.mt-hub::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px dashed rgba(198,47,58,.35); animation: mtSpin 18s linear infinite; }
.mt-hub span { font: 800 1.25rem var(--sv-font); }
.mt-hub small { max-width: 130px; font-size: .74rem; color: rgba(255,255,255,.75); line-height: 1.35; }
@keyframes mtSpin { to { transform: rotate(360deg); } }
.mt-node { position: relative; z-index: 2; grid-row: calc(var(--row) + 1); align-self: center; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--mt-line); box-shadow: 0 24px 40px -30px rgba(40,10,10,.55); transform: translateZ(30px); transition: transform .45s var(--mt-ease), box-shadow .45s, border-color .3s; outline: none; }
.mt-node.is-left { grid-column: 1; }
.mt-node.is-right { grid-column: 3; }
.mt-node:hover, .mt-node:focus-visible { transform: translateZ(90px) translateY(-6px); border-color: var(--mt-red); box-shadow: 0 40px 60px -30px rgba(198,47,58,.55); }
.mt-node-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.mt-node-head i { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--mt-red), var(--mt-wine)); color: #fff; box-shadow: 0 10px 18px -10px rgba(198,47,58,.8); }
.mt-node h3 { margin: 0; font: 800 1.02rem var(--sv-font); color: var(--mt-ink) !important; }
.mt-node-head p { margin: 2px 0 0; font-size: .78rem; color: var(--mt-mut); }
.mt-node ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mt-node li { padding: 5px 10px; border-radius: 9px; background: var(--mt-cream); border: 1px solid var(--mt-line); font: 600 .76rem var(--sv-font); color: var(--mt-ink); transition: background .3s, color .3s; }
.mt-node:hover li { background: #fff1f0; color: var(--mt-wine); }
.mt-board.in .mt-node { animation: mtRise .7s var(--mt-ease) backwards; animation-delay: calc(var(--k) * 120ms); }
@keyframes mtRise { from { opacity: 0; transform: translateZ(0) translateY(30px); } }
@keyframes mtPop { from { opacity: 0; transform: translateY(10px) scale(.92); } }

/* ---------- Searchable 3D FAQ ---------- */
.mt-faq { margin-top: 26px; }
.mt-faq-search { display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 0 auto 22px; padding: 12px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--mt-line); box-shadow: 0 18px 30px -26px rgba(40,10,10,.5); color: var(--mt-mut); }
.mt-faq-search:focus-within { border-color: var(--mt-red); box-shadow: 0 0 0 4px rgba(198,47,58,.12); }
.mt-faq-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 .95rem var(--sv-font); color: var(--mt-ink); }
.mt-faq-search b { padding: 3px 10px; border-radius: 999px; background: var(--mt-cream); font: 700 .74rem var(--sv-font); color: var(--mt-wine); }
.mt-faq .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; perspective: 1200px; }
body:has(.mt-faq) main .mt-faq-list details { margin: 0 !important; padding: 0 !important; border-radius: 18px !important; background: #fff !important; border: 1px solid var(--mt-line) !important; box-shadow: 0 18px 30px -28px rgba(40,10,10,.5) !important; transition: box-shadow .3s, border-color .3s; }
body:has(.mt-faq) main .mt-faq-list details[open] { border-color: var(--mt-red) !important; box-shadow: 0 30px 50px -34px rgba(198,47,58,.6) !important; }
body:has(.mt-faq) main .mt-faq-list summary { display: flex !important; align-items: center; gap: 12px; padding: 16px 18px !important; font: 700 .95rem/1.35 var(--sv-font) !important; color: var(--mt-ink) !important; cursor: pointer; list-style: none; }
body:has(.mt-faq) main .mt-faq-list summary::-webkit-details-marker { display: none; }
body:has(.mt-faq) main .mt-faq-list summary::after { content: "+" !important; position: static !important; margin-left: auto; display: grid !important; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--mt-cream); color: var(--mt-red); font: 700 1rem var(--sv-font); transition: transform .35s var(--mt-ease), background .3s; }
body:has(.mt-faq) main .mt-faq-list details[open] summary::after { transform: rotate(45deg); background: var(--mt-red); color: #fff; }
body:has(.mt-faq) main .mt-faq-list summary b { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--mt-wine); color: #fff; font: 800 .78rem var(--sv-font); }
body:has(.mt-faq) main .mt-faq-list .sv-rich { padding: 0 18px 18px 64px !important; color: var(--mt-mut) !important; font-size: .9rem; line-height: 1.6; transform-origin: 50% 0; animation: mtUnfold .5s var(--mt-ease) both; }
@keyframes mtUnfold { from { opacity: 0; transform: perspective(800px) rotateX(-70deg); } }
.mt-faq-list details.is-hidden { display: none; }
.mt-faq-none { text-align: center; color: var(--mt-mut); }
.mt-faq-none a { color: var(--mt-red); font-weight: 700; }

@media (max-width: 900px) {
  .mt-build { grid-template-columns: minmax(0, 1fr); }
  .mt-stairs { height: 320px; transform: none; }
  .mt-faq-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .mt-fan-deck { height: 360px; }
  .mt-fan-card { width: 200px; height: 290px; margin-left: -100px; transform: translateX(calc(var(--off) * 22px)) rotate(calc(var(--off) * 4deg)); }
  .mt-stairs { gap: 8px; height: 280px; }
  .mt-stairs button { height: calc(90px + var(--k) * 40px); padding: 10px 6px; box-shadow: 6px -6px 0 #e3d2cc, 0 18px 26px -20px rgba(40,10,10,.55); }
  .mt-step-top { font-size: .66rem; }
  .mt-step-top b { width: 24px; height: 24px; }
  body:has(.mt-faq) main .mt-faq-list .sv-rich { padding-left: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-fan-card, .mt-fan-card button, .mt-stairs button, .mt-flow-phone, .mt-board-plane { transition: none; } .mt-wire, .mt-hub::before { animation: none; }
  .mt-stairs button { transform: none !important; opacity: 1 !important; }
  .mt-flow-phone li, .mt-board.in .mt-node, .mt-build-card li, body:has(.mt-faq) main .mt-faq-list .sv-rich, .mt-flag { animation: none; }
}
@media (min-width: 521px) and (max-width: 1100px) { .mt-fan-card { transform: translateX(calc(var(--off) * 64px * var(--spread))) rotate(calc(var(--off) * 5deg * var(--spread))) translateY(calc(var(--off) * var(--off) * 6px)); } .mt-fan-card.is-on { transform: translateY(-26px) translateZ(140px); } }

/* The build staircase appears on every product page: outside the meat page it takes the page theme colours. */
body:not(:has(.mt-hero)) .mt-build-sec { --mt-red: var(--pa, #c62f3a); --mt-wine: var(--pd, #1d1d1f); --mt-cream: color-mix(in srgb, var(--pa, #c62f3a) 6%, #fff); --mt-line: color-mix(in srgb, var(--pa, #c62f3a) 14%, #e8e8ee); }
body:not(:has(.mt-hero)) .mt-build-sec .mt-stairs button { box-shadow: 10px -10px 0 color-mix(in srgb, var(--pa, #c62f3a) 18%, #e9e9ee), 0 24px 34px -22px rgba(0,0,0,.45); }
body:not(:has(.mt-hero)) .mt-build-sec .mt-stairs button[aria-pressed="true"] { background: linear-gradient(180deg, var(--pa), color-mix(in srgb, var(--pa) 70%, #000)); box-shadow: 10px -10px 0 color-mix(in srgb, var(--pa) 55%, #000), 0 30px 40px -20px color-mix(in srgb, var(--pa) 60%, transparent); }

@media (max-width: 900px) { .mt-board-plane { grid-template-columns: minmax(0, 1fr); padding: 22px 16px; transform: none; } .mt-board-wires { display: none; } .mt-hub { grid-column: 1; grid-row: 1; width: 150px; height: 150px; } .mt-node.is-left, .mt-node.is-right { grid-column: 1; grid-row: auto; } .mt-flow-phone { transform: translateX(calc(var(--d) * 150px)) translateZ(calc(var(--ad) * -200px)) rotateY(calc(var(--d) * -42deg)); } }
@media (max-width: 520px) { .mt-flow-stage { height: 440px; } .mt-flow-phone { width: 210px; margin-left: -105px; height: 400px; transform: translateX(calc(var(--d) * 70px)) translateZ(calc(var(--ad) * -220px)) rotateY(calc(var(--d) * -45deg)); } }
.mt-flow-phone.is-far { opacity: 0; pointer-events: none; }