/* ============================================================
   Premium card carousel ("Figma Motion" style)
   Self-contained: pairs with carousel.js. Uses site tokens:
   --bg-2, --border, --gold (emerald), --mint, --muted, --font
   ============================================================ */
.mcar{position:relative;margin-top:18px;outline:none;min-width:0;max-width:100%}
.mcar:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px;border-radius:16px}
.mcar-frame{position:relative;overflow:hidden;width:100%;max-width:100%;padding:14px 0 6px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.mcar-track{display:flex;align-items:stretch;will-change:transform}
.mcar-card{position:relative;flex:0 0 var(--mcar-w,340px);width:var(--mcar-w,340px);
  margin-right:var(--mcar-gap,18px);border-radius:24px;border:0;
  background:rgba(13,14,16,.42);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  overflow:hidden;user-select:none;-webkit-user-select:none;
  will-change:transform,opacity,filter}
.mcar-card.is-centre{box-shadow:0 26px 60px rgba(0,0,0,.6)}
.mcar[data-cards="reviews"] .mcar-card,.mcar[data-cards="glance"] .mcar-card,.mcar[data-cards="help"] .mcar-card{transform-origin:50% 100%}
.mcar[data-cards="reviews"] .mcar-frame,.mcar[data-cards="glance"] .mcar-frame,.mcar[data-cards="help"] .mcar-frame{padding-top:40px}
.mcar-card:not(.is-centre){cursor:pointer}
.mcar-visual{position:relative;height:150px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 130% at 50% 0%,rgba(255,255,255,.05),transparent 72%)}
.mcar-visual svg{width:54px;height:54px;stroke:var(--gold);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(52,211,153,.6))}
.mcar-visual img{width:100%;height:100%;object-fit:cover;display:block}
.mcar-body{padding:22px 22px 24px}
.mcar-pill{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#101113;background:#fff;padding:4px 10px;border-radius:999px}
.mcar-title{margin-top:10px;font-size:22px;font-weight:800;letter-spacing:-.01em;color:#fff;line-height:1.25;white-space:normal}
.mcar-title,.mcar-text{text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 16px rgba(0,0,0,.75)}
.mcar-text{margin-top:8px;font-size:16.5px;color:#eef2f1;line-height:1.6}
.mcar-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:60px}
.mcar-ar{background:none;border:0;padding:6px;cursor:pointer;display:flex;align-items:center}
.mcar-ar svg{width:22px;height:22px;stroke:var(--muted);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.mcar-ar:hover svg{stroke:#fff;filter:drop-shadow(0 0 7px rgba(52,211,153,.95)) drop-shadow(0 0 16px rgba(52,211,153,.5))}
.mcar-dots{display:flex;justify-content:center;align-items:center;gap:2px}
.mcar-dot{position:relative;height:24px;width:var(--dw,7px);min-width:24px;background:none;border:0;padding:0;cursor:pointer}
.mcar-dot::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:7px;width:var(--dw,7px);
  border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);transition:background .25s,border-color .25s,width .25s}
.mcar-dot.is-on::before{background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.9);box-shadow:0 0 10px rgba(255,255,255,.45)}
.mcar-rev{display:flex;flex-direction:column;height:100%}
.mcar-stars{color:#cdb27e;letter-spacing:3px;font-size:19px;flex:none}
.mcar-quote{margin-top:10px;font-size:14px;color:#eef2f1;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden;
  max-height:14.4em;flex:0 1 auto;min-height:0;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 16px rgba(0,0,0,.75)}
.mcar-who{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:8px;font-size:13.5px;color:#fff;flex-wrap:wrap;flex:none}
.mcar-g{width:15px;height:15px;flex:none}
.mcar-gsrc{font-size:12px;color:var(--mint);font-weight:600}
@media (max-width:640px){
  .mcar-card{border-radius:18px}
  .mcar-visual{height:118px}
  .mcar-visual svg{width:44px;height:44px}
  .mcar-body{padding:12px 15px 15px}
  .mcar-title{font-size:17.5px}
  .mcar-text{font-size:13.5px}
  .mcar-nav{margin-top:28px}
  .mcar-quote{font-size:12.5px;-webkit-line-clamp:8}
  .mcar-stars{font-size:15px}
}