/* ════════════════════════════════════════════════════════════
   SLIDE 8 — THE MARKET (Users + Market Opportunity merged, 2026-06-12)
   Class-scoped (.mkt-*); slide-level hooks use [data-slide-key="market"]
   (stamped by loadSlides), NEVER [data-index] — survives renumbering.
   Per-card accent via --mkt-accent. Avatars reuse the Users-slide
   MetaPerson WebPs (poster↔clip handoff driven by market.js).
═══════════════════════════════════════════════════════════════ */

.slide[data-slide-key="market"]{ background:var(--deck-navy); }

.mkt-layout{
  width:100%; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:clamp(14px,2.4vh,30px);
  padding:var(--pill-reserve) clamp(24px,3.4vw,56px) clamp(12px,2vh,24px) 80px;
  text-align:center;
}
.mkt-head{ display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.4vh,16px); }
.mkt-head .deck-slide-title{ margin-bottom:clamp(10px,1.8vh,22px); }

/* 4 columns; per-card bands aligned via subgrid (apps/avatar/name/cat/val/cagr) */
.mkt-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);   /* equal columns; The Classic reads 25% bigger because the other three scale to 0.8 on desktop (see below) — the shared subgrid can't make one card taller */
  grid-template-rows:auto auto auto auto auto auto;
  gap:0 clamp(10px,1.4vw,22px);
  width:100%; max-width:min(1240px,100%);
}
.mkt-card{
  position:relative;
  display:grid; grid-row:1 / -1; grid-template-rows:subgrid;
  row-gap:clamp(4px,0.8vh,9px);
  min-width:0;
  padding:clamp(10px,1.6vh,18px) clamp(8px,1vw,14px);
  border-radius:18px;
  background:rgba(10,22,40,0.55);
  border:1px solid var(--mkt-border);
  box-shadow:0 0 22px rgba(0,13,44,0.5), inset 0 0 18px rgba(0,13,44,0.3);
}
.mkt-card--classic{   --mkt-accent:var(--blue-bright); --mkt-border:rgba(77,155,255,0.45); }
.mkt-card--optimized{ --mkt-accent:var(--accent-soft);  --mkt-border:rgba(187,187,255,0.45); }
.mkt-card--peace{     --mkt-accent:var(--teal);         --mkt-border:rgba(53,224,184,0.4); }
.mkt-card--gamer{     --mkt-accent:var(--gold);             --mkt-border:rgba(255,209,102,0.45); }

/* ── Featured "Launch Focus" card: The Classic gets the gradient frame, the
   shine-on-hover pass, and the gold badge — drawing more focus than the others;
   its ~20%-bigger size comes from scaling the other three down (see below). ── */
.mkt-card--classic{
  border:0;
  /* Fill at 50% opacity (per feedback) so the slide shows through — a single
     translucent layer; black holds to 60% then ramps to lilac. The gradient frame
     moved to the masked ::before below so it no longer sits behind the fill and
     block the see-through (the old border-box frame layer did). */
  background:linear-gradient(155deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 60%,rgba(80,61,143,0.5) 100%);
  box-shadow:0 0 14px rgba(90,70,150,0.2), 0 0 22px rgba(0,13,44,0.5), inset 0 0 18px rgba(0,13,44,0.3);
}
/* 2px gradient frame (dark purple → lilac) as a masked ring: respects border-radius
   and leaves the translucent fill above it free to reveal the slide. */
.mkt-card--classic::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none;
  background:linear-gradient(140deg,#1f1840,#7d6bb5);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
/* Make The Classic read ~20% bigger (both dimensions) by scaling the OTHER three
   cards DOWN to 0.833 on desktop — the shared subgrid can't size one card taller,
   and scaling down can't overflow (scaling The Classic UP covered the strip text).
   1 / 0.833 = 1.2 → The Classic is 20% bigger than its neighbours; it stays natural.
   Mobile is excluded (each card is a full-width carousel item there). Origin
   center vertically centres the shrunk cards against The Classic (hero + secondary
   look). The per-card entrance keyframe preserves the scale through `forwards`
   (plain mktRise ends at
   translateY(0), which would wipe it). z-index lifts The Classic's frame + badge. */
body:not(.deck-mobile) .mkt-card--classic{ z-index:5; }
/* Push the grid down on desktop so the badge has the SAME clear space above it
   (to the title) as below it (to the frame) — symmetric top/bottom margin. */
body:not(.deck-mobile) .mkt-grid{ margin-top:16px; }
body:not(.deck-mobile) .mkt-card--optimized,
body:not(.deck-mobile) .mkt-card--peace,
body:not(.deck-mobile) .mkt-card--gamer{ transform:scale(0.833); transform-origin:center; }
@media (prefers-reduced-motion:no-preference){
  body:not(.deck-mobile) .slide[data-slide-key="market"].active .mkt-card--optimized,
  body:not(.deck-mobile) .slide[data-slide-key="market"].active .mkt-card--peace,
  body:not(.deck-mobile) .slide[data-slide-key="market"].active .mkt-card--gamer{ animation-name:mktShrinkRise; }
}
@keyframes mktShrinkRise{
  from{ opacity:0; transform:translateY(14px) scale(0.833); }
  to{   opacity:1; transform:translateY(0) scale(0.833); }
}
/* Shine: a light band sweeps the card face on hover. Animating background-position
   (not transform) means nothing overflows the card, so the badge poking above the
   top edge is never clipped and there's no clash with the .mkt-card entrance transform. */
.mkt-card--classic::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(120deg,transparent 38%,rgba(255,255,255,0.16) 50%,transparent 62%);
  background-size:250% 100%; background-position:150% 0; opacity:0;
}
@media (hover:hover){
  .mkt-card--classic{ transition:box-shadow .3s ease; }
  .mkt-card--classic:hover{ box-shadow:0 0 22px rgba(120,95,190,0.3), 0 0 22px rgba(0,13,44,0.5), inset 0 0 18px rgba(0,13,44,0.3); }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .mkt-card--classic:hover::after{ animation:mktShine .9s ease; }
}
@keyframes mktShine{
  0%{ background-position:150% 0; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ background-position:-50% 0; opacity:0; }
}
/* "(Lazy)" nickname after THE CLASSIC — smaller, lighter, same blue accent */
.mkt-card__name-sub{ font-size:0.82em; font-weight:700; letter-spacing:0.04em; opacity:0.72; }
/* Gold "Launch Focus" badge centered above the frame (the old Family Premium
   badge's pattern). Absolutely positioned so it doesn't take a subgrid row. */
.mkt-badge--launch{
  position:absolute; top:0; left:50%; transform:translate(-50%,calc(-100% - 16px)); z-index:4;
  pointer-events:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 12px; border-radius:999px;
  font-size:clamp(8px,0.66vw,10px); font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  color:#1a1205;
  background:linear-gradient(135deg,#ffe49b,var(--gold) 55%,#f3b13c);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:0 4px 14px rgba(0,0,0,0.35), 0 0 16px rgba(255,209,102,0.5);
}

/* No-subgrid fallback (desktop Safari ≤15: `grid-template-rows:subgrid` is
   dropped and each card lays out its own auto rows — graceful, but cards with
   different chip-row wrap counts would misalign). All other bands are
   single-line; reserving two chip rows keeps the cards visually level.
   Desktop-scoped: mobile shows one flex card at a time (no cross-card
   alignment to preserve) and iOS Safari 15 must not pay the taller chips row. */
@supports not (grid-template-rows: subgrid){
  body:not(.deck-mobile) .mkt-card__apps{ min-height:calc(2 * 1.8em); align-content:flex-start; }
}

.mkt-card__apps{
  display:flex; flex-wrap:wrap; justify-content:center; gap:5px;
  min-height:1.8em;
}
.mkt-chip{
  display:inline-flex; align-items:center; justify-content:center; /* text dead-center in the pill — 2026-06-12 */
  line-height:1;
  font-size:clamp(9px,0.72vw,11px); font-weight:600; letter-spacing:0.04em;
  color:rgba(244,247,252,0.82);
  padding:3px 9px; border-radius:999px;
  border:1px solid var(--mkt-border); /* per-card accent border, per the reference image — 2026-06-12 */
  background:rgba(244,247,252,0.06);
  white-space:nowrap;
}

.mkt-card__avatar{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  margin:clamp(4px,0.8vh,10px) 0;
}
.mkt-card__avatar img{
  position:relative; z-index:1;
  height:clamp(140px,22vh,230px);
  width:auto; max-width:100%;
  object-fit:contain;
  /* fade the bottom edge: hides the MetaPerson watermark residue (same as Users slide) */
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 99%);
          mask-image:linear-gradient(to bottom,#000 78%,transparent 99%);
}
/* peace card: dad shifts right; static child at his lower-left (ported from Users) */
.mkt-card--peace .mkt-avatar{ transform:translateX(clamp(8px,1vw,20px)); }
.mkt-card__avatar img.mkt-child{
  position:absolute; left:17%; bottom:0; z-index:2; /* was 4% — child tucked in next to the dad (2026-06-12) */
  height:clamp(90px,14vh,150px); width:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 99%);
          mask-image:linear-gradient(to bottom,#000 80%,transparent 99%);
}
.mkt-card__name{
  font-size:clamp(13px,1.05vw,17px); font-weight:800; letter-spacing:0.12em;
  color:var(--mkt-accent);
}
.mkt-card__cat{
  font-size:clamp(9px,0.74vw,11px); font-weight:600; letter-spacing:0.18em;
  color:rgba(244,247,252,0.55);
}
.mkt-card__val{
  font-size:clamp(24px,2.3vw,34px); font-weight:800; line-height:1.05;
  color:var(--mkt-accent);
  text-shadow:0 0 18px rgba(0,82,245,0.35);
}
.mkt-card__cagr{
  justify-self:center;
  font-size:clamp(9px,0.74vw,11px); font-weight:700; letter-spacing:0.08em;
  color:var(--mkt-accent);
  padding:3px 10px; border-radius:999px;
  border:1px solid var(--mkt-border);
}

.mkt-bottom{
  display:flex; flex-direction:column; gap:clamp(3px,0.6vh,7px);
  width:100%; max-width:min(1240px,100%);
  margin-top:clamp(4px,1vh,12px);
  padding:clamp(8px,1.4vh,14px) clamp(12px,2vw,24px);
  border-radius:14px;
  background:rgba(10,22,40,0.55);
  border:1px solid rgba(77,155,255,0.28);
}
.mkt-bottom__summary{ margin:0; color:#fff; font-weight:600; font-size:clamp(15.6px,1.37vw,20.8px); }
.mkt-bottom__punch{ margin:0; color:#fff; font-weight:700; font-size:clamp(14px,1.3vw,20px); }
.mkt-bottom__punch span{ color:var(--cyan); text-shadow:0 0 18px rgba(0,223,244,0.45); }
.mkt-sources{ margin:0; font-size:clamp(8px,0.62vw,10px); color:rgba(244,247,252,0.4); }

/* Dot indicators — injected by market.js; hidden on desktop. */
.mkt-dots{ display:none; }

/* ── Entrance (deck pattern: gated on .active, reduced-motion shows rest state) ── */
@media (prefers-reduced-motion: no-preference){
  .slide[data-slide-key="market"] .mkt-head,
  .slide[data-slide-key="market"] .mkt-card,
  .slide[data-slide-key="market"] .mkt-bottom{ opacity:0; }
  .slide[data-slide-key="market"].active .mkt-head{ animation:mktRise .5s cubic-bezier(.22,1,.36,1) .05s forwards; }
  .slide[data-slide-key="market"].active .mkt-card{ animation:mktRise .55s cubic-bezier(.22,1,.36,1) forwards; }
  .slide[data-slide-key="market"].active .mkt-card:nth-child(1){ animation-delay:.25s; }
  .slide[data-slide-key="market"].active .mkt-card:nth-child(2){ animation-delay:.4s; }
  .slide[data-slide-key="market"].active .mkt-card:nth-child(3){ animation-delay:.55s; }
  .slide[data-slide-key="market"].active .mkt-card:nth-child(4){ animation-delay:.7s; }
  .slide[data-slide-key="market"].active .mkt-bottom{ animation:mktRise .55s cubic-bezier(.22,1,.36,1) .95s forwards; }
}
@keyframes mktRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

/* ── Mobile (body.deck-mobile): one card at a time, scroll-snap carousel +
   dots riding the handoff — the Users-slide pattern, ported. ── */
body.deck-mobile .mkt-layout{ padding:var(--pill-reserve) 16px 12px; gap:clamp(10px,1.8vh,20px); justify-content:center; }
body.deck-mobile .mkt-grid{
  display:flex; flex-wrap:nowrap;
  grid-template-columns:none; grid-template-rows:none;
  gap:0; width:100%; max-width:560px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
body.deck-mobile .mkt-grid::-webkit-scrollbar{ display:none; }
body.deck-mobile .mkt-card{
  display:flex; flex-direction:column; align-items:center;
  grid-row:auto; grid-template-rows:initial;
  gap:5px; flex:0 0 100%; width:100%; box-sizing:border-box;
  padding:26px 12px 12px; /* top room within the clipped scroll track */
  scroll-snap-align:center;
}
body.deck-mobile .mkt-card__avatar img{ height:clamp(110px,17vh,170px); }
body.deck-mobile .mkt-card__avatar img.mkt-child{ height:clamp(70px,11vh,115px); }
body.deck-mobile .mkt-card__name{ font-size:clamp(13px,3.6vw,16px); }
body.deck-mobile .mkt-card__val{ font-size:clamp(24px,7vw,32px); }
/* Badge sits inside the card's top padding on mobile — the grid is overflow-y:hidden,
   so it can't poke above the frame as it does on desktop. */
body.deck-mobile .mkt-badge--launch{ top:6px; transform:translate(-50%,0); }
body.deck-mobile .mkt-dots{ display:flex; justify-content:center; align-items:center; gap:9px; margin-top:2px; }
body.deck-mobile .mkt-dots__dot{
  width:8px; height:8px; padding:0; border:none; border-radius:50%;
  background:rgba(244,247,252,0.28); cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
body.deck-mobile .mkt-dots__dot[aria-current="true"]{ background:var(--accent-soft); transform:scale(1.3); }
body.deck-mobile .mkt-bottom{ padding:8px 12px; gap:3px; }
body.deck-mobile .mkt-bottom__summary{ font-size:clamp(10px,2.9vw,13px); }
body.deck-mobile .mkt-bottom__punch{ font-size:clamp(12px,3.4vw,16px); }
body.deck-mobile .mkt-sources{ font-size:8px; }
@media (min-width:600px){
  body.deck-mobile .mkt-card__avatar img{ height:clamp(150px,22vh,220px); }
  body.deck-mobile .mkt-grid{ max-width:680px; }
}