/* ab_landing_v2 variant layer for the games.perkswallet.com dashboard.
 *
 * Every rule is scoped to :root[data-ab-landing="featured"] or "quiet", so this file is
 * INERT on the control arm. It is loaded unconditionally and does nothing until the arm
 * attribute is set, which keeps the control path byte-identical to today rather than
 * routing it through a second code path that could drift.
 *
 * Palette sampled from Ali's email mockups (PerksWallet_Full_Email_Mockups_3): no navy at
 * all, canvas-coloured header, red wordmark, and a truer money green than the site's
 * teal-leaning #0e9f6e. Designs: demo.offeros.com/pw-landing-variants (variants F and H).
 */

/* ---- shared by both arms ------------------------------------------------ */

:root[data-ab-landing="featured"],
:root[data-ab-landing="quiet"] {
  --red: #D82018;
  --red-soft: #FDECEC;
  --green: #009034;
  --green-soft: #E8F5EC;
  --bg: #F3F3F3;
  --card: #FEFEFE;
  --line: #E6E6E6;
  --ink: #000000;
  --muted: #5C5C5C;
  --muted-2: #8A8A8A;
  --tile: #F0F0F0;
}
:root[data-ab-landing="featured"][data-theme="dark"],
:root[data-ab-landing="quiet"][data-theme="dark"] {
  --red: #E83030;
  --red-soft: rgba(232, 48, 48, .18);
  --green: #59BB51;
  --green-soft: rgba(89, 187, 81, .16);
  --bg: #090B0E;
  --card: #12151A;
  --line: #23272E;
  --ink: #FFFFFF;
  --muted: #A0A4AB;
  --muted-2: #6E737B;
  --tile: #1A1E24;
}

/* Header becomes canvas with a hairline, not a navy slab. Recoloured rather than
   token-swapped: --navy still drives other things, and setting it to white here would
   leave the header's own white text invisible. */
:root[data-ab-landing="featured"] header,
:root[data-ab-landing="quiet"] header {
  background: var(--bg);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
:root[data-ab-landing="featured"] header .brand b,
:root[data-ab-landing="quiet"] header .brand b { color: var(--ink); }
:root[data-ab-landing="featured"] header .brand span,
:root[data-ab-landing="quiet"] header .brand span {
  opacity: 1; color: var(--red); border: 1px solid var(--red);
  border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-left: 4px;
}
:root[data-ab-landing="featured"] .theme-btn, :root[data-ab-landing="quiet"] .theme-btn,
:root[data-ab-landing="featured"] .user-chip, :root[data-ab-landing="quiet"] .user-chip {
  background: var(--card); border-color: var(--line); color: var(--muted);
}

/* main becomes an ordered column so the arms can move whole blocks without the server
   emitting different HTML. Anything without an explicit order keeps source position. */
:root[data-ab-landing="featured"] main,
:root[data-ab-landing="quiet"] main { display: flex; flex-direction: column; }

/* Featured slot: the top game, promoted out of the rail. */
#ab-featured { display: none; }
:root[data-ab-landing="featured"] #ab-featured,
:root[data-ab-landing="quiet"] #ab-featured { display: block; order: 1; margin-top: 16px; }

:root[data-ab-landing="featured"] #sec-games,
:root[data-ab-landing="quiet"] #sec-games { order: 2; }
:root[data-ab-landing="featured"] #sec-rail,
:root[data-ab-landing="quiet"] #sec-rail { order: 3; }
:root[data-ab-landing="featured"] #ms-embed-bottom,
:root[data-ab-landing="quiet"] #ms-embed-bottom { order: 5; }
:root[data-ab-landing="featured"] #getback,
:root[data-ab-landing="quiet"] #getback { order: 6; }
/* #about shares the footer's order so it stays just above it (source order breaks the tie);
   without an order it would be 0 and jump to the top of the page in these two arms. */
:root[data-ab-landing="featured"] #about,
:root[data-ab-landing="quiet"] #about,
:root[data-ab-landing="featured"] footer,
:root[data-ab-landing="quiet"] footer { order: 7; }

/* The three-step strip, arrows centred in their gaps: the arrows are flex items that each
   take an equal share of the leftover space, so every glyph sits the same distance from
   the label before it and the numeral after it. */
.ab-steps { display: flex; align-items: center; width: 100%; margin: 0 0 14px; }
.ab-step {
  display: flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.ab-step-n {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--red); color: var(--red); background: var(--red-soft);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.ab-step-arrow {
  flex: 1 1 0; text-align: center; color: var(--muted-2);
  font-size: 13px; line-height: 1; min-width: 20px;
}
@media (max-width: 339px) { .ab-step { font-size: 11px; gap: 5px; } .ab-step-arrow { min-width: 12px; } }

.ab-feat-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px; display: block; color: inherit; text-decoration: none;
}
.ab-feat-top { display: flex; align-items: center; gap: 12px; }
.ab-feat-ico { width: 62px; height: 62px; border-radius: 15px; border: 1px solid var(--line); flex-shrink: 0; }
.ab-feat-name { font-weight: 700; font-size: 16px; }
.ab-feat-plat { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.ab-feat-amt { font-size: 26px; font-weight: 800; color: var(--green); margin-top: 8px; letter-spacing: -.01em; }
.ab-feat-amt small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.ab-feat-cta {
  display: block; width: 100%; margin-top: 12px; text-align: center;
  background: var(--red); color: #fff; font-weight: 700; font-size: 15px;
  border: 0; border-radius: 12px; padding: 13px 16px; cursor: pointer; text-decoration: none;
}

/* Hero art, quiet arm only. 16:9 is what AdGem ships. */
.ab-feat-hero { display: none; }
:root[data-ab-landing="quiet"] .ab-feat-card { padding: 0; overflow: hidden; }
:root[data-ab-landing="quiet"] .ab-feat-hero {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--tile);
}
:root[data-ab-landing="quiet"] .ab-feat-top { padding: 12px 14px 0; }
:root[data-ab-landing="quiet"] .ab-feat-amt { padding: 0 14px; }
:root[data-ab-landing="quiet"] .ab-feat-cta { width: calc(100% - 28px); margin: 12px 14px 14px; }

/* ---- featured arm: the wallet is demoted BELOW the games ---------------- */
:root[data-ab-landing="featured"] #wallet { order: 4; }

/* ---- quiet arm: the wallet becomes a sticky bar ------------------------- */
:root[data-ab-landing="quiet"] #wallet { order: 4; }
:root[data-ab-landing="quiet"] .ab-quiet-note {
  order: 4; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 14px;
}
:root[data-ab-landing="quiet"] .ab-quiet-note b { color: var(--ink); }

.ab-redeem-bar { display: none; }
:root[data-ab-landing="quiet"] .ab-redeem-bar {
  display: block; position: sticky; bottom: 0; z-index: 30;
  background: var(--card); border-top: 1px solid var(--line); padding: 10px 16px;
}
.ab-redeem-in { max-width: 36rem; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.ab-redeem-in .ab-meter { flex: 1; }
.ab-redeem-labels {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  font-size: 10px; color: var(--muted); margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.ab-redeem-labels > :last-child { flex-shrink: 0; }
.ab-redeem-track { height: 6px; border-radius: 999px; background: var(--tile); overflow: hidden; }
.ab-redeem-fill { height: 100%; background: var(--red); }

/* Available balance, three states. A filled pill rather than coloured text: a green
   bright enough to read as "go" measures 3.3:1 as text on white and fails, but clears
   4.5:1 comfortably as a background behind deep-green ink. */
.ab-avail {
  display: inline-block; font-weight: 800; border-radius: 999px; padding: 2px 9px;
}
.ab-redeem-bar[data-avail="ready"] .ab-avail   { background: #22C55E; color: #052E16; }
.ab-redeem-bar[data-avail="earning"] .ab-avail { background: #FACC15; color: #111827; }
.ab-redeem-bar[data-avail="zero"] .ab-avail,
.ab-redeem-bar[data-avail="zero"] .ab-avail-label { display: none; }

.ab-redeem-btn {
  background: var(--red); color: #fff; border: 0; border-radius: 999px;
  padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.ab-redeem-btn:disabled { opacity: .45; cursor: default; }

/* The wallet carries margin-top:-38px so it can pull up into the navy header on control.
   Both variant arms move it BELOW the games, where that negative margin drags it up over
   the rail and clips the Play & earn buttons. Reset it, and give it the spacing a normal
   section gets. The stock shadow is navy-tinted, which reads wrong on a canvas header. */
:root[data-ab-landing="featured"] #wallet,
:root[data-ab-landing="quiet"] #wallet {
  margin-top: 22px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}



/* ---- header, matched to the mockups ------------------------------------- */

/* The theme button is 34px in the stock CSS but has no flex-shrink guard, so in this
   header it squeezed to a 19px oval. Pin it. (Control has the same latent squeeze; not
   touched here, because changing control mid-experiment changes the baseline.) */
:root[data-ab-landing="featured"] .theme-btn,
:root[data-ab-landing="quiet"] .theme-btn {
  flex: 0 0 34px; width: 34px; height: 34px; box-shadow: 0 1px 2px rgba(16,24,40,.05);
}

/* Outlined icons, matching the mockups, without editing the shared theme-toggle.js that
   the walls and admin also use. The injected glyph is masked out and redrawn from
   currentColor, so all three states survive: a sun on light, a moon on dark, a split disc
   on system. Matching the mockup must not cost the control the button already gives. */
:root[data-ab-landing="featured"] .theme-btn svg,
:root[data-ab-landing="quiet"] .theme-btn svg { display: none; }
:root[data-ab-landing="featured"] .theme-btn::after,
:root[data-ab-landing="quiet"] .theme-btn::after {
  content: ""; width: 17px; height: 17px; background: currentColor;
  -webkit-mask: var(--ab-theme-icon) center / contain no-repeat;
  mask: var(--ab-theme-icon) center / contain no-repeat;
}
:root[data-ab-landing="featured"], :root[data-ab-landing="quiet"] {
  /* system: split disc */
  --ab-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 3a9 9 0 0 0 0 18z' fill='%23000'/%3E%3C/svg%3E");
}
:root[data-ab-landing="featured"][data-theme-mode="light"], :root[data-ab-landing="quiet"][data-theme-mode="light"] {
  --ab-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}
:root[data-ab-landing="featured"][data-theme-mode="dark"], :root[data-ab-landing="quiet"][data-theme-mode="dark"] {
  --ab-theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
}

/* Chip: the mockup reads "· Log out" with a calm dot, not a truncated address fragment.
   Below 430px the address cannot sit beside an unclipped wordmark, and "t.." is worse
   than nothing; the full address is still in the email dialog. */
:root[data-ab-landing="featured"] .user-chip,
:root[data-ab-landing="quiet"] .user-chip {
  min-height: 34px; box-shadow: 0 1px 2px rgba(16,24,40,.05); flex: 0 1 auto;
}
:root[data-ab-landing="featured"] .user-chip .dot,
:root[data-ab-landing="quiet"] .user-chip .dot { background: var(--green); }
@media (max-width: 429px) {
  :root[data-ab-landing="featured"] .user-chip em,
  :root[data-ab-landing="quiet"] .user-chip em { display: none; }
}
/* The wordmark never clips: a masked brand reads as a broken page in a way a hidden
   address does not. */
:root[data-ab-landing="featured"] .brand,
:root[data-ab-landing="quiet"] .brand { flex: 0 0 auto; }
:root[data-ab-landing="featured"] header .wrap,
:root[data-ab-landing="quiet"] header .wrap { gap: 10px; }

/* With the address hidden the separator has nothing to separate, and the mockup reads
   "Log out" with just the status dot. */
:root[data-ab-landing="featured"] .chip-sep,
:root[data-ab-landing="quiet"] .chip-sep { font-style: normal; opacity: .5; }
@media (max-width: 429px) {
  :root[data-ab-landing="featured"] .chip-sep,
  :root[data-ab-landing="quiet"] .chip-sep { display: none; }
}

/* Below 360px the wordmark, the qualifier pill, the theme control and the chip cannot all
   fit, and the header overflowed by 28px. Drop the qualifier: "PerksWallet" alone still
   reads as the brand, and the alternative is clipping the wordmark itself. */
@media (max-width: 359px) {
  :root[data-ab-landing="featured"] header .brand span,
  :root[data-ab-landing="quiet"] header .brand span { display: none; }
  :root[data-ab-landing="featured"] header .brand b,
  :root[data-ab-landing="quiet"] header .brand b { font-size: 16px; }
}

/* ---- offer embed, reshaped to the mockups ------------------------------- */
/* Scoped to the variant arms only. public/ms-embed.js is shared with the game walls and
   other publishers' surfaces, so changing it there would restyle the control arm and
   everyone else at the same time. If this shape is wanted everywhere, that is a separate
   change to the embed itself, not a wider selector here. */

/* The photo is set as an INLINE background-image by ms-embed.js render(), so overriding it
   needs !important. The mockup card is flat, with the offer ICON carrying the brand;
   ms-embed's icon() already falls back to the primary creative when no icon_image exists. */
:root[data-ab-landing="featured"] .msx-card,
:root[data-ab-landing="quiet"] .msx-card {
  background-image: none !important;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; min-height: 0; display: block;
}
/* The scrim exists to make white text legible over a photo. No photo, no scrim. */
:root[data-ab-landing="featured"] .msx-card::before,
:root[data-ab-landing="quiet"] .msx-card::before { display: none; }

:root[data-ab-landing="featured"] .msx-title,
:root[data-ab-landing="quiet"] .msx-title {
  color: var(--muted); font-size: 11px; letter-spacing: .07em;
}

/* Icon left, copy right, buttons across the bottom. Done with grid because the markup has
   no wrapper around the headline and description to flex against. */
:root[data-ab-landing="featured"] .msx-body,
:root[data-ab-landing="quiet"] .msx-body {
  display: grid; grid-template-columns: 42px 1fr; gap: 2px 12px;
  padding: 14px; align-items: start;
}
:root[data-ab-landing="featured"] .msx-icon,
:root[data-ab-landing="quiet"] .msx-icon {
  grid-column: 1; grid-row: 1 / 3; width: 42px; height: 42px;
  margin: 0; border: 1px solid var(--line); border-radius: 10px;
}
:root[data-ab-landing="featured"] .msx-h,
:root[data-ab-landing="quiet"] .msx-h {
  grid-column: 2; color: var(--ink); font-size: 14px; font-weight: 700; margin: 0;
}
:root[data-ab-landing="featured"] .msx-d,
:root[data-ab-landing="quiet"] .msx-d {
  grid-column: 2; color: var(--muted); font-size: 13px; margin: 2px 0 0;
}
:root[data-ab-landing="featured"] .msx-ctas,
:root[data-ab-landing="quiet"] .msx-ctas { grid-column: 1 / -1; margin-top: 11px; gap: 8px; }
:root[data-ab-landing="featured"] .msx-yes,
:root[data-ab-landing="quiet"] .msx-yes {
  background: var(--red); color: #fff; border-radius: 12px; padding: 10px 14px;
  font-size: 13px; font-weight: 700;
}
:root[data-ab-landing="featured"] .msx-no,
:root[data-ab-landing="quiet"] .msx-no {
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 700;
}

/* The same sentence already sits in the page footer, three lines below. Saying it twice
   on one screen reads as boilerplate and costs the vertical space the offer needs. */
:root[data-ab-landing="featured"] .msx-terms,
:root[data-ab-landing="quiet"] .msx-terms { display: none; }

/* ---- rail: one full-width row per game ---------------------------------- */
/* Not a carousel and not the 2-up wall. At mobile width a stacked row gives the title
   room to breathe and puts every payout on the same left edge, so two games are compared
   by reading down one column instead of across. */
:root[data-ab-landing="featured"] #rail-list,
:root[data-ab-landing="quiet"] #rail-list {
  display: flex; flex-direction: column; gap: 10px;
  overflow-x: visible; flex-wrap: nowrap; scroll-snap-type: none;
}
:root[data-ab-landing="featured"] #rail-list .offer-card,
:root[data-ab-landing="quiet"] #rail-list .offer-card {
  flex: 0 0 auto; width: 100%; min-width: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1px 12px; align-items: center; text-align: left; padding: 12px;
  scroll-snap-align: none;
}
:root[data-ab-landing="featured"] #rail-list .tile,
:root[data-ab-landing="quiet"] #rail-list .tile { grid-column: 1; grid-row: 1 / 4; margin: 0; }
:root[data-ab-landing="featured"] #rail-list .offer-card h3,
:root[data-ab-landing="quiet"] #rail-list .offer-card h3 {
  grid-column: 2; grid-row: 1; font-size: 14px; margin: 0;
}
:root[data-ab-landing="featured"] #rail-list .upto,
:root[data-ab-landing="quiet"] #rail-list .upto { grid-column: 2; grid-row: 2; margin: 0; }
:root[data-ab-landing="featured"] #rail-list .platform-badge,
:root[data-ab-landing="quiet"] #rail-list .platform-badge { grid-column: 2; grid-row: 3; margin: 0; }
/* The CTA spans the rows so it centres against the block of text, not the first line. */
:root[data-ab-landing="featured"] #rail-list .btn-play,
:root[data-ab-landing="quiet"] #rail-list .btn-play {
  grid-column: 3; grid-row: 1 / 4; align-self: center;
  padding: 9px 16px; border-radius: 999px; font-size: 14px; white-space: nowrap;
}

/* ---- steps, now inside the card ----------------------------------------- */
:root[data-ab-landing="featured"] .ab-feat-card .ab-steps { margin: 0 0 12px; }

/* ---- quiet: the sticky bar is the ONLY wallet surface -------------------- */
/* The card's FIGURES are removed, not the card, because #redeem-note carries the
   one-time-code and log-out rule. display:none on #wallet took that disclosure off the
   page entirely, which the audit caught. Keeping the note in place means the exact
   production copy survives instead of a second copy drifting from it. */
:root[data-ab-landing="quiet"] #wallet {
  background: none; border: 0; box-shadow: none; padding: 0; margin-top: 14px;
}
:root[data-ab-landing="quiet"] #wallet > .wallet-top,
:root[data-ab-landing="quiet"] #wallet > .meter > .meter-labels,
:root[data-ab-landing="quiet"] #wallet > .meter > .meter-track,
:root[data-ab-landing="quiet"] #wallet > .pending-note,
:root[data-ab-landing="quiet"] #wallet > .payouts { display: none; }
:root[data-ab-landing="quiet"] #wallet > .meter { margin: 0; }
:root[data-ab-landing="quiet"] #redeem-note { font-size: 12px; color: var(--muted); margin: 0; }
.ab-redeem-bar.ab-bar-hidden { display: none !important; }

/* Quiet card text, matched to the mockup: icon and name on one row under the art, the
   payout as the loudest line, then the caption, then a full-width CTA. */
:root[data-ab-landing="quiet"] .ab-feat-name { font-size: 16px; }
:root[data-ab-landing="quiet"] .ab-feat-amt { font-size: 28px; margin-top: 10px; }

/* ---- offer card: let the copy run ---------------------------------------- */
/* ms-embed clamps the description to two lines for a card sized around a photo. This card
   has no photo and no fixed height, so the clamp only truncated a sentence mid-word. */
:root[data-ab-landing="featured"] .msx-d,
:root[data-ab-landing="quiet"] .msx-d {
  display: block; -webkit-line-clamp: none; overflow: visible;
}

/* The rail CTA is navy in the stock theme, which is the one colour these arms removed.
   Red, matching the featured card's CTA, so every "play this" control looks the same. */
:root[data-ab-landing="featured"] #rail-list .btn-play,
:root[data-ab-landing="quiet"] #rail-list .btn-play { background: var(--red); color: #fff; }

/* Game titles wrap rather than truncate. "Raid: Shadow Legends" does not fit the row's
   middle column beside an icon and a CTA, and a title cut mid-word reads as broken. */
:root[data-ab-landing="featured"] #rail-list .offer-card h3,
:root[data-ab-landing="quiet"] #rail-list .offer-card h3 {
  white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25;
}

/* The stock primary is var(--navy), which these arms never set, so every btn-primary
   outside the variant markup stayed navy: the Add to Home Screen control most visibly.
   Red is the primary action colour in this palette. */
:root[data-ab-landing="featured"] .btn-primary,
:root[data-ab-landing="quiet"] .btn-primary { background: var(--red); color: #fff; }
:root[data-ab-landing="featured"] .btn-primary:hover,
:root[data-ab-landing="quiet"] .btn-primary:hover { background: #c22f29; }

/* ---- quiet featured card, matched to the mockup ------------------------- */
.ab-feat-art { display: none; }
:root[data-ab-landing="quiet"] .ab-feat-art { display: block; position: relative; }
.ab-feat-badge {
  position: absolute; left: 10px; top: 10px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px;
}
/* One meta line instead of a headline figure: name above, payout and platform below. */
.ab-feat-meta { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ab-feat-meta b { color: var(--green); font-weight: 700; }
:root[data-ab-landing="quiet"] .ab-feat-top { padding: 12px 14px 0; align-items: center; }
:root[data-ab-landing="quiet"] .ab-feat-ico { width: 52px; height: 52px; border-radius: 13px; }
:root[data-ab-landing="quiet"] .ab-feat-cta { margin-top: 12px; }

/* The meter fill is var(--navy), the one colour these arms removed. In dark that put
   #1E1F4B on a #1A1E24 track, near-identical, so a FULL bar read as empty. Green also
   says "money you have" rather than being a neutral progress colour. */
:root[data-ab-landing="featured"] .meter-avail,
:root[data-ab-landing="quiet"] .meter-avail { background: var(--green); }
:root[data-ab-landing="featured"] .meter-paid,
:root[data-ab-landing="quiet"] .meter-paid { background: var(--muted-2); }

/* The address is dropped at every mobile width, not just under 430px: beside a wordmark,
   a theme control and the action itself, it crowds the row on any phone. It stays in the
   email dialog, and the dot already says an account is connected. */
@media (max-width: 767px) {
  :root[data-ab-landing="featured"] .user-chip em,
  :root[data-ab-landing="quiet"] .user-chip em,
  :root[data-ab-landing="featured"] .chip-sep,
  :root[data-ab-landing="quiet"] .chip-sep { display: none; }
}

/* ---- fill bar: gradient, with a sheen only while full -------------------- */
/* The bar's job is to say "you can cash out now". A flat fill made that a matter of
   comparing two similar lengths; a highlight that sweeps only at 100% makes it a state
   you notice without looking. Plain rgba over the token rather than color-mix, so the
   gradient does not depend on a newer colour function. */
:root[data-ab-landing="featured"] .meter-avail,
:root[data-ab-landing="quiet"] .meter-avail,
:root[data-ab-landing="quiet"] .ab-redeem-fill {
  position: relative; overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 62%,
                                            rgba(0,0,0,.10) 100%);
  background-color: var(--green);
}
:root[data-ab-landing="quiet"] .ab-redeem-fill { background-color: var(--green); }
/* Recessed track, so the empty part reads as a channel and a full bar has none left. */
:root[data-ab-landing="featured"] .meter-track,
:root[data-ab-landing="quiet"] .ab-redeem-track { box-shadow: inset 0 1px 2px rgba(0,0,0,.16); }
:root[data-theme="dark"][data-ab-landing="featured"] .meter-track,
:root[data-theme="dark"][data-ab-landing="quiet"] .ab-redeem-track { box-shadow: inset 0 1px 3px rgba(0,0,0,.55); }

:root[data-ab-landing="featured"] .meter-avail.is-full::after,
:root[data-ab-landing="quiet"] .meter-avail.is-full::after,
:root[data-ab-landing="quiet"] .ab-redeem-bar[data-avail="ready"] .ab-redeem-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ab-sheen 2.6s ease-in-out infinite;
}
@keyframes ab-sheen {
  0%, 55% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
/* A balance is not the place to insist on motion. */
@media (prefers-reduced-motion: reduce) {
  :root[data-ab-landing="featured"] .meter-avail.is-full::after,
  :root[data-ab-landing="quiet"] .meter-avail.is-full::after,
  :root[data-ab-landing="quiet"] .ab-redeem-bar[data-avail="ready"] .ab-redeem-fill::after {
    animation: none; opacity: .22; transform: none;
  }
}

/* Offer icons are partner LOGOS, usually transparent PNGs drawn for a light background.
   ms-embed's own card sits on a dark photo scrim, so it never had to care; this card
   follows the theme, and in dark the Capital One mark disappeared into it. A white plate
   is what the brand expects behind it, in both themes. */
:root[data-ab-landing="featured"] .msx-icon,
:root[data-ab-landing="quiet"] .msx-icon {
  background: #fff; padding: 3px; object-fit: contain;
}

/* ---- save-for-later: always there, not dismissible ---------------------- */
/* Returning is the whole point of this product: rewards accrue after the visit, so the
   way back is not an interruption to be dismissed. The stock section hides itself when
   already installed or once dismissed, and offers an x.
   Done in CSS rather than by editing the reveal logic, so the device-capability rules
   (deferred prompt, iOS manual steps, desktop bookmark) keep working untouched and
   control keeps its current behaviour exactly. .hidden is display:none !important, so
   the override needs !important at higher specificity to win. */
:root[data-ab-landing="featured"] #getback,
:root[data-ab-landing="quiet"] #getback,
:root[data-ab-landing="featured"] #getback.hidden,
:root[data-ab-landing="quiet"] #getback.hidden { display: block !important; }

/* "Email me a link" works on every device and needs no capability check, so it is the
   guaranteed action when none of the device-specific buttons revealed themselves. */
:root[data-ab-landing="featured"] #getback-email,
:root[data-ab-landing="quiet"] #getback-email,
:root[data-ab-landing="featured"] #getback-email.hidden,
:root[data-ab-landing="quiet"] #getback-email.hidden { display: inline-flex !important; }

:root[data-ab-landing="featured"] .getback-x,
:root[data-ab-landing="quiet"] .getback-x { display: none; }