/* mg-media-sales.css: the B2B Media Sales section, round 6 (built by tools/media_sales.py from
   lab/media-sales; do not edit here) */

#media-sales{
  --cream:#F6F1E6;--cream2:rgba(246,241,230,.84);--cream3:rgba(246,241,230,.64);--cream4:rgba(246,241,230,.42);
  --lav:#C9B6EC;--lav-b:#E9DCFF;--violet:#5F378A;--ink:#0F0A1E;--ink-l:rgba(51,46,78,.7);
  --ease:cubic-bezier(.16,1,.3,1);
  position:relative;z-index:2;isolation:isolate;overflow:hidden;color:var(--cream);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  padding:clamp(56px,6vw,92px) clamp(18px,4vw,44px) clamp(58px,6vw,96px);
  background:
    radial-gradient(125% 86% at 50% -12%,rgba(126,84,172,.28),transparent 52%),
    radial-gradient(80% 58% at 88% 30%,rgba(168,132,210,.13),transparent 56%),
    linear-gradient(180deg,#170d33 0%,#1e1244 42%,#170e36 76%,#110a28 100%);
  border-top:1px solid rgba(233,220,255,.09)}
#media-sales *{box-sizing:border-box}
:where(#media-sales) .ms-inner{position:relative;z-index:1;max-width:1240px;margin:0 auto}
:where(#media-sales) .ms-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(233,220,255,.05) 0 1px,transparent 1px calc(100%/12));
  -webkit-mask:linear-gradient(180deg,transparent,#000 3%,#000 93%,transparent);mask:linear-gradient(180deg,transparent,#000 3%,#000 93%,transparent)}
:where(#media-sales) .ms-board{position:relative;z-index:1;padding:clamp(26px,2.8vw,44px) clamp(24px,3vw,50px) clamp(30px,3.2vw,50px);
  border:1px solid rgba(233,220,255,.18);border-radius:24px;
  background:linear-gradient(168deg,rgba(233,220,255,.045),rgba(95,55,138,.04) 60%,rgba(20,12,40,.14));
  box-shadow:0 44px 110px rgba(8,5,20,.5),inset 0 1px 0 rgba(246,241,230,.14)}

:where(#media-sales) /* materials */
.mat-dark{position:relative;border:1px solid rgba(233,220,255,.16);border-radius:20px;
  background:linear-gradient(165deg,rgba(233,220,255,.05),rgba(95,55,138,.05) 60%,rgba(20,12,40,.16));
  box-shadow:inset 0 1px 0 rgba(246,241,230,.12),0 30px 80px rgba(8,5,20,.45)}
:where(#media-sales) .mat-pearl{position:relative;border-radius:26px;color:var(--ink);
  background:linear-gradient(158deg,#CFDAF5 0%,#C4D2F2 100%);
  box-shadow:0 18px 48px rgba(8,5,22,.45),inset 0 1px 0 rgba(255,255,255,.35)}
:where(#media-sales) .mat-bento{position:relative;border-radius:30px;background:rgba(255,255,255,.02);padding:24px}
:where(#media-sales) .mat-bento::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.06) 38%,rgba(255,255,255,.06) 62%,rgba(255,255,255,.1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

:where(#media-sales) /* type: the section's own scale (msx-*),:where(#media-sales) unchanged */
.t-eye{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cream2)}
:where(#media-sales) .t-eye.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(201,182,236,.8);box-shadow:0 0 8px rgba(201,182,236,.4)}
:where(#media-sales) .t-head{margin:0;font-family:Fraunces,Georgia,serif;font-weight:520;font-optical-sizing:auto;line-height:1.04;letter-spacing:-.025em;color:var(--cream)}
:where(#media-sales) .t-fact{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.008em;color:var(--cream)}
:where(#media-sales) .t-lead{margin:0;font-size:clamp(16px,1.2vw,17px);line-height:1.62;color:var(--cream3)}
:where(#media-sales) .t-sol{margin:0;font-family:Fraunces,Georgia,serif;font-weight:500;line-height:1.16;letter-spacing:-.015em;color:var(--cream2)}
:where(#media-sales) .t-rname{margin:0;font-weight:600;font-size:clamp(20px,1.6vw,23px);line-height:1.16;letter-spacing:-.012em;color:var(--cream)}
:where(#media-sales) .t-rdesc{margin:0;font-size:16px;line-height:1.6;color:var(--cream3)}
:where(#media-sales) .t-num{font-family:Fraunces,Georgia,serif;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.035em;line-height:.84;color:rgba(201,182,236,.66)}
:where(#media-sales) .t-kv{margin:0;font-family:Fraunces,Georgia,serif;font-weight:480;line-height:1.2;letter-spacing:-.014em}
:where(#media-sales) .t-ctitle{margin:0;font-weight:600;font-size:clamp(20px,1.7vw,24px);line-height:1.16;letter-spacing:-.012em}
:where(#media-sales) .t-clead{margin:0;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
:where(#media-sales) .t-clist{list-style:none;margin:0;padding:0}
:where(#media-sales) .t-cfoot{margin:0;font-size:14.5px;line-height:1.55}
:where(#media-sales) .amp{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:400}

:where(#media-sales) /* the pearl's own ink (Data Services record plate: dt rgba(51,46,78,.7) 13px, dd #0F0A1E 15px 500) */
.mat-pearl .t-eye{color:var(--ink-l)}
:where(#media-sales) .mat-pearl .t-eye.dot::before{background:var(--violet);box-shadow:none}
:where(#media-sales) .mat-pearl .t-kv{color:#131B33}
:where(#media-sales) .mat-pearl .t-kv .em{font-style:italic;color:var(--violet)}
:where(#media-sales) .mat-pearl .t-ctitle{color:var(--ink)}
:where(#media-sales) .mat-pearl .t-clead{color:var(--ink-l)}
:where(#media-sales) .mat-pearl .t-clead b,:where(#media-sales) .mat-pearl .t-clead strong{color:var(--ink)}
:where(#media-sales) .mat-pearl .t-clist li{color:var(--ink);font-weight:500}
:where(#media-sales) .mat-pearl .t-cfoot{color:var(--ink-l)}

:where(#media-sales) /* on dark */
.mat-dark .t-clead,:where(#media-sales) .mat-bento .t-clead{color:var(--cream3)}
:where(#media-sales) .t-clead b,:where(#media-sales) .t-clead strong{color:var(--cream);font-weight:700}
:where(#media-sales) .mat-dark .t-clist li,:where(#media-sales) .mat-bento .t-clist li{color:var(--cream2)}
:where(#media-sales) .mat-dark .t-cfoot,:where(#media-sales) .mat-bento .t-cfoot{color:var(--cream4)}
:where(#media-sales) .t-kv .em{font-style:italic;color:var(--lav-b)}

:where(#media-sales) /* motion: the section's own reveal (msx-anim),:where(#media-sales) once,:where(#media-sales) honouring reduced motion */
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
:where(#media-sales) .rv.in{opacity:1;transform:none}
:where(#media-sales) .lift{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
:where(#media-sales) .lift:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){:where(#media-sales) .rv{opacity:1;transform:none;transition:none}:where(#media-sales) .lift,:where(#media-sales) .lift:hover{transition:none;transform:none}}


.opt-a5 .ms-board{overflow:hidden}
.opt-a5 .a3{position:relative}
.opt-a5 .z-glow{position:absolute;z-index:0;border-radius:50%;filter:blur(60px);pointer-events:none}
.opt-a5 .z-glow--a{width:520px;height:420px;right:4%;top:6%;background:radial-gradient(closest-side,rgba(160,126,204,.24),transparent);animation:zA 18s ease-in-out infinite alternate}
.opt-a5 .z-glow--b{width:480px;height:380px;left:2%;bottom:4%;background:radial-gradient(closest-side,rgba(95,55,138,.34),transparent);animation:zB 22s ease-in-out infinite alternate}
@keyframes zA{to{transform:translate(-40px,30px) scale(1.08)}}
@keyframes zB{to{transform:translate(50px,-24px) scale(1.06)}}
.opt-a5 .a2-top,.opt-a5 .a2-bottom{position:relative;z-index:1}

/* ── top: the claim (as A2, which Kush called really good) ── */
.opt-a5 .a2-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,4.4vw,72px);align-items:center}
.opt-a5 .t-head{font-size:clamp(44px,5vw,72px);font-weight:400;margin-top:22px;max-width:11ch}
.opt-a5 .a2-facts{display:flex;flex-direction:column;gap:4px;margin:24px 0 26px}
.opt-a5 .a2-facts .t-fact{display:flex;align-items:center;gap:14px;font-weight:400;font-size:clamp(23px,2.2vw,30px);line-height:1.2;letter-spacing:-.015em}
.opt-a5 .f-dot{flex:none;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0,#F6F1FF 22%,#D9CBF5 58%,#9C80D6 100%);
  box-shadow:0 0 14px rgba(233,220,255,.45),0 2px 4px rgba(8,3,24,.5),inset 0 -1px 2px rgba(80,50,140,.35)}
.opt-a5 .amp{font-style:italic;font-weight:400}
/* the facts point at their proof: hovering "3 contractor roles" lights the three role cards in turn,
   "commission or retainer" lights the one whose terms those are */
.opt-a5 .t-fact{cursor:default;transition:color .3s ease}
.opt-a5 .t-fact:hover{color:#fff}
.opt-a5 .r-card.hl{background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(201,182,236,.32),0 18px 40px -16px rgba(6,3,18,.7)}

/* the headline's lines rise from a mask, the same way the key value's do (split by script into its
   own lines after the fonts load; the words never change) */
.opt-a5 .hl-l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.opt-a5 .hl-in{display:inline-block;transform:translateY(108%);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.opt-a5 .hl-in.go{transform:none}
.opt-a5 .hl-l:nth-child(2) .hl-in.go{transition-delay:.1s}
.opt-a5 .hl-l:nth-child(3) .hl-in.go{transition-delay:.2s}
.opt-a5 .hl-l:nth-child(4) .hl-in.go{transition-delay:.3s}
.opt-a5 .a2-facts .t-fact{opacity:0;translate:0 10px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.opt-a5 .a2-claim.in .a2-facts .t-fact{opacity:1;translate:0 0}
.opt-a5 .a2-claim.in .a2-facts .t-fact:nth-child(1){transition-delay:.35s}
.opt-a5 .a2-claim.in .a2-facts .t-fact:nth-child(2){transition-delay:.45s}
.opt-a5 .a2-claim.in .a2-facts .t-fact:nth-child(3){transition-delay:.55s}
/* ── the stacks: glass sheets behind a front panel; they fan out as it arrives; the pointer tilts
   the stack (movement only: no light follows the pointer, Kush 2026-10-01) ── */
.opt-a5 .stack{position:relative;--fan:0;--rx:0deg;--ry:0deg;--px:0;--py:0;--sy:0;perspective:1600px}
.opt-a5 .stack.rv.in{--fan:1}
.opt-a5 .stack > *{transition:transform 1.4s var(--ease)}
.opt-a5 .stack.scrub > *{transition:transform .7s var(--ease)}
.opt-a5 .glass,.opt-a5 .sheet{border-radius:22px;
  background:linear-gradient(165deg,rgba(233,220,255,.08),rgba(95,55,138,.045) 58%,rgba(16,9,34,.32));
  -webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35)}
.opt-a5 .glass::before,.opt-a5 .sheet::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.1) 22%,rgba(255,255,255,.05) 62%,rgba(201,182,236,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.opt-a5 .glass{position:relative;z-index:3;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow:inset 0 1px 0 rgba(246,241,230,.2),inset 0 -14px 30px rgba(8,4,22,.22),0 40px 90px rgba(6,3,18,.55),0 2px 0 rgba(255,255,255,.02)}
/* film grain, so the glass reads as a material rather than a gradient (static, never follows the pointer) */
.opt-a5 .glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.opt-a5 .sheet{position:absolute;inset:0;z-index:1;box-shadow:0 30px 70px rgba(6,3,18,.4)}
/* lighter frost on the front glass (v-frost-light): the pill stays visible behind the panel, softened
   by the sheets under it, so the loading moment Kush liked becomes the resting state */
.opt-a5 .v-frost-light .glass{-webkit-backdrop-filter:blur(7px) saturate(1.45);backdrop-filter:blur(7px) saturate(1.45)}
.opt-a5 .stack--right .sheet--near{z-index:2;opacity:.62;transform:translate(calc(var(--fan) * 16px + var(--px) * -4px),calc(var(--fan) * -15px + var(--py) * -4px + var(--sy) * -10px)) scale(calc(1 - var(--fan) * .012))}
.opt-a5 .stack--right .sheet--far{opacity:.32;transform:translate(calc(var(--fan) * 32px + var(--px) * -8px),calc(var(--fan) * -30px + var(--py) * -8px + var(--sy) * -22px)) scale(calc(1 - var(--fan) * .024))}
.opt-a5 .stack--left .sheet--near{z-index:2;opacity:.62;transform:translate(calc(var(--fan) * -14px + var(--px) * -4px),calc(var(--fan) * -14px + var(--py) * -4px + var(--sy) * -10px)) scale(calc(1 - var(--fan) * .012))}
.opt-a5 .stack--left .sheet--far{opacity:.32;transform:translate(calc(var(--fan) * -28px + var(--px) * -8px),calc(var(--fan) * -28px + var(--py) * -8px + var(--sy) * -22px)) scale(calc(1 - var(--fan) * .024))}

/* ── the roles panel ── */
.opt-a5 .a2-offer{padding:30px 28px 18px}
.opt-a5 .t-sol{font-weight:400;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.015em;color:var(--cream);max-width:20ch}
.opt-a5 .a2-label{margin:18px 0 14px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:400;letter-spacing:-.01em;color:var(--cream2)}
.opt-a5 .a2-label::before{content:"";width:14px;height:1.5px;border-radius:2px;background:var(--lav)}
.opt-a5 .r-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.opt-a5 .r-card{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 64px;gap:16px;align-items:start;padding:18px 18px 18px 16px;border-radius:16px;
  background:rgba(255,255,255,.025);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(233,220,255,.06)}
.opt-a5 .r-card:hover{transform:translateY(-3px) translateZ(20px);background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(233,220,255,.12),0 18px 40px -16px rgba(6,3,18,.7)}
.opt-a5 .r-coin{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(158deg,#CFDAF5 0%,#C4D2F2 100%);box-shadow:0 10px 26px rgba(8,5,22,.5),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -6px 12px rgba(95,55,138,.12)}
.opt-a5 .v-coin-lav .r-coin{background:linear-gradient(158deg,#F6F1FF 0%,#DCCDF6 100%)}
.opt-a5 .r-coin span{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:19px;letter-spacing:-.02em;color:#2a2050;font-variant-numeric:tabular-nums}
.opt-a5 .r-coin::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);
  transform:translateX(-70%);transition:transform 1.1s var(--ease)}
.opt-a5 .r-card:hover .r-coin::after{transform:translateX(70%)}
@keyframes coinSheen{from{transform:translateX(-70%)}to{transform:translateX(70%)}}
.opt-a5 .stack.in .r-card:nth-child(1) .r-coin::after{animation:coinSheen 1.1s var(--ease) .7s 1 backwards}
.opt-a5 .stack.in .r-card:nth-child(2) .r-coin::after{animation:coinSheen 1.1s var(--ease) .85s 1 backwards}
.opt-a5 .stack.in .r-card:nth-child(3) .r-coin::after{animation:coinSheen 1.1s var(--ease) 1s 1 backwards}
.opt-a5 .t-rname{font-weight:500;font-size:clamp(20px,1.65vw,23px);margin:4px 0 7px}
.opt-a5 .t-rdesc{font-size:15.5px;line-height:1.58}
/* the role objects: rendered glass with a glossy violet core, no tile behind them */
.opt-a5 .r-icon{position:relative;width:64px;height:64px;display:block;margin-top:-4px}
.opt-a5 .r-icon::after{content:"";position:absolute;left:12%;right:12%;bottom:-6px;height:10px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(6,2,18,.55),transparent);filter:blur(2px);z-index:0;transition:transform .7s var(--ease),opacity .7s var(--ease)}
.opt-a5 .r-obj{position:relative;z-index:1;display:block;width:64px;height:64px;
  filter:drop-shadow(0 8px 14px rgba(8,3,24,.45));transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
.opt-a5 .r-live{width:92px;height:92px;margin:-14px;max-width:none}
.opt-a5 .r-card:hover .r-obj{transform:translateY(-4px) scale(1.06)}
.opt-a5 .stack.in .r-obj.landed{animation:none;opacity:1}
.opt-a5 .r-card:hover .r-icon::after{transform:scaleX(.8);opacity:.6}

/* the role cards arrive one after another; each object lands a beat after its card */
.opt-a5 .r-card{opacity:0;translate:0 12px;transition:opacity .8s var(--ease),translate .8s var(--ease),transform .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.opt-a5 .stack.in .r-card{opacity:1;translate:0 0}
.opt-a5 .stack.in .r-card:nth-child(1){transition-delay:.35s,.35s,0s,0s,0s}
.opt-a5 .stack.in .r-card:nth-child(2){transition-delay:.5s,.5s,0s,0s,0s}
.opt-a5 .stack.in .r-card:nth-child(3){transition-delay:.65s,.65s,0s,0s,0s}
@keyframes objLand{0%{opacity:0;transform:translateY(-14px) scale(.86) rotate(8deg)}60%{opacity:1}100%{opacity:1;transform:none}}
.opt-a5 .r-obj{opacity:0}
.opt-a5 .stack.in .r-obj{animation:objLand 1.1s cubic-bezier(.34,1.56,.64,1) both}
.opt-a5 .stack.in .r-card:nth-child(1) .r-obj{animation-delay:.75s}
.opt-a5 .stack.in .r-card:nth-child(2) .r-obj{animation-delay:.9s}
.opt-a5 .stack.in .r-card:nth-child(3) .r-obj{animation-delay:1.05s}


/* ── bottom: glass left, words right ── */
.opt-a5 .a2-bottom{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,4.4vw,72px);align-items:center;margin-top:clamp(72px,7vw,108px)}
.opt-a5 .a2-consult{padding:30px 34px 30px}
.opt-a5 .a2-consult .t-ctitle{margin:14px 0 22px;color:var(--cream)}
.opt-a5 .t-clead{color:var(--cream3);font-size:14.5px;font-weight:400;letter-spacing:-.005em;text-transform:none;line-height:1.4}
.opt-a5 .t-clead b,.opt-a5 .t-clead strong{color:var(--cream);font-weight:600}
.opt-a5 .t-cfoot{color:var(--cream4)}

/* ── Consulting, round 5: three evolutions of the layered glass and the light that passes over what we
   review before what Media Gen can do lands (Kush: "I love what you're doing with the effect") ── */
.opt-a5 .cx .t-clead{min-height:0}
.opt-a5 .cx .t-clead::after{content:"";display:block;width:24px;height:1px;margin-top:12px;background:rgba(233,220,255,.28)}
.opt-a5 .cx-items{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.opt-a5 .cx-items li{font-size:16.5px;line-height:1.4;letter-spacing:-.01em}
.opt-a5 .cx-review .cx-items li{color:var(--cream3)}
.opt-a5 .cx-act .cx-items li{color:var(--cream)}
.opt-a5 .cx-act .t-clead{color:var(--cream2)}
.opt-a5 .cx .t-cfoot{margin-top:16px;color:var(--cream4)}
.opt-a5 .cx-card{position:relative;border-radius:16px;padding:20px 22px 22px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(233,220,255,.025) 55%,rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(233,220,255,.08),0 18px 40px -20px rgba(6,3,18,.7)}
.opt-a5 .cx-act{background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(233,220,255,.045) 55%,rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(233,220,255,.11),0 26px 50px -16px rgba(6,3,18,.8)}
/* the light: a soft band that crosses a card once, on arrival; items brighten as it passes */
.opt-a5 .cx-card::after,.opt-a5 .cx--sweep::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;pointer-events:none;opacity:0;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(233,220,255,.09) 45%,rgba(246,241,230,.14) 50%,rgba(233,220,255,.09) 55%,transparent);
  transform:translateX(-110%)}
@keyframes cnScan{0%{opacity:0;transform:translateX(-110%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(290%)}}
@keyframes cnSeen{0%,100%{color:var(--cream3)}45%{color:var(--cream)}}
.opt-a5 .cx-card,.opt-a5 .cx-items li{transition:opacity .8s var(--ease),transform 1s var(--ease),translate .6s var(--ease)}
.opt-a5 .stack.in .cx-act:hover{translate:0 -3px}

/* deck: two cards of the SAME width, offset like the sheets behind the panels, so the offset reads as a
   stack and never as a misalignment (round 4's well was full width and its pane narrower and pushed
   right: Kush, "It just looks stupid"). What we review sits behind, darker; what Media Gen can do lands
   in front once the light has passed over the review. Each card has its own depth: when the panel
   tilts under the pointer the front card moves more than the back one, so the layers separate. */
.opt-a5 .cx--deck,.opt-a5 .cx--overhang{position:relative;display:block}
.opt-a5 .cx--deck .cx-review,.opt-a5 .cx--overhang .cx-review{margin-right:34px;padding-bottom:46px;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(233,220,255,.02) 55%,rgba(8,4,22,.18))}
.opt-a5 .cx--deck .cx-review .cx-items,.opt-a5 .cx--overhang .cx-review .cx-items{grid-template-columns:1fr 1fr;gap:10px 24px}
.opt-a5 .cx--deck .cx-act{margin:-30px 0 0 34px;z-index:1}
.opt-a5 .cx-review{translate:calc(var(--px,0) * -.5px) calc(var(--py,0) * -.5px)}
.opt-a5 .cx-act{translate:calc(var(--px,0) * 1.3px) calc(var(--py,0) * 1.3px)}
.opt-a5 .cx--deck .cx-review,.opt-a5 .cx--overhang .cx-review{opacity:0;transform:translateY(8px)}
.opt-a5 .cx--deck .cx-act,.opt-a5 .cx--overhang .cx-act{opacity:0;transform:translate(22px,22px)}
.opt-a5 .stack.in .cx-review{opacity:1;transform:none;transition-delay:.3s}
.opt-a5 .stack.in .cx-act{opacity:1;transform:none;transition-delay:1.55s}
.opt-a5 .stack.in .cx-review::after{animation:cnScan 1.5s cubic-bezier(.45,0,.25,1) .55s both}
.opt-a5 .stack.in .cx-review li{animation:cnSeen 1s ease both}
.opt-a5 .stack.in .cx-review li:nth-child(1){animation-delay:.72s}
.opt-a5 .stack.in .cx-review li:nth-child(3){animation-delay:.8s}
.opt-a5 .stack.in .cx-review li:nth-child(2){animation-delay:1.1s}
.opt-a5 .stack.in .cx-review li:nth-child(4){animation-delay:1.18s}
.opt-a5 .cx-act .cx-items{grid-template-columns:1fr}
.opt-a5 .stack.in .cx-act:hover{translate:calc(var(--px,0) * 1.3px) calc(var(--py,0) * 1.3px - 3px)}
/* overhang: the act card leaves the panel, hanging over its lower right edge in front of it, the way the
   panel floats in front of its own sheets */
.opt-a5 .cx--overhang .cx-act{margin:-30px -60px 0 64px;z-index:4;
  background:linear-gradient(160deg,rgba(86,58,148,.9),rgba(52,32,102,.92) 55%,rgba(34,20,72,.94));
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(233,220,255,.16),0 34px 70px -18px rgba(6,3,18,.9),-18px 18px 50px -24px rgba(6,3,18,.8)}
/* it arrives from beyond the panel's edge once the light has passed over what we review */
.opt-a5 .cx--overhang .cx-act{opacity:0;transform:translate(90px,10px) rotate(1.2deg)}
.opt-a5 .stack.in .cx--overhang .cx-act{opacity:1;transform:none;transition:opacity .7s var(--ease) 1.5s,transform 1.25s cubic-bezier(.22,1.25,.36,1) 1.5s,translate .6s var(--ease)}
.opt-a5 .v-cn-overhang .a2-consult{overflow:visible}

/* ── the key value: the site's own sentence, then the dial it describes (kv-dial.js): a glass knob whose
   ring lights as it turns up, idling up and down with demand, and turnable by hand ── */
.opt-a5 .a2-value .t-kv{font-size:clamp(28px,2.55vw,37px);line-height:1.17;margin-top:20px;color:var(--cream2)}
.opt-a5 .kvt{position:relative;margin:30px -20px 0;aspect-ratio:2.26;cursor:ew-resize;touch-action:none}
.opt-a5 .kvt-seat{position:absolute;aspect-ratio:1;transform:translate(-50%,-95%)}
.opt-a5 .kvt-p{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 6px 10px rgba(6,2,18,.4))}
.opt-a5 .kvt-on{opacity:0}
.opt-a5 .kvt-shadow{position:absolute;left:14%;right:14%;bottom:1%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(6,2,18,.55),transparent)}
.opt-a5 .kvt-knob{position:absolute;display:block;pointer-events:none}
.opt-a5 .kvt-kshadow{position:absolute;z-index:1999;transform:translateY(16%) scaleY(.5);border-radius:50%;background:radial-gradient(closest-side,rgba(6,2,18,.6),transparent)}

/* ── MetaLab transfers (metalab.com, pulled 2026-09-30) ── */
.opt-a5 .t-eye{padding:9px 16px;border-radius:50px;background:rgba(186,186,186,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.06);font-size:14px;font-weight:400;letter-spacing:-.01em;text-transform:none;color:var(--cream);
  transition:border-color .2s ease,background-color .2s ease}
.opt-a5 .t-eye:hover{background:rgba(186,186,186,.22);border-color:rgba(255,255,255,.14)}
.opt-a5 .t-eye.dot::before{background:linear-gradient(158deg,#F4EEFF,#C9B6EC);box-shadow:0 0 10px rgba(233,220,255,.55)}
/* the pills: glossy volumes behind the glass, seen while the page loads (Kush: "keep that pill there").
   They drift on their own; depth comes from scroll, never from the pointer. */
.opt-a5 .lq{position:absolute;z-index:0;pointer-events:none;border-radius:999px;
  background:
    radial-gradient(55% 42% at 30% 20%,rgba(255,255,255,.9) 0,rgba(233,220,255,.42) 20%,transparent 46%),
    radial-gradient(70% 60% at 78% 88%,rgba(150,170,255,.6) 0,transparent 52%),
    linear-gradient(160deg,#7a55c8 0%,#33195f 42%,#120729 78%,#08030f 100%);
  box-shadow:inset -22px -30px 48px rgba(0,0,0,.6),inset 16px 18px 34px rgba(255,255,255,.14),0 50px 90px rgba(4,1,12,.65);
  transform:translateY(calc(var(--sy,0) * 40px)) rotate(var(--r,0deg))}
.opt-a5 .lq--1{--r:-28deg;width:420px;height:150px;right:9%;top:120px;animation:lqA 16s ease-in-out infinite alternate}
.opt-a5 .lq--3{--r:22deg;width:360px;height:130px;left:8%;bottom:180px;animation:lqA 19s ease-in-out infinite alternate-reverse}
@keyframes lqA{to{translate:-26px 18px;rotate:6deg}}

@media (prefers-reduced-motion:reduce){
  .opt-a5 .z-glow,.opt-a5 .lq{animation:none}
  .opt-a5 .r-card,.opt-a5 .cx-card,.opt-a5 .cx-items li{opacity:1!important;translate:none;transform:none!important;transition:none}
  .opt-a5 .r-obj{opacity:1;animation:none!important;transition:none}
  .opt-a5 .r-card:hover .r-turn{animation:none}
  .opt-a5 .hl-in{transform:none;transition:none}
  .opt-a5 .a2-facts .t-fact{opacity:1;translate:none;transition:none}
  .opt-a5 .cx-card::after,.opt-a5 .cx--sweep::after,.opt-a5 .cx--tiles::after,.opt-a5 .cx-items li,.opt-a5 .r-coin::after{animation:none!important}
  .opt-a5 .stack > *{transition:none}
  .opt-a5 .glass{transform:none}
}


main.below#main-content > #media-sales.ms{
  padding:clamp(56px,6vw,92px) clamp(18px,4vw,44px) clamp(58px,6vw,96px);
  overflow:hidden!important}
/* the role objects: baked flipbooks of the round 6 three.js scenes (96 frames, 12 x 8, 92 px slots) */
#media-sales .opt-a5 .r-flip,.opt-a5 .r-flip{display:block;background-repeat:no-repeat;background-size:1104px 736px;background-position:0 0}