/* ==========================================================================
   News and offers (/updates, /updates/archive and /updates/<slug>).
   Site tokens from site.css. The brand orange #fc6e20 marks categories and
   the headline dot, except Devaluation, Card launch, Cashback deal and
   Spend-based offer,
   which are solid coloured badges so they stand out;
   status colours are reserved for offer status only.
   Article pages also load review-page.css for the byline, body and sources.
   ========================================================================== */

:root {
  --up-brand: #fc6e20;
  --up-accent: #c2410c;          /* orange text: 4.8:1 on --page */
  --up-ok: #1a7f37;
  --up-info: #0a5fc2;
  --up-warn: #8a5300;
  --up-danger: #c81e1e;          /* devaluation red: 5.5:1 on --page */
  --up-danger-fill: #dc2626;     /* devaluation badge: white text 4.8:1 */
  --up-down-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17l-8.5-8.5-5 5L2 7'/%3E%3Cpath d='M16 17h6v-6'/%3E%3C/svg%3E");
  --up-fill: color-mix(in srgb, var(--text) 6%, transparent);
  --up-fill-strong: color-mix(in srgb, var(--text) 10%, transparent);
  --up-ease: cubic-bezier(0.2, 0, 0, 1);
}
html[data-theme="dark"] {
  --up-accent: #ff7a33;
  --up-ok: #3fb950;
  --up-info: #58a6ff;
  --up-warn: #e3b341;
  --up-danger: #ff6b6b;
}

/* ---------- Page frame ---------- */
.up {
  --up-gutter: 20px;
  width: min(1180px, 100% - 2 * var(--up-gutter));
  margin-inline: auto;
  padding-block: 104px 96px;
}
@media (min-width: 720px) { .up { --up-gutter: 32px; padding-block-start: 112px; } }
.up:focus { outline: none; }
.up :where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; }
.up :where(ol, ul) { padding: 0; list-style: none; }
.up :where(a, button, select, input, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.up-page .skip-link:focus-visible { transform: none; }

/* ---------- Hero ---------- */
.up-hero {
  max-width: 800px;
  padding-block: 28px 36px;
}
.up-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--up-accent);
}
.up-hero h1 {
  margin-block-start: 12px;
  font-size: clamp(2.5rem, 1.45rem + 4.2vw, 4.5rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.up-dot { color: var(--up-brand); }
.up-dek {
  max-width: 54ch;
  margin-block-start: 18px !important;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- Layout ---------- */
.up-layout { display: grid; gap: 64px; }
.up-main { min-width: 0; }
@media (min-width: 1024px) {
  .up-layout { grid-template-columns: minmax(0, 1fr) 272px; gap: 72px; align-items: start; }
  .up-aside { position: sticky; top: 104px; }
}

/* ---------- Toolbar: tabs, search, filters ---------- */
.up-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-block-end: 14px;
  border-block-end: 1px solid var(--line);
}
html:not(.up-js) :is(.up-toolbar, .up-results-bar),
.up-toolbar[hidden], .up-results-bar[hidden], .up-filters[hidden] { display: none; }
.up-tabs {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--up-fill);
}
.up-tab {
  min-height: 38px;
  padding-inline: 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.up-tab[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 0 0 1px var(--line);
}
@media (hover: hover) { .up-tab[aria-pressed="false"]:hover { color: var(--text); } }
/* Devaluations tab turns red when selected (fallback buttons and the uiarc tabs, 4th tab). */
.up-tab[data-view="devaluations"][aria-pressed="true"],
.arc-tabs--updates [role="tab"][data-value="3"][aria-selected="true"],
.arc-tabs--updates [role="tab"][data-value="3"][aria-selected="true"] span { color: var(--up-danger); }

/* Tab icons: grid, newspaper, tag, falling arrow. The picked tab's icon keeps animating (a short move,
   then a pause, every 2.4s); a hovered tab's icon animates too. Grey until picked, then the label colour (red on Devaluations). */
.up-tab, .arc-tab-inner { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.arc-tab-icon-slot { display: contents; }
.arc-tab-icon { display: inline-grid; flex: none; place-items: center; width: 16px; height: 16px; opacity: 0.7; transition: opacity 150ms ease-out; }
.arc-tab-icon svg { display: block; overflow: visible; }
:is(.up-tab[aria-pressed="true"], [role="tab"][aria-selected="true"]) .arc-tab-icon { opacity: 1; }
.arc-tab-icon :is(rect, path, circle) { transform-box: fill-box; transform-origin: center; }
/* The animations are named only while a tab is picked or hovered, so each one starts fresh at that moment.
   Each cycle moves in its first third and rests for the rest. */
:is(.up-tab[aria-pressed="true"], [role="tab"][aria-selected="true"]) .arc-tab-icon {
  --up-tile: up-icon-tile; --up-write: up-icon-write; --up-swing: up-icon-swing; --up-line: up-icon-line; --up-drop: up-icon-drop;
}
@media (hover: hover) and (pointer: fine) {
  :is(.up-tab, [role="tab"]):hover .arc-tab-icon { --up-tile: up-icon-tile; --up-write: up-icon-write; --up-swing: up-icon-swing; --up-line: up-icon-line; --up-drop: up-icon-drop; }
}
.arc-tab-icon :is(rect, path, svg) { animation-duration: 2.4s; animation-iteration-count: infinite; animation-fill-mode: both; }
.arc-tab-icon[data-icon="all"] rect { animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); animation-name: var(--up-tile, none); }
.arc-tab-icon[data-icon="all"] rect:nth-child(2) { animation-delay: 70ms; }
.arc-tab-icon[data-icon="all"] rect:nth-child(4) { animation-delay: 140ms; }
.arc-tab-icon[data-icon="all"] rect:nth-child(3) { animation-delay: 210ms; }
@keyframes up-icon-tile { 0%, 30%, 100% { transform: scale(1); opacity: 1; } 10% { transform: scale(0.45); opacity: 0.4; } }
.arc-tab-icon path[pathLength] { stroke-dasharray: 1; }
.arc-tab-icon[data-icon="news"] path[pathLength] { animation-timing-function: ease-out; animation-name: var(--up-write, none); }
.arc-tab-icon[data-icon="news"] path[pathLength]:nth-child(4) { animation-delay: 80ms; }
.arc-tab-icon[data-icon="news"] path[pathLength]:nth-child(5) { animation-delay: 160ms; }
.arc-tab-icon[data-icon="news"] path[pathLength]:nth-child(6) { animation-delay: 240ms; }
@keyframes up-icon-write { 0% { stroke-dashoffset: 1; } 18%, 100% { stroke-dashoffset: 0; } }
.arc-tab-icon[data-icon="offers"] svg { transform-origin: 29% 29%; animation-timing-function: ease-in-out; animation-name: var(--up-swing, none); }
@keyframes up-icon-swing { 0%, 34%, 100% { transform: rotate(0); } 7% { transform: rotate(-18deg); } 15% { transform: rotate(12deg); } 23% { transform: rotate(-6deg); } 29% { transform: rotate(2deg); } }
.arc-tab-icon[data-icon="devaluations"] path[pathLength] { animation-timing-function: ease-in; animation-name: var(--up-line, none); }
@keyframes up-icon-line { 0% { stroke-dashoffset: 1; } 20%, 100% { stroke-dashoffset: 0; } }
.arc-tab-icon[data-icon="devaluations"] path:last-child { animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); animation-name: var(--up-drop, none); }
@keyframes up-icon-drop { 0%, 14% { transform: translate(-4px, -4px); opacity: 0; } 30%, 100% { transform: none; opacity: 1; } }
/* Phones: a smaller icon and gap, so the strip scrolls about as far as it did before the icons. */
@media (max-width: 560px) {
  .up-tab, .arc-tab-inner { gap: 5px; }
  .arc-tab-icon { width: 14px; height: 14px; }
  .arc-tab-icon svg { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-tab-icon, .arc-tab-icon * { animation: none !important; transition: none; }
}

.up-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
}
.up-search svg {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  translate: 0 -50%;
  color: var(--muted);
  pointer-events: none;
}
.up-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}
.up-search input::placeholder { color: var(--muted); opacity: 1; }
.up-search input::-webkit-search-cancel-button { cursor: pointer; }
.up-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.up-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.up-filter-btn[aria-expanded="true"] { background: var(--surface); }
.up-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--text);
  color: var(--page);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.up-filter-count:empty { display: none; }
@media (hover: hover) { .up-filter-btn:hover { background: var(--surface); } }

.up-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 16px;
  padding-block: 16px;
  border-block-end: 1px solid var(--line);
}
.up-field {
  display: grid;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}
.up-select { position: relative; }
.up-select::after {
  content: "";
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-inline-end: 1.5px solid var(--muted);
  border-block-end: 1.5px solid var(--muted);
  translate: 0 -70%;
  rotate: 45deg;
  pointer-events: none;
}
.up-select select {
  width: 100%;
  min-height: 44px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.up-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding-block: 8px;
}
.up-count {
  margin-inline-end: auto !important;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.up-chips { display: contents; }
.up-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding-inline: 12px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
  cursor: pointer;
}
.up-chip svg { color: var(--muted); }
.up-clear {
  min-height: 32px;
  padding-inline: 6px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) { .up-chip:hover { background: var(--up-fill); } }

/* ---------- Feed ---------- */
.up-feed { min-height: 240px; }
.up-feed:focus { outline: none; }
.up-day {
  display: grid;
  gap: 2px;
  padding-block: 20px 4px;
}
.up-day + .up-day { border-block-start: 1px solid var(--line); }
.up-day-label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.up-day-items > li + li { border-block-start: 1px solid var(--line); }
@media (min-width: 720px) {
  .up-day { grid-template-columns: 124px minmax(0, 1fr); gap: 24px; padding-block: 28px 8px; }
  .up-day-label { position: sticky; top: 104px; align-self: start; padding-block-start: 18px; }
}

.up-item {
  position: relative;
  padding-block: 18px 22px;
}
.up-item:target { scroll-margin-top: 112px; }
/* Feed items are separated by dividers, not boxes, so drop the card shadow
   polish.css gives .up-item (it showed as a faint box with no background). */
.up-day-items .up-item { box-shadow: none; }
.up-item-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding-inline-end: 44px;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.up-kicker { color: var(--up-accent); font-weight: 600; }
/* Badge categories: Devaluation (red, falling arrow), Card launch (indigo, sparkle),
   Cashback deal (green, percent) and Spend-based offer (blue, shopping bag) are solid pills so they stand out from the orange labels. */
.up-kicker[data-cat="devaluation"] { --up-badge: var(--up-danger-fill); --up-badge-icon: var(--up-down-icon); }
.up-kicker[data-cat="launch"] { --up-badge: #4f46e5; --up-badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.4 7.1L21.5 12l-7.1 2.4L12 21.5l-2.4-7.1L2.5 12l7.1-2.9z'/%3E%3C/svg%3E"); }
.up-kicker[data-cat="cashback"] { --up-badge: #15803d; --up-badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='17' cy='17' r='2.5'/%3E%3Cpath d='M19 5L5 19'/%3E%3C/svg%3E"); }
.up-kicker[data-cat="spend-offer"] { --up-badge: #1d4ed8; --up-badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6z'/%3E%3Cpath d='M9 10V6a3 3 0 0 1 6 0v4'/%3E%3C/svg%3E"); }
.up-kicker:is([data-cat="devaluation"], [data-cat="launch"], [data-cat="cashback"], [data-cat="spend-offer"]) {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--up-badge);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.up-kicker:is([data-cat="devaluation"], [data-cat="launch"], [data-cat="cashback"], [data-cat="spend-offer"])::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--up-badge-icon) center / contain no-repeat;
  mask: var(--up-badge-icon) center / contain no-repeat;
}
.up-confirm { color: var(--muted); font-weight: 500; }
.up-confirm[data-confirm="reported"],
.up-confirm[data-confirm="unconfirmed"] { color: var(--up-warn); }
.up-confirm[data-confirm="unconfirmed"]::after { content: ": not yet confirmed by the issuer"; font-weight: 400; }
.up-fixture {
  padding: 1px 8px;
  border-radius: 999px;
  background: #fde68a;
  color: #713f12;
  font-size: 0.75rem;
  font-weight: 600;
}
.up-title {
  margin-block-start: 8px !important;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.up-title a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color 150ms ease-out;
}
@media (hover: hover) { .up-title a:hover { text-decoration-color: var(--up-brand); } }
.up-summary {
  max-width: 64ch;
  margin-block-start: 8px !important;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.up-meta {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: 10px !important;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
}
.up-meta > span + span::before {
  content: "·";
  margin-inline: 8px;
  color: var(--soft);
}
.up-meta a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
@media (hover: hover) { .up-meta a:hover { text-decoration-color: currentColor; } }

/* Share: appears once the script runs (it needs it). */
.up-share {
  position: absolute;
  top: 10px;
  inset-inline-end: -10px;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.up-js .up-share { display: grid; }
.up-share[aria-expanded="true"] { background: var(--up-fill); color: var(--text); }
@media (hover: hover) { .up-share:hover { background: var(--up-fill); color: var(--text); } }

.up-sharemenu {
  position: absolute;
  z-index: 30;
  top: 54px;
  inset-inline-end: 0;
  display: grid;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}
.up-sharemenu a,
.up-sharemenu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding-inline: 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 0.9375rem;
  text-align: start;
  cursor: pointer;
}
.up-sharemenu svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
@media (hover: hover) { .up-sharemenu :is(a, button):hover { background: var(--up-fill); } }

/* Share targets take their network's colour on hover, focus and tap. */
.up-sharemenu a[href^="https://wa.me/"],
.up-sharebar a[href^="https://wa.me/"] { --up-brand: #25d366; }
.up-sharemenu a[href^="https://t.me/"],
.up-sharebar a[href^="https://t.me/"] { --up-brand: #229ed9; }
.up-sharemenu a[href^="https://x.com/"],
.up-sharebar a[href^="https://x.com/"] { --up-brand: var(--text); }
.up-sharemenu svg,
.up-sharebar svg { transition: color 0.15s var(--ease); }
.up-sharemenu a[href]:is(:focus-visible, :active),
.up-sharebar a[href]:is(:focus-visible, :active) { background: color-mix(in srgb, var(--up-brand, var(--text)) 14%, transparent); }
.up-sharebar a[href]:is(:focus-visible, :active) { border-color: var(--up-brand, var(--line-strong)); }
.up-sharemenu a[href]:is(:focus-visible, :active) svg,
.up-sharebar a[href]:is(:focus-visible, :active) svg { color: var(--up-brand, var(--muted)); }
@media (hover: hover) {
  .up-sharemenu a[href]:hover,
  .up-sharebar a[href]:hover { background: color-mix(in srgb, var(--up-brand, var(--text)) 14%, transparent); }
  .up-sharebar a[href]:hover { border-color: var(--up-brand, var(--line-strong)); }
  .up-sharemenu a[href]:hover svg,
  .up-sharebar a[href]:hover svg { color: var(--up-brand, var(--muted)); }
}

/* ---------- Offer cards ----------
   The boxed panel is the "Offer details" block on an article page. In the
   feed, offers sit unboxed like news so the two read the same. */
.up-offer:not(.up-item) {
  margin-block: 10px;
  padding: 18px 20px 20px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 1px var(--line);
}
html[data-theme="dark"] .up-offer:not(.up-item) { box-shadow: 0 0 0 1px var(--line); }
.up-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--muted);
}
.up-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
[data-status="active"] .up-status { color: var(--up-ok); }
[data-status="upcoming"] .up-status { color: var(--up-info); }
[data-status="unverified"] .up-status { color: var(--up-warn); }
[data-status="unverified"] .up-status::before,
[data-status="expired"] .up-status::before,
[data-status="upcoming"] .up-status::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.up-offer-value {
  margin-block-start: 12px !important;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
/* In the feed the headline figure leads; the title under it steps down a size. */
.up-item .up-offer-value { font-size: 2rem; }
.up-offer-value + .up-title { margin-block-start: 6px !important; font-size: 1.25rem; }
.up-offer[data-status="expired"] :is(.up-offer-value, .up-title) { color: var(--muted); }
.up-offer[data-status="expired"] .up-offer-value { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--line-strong); }

/* ---------- Feed tile ---------- */
/* A square fact tile on the left: the issuer's logo, one key figure in the
   category colour and a short caption. The head (labels and title) sits
   beside it. On wide screens the body continues beside it too, on phones it
   runs full width. Posters stay on the article page. */
.up-item.has-thumb {
  --up-thumb: 128px;
  display: grid;
  grid-template-columns: var(--up-thumb) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 20px;
  align-items: start;
}
.up-thumb { grid-row: 1 / span 2; display: block; }
/* Tinted liquid glass, the same material as the phone tab bar (header.css
   --hd-glass tokens): frosted glass over a soft glow in the category colour,
   with a light rim on the top-left and bottom-right edges. */
.up-tile {
  --up-tile-ink: var(--up-accent);
  --up-tile-glow: var(--up-tile-ink);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  aspect-ratio: 1;
  padding: 11%;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.18) 55%, rgb(255 255 255 / 0.05)),
    color-mix(in srgb, var(--up-tile-glow) 8%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(200%) brightness(1.04);
  backdrop-filter: blur(16px) saturate(200%) brightness(1.04);
  box-shadow: inset 0 0 0 1px var(--hd-glass-edge), var(--hd-glass-shadow);
  container-type: inline-size;
  color: var(--text);
  text-decoration: none;
}
html[data-theme="dark"] .up-tile {
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04) 55%, rgb(255 255 255 / 0)),
    color-mix(in srgb, var(--up-tile-glow) 10%, rgb(20 20 22 / 0.6));
}
.up-tile::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -25% -35% auto;
  width: 95%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--up-tile-glow) 55%, transparent), transparent 68%);
  filter: blur(6px);
}
.up-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.25px;
  border-radius: inherit;
  background: var(--hd-glass-rim);
  pointer-events: none;
  -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 exclude, linear-gradient(#000 0 0);
}
.up-tile[data-cat="devaluation"] { --up-tile-ink: var(--up-danger); }
.up-tile[data-cat="launch"] { --up-tile-ink: #4f46e5; }
.up-tile[data-cat="cashback"] { --up-tile-ink: #15803d; }
.up-tile[data-cat="spend-offer"] { --up-tile-ink: #1d4ed8; }
html[data-theme="dark"] .up-tile:is([data-cat="launch"], [data-cat="cashback"], [data-cat="spend-offer"]) { --up-tile-ink: color-mix(in srgb, var(--up-tile-c) 50%, #fff); }
html[data-theme="dark"] .up-tile[data-cat="launch"] { --up-tile-c: #4f46e5; }
html[data-theme="dark"] .up-tile[data-cat="cashback"] { --up-tile-c: #15803d; }
html[data-theme="dark"] .up-tile[data-cat="spend-offer"] { --up-tile-c: #1d4ed8; }
.up-tile-mark { display: flex; flex: none; align-items: center; height: 28cqi; margin-block-end: auto; }
.up-tile-logo { width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: left center; }
html[data-theme="dark"] .up-tile-logo[data-invert-dark] { filter: invert(1); }
.up-tile-name {
  overflow: hidden;
  font-size: 14cqi;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.up-tile-figure {
  padding-block-start: 4cqi;
  color: var(--up-tile-ink);
  font-size: 27cqi;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.up-tile-caption {
  margin-block-start: 5cqi;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: max(10px, 10.5cqi);
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.72;
}
a.up-thumb { transition: opacity 150ms ease-out; }
@media (hover: hover) { a.up-thumb:hover { opacity: 0.88; } }
.up-item.has-thumb .up-item-top { padding-inline-end: 44px; }
.up-item-head .up-item-top:first-child { margin-block-start: 0; }
.up-offer[data-status="expired"] .up-thumb { filter: grayscale(1); opacity: 0.7; }
/* Narrow cards (phones, and beside the sidebar on laptops): smaller tile
   beside the head only, with the rest of the card at full width. */
.up-day-items > li { container-type: inline-size; }
@container (max-width: 560px) {
  .up-item.has-thumb { --up-thumb: 104px; column-gap: 16px; grid-template-rows: auto; }
  .up-thumb { grid-row: 1; }
  .up-item.has-thumb .up-item-body { grid-column: 1 / -1; }
}
@container (max-width: 400px) {
  .up-item.has-thumb { --up-thumb: 96px; column-gap: 14px; }
  .up-item.has-thumb .up-item-top { padding-inline-end: 36px; }
}
@container (max-width: 300px) {
  .up-item.has-thumb { --up-thumb: 80px; column-gap: 12px; }
}

/* One label/value row per term, labels in their own column, so long values
   never squeeze into a narrow cell and every row lines up. */
.up-terms {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 12px 20px;
  margin-block-start: 16px !important;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--line);
}
.up-terms > div { display: contents; }
.up-terms dt { padding-block-start: 3px; font-size: 0.8125rem; font-weight: 500; line-height: 1.45; color: var(--muted); }
.up-terms dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.up-code {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--up-fill);
  font-family: var(--site-mono);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}
.up-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 14px !important;
}
.up-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding-inline: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
}
.up-links a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-block-start: 1.5px solid currentColor;
  rotate: 45deg;
  color: var(--muted);
}
@media (hover: hover) { .up-links a:hover { background: var(--up-fill); } }

/* ---------- Load more, empty state ---------- */
.up-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-block-start: 28px; }
.up-more[hidden], .up-btn[hidden] { display: none; }
.up-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.up-btn-solid { border-color: transparent; background: var(--text); color: var(--page); }
@media (hover: hover) {
  .up-btn:hover { background: var(--surface); }
  .up-btn-solid:hover { background: color-mix(in oklab, var(--text) 86%, var(--page)); }
}
@media (prefers-reduced-motion: no-preference) {
  .up-btn, .up-tab, .up-chip { transition-property: background-color, color, scale; transition-duration: 150ms; }
  .up-btn:active, .up-tab:active, .up-chip:active { scale: 0.97; }
}
.up-archive-link {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.up-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  max-width: 48ch;
  padding-block: 40px 24px;
}
.up-empty h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.015em; }
.up-empty p { color: var(--muted); line-height: 1.55; }
.up-empty .up-btn { margin-block-start: 6px; }

/* ---------- Aside ---------- */
.up-aside { display: grid; gap: 36px; font-size: 0.9375rem; }
.up-aside h2 {
  margin-block-end: 10px !important;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}
.up-aside p { color: var(--muted); line-height: 1.55; text-wrap: pretty; }
.up-aside p + p { margin-block-start: 10px; }
.up-aside a:not(.up-follow a) { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.up-follow { border-block-start: 1px solid var(--line); }
.up-follow li { border-block-end: 1px solid var(--line); }
.up-follow a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-weight: 500;
}
.up-follow svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.up-follow a::after {
  content: "";
  margin-inline-start: auto;
  width: 7px;
  height: 7px;
  border-inline-end: 1.5px solid var(--muted);
  border-block-start: 1.5px solid var(--muted);
  rotate: 45deg;
}
@media (hover: hover) { .up-follow a:hover svg { color: var(--up-brand); } }
.up-legend { display: grid; gap: 10px; }
.up-legend div { display: grid; gap: 2px; }
.up-legend dt { font-size: 0.8125rem; }
.up-legend dd { color: var(--muted); font-size: 0.875rem; line-height: 1.5; }

/* ---------- Article pages (with review-page.css) ---------- */
.up-article .rv-hero { grid-template-columns: minmax(0, 1fr); padding-block-end: 8px; }
.up-article .rv-hero h1 { max-width: 22ch; font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem); }
.up-article .up-item-top { padding: 0; margin-block-end: 16px; }
.up-article-figure { margin-block-start: 32px !important; max-width: 860px; }
.up-article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--surface-muted);
}
.up-article-figure.is-portrait { max-width: 480px; }
.up-article-figure figcaption { margin-block-start: 8px; font-size: 0.8125rem; color: var(--muted); }
.up-article .rv-body { grid-template-columns: minmax(0, 1fr); margin-block-start: 40px; }
.up-article .rv-article { max-width: 68ch; }
/* Keep a clear gap between the “Offer details” heading and its panel. */
.up-article .rv-section > .up-offer { margin-block: 24px 8px; }
.up-article .up-offer .up-item-top { margin-block-end: 0; }
.up-quote {
  padding: 4px 0 4px 18px;
  border-inline-start: 3px solid var(--up-brand);
  color: var(--text);
}
.up-prose ul, .up-prose ol { display: grid; gap: 8px; padding-inline-start: 1.25em; }
.up-prose ul { list-style: disc; }
.up-prose ol { list-style: decimal; }
.up-prose li::marker { color: var(--muted); }
.up-prose h3 { font-size: 1.125rem; font-weight: 650; }

.up-sharebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.up-sharebar-label { margin-inline-end: 4px; font-size: 0.875rem; color: var(--muted); }
.up-sharebar a,
.up-sharebar button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding-inline: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none !important;
  cursor: pointer;
}
.up-sharebar svg { width: 16px; height: 16px; color: var(--muted); }
.up-sharebar button[hidden] { display: none; }
@media (hover: hover) { .up-sharebar :is(a, button):hover { background: var(--up-fill); } }

.up-related { display: grid; padding: 0; list-style: none; border-block-start: 1px solid var(--line); }
.up-related li { border-block-end: 1px solid var(--line); }
.up-related a {
  display: grid;
  gap: 2px;
  padding-block: 14px;
  text-decoration: none !important;
}
.up-related .up-kicker { font-size: 0.8125rem; }
.up-related-title { font-weight: 600; line-height: 1.35; }
.up-related-date { font-size: 0.8125rem; color: var(--muted); }
@media (hover: hover) { .up-related a:hover .up-related-title { text-decoration: underline; text-decoration-color: var(--up-brand); text-underline-offset: 4px; } }

/* ---------- Small screens ---------- */
@media (max-width: 560px) {
  .up-toolbar { gap: 8px; }
  .up-tabs { flex: 1 1 100%; }
  .up-tab { flex: 1; padding-inline: 8px; }
  .up-offer:not(.up-item) { padding: 16px 16px 18px; margin-inline: -4px; }
  .up-terms { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .up-terms dt { padding-block-start: 0; }
  .up-terms dd { margin-block: 2px 12px; }
  .up-terms > div:last-child dd { margin-block-end: 0; }
  .up-title { font-size: 1.25rem; line-height: 1.25; }
  .up-summary { font-size: 0.9375rem; }
  .up-item.has-thumb .up-title { font-size: 1.1875rem; }
  .up-item .up-offer-value { font-size: 1.75rem; }
  .up-offer-value + .up-title { font-size: 1.125rem; }
}

@media print {
  .up-toolbar, .up-filters, .up-results-bar, .up-share, .up-more, .up-aside, .up-sharebar { display: none !important; }
}
@media (forced-colors: active) {
  .up-status::before { forced-color-adjust: none; background: CanvasText; }
}

/* ---------- Fee calculator on update articles (calculator: in the frontmatter) ---------- */
.up-calc { margin-block: 8px; }
@media (min-width: 960px) {
  .up-calc { grid-template-columns: minmax(0, 1fr); padding: 32px; }
}
.up-calc-row { display: grid; gap: 14px; min-width: 0; padding-block-start: 22px; border-block-start: 1px solid var(--line); }
.up-calc-row .rv-calc-input output { font-size: 1.75rem; }
.up-calc-row[data-over] .up-calc-fill { background: var(--up-danger-fill); }
.up-calc-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--rv-fs-small); line-height: 1.5; color: var(--muted); }
.up-calc-fee { color: var(--text); }
.up-calc-fee strong { margin-inline-start: 4px; font-size: 1.375rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.up-calc-row[data-over] .up-calc-fee strong { color: var(--up-danger); }
.up-calc-gst { margin-inline-start: 4px; font-weight: 500; }