/* ==========================================================================
   Qarhami Web 2.3 — on top of site.css + v22.css
   Softer depth · seamless sections · the Lottie workflows in a clean card ·
   the problem stage (tools → one device → one app) · operators of every size
   ========================================================================== */

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 1. Depth: one soft, consistent shadow language ----------
   Shadows are short and low so nothing reaches a section edge and gets cut. */
:root{
  --sh-card:0 1px 2px rgba(37,21,96,.05),0 10px 28px -16px rgba(37,21,96,.12);
  --sh-win:0 2px 6px rgba(37,21,96,.04),0 20px 44px -22px rgba(37,21,96,.18);
  --sh-dev:0 2px 6px rgba(18,12,46,.05),0 22px 40px -22px rgba(18,12,46,.26);
  --sh-dev-dark:0 2px 8px rgba(0,0,0,.18),0 26px 48px -24px rgba(0,0,0,.55);
  --sh-pop:0 1px 3px rgba(37,21,96,.06),0 14px 30px -14px rgba(37,21,96,.22);
  --panel-r:clamp(26px,3.2vw,48px);
  --panel-m:clamp(6px,1.1vw,16px);
}
.dv::before{box-shadow:var(--sh-dev)}
.dv--laptop::before{box-shadow:var(--sh-dev)}
.sec--night .dv::before,.sec--deep .dv::before{box-shadow:var(--sh-dev-dark)}
.pop{box-shadow:var(--sh-pop);border-color:rgba(37,21,96,.07)}
.hstage__photo{box-shadow:var(--sh-win)}
.mcard__ph{box-shadow:var(--sh-win)}
.fdr__photo{box-shadow:0 2px 8px rgba(0,0,0,.2),0 28px 56px -28px rgba(0,0,0,.6)}
.pile__q{box-shadow:0 18px 50px -18px rgba(89,51,229,.55)}
.btn--primary{box-shadow:0 10px 24px -12px rgba(89,51,229,.55)}

/* ---------- 2. Seamless sections ----------
   Light sections share one continuous background and are separated by space,
   not by bands. Dark sections are deliberate rounded panels set into the page,
   so a colour change is always a shape, never a cut. */
body{background:#fff}
.page{background:radial-gradient(1200px 700px at 85% 0,rgba(89,51,229,.06),transparent 60%),#fff}
.strip{border:0;background:transparent;padding:6px 0 clamp(26px,3vw,40px)}
.sec--lav,.wf,.moments,#how,#faq,#scale{background:transparent}
.sec--night,.sec--deep{margin-inline:var(--panel-m);border-radius:var(--panel-r);overflow:clip}
.sec--night+.sec--night{margin-top:var(--panel-m)}
.hero2{overflow-x:clip;overflow-y:visible;padding-bottom:clamp(40px,5vw,72px)}
.hero2 .hstage{margin-bottom:clamp(8px,1.5vw,20px)}
.sec{padding:clamp(64px,8vw,116px) 0}
.sec--tight{padding:clamp(48px,6vw,84px) 0}

/* ---------- 3. Workflow player: the Lottie as designed, in a clean card ---------- */
@media (min-width:1041px){.wf__grid{grid-template-columns:minmax(300px,40fr) minmax(0,60fr);align-items:center}}
.wf__card{position:relative;width:100%;max-width:680px;margin:0 auto;aspect-ratio:1/1;background:#fff;
  border-radius:clamp(20px,2.4vw,32px);border:1px solid rgba(89,51,229,.12);box-shadow:var(--sh-win);overflow:hidden;isolation:isolate}
.wf__card .wf__poster{object-fit:contain;background:#fff}
.wf__card .wf__lot{background:#fff}
.wf__card .wf__lot svg{display:block;width:100%!important;height:100%!important}
.wf__big{position:absolute;z-index:5;left:50%;top:50%;translate:-50% -50%;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;
  background:var(--in);color:#fff;font-weight:600;font-size:15px;box-shadow:0 12px 28px -10px rgba(89,51,229,.6)}
.wf__big svg{width:16px;height:16px}
.wf__big[hidden]{display:none}
.wf__bar{max-width:680px;margin:16px auto 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.wf__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.wf__count{font-family:var(--arch);font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--in)}
.wf__name{font-weight:600;font-size:15.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf__note{max-width:680px}
.wf__tab .bar i{transition:width .25s linear}
@media (max-width:1040px){
  .wf__grid{grid-template-columns:minmax(0,1fr);align-items:start}
  .wf__card{max-width:620px}
}
@media (max-width:520px){
  .wf__bar{flex-wrap:wrap}
  .wf__ctl{width:100%;justify-content:space-between}
  .wf__ctl a{margin-left:auto}
}

/* ---------- 4. The problem: a pile of tools becomes one system ----------
   The stage is drawn in design units (560 x 640, or 400 x 600 when narrow) and
   scaled to fit; assets/js/v23.js drives it from the scroll position.          */
.prob3{padding-bottom:clamp(40px,5vw,72px)}
.prob3__head{max-width:900px}
.prob3__head .lede{max-width:66ch}
.before{margin-top:clamp(28px,4vw,48px)}
.before__row--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.bcard img{object-position:var(--fo,50% 50%)}
@media (max-width:1040px){.before__row--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.before__row--5{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 8px;scrollbar-width:none}
  .before__row--5::-webkit-scrollbar{display:none}.before__row--5 .bcard{flex:none;width:68vw;max-width:300px;scroll-snap-align:start}}

.ps{position:relative;display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:clamp(24px,4vw,64px);margin-top:clamp(56px,7vw,104px)}
.ps__copy{position:sticky;top:calc(var(--hdr) + 8vh);align-self:start;padding-top:1vh}
.ps__copy .lbl{margin-bottom:14px}
.ps__h{font-family:var(--nexa);font-weight:900;font-size:clamp(28px,2.9vw,42px);line-height:1.08;letter-spacing:-.01em;color:#fff}
.ps__h span{display:block;color:var(--mt)}
.ps__steps{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ps__steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);opacity:.5;transition:opacity .45s var(--ease),background .45s,border-color .45s}
.ps__steps li i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--arch);font-weight:700;font-size:13px;color:#fff;background:rgba(255,255,255,.1);transition:background .45s,color .45s}
.ps__steps li b{display:block;font-size:16px;font-weight:600;color:#fff;line-height:1.3}
.ps__steps li span{display:block;font-size:13.5px;color:rgba(255,255,255,.66);line-height:1.5;margin-top:3px}
.ps__steps li.is-on{opacity:1;background:rgba(13,188,147,.08);border-color:rgba(13,188,147,.32)}
.ps__steps li.is-on i{background:var(--mt);color:#06231b}
.ps__kicker{margin-top:26px;font-family:var(--nexa);font-weight:900;font-size:clamp(18px,1.6vw,22px);line-height:1.2;color:#fff}
.ps__kicker span{color:var(--mt)}
.ps__track{position:relative;height:250vh}
.ps__sticky{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));display:flex;flex-direction:column;justify-content:center}
.ps__fit{position:relative;width:100%;height:calc(100% - 6vh);max-height:780px}
.ps__now{display:none}
.ps__stage{position:absolute;left:0;top:0;width:560px;height:640px;transform-origin:0 0}
.ps__lines{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ps__lines path{fill:none;stroke:var(--mt);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ps__l1,.ps__l2{stroke-dasharray:1;stroke-dashoffset:1}
.ps__ar,.ps__n1{opacity:0}
.ps__n1{fill:var(--mt)}

/* tools */
.pt{position:absolute;left:0;top:0;width:0;height:0;will-change:transform,opacity}
.pt__in{position:absolute;left:0;top:0;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:scale(.72) translateY(16px);filter:blur(6px);
  transition:opacity .55s var(--ease-out),transform .9s cubic-bezier(.34,1.56,.64,1),filter .55s var(--ease-out);transition-delay:var(--d,0s)}
.pt.is-in .pt__in{opacity:1;transform:none;filter:none}
.pt.is-in .tm{animation:tmFloat 6s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes tmFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
.pt__tag{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-family:var(--pop);font-weight:600;font-size:12.5px;line-height:1.2;white-space:nowrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pt__tag i{width:7px;height:7px;border-radius:50%;background:var(--cr);box-shadow:0 0 0 3px rgba(255,87,90,.2)}
.tm{position:relative;font-family:var(--pop);box-shadow:0 2px 6px rgba(0,0,0,.25),0 16px 30px -14px rgba(0,0,0,.6)}
/* lockbox */
.tm--lock{width:96px;margin-top:22px;box-shadow:none}
.tm-shackle{position:absolute;left:50%;top:-24px;translate:-50% 0;width:50px;height:36px;border:7px solid #a9aeb9;border-bottom:0;border-radius:26px 26px 0 0}
.tm-lockbody{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:12px;border-radius:16px;background:linear-gradient(160deg,#454a57,#1d2028);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 16px 30px -14px rgba(0,0,0,.7)}
.tm-lockbody span{height:17px;border-radius:5px;background:linear-gradient(#e6e8ec,#c2c6cf);color:#30343d;font-size:9.5px;font-weight:700;line-height:17px;text-align:center}
/* spreadsheet */
.tm--sheet{width:156px;background:#fff;border-radius:10px;overflow:hidden;font-size:9.5px;color:#3a3f4b}
.tm--sheet .r{display:grid;grid-template-columns:52px 56px 1fr;border-bottom:1px solid #e7e9ef}
.tm--sheet .r span{padding:5px 6px;border-right:1px solid #e7e9ef;white-space:nowrap;overflow:hidden;min-height:22px}
.tm--sheet .r span:last-child{border-right:0;color:var(--cr);font-weight:700}
.tm--sheet .h{background:#eef0f5;font-weight:700}
.tm--sheet .h span:last-child{color:#3a3f4b}
.tm--sheet .hl{background:#fff4cc}
/* calendar */
.tm--cal{width:150px;background:#fff;border-radius:12px;padding:9px 9px 10px}
.cal-h{font-size:10.5px;font-weight:700;color:#2b2f38;margin-bottom:6px}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-g span{height:14px;border-radius:3px;background:#f0f2f6}
.tm--cal .bk{position:absolute;height:7px;border-radius:4px}
.tm--cal .b1{left:14px;top:34px;width:58px;background:#ff9f43}
.tm--cal .b2{left:56px;top:51px;width:70px;background:#5a8dee}
.tm--cal .b3{left:28px;top:85px;width:46px;background:#ee5a6f}
/* tracker */
.tm--map{width:136px;background:#fff;border-radius:14px;overflow:hidden}
.tm--map .map{position:relative;height:82px;background:
  linear-gradient(90deg,transparent 46%,#fff 46%,#fff 52%,transparent 52%),
  linear-gradient(0deg,transparent 56%,#fff 56%,#fff 62%,transparent 62%),
  linear-gradient(35deg,transparent 30%,#f6e8b8 30%,#f6e8b8 35%,transparent 35%),#e6eaef}
.tm--map .pin{position:absolute;left:50%;top:44%;width:18px;height:18px;translate:-50% -80%;border-radius:50% 50% 50% 0;rotate:-45deg;background:#e74c3c;box-shadow:0 4px 8px rgba(0,0,0,.3)}
.tm--map .pin::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.tm--map .map-f{padding:6px 9px 8px}
.tm--map .map-f b{display:block;font-size:9.5px;color:#2b2f38}
.tm--map .map-f span{display:block;font-size:9px;color:#8a8fa3}
/* guest texts */
.tm--chat{width:160px;background:rgba(255,255,255,.97);border-radius:16px;padding:9px 9px 10px;display:flex;flex-direction:column;gap:5px}
.tm--chat p{margin:0;font-size:9.8px;line-height:1.3;padding:6px 9px;max-width:84%}
.tm--chat .in{align-self:flex-start;background:#eceef2;color:#23262d;border-radius:12px 12px 12px 4px}
.tm--chat .out{align-self:flex-end;background:#2f7bf5;color:#fff;border-radius:12px 12px 4px 12px}
/* odometer photo */
.tm--odo{width:140px;height:92px;border-radius:12px;background:radial-gradient(circle at 50% 45%,#272b35,#0a0b0f 75%);overflow:hidden}
.tm--odo .odo{position:absolute;left:50%;top:44%;translate:-50% -50%;display:flex;align-items:baseline;gap:2px}
.tm--odo .odo span{width:13px;height:21px;border-radius:3px;background:#14161c;color:#ffb347;font:700 15px/21px var(--arch);text-align:center;text-shadow:0 0 8px rgba(255,179,71,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.tm--odo .odo small{margin-left:4px;font-size:8.5px;color:rgba(255,255,255,.55)}
.tm--odo .c{position:absolute;width:12px;height:12px;border:2px solid rgba(255,255,255,.7)}
.tm--odo .c1{left:8px;top:8px;border-right:0;border-bottom:0}.tm--odo .c2{right:8px;top:8px;border-left:0;border-bottom:0}
.tm--odo .c3{left:8px;bottom:8px;border-right:0;border-top:0}.tm--odo .c4{right:8px;bottom:8px;border-left:0;border-top:0}
.tm--odo em{position:absolute;left:24px;bottom:8px;font-style:normal;font-size:8px;color:rgba(255,255,255,.55)}
/* receipt */
.tm--rcpt{width:112px;background:#fbfaf5;padding:10px 10px 16px;font:9px/1.4 "Courier New",ui-monospace,monospace;color:#33363d;rotate:-4deg;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),92% 100%,84% calc(100% - 6px),76% 100%,68% calc(100% - 6px),60% 100%,52% calc(100% - 6px),44% 100%,36% calc(100% - 6px),28% 100%,20% calc(100% - 6px),12% 100%,4% calc(100% - 6px),0 100%);box-shadow:none;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}
.tm--rcpt b{display:block;text-align:center;font-size:9.5px;letter-spacing:.06em}
.tm--rcpt i{display:block;border-top:1px dashed #aab;margin:5px 0}
.tm--rcpt p{margin:0;display:flex;justify-content:space-between}
.tm--rcpt .t{font-weight:700}
/* team chat */
.tm--team{width:164px;background:#1e2230;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:9px 10px 10px;color:#e8eaf0}
.tm--team .th{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.tm--team .th i{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#7b5cff,#0dbc93)}
.tm--team .th b{font-size:10px}.tm--team .th span{margin-left:auto;font-size:8.5px;color:rgba(255,255,255,.5)}
.tm--team p{margin:4px 0 0;display:flex;align-items:center;gap:6px}
.tm--team p i{flex:none;width:14px;height:14px;border-radius:50%}
.tm--team .a1{background:#ff9f43}.tm--team .a2{background:#5a8dee}.tm--team .a3{background:#ee5a6f}
.tm--team p span{font-size:9.6px;background:rgba(255,255,255,.08);border-radius:9px;padding:5px 8px}

/* the Q, the device, the dashboard */
.ps__q{position:absolute;left:0;top:0;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:30px;background:#fff;display:grid;place-items:center;z-index:3;
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 18px 50px -16px rgba(89,51,229,.75);will-change:transform}
.ps__q img{width:58%;height:auto}
.ps__q::after{content:"";position:absolute;inset:-14px;border-radius:40px;border:1.5px solid rgba(13,188,147,.5);opacity:var(--ring,0);transform:scale(calc(.9 + var(--ring,0) * .2))}
.ps__dev{position:absolute;left:196px;top:18px;width:352px;height:220px;border-radius:22px;overflow:hidden;background:#1a1538;border:1px solid rgba(255,255,255,.14);opacity:0;z-index:2;will-change:transform,opacity,clip-path}
.ps__devvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ps__devlbl{position:absolute;left:14px;top:12px;font-family:var(--arch);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mt)}
.ps__devsw{position:absolute;left:50%;bottom:11px;translate:-50% 0;display:flex;align-items:center;gap:4px;padding:3px;border-radius:999px;background:rgba(11,14,22,.6);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ps__devsw b{font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;color:rgba(255,255,255,.62);white-space:nowrap;transition:background .35s,color .35s}
.ps__devsw b.is-on{background:#fff;color:var(--ink)}
.ps__devsw i{font-style:normal;font-size:10px;color:rgba(255,255,255,.45);padding:0 2px}
.ps__dash{position:absolute;left:16px;top:256px;width:528px;opacity:0;z-index:2;will-change:transform,opacity}
.ps__dash .dv{width:100%}
.ps__dash .dv::before{box-shadow:0 2px 8px rgba(0,0,0,.25),0 26px 50px -26px rgba(0,0,0,.7)}
.ps__dashvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;z-index:2}
.ps__chip{position:absolute;left:26px;top:-15px;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(11,14,22,.72);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ps__chip i{width:7px;height:7px;border-radius:50%;background:var(--mt);box-shadow:0 0 0 4px rgba(13,188,147,.25);animation:pulse 2s ease-in-out infinite}
.ps__alerts{position:absolute;right:-22px;top:34px;width:214px;height:340px;z-index:6;pointer-events:none}
.pa{position:absolute;right:0;top:0;width:100%;opacity:0;transform:translate(26px,var(--y,0px)) scale(.94);transform-origin:100% 0;
  transition:opacity .5s var(--ease-out),transform .75s cubic-bezier(.34,1.56,.64,1)}
.pa.on0,.pa.on1{opacity:1;transform:translate(0,var(--y,0px))}
.pa.on1{opacity:.8}
.pa.pop--toast img{padding:4px 6px}
.ps__hint{position:absolute;left:50%;bottom:-6px;translate:-50% 0;font-family:var(--arch);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap}

@media (max-width:1040px){
  .ps{display:block}
  .ps__copy{position:static;padding:0;margin-bottom:8px}
  .ps__steps{display:none}
  .ps__kicker{display:none}
  .ps__track{height:225vh}
  .ps__sticky{justify-content:flex-start;padding-top:2vh}
  .ps__fit{height:calc(100% - 92px)}
  .ps__now{display:block;min-height:64px;margin-top:10px;text-align:center}
  .ps__now b{display:block;color:#fff;font-size:16px;font-weight:600}
  .ps__now span{display:block;color:rgba(255,255,255,.66);font-size:13.5px;margin-top:2px}
}
@media (prefers-reduced-motion:reduce){
  .ps__track{height:auto}
  .ps__sticky{position:relative;top:0;height:auto}
  .ps__fit{height:auto;aspect-ratio:560/640;max-height:none}
  .pt{display:none}
  .pt__in,.pt.is-in .tm,.ps__chip i{animation:none;transition:none}
  .ps__hint{display:none}
}

/* ---------- 5. Hero: one more pop shape ---------- */
.hpop--map{width:min(27%,210px)}
@media (max-width:640px){.hpop--map{width:38%}}

/* ---------- 6. Operators of every size ---------- */
.teams .sec-head{max-width:900px}
.teams__hero{position:relative;margin:0 0 clamp(18px,2.2vw,28px);border-radius:clamp(22px,2.6vw,34px);overflow:hidden;aspect-ratio:2/1;box-shadow:var(--sh-win);background:#1b1d2b}
.teams__hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.teams__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,14,22,.35),rgba(11,14,22,0) 45%);pointer-events:none}
.teams__hero .hchip{left:20px;top:20px}
.teams__pop{position:absolute;left:clamp(14px,2.6vw,36px);bottom:clamp(14px,2.6vw,36px);width:min(44%,470px);z-index:3}
.teams .scale{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;border:0;background:none;border-radius:0;overflow:visible}
.teams .scale__c{background:#fff;border:1px solid var(--hair-2);border-radius:22px;padding:24px 22px 18px;box-shadow:var(--sh-card)}
.teams .scale__c:nth-child(n){border-right:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)}
.teams .scale__n{font-size:clamp(30px,2.8vw,40px)}
.teams .scale__c h4{font-size:16.5px}
.teams .scale__c:last-child{background:linear-gradient(155deg,#5933E5,#311C7E);border-color:transparent}
.teams .scale__c:last-child .scale__n,.teams .scale__c:last-child h4{color:#fff}
.teams .scale__c:last-child .scale__n small{color:rgba(255,255,255,.72)}
.teams .scale__c:last-child li{color:rgba(255,255,255,.84);border-top-color:rgba(255,255,255,.18)}
@media (max-width:1040px){.teams .scale{grid-template-columns:1fr 1fr}.teams__hero{aspect-ratio:16/10}.teams__pop{width:min(56%,440px)}}
@media (max-width:560px){.teams .scale{grid-template-columns:1fr}.teams__hero{aspect-ratio:4/5}.teams__hero>img{object-position:72% 50%}.teams__pop{width:auto;right:14px}}

/* ---------- 7. Rhythm: light sections run on, dark panels close as cards ---------- */
.sec:not(.sec--night):not(.sec--deep)+.sec:not(.sec--night):not(.sec--deep){padding-top:clamp(20px,3vw,44px)}
.moments{padding-top:clamp(20px,3vw,44px)}
.wf+.moments{padding-top:clamp(8px,2vw,28px)}
.mcard__pop{top:var(--pt,22%)}
.teams .scale__n{white-space:nowrap;font-size:clamp(26px,2.5vw,38px)}
.cta2{margin-bottom:var(--panel-m)}
.foot{margin:0 var(--panel-m) var(--panel-m);border-radius:var(--panel-r);overflow:clip}
.mcard__pop.pop--map{width:min(30%,200px);top:14%}
.mcard__pop.pop--slim{width:min(38%,236px)}

/* ---------- 8. Video cards are links (they open YouTube where a player can't be embedded) ---------- */
a.hiw-card,a.short{display:block;color:inherit;text-decoration:none}
.latest__v a#latestPlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--deep),var(--night));color:#fff;font-weight:500;text-decoration:none;text-align:center}
.short{background:linear-gradient(160deg,#2a2160,#0f0c22)}
a.hiw-card:focus-visible,a.short:focus-visible,#latestPlay:focus-visible{outline:2px solid var(--mt);outline-offset:3px}