/* ============================================================================
   Atlas site chrome — mega-menu dropdowns for the shared navbar.

   Extends .afx-nav / .afx-nav__links from atlas-chrome.css. That file is NOT
   touched: everything here is additive and prefixed `afx-mm-` (mega menu).

   REFERENCE: the interaction and layout of blueguardian.com's nav dropdowns —
   panel anchored under the trigger, two columns, a stack of icon + title +
   one-line description rows on the left, a full-height promo card on the
   right. Structure and proportions are copied; the skin is Atlas's own.

   DECLARED DEVIATIONS FROM THE REFERENCE (deliberate, see the report)
   - Radii. Blue Guardian uses 6px panel / 5px row. Atlas's navbar is a 48px
     glass pill; a 6px panel hanging off it reads as a different product. The
     panel takes 20px and the rows 12px, which keeps the 8px panel padding
     concentric (20 - 8 = 12).
   - Palette. Navy/Montserrat becomes the Atlas black-and-teal glass system:
     the same rgba(0,0,0,x) + blur + --af-hair hairline + 9px 10px 24px
     rgba(38,63,66,.28) shadow as .afx-lang__menu, the site's one established
     floating panel, and the SF Pro stack.
   - Panel fill. .afx-lang__menu is rgba(0,0,0,.13). At 78x200 that is fine;
     at 608x292 hanging over the hero it is not. Measured in Chrome: the
     panel's backdrop-filter blurs the hero's background image but NOT the
     hero's own foreground text, which is painted into the same layer, so the
     140px "Get funded." headline read straight through the panel at every
     alpha up to about .8. Same family, much deeper: rgba(0,0,0,.94). The blur,
     the --af-hair hairline and the 9px 10px 24px rgba(38,63,66,.28) shadow are
     byte-identical to the language menu, so it still reads as the same glass.
   - Anchoring. The reference centres the panel under its trigger. Atlas's one
     established floating panel, .afx-lang__menu, is LEFT-aligned to the button
     that opens it, and a centred 608px Markets panel reached back past the
     wordmark. Left-aligned to the trigger.
   - Motion. The reference animates .3s cubic-bezier(.22,1,.36,1). House rules
     forbid hand-written durations, and --t-base / --e-out (240ms,
     cubic-bezier(.16,1,.30,1)) is the same shape, so the tokens are used.
   - Backdrop blur is 36.5px (the value the rest of the Atlas glass uses), not
     the reference's 12px.
   ========================================================================= */

/* The navbar is the positioning context for the panels and has to paint above
   the hero content that follows it in the DOM. .afx-nav is already
   position:relative in atlas-chrome.css; only the stacking order is new. */
.afx-nav { z-index: 60; }

/* ------------------------------------------------------------- the trigger */
/* Every top-level <li> carries .afx-mm. Full navbar height so the panel can
   anchor 8px below the navbar's own bottom edge — the same 8px gap the
   language menu leaves under the globe — and so the hit area is the whole
   bar, not just the 15.2px text line. */
.afx-nav__links .afx-mm {
  position: relative;
  display: flex;
  align-items: center;
  height: 59px;
}

.afx-mm__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  /* type matches .afx-nav__link exactly — Saans 500 / 16 / 95% */
  font-family: var(--font-alt);
  font-weight: var(--w-medium);
  font-size: 16px;
  line-height: 15.2px;
  color: var(--af-white);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--t-fast) var(--e-out);
}
.afx-mm__caret {
  width: 10px;
  height: 10px;
  flex: none;
  display: block;
  opacity: .6;
  transition: transform var(--t-fast) var(--e-out), opacity var(--t-fast) var(--e-out);
}
.afx-mm[data-open="true"] .afx-mm__caret { transform: rotate(180deg); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .afx-mm__trigger:hover .afx-mm__caret { opacity: 1; }
}
.afx-mm__trigger:active { transform: scale(.97); }

/* The single most common bug in this pattern is the panel snapping shut while
   the pointer crosses the gap between trigger and panel. Two defences: a
   ~120ms close delay in atlas-nav.js, and this invisible bridge spanning the
   gap. It only exists while the panel is open, so it never eats clicks on the
   hero underneath. */
.afx-mm[data-open="true"]::after {
  content: '';
  position: absolute;
  left: -28px;
  right: -28px;
  top: 100%;
  height: 10px;
}

/* -------------------------------------------------------------- the panel
   Figma 2N553Cls5WgWmoHrH1EVVv, "Modal" 3122:13570 / 3122:48447 / 3124:13604 /
   3140:16075. One geometry for every section: 8 + 336 + 8 + 336 + 8 = 696.

   The plate is a translucent SAGE, not black. It reads as glass only because
   of the 72.95px backdrop blur behind it; with the blur unsupported it still
   has to be legible, which is why the fill carries 60% alpha rather than the
   20-30% a blur-first design would use. */
.afx-mm__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 696px;
  padding: 8px;
  border-radius: 24px;
  background: rgba(89,118,116,.6);
  /* The file's 145.9 Figma radius converts to 72.95 CSS, and at that value the
     hero art behind the panel still reads as distinct shapes rather than a
     wash. Pushed to 160 + a small saturate so the plate frosts properly:
     large radii sample a wide enough area to average the background out,
     which is the whole point of the glass. Lucas, 27 Aug 2026. */
  backdrop-filter: blur(160px) saturate(1.25);
  -webkit-backdrop-filter: blur(160px) saturate(1.25);
  box-shadow: 9px 10px 24px 0 rgba(38,63,66,.28);
  z-index: 60;
  /* closed */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.985);
  transform-origin: top left;
  transition: opacity var(--afx-mm-dur) var(--afx-mm-ease),
              transform var(--afx-mm-dur) var(--afx-mm-ease),
              visibility 0s linear var(--afx-mm-dur);
}
/* ------------------------------------------------------- switching panels
   Ported from Blue Guardian's navbar, read off the live site: it runs
   shadcn/ui's NavigationMenu with tailwindcss-animate, 300ms on
   cubic-bezier(.22,1,.36,1), and the movement is DIRECTIONAL. Travel right
   along the bar and the outgoing panel slides out to the LEFT while the
   incoming one slides in from the RIGHT; travel left and both reverse. The
   208px throw is tailwindcss-animate's `-52` step (13rem).

   A cold open — nothing else was showing — keeps the plain fade-and-settle
   above. The slide only reads as intentional when there is an old panel for
   the eye to follow off-screen; on a cold open it just looks like a lurch.

   atlas-nav.js sets data-motion and strips it once the animation is done. */
.afx-mm__panel {
  --afx-mm-dur: 300ms;
  --afx-mm-ease: cubic-bezier(.22, 1, .36, 1);
  --afx-mm-slide: 208px;
}

/* while a directional animation runs it OWNS opacity and transform — leaving
   the transition live as well makes the two fight and the panel judder */
.afx-mm__panel[data-motion] { transition: none; }

.afx-mm__panel[data-motion^="from-"] { visibility: visible; opacity: 1; transform: none; }
.afx-mm__panel[data-motion="from-end"] {
  animation: afx-mm-from-end var(--afx-mm-dur) var(--afx-mm-ease) both;
}
.afx-mm__panel[data-motion="from-start"] {
  animation: afx-mm-from-start var(--afx-mm-dur) var(--afx-mm-ease) both;
}

/* the outgoing panel is already data-open="false"; these keep it PAINTED for
   the length of its exit, and inert so it cannot eat a click on the way out */
.afx-mm__panel[data-motion^="to-"] { visibility: visible; pointer-events: none; }
.afx-mm__panel[data-motion="to-start"] {
  animation: afx-mm-to-start var(--afx-mm-dur) var(--afx-mm-ease) both;
}
.afx-mm__panel[data-motion="to-end"] {
  animation: afx-mm-to-end var(--afx-mm-dur) var(--afx-mm-ease) both;
}

@keyframes afx-mm-from-end {
  from { opacity: 0; transform: translateX(var(--afx-mm-slide)); }
  to   { opacity: 1; transform: none; }
}
@keyframes afx-mm-from-start {
  from { opacity: 0; transform: translateX(calc(var(--afx-mm-slide) * -1)); }
  to   { opacity: 1; transform: none; }
}
@keyframes afx-mm-to-start {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(calc(var(--afx-mm-slide) * -1)); }
}
@keyframes afx-mm-to-end {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(var(--afx-mm-slide)); }
}

@media (prefers-reduced-motion: reduce) {
  /* atlas-nav.js already skips setting data-motion, this is the belt to that
     brace — a stale attribute must never animate anything here */
  .afx-mm__panel[data-motion] { animation: none; }
}

/* the 1px gradient hairline. border-color cannot take a gradient, and
   flattening this to a solid rule is what makes a glass panel look cheap.
   Stops are the file's: 11% white, opaque at the halfway point, 11% again. */
.afx-mm__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(97.6deg,
              rgba(255,255,255,.11) 0%,
              rgba(255,255,255,1) 49.52%,
              rgba(255,255,255,.11) 100%);
  opacity: .35;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.afx-mm[data-open="true"] .afx-mm__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

/* Panels are 696 wide and there are seven items: hung from its trigger's LEFT
   edge, everything from About rightwards runs off the viewport. The last three
   hang from the right instead. This is a count-sensitive rule — if the nav
   gains or loses an item, re-check it at 1280 as well as 1512, because the
   trigger positions move. */
.afx-nav__links .afx-mm:nth-last-child(-n+3) .afx-mm__panel {
  left: auto;
  right: 0;
  transform-origin: top right;
}

/* Every panel is now the same width. --wide survives as the flag meaning
   "this one has a second column", because roll_nav.py keys the promo card
   off it and both navbar variants read the same flag. */
.afx-mm__panel--wide { width: 696px; }

/* align-items:flex-start, NOT the default stretch: the promo card has its own
   drawn height (296, Rewards 288) and stretching it to match a long link
   column pools dead space under the CTA. */
.afx-mm__grid { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; }
.afx-mm__col {
  width: 336px;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.afx-mm__panel:not(.afx-mm__panel--wide) .afx-mm__col { width: 336px; }

/* A grouped panel (Challenges) fills its second column with the Futures
   group instead of a promo card. Same 696 shell, same 336 columns. */
.afx-mm__panel--groups { width: 696px; }
.afx-mm__panel--groups .afx-mm__col { width: 336px; }

.afx-mm__group {
  padding: 10px 12px 2px;
  font: var(--w-medium) 12px/1 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--w-40);
}

/* ---------------------------------------------------------------- a row */
.afx-mm__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid transparent;
  /* NO blur and NO shadow at rest. The file gives rows 2-4 a 17px background
     blur and a soft drop, and on Figma's transparent canvas both are
     invisible — there is nothing behind them to blur or to catch a shadow.
     Over a real page they resolve into a visible plate on every row, which
     destroys the whole point of the design: only ONE row is meant to look
     plated, the one under the pointer. Reproducing the JSON here reproduces
     the wrong picture. */
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-fast) var(--e-out);
}
@media (hover: hover) {
  a.afx-mm__row:hover { background-color: rgba(255,255,255,.10); }
  a.afx-mm__row:hover .afx-mm__icon { color: var(--af-lime); opacity: 1; }
}
a.afx-mm__row:focus-visible {
  outline: none;
  border-color: var(--af-lime);
}
/* the page you are already on: the tint the file draws on the highlighted row,
   plus the lime glyph. The design also grows this row's title from 14 to 16px;
   that is NOT reproduced, because a title that changes size on hover reflows
   the whole column under the cursor. Declared in NAV-DROPDOWN-SPEC.md. */
a.afx-mm__row[aria-current="page"] {
  background-color: rgba(34,54,52,.12);
}
a.afx-mm__row[aria-current="page"] .afx-mm__icon { color: var(--af-lime); opacity: 1; }
a.afx-mm__row:active { transform: scale(.985); }

.afx-mm__icon {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  color: #FFFFFF;
  opacity: .9;
  transition: color var(--t-fast) var(--e-out), opacity var(--t-fast) var(--e-out);
}
.afx-mm__tx { display: block; flex: 1 1 auto; min-width: 0; }
/* the Coming soon pill is a third flex child, not part of the text block.
   Let the row wrap and give the text column the space, or the pill floats in
   mid-air beside a short description. */
.afx-mm__row--soon { flex-wrap: wrap; }
.afx-mm__t {
  display: block;
  font: var(--w-medium) 14px/1 var(--font-sans);
  color: #FFFFFF;
}
.afx-mm__d {
  display: block;
  margin-top: 8px;
  font: var(--w-medium) 14px/1 var(--font-ui);
  color: rgba(255,255,255,.6);
}

.afx-mm__row--soon { cursor: default; }
.afx-mm__row--soon .afx-mm__t { color: var(--w-40); font-weight: var(--w-medium); }
.afx-mm__row--soon .afx-mm__d { color: var(--w-32); }
.afx-mm__row--soon .afx-mm__icon { opacity: .3; }
.afx-mm__soon {
  display: inline-block;
  margin: 6px 0 0 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--w-08);
  font: var(--w-medium) 11px/1.5 var(--font-ui);
  color: var(--w-40);
}

/* ---------------------------------------------------------- the promo card
   Figma 3122:14355. 4px of padding, so the artwork sits inside the card's
   own radius rather than bleeding to its edge. */
.afx-mm__promo {
  width: 336px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(34,54,52,.63);
}
.afx-mm__promo > img.afx-mm__promo-shot {
  display: block;
  width: 328px;
  height: 160px;
  object-fit: cover;
  border-radius: 16px;
}
.afx-mm__promo-t {
  margin: 12px 12px 0;
  font: var(--w-medium) 20px/1 var(--font-sans);
  color: #FFFFFF;
}
.afx-mm__promo-s {
  margin: -4px 12px 0;
  font: var(--w-medium) 16px/1 var(--font-ui);
  color: rgba(255,255,255,.8);
}
.afx-mm__promo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 12px;
  font: var(--w-semi) 16px/1.19 var(--font-sans);
  letter-spacing: -.48px;
  color: var(--af-lime);
  text-decoration: none;
  transition: transform var(--t-fast) var(--e-out);
}
.afx-mm__caret2, .dd-caret2 { width: 16px; height: 16px; flex: none; transition: transform var(--t-fast) var(--e-out); }
.afx-mm__promo-link span { transition: transform var(--t-fast) var(--e-out); }
@media (hover: hover) {
  .afx-mm__promo-link:hover .afx-mm__caret2 { transform: translateX(3px); }
}
.afx-mm__promo-link:active { transform: scale(.98); }

/* ------------------------------------------------- the Rewards promo card
   Figma 3124:14515. The one card that is a plate rather than a stack: the
   art is full-bleed behind the content, so it needs its own positioning
   context and an explicit height (the children are absolutely placed and
   would otherwise collapse it). */
.afx-mm__promo--rewards {
  height: 288px;
  position: relative;
  padding: 0;
  overflow: hidden;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background: linear-gradient(181.3deg, #396B6A 0%, #1E3634 100%);
}
.afx-mm__promo-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}
.afx-mm__promo-mark {
  position: relative;
  width: 180px;
  height: 24px;
  margin-top: 32px;
  object-fit: contain;
  /* atlas-logo.png is DARK ink (#0D282C). Every dark surface on the site
     inverts it rather than shipping a second file — same trick as
     .afx-nav__logo and .afx-mnav-brand. Without this the wordmark is
     near-black on a near-black plate. */
  filter: brightness(0) invert(1);
}
.afx-mm__promo-stars {
  position: relative;
  display: flex;
  gap: 6px;
  margin: 0;
  color: var(--af-lime);
}
.afx-mm__promo-stars svg { width: 24px; height: 23px; display: block; }
.afx-mm__promo-score {
  position: relative;
  margin: -4px 0 0;
  font: var(--w-medium) 14px/1.5 var(--font-sans);
  color: rgba(255,255,255,.72);
}
.afx-mm__promo-score b { color: #FFFFFF; font-weight: var(--w-medium); }
.afx-mm__promo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  margin-bottom: 24px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--af-lime);
  /* set explicitly: this button inherits a white link colour from the panel
     and would otherwise render lime-on-lime, which is invisible, not subtle */
  color: #001D21;
  font: var(--w-medium) 14px/1.19 var(--font-sans);
  letter-spacing: -.42px;
  text-decoration: none;
  transition: transform var(--t-fast) var(--e-out);
}
.afx-mm__promo-btn span { transition: transform var(--t-fast) var(--e-out); }
@media (hover: hover) {
  .afx-mm__promo-btn:hover .afx-mm__caret2 { transform: translateX(3px); }
}
.afx-mm__promo-btn:active { transform: scale(.98); }

/* RETIRED 3 Aug 2026 — the .afx-mm-acc mobile accordion lived here. It was
   container-agnostic because it had three different hosts (.abh-menu,
   .afx-mmenu__links, .mobile-menu). All three are gone; the mobile menu is
   now one component, assets/atlas-mobilenav.css (Figma 774:58836). */

/* The desktop panels are hidden below 1100px by atlas-chrome.css hiding
   .afx-nav__links, but belt and braces: never let a panel exist off-screen
   and give the page horizontal scroll. */
@media (max-width: 1100px) {
  .afx-mm__panel { display: none; }
}

/* ============================================================ legacy nav ===
   The repo is mid-migration. The v2 pages above use .afx-nav from
   atlas-chrome.css; the currently-live pages (index, forex, futures, about,
   payouts, verify, every locale copy...) still use the older .nav-glass from
   site.css, which has its own .menu / .has-dd / .dd dropdown machinery and
   does NOT load atlas-tokens.css.

   Rather than transplant the glass navbar onto 150 legacy pages, the same
   six-item structure and the same two-column Blue-Guardian layout are rebuilt
   on top of the .dd panel site.css already ships. Everything below is written
   with literal values on purpose — no var() — because atlas-tokens.css is not
   loaded on those pages. The literals are the token values.
   ========================================================================= */
/* Stacking. site.css gives .nav-glass z-index 5, but `.hero > nav` and
   `.about-hero nav` reset it to 2 — the same z-index as the hero body that
   follows it — so the hero headline painted straight over the dropdown.
   The doubled class ties `.about-hero nav`'s specificity and this file loads
   last, so it wins without !important. */
nav.nav-glass.nav-glass { z-index: 60; }

.nav-glass .dd {
  padding: 8px;
  /* site.css centres .dd on its trigger; anchor it to the trigger's left edge
     so a 696px panel does not hang off the viewport on the first item */
  left: 0;
  transform: none;
  width: 696px;
  border-radius: 24px;
  background: rgba(89,118,116,.6);
  /* The file's 145.9 Figma radius converts to 72.95 CSS, and at that value the
     hero art behind the panel still reads as distinct shapes rather than a
     wash. Pushed to 160 + a small saturate so the plate frosts properly:
     large radii sample a wide enough area to average the background out,
     which is the whole point of the glass. Lucas, 27 Aug 2026. */
  backdrop-filter: blur(160px) saturate(1.25);
  -webkit-backdrop-filter: blur(160px) saturate(1.25);
  box-shadow: 9px 10px 24px 0 rgba(38,63,66,.28);
}
.nav-glass .dd::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(97.6deg,
              rgba(255,255,255,.11) 0%,
              rgba(255,255,255,1) 49.52%,
              rgba(255,255,255,.11) 100%);
  opacity: .35;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.nav-glass .dd.dd--wide { width: 696px; }
.nav-glass .dd.dd--groups { width: 696px; }
.nav-glass .dd.dd--groups .dd-col { width: 336px; }
.nav-glass .dd-group {
  padding: 10px 12px 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.40);
  list-style: none;
}
.nav-glass .dd-grid { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; }
/* the last item sits closest to the right edge; hang its panel from the right */
.nav-glass .menu .has-dd:nth-last-child(-n+3) .dd { left: auto; right: 0; }

.dd-col {
  width: 336px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dd:not(.dd--wide) .dd-col { width: 336px; }

.dd .ddrow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color .16s cubic-bezier(.16,1,.30,1);
}
@media (hover: hover) {
  .dd a.ddrow:hover { background: rgba(255,255,255,.10); }
  .dd a.ddrow:hover .dd-ic { color: #E1FFA0; opacity: 1; }
}
.dd a.ddrow:focus-visible { outline: none; border-color: #E1FFA0; }
.dd a.ddrow[aria-current="page"] { background: rgba(34,54,52,.12); }
.dd a.ddrow[aria-current="page"] .dd-ic { color: #E1FFA0; opacity: 1; }
.dd .ddrow .dd-ic { width: 16px; height: 16px; flex: none; margin-top: 1px; color: #fff; opacity: .9; transition: color .16s cubic-bezier(.16,1,.30,1); }
.dd .ddrow .dd-tx { min-width: 0; flex: 1 1 auto; display: block; }
.dd .ddrow--soon { flex-wrap: wrap; }
.dd .ddrow .dd-t  { display: block; font-size: 14px; font-weight: 500; line-height: 1; color: #fff; }
.dd .ddrow .dd-d  { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1; color: rgba(255,255,255,.6); }

.dd .ddrow--soon { cursor: default; }
.dd .ddrow--soon .dd-t  { color: rgba(255,255,255,.40); }
.dd .ddrow--soon .dd-d  { color: rgba(255,255,255,.32); }
.dd .ddrow--soon .dd-ic { opacity: .3; }
.dd .dd-soon {
  display: inline-block;
  margin: 6px 0 0 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255,255,255,.40);
}

.dd-promo {
  width: 336px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(34,54,52,.63);
  text-align: left;
}
.dd-promo > img.dd-promo-shot { display: block; width: 328px; height: 160px; object-fit: cover; border-radius: 16px; }
.dd-promo .dd-promo-t { margin: 12px 12px 0; font-size: 20px; font-weight: 500; line-height: 1; color: #fff; }
.dd-promo .dd-promo-s { margin: -4px 12px 0; font-size: 16px; font-weight: 500; line-height: 1; color: rgba(255,255,255,.8); }
.dd-promo .dd-promo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: -.48px;
  color: #E1FFA0;
  text-decoration: none;
}
.dd-promo .dd-promo-link span { transition: transform .16s cubic-bezier(.16,1,.30,1); }
@media (hover: hover) {
  .dd-promo .dd-promo-link:hover .dd-caret2 { transform: translateX(3px); }
}

/* the Rewards plate — see .afx-mm__promo--rewards for the full note */
.dd-promo--rewards {
  position: relative;
  height: 288px;
  padding: 0;
  overflow: hidden;
  align-items: center;
  gap: 12px;
  background: linear-gradient(181.3deg, #396B6A 0%, #1E3634 100%);
}
.dd-promo-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }
.dd-promo-mark { position: relative; width: 180px; height: 24px; margin-top: 32px; object-fit: contain; filter: brightness(0) invert(1); }
.dd-promo-stars { position: relative; display: flex; gap: 6px; margin: 0; color: #E1FFA0; }
.dd-promo-stars svg { width: 24px; height: 23px; display: block; }
.dd-promo-score { position: relative; margin: -4px 0 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,.72); }
.dd-promo-score b { color: #fff; font-weight: 500; }
.dd-promo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  margin-bottom: 24px;
  padding: 13px 24px;
  border-radius: 999px;
  background: #E1FFA0;
  /* explicit: the panel sets a white link colour and this would go invisible */
  color: #001D21;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.19;
  letter-spacing: -.42px;
  text-decoration: none;
}
.dd-promo-btn span { transition: transform .16s cubic-bezier(.16,1,.30,1); }
@media (hover: hover) {
  .dd-promo-btn:hover .dd-caret2 { transform: translateX(3px); }
}