/* The Points Pro — consumer web styling.
   Reuses the design tokens and base components (.btn, .card, .badge,
   .table, form controls) from style.css; this file adds the consumer
   shell (marketing header/footer, hero, feature grid, ranking cards,
   calculator layout) and overrides the admin body/shell rules. */

body {
  display: block;              /* override admin flex shell */
  background-color: var(--color-soft-white);
  color: var(--color-text-primary);
}

/* ---- Header ---- */
.web-header {
  background: var(--color-black);
  position: sticky;
  top: 0;
  z-index: 200;
}

.web-header .inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-6);
}

.web-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.web-brand img { height: 38px; width: 38px; border-radius: 8px; }

.web-brand span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-white);
}

.web-nav {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
}

.web-nav a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-button);
  transition: all 140ms ease;
}

.web-nav a:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.web-nav a.active { color: var(--color-teal); }

/* Hamburger toggle: hidden on desktop, shown by the mobile header rules */
.nav-burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  padding: 10px;
  background: none; border: 0; border-radius: var(--radius-button);
  flex-direction: column; justify-content: center; gap: 5px;
  cursor: pointer;
}
.nav-burger span {
  display: block; height: 2px; width: 100%;
  background: rgba(255, 255, 255, 0.9); border-radius: 1px;
  transition: transform 160ms ease, opacity 160ms ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.web-nav a.nav-cta {
  background: var(--color-teal);
  color: var(--color-black);
  font-weight: 600;
}
.web-nav a.nav-cta:hover { background: #2ab1b8; color: var(--color-black); }

/* ---- Layout ---- */
.web-main { min-height: 60vh; }
.web-container { max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-6); }
.web-container.narrow { max-width: 860px; }

/* ---- Hero ---- */
.hero {
  background: linear-gradient(135deg, #05171a 0%, #0c2a2e 55%, #10363b 100%);
  color: var(--color-white);
}
.hero .web-container { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.hero h1 {
  font-size: 46px;
  line-height: 1.08;
  color: var(--color-white);
  max-width: 16ch;
  margin-bottom: var(--space-5);
}
.hero .gold { color: var(--color-gold); }
.hero p.lead {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 58ch;
  margin-bottom: var(--space-8);
}
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
}

/* Hero FOMO teaser */
.hero-fomo { margin-top: var(--space-8); }
.hero-fomo p {
  color: rgba(255, 255, 255, 0.9); font-size: 15px; margin-bottom: var(--space-3);
}
.hero-fomo strong { color: var(--color-gold); }
.fomo-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fomo-chips span {
  font-size: 13px; color: var(--color-white);
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 5px 12px; border-radius: var(--radius-pill);
}

/* FOMO band */
.fomo-section {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.fomo-lead {
  font-size: 16px; color: var(--color-text-secondary);
  max-width: 68ch; margin-bottom: var(--space-6);
}
.fomo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.fomo-tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  background: var(--color-surface-subtle);
  transition: all 160ms ease;
}
.fomo-tile:hover {
  border-color: var(--color-gold);
  box-shadow: 0 6px 18px rgba(236, 185, 71, 0.14);
  transform: translateY(-2px);
}
.fomo-icon {
  font-size: 30px; line-height: 1;
  width: 54px; height: 54px; border-radius: 12px;
  background: rgba(236, 185, 71, 0.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.fomo-amt {
  font-family: var(--font-heading); font-weight: 700; font-size: 26px;
  color: var(--color-gold-text); line-height: 1;
}
.fomo-amt span { font-size: 14px; color: var(--color-text-muted); font-weight: 500; }
.fomo-tile p {
  margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .fomo-tile:hover { transform: none; }
}

/* Fanned stack of real card art */
.hero-fan {
  position: relative;
  height: 320px;
}
.fan-card {
  position: absolute;
  width: 300px;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  transition: transform 300ms ease;
}
.fan-card.fan-1 { top: 20px;  left: 30px;  transform: rotate(-9deg); z-index: 1; }
.fan-card.fan-2 { top: 60px;  left: 90px;  transform: rotate(3deg);  z-index: 3; }
.fan-card.fan-3 { top: 120px; left: 150px; transform: rotate(13deg); z-index: 2; }
.hero-fan:hover .fan-card.fan-1 { transform: rotate(-14deg) translateX(-14px); }
.hero-fan:hover .fan-card.fan-3 { transform: rotate(18deg) translateX(14px); }

/* How it works band */
.how-band {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--space-8);
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}
.how-step .how-num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-teal); color: var(--color-black);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700;
  margin-bottom: var(--space-3);
}
.how-step h4 { font-size: 16px; margin-bottom: var(--space-2); }
.how-step p { color: var(--color-text-secondary); font-size: 14px; margin: 0; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-fan { display: none; }
  .hero-stats { gap: var(--space-6); }
}

/* ---- Feature grid ---- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}
.feature-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 160ms ease;
}
.feature-card:hover {
  text-decoration: none;
  border-color: var(--color-teal);
  box-shadow: 0 6px 20px rgba(52, 199, 205, 0.15);
  transform: translateY(-2px);
}
.feature-card .icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(52, 199, 205, 0.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: var(--space-4);
}
.feature-card h3 { font-size: 18px; margin-bottom: var(--space-2); }
.feature-card p { color: var(--color-text-secondary); font-size: 14px; margin: 0; }

/* ---- Section headings ---- */
.section-eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-teal-text);
}

/* ---- Card tiles (directory / featured) ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}
.product-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 160ms ease;
}
.product-card:hover { box-shadow: var(--shadow-card); }
.product-card .art {
  position: relative;
  height: 165px;
  background: linear-gradient(135deg, #0c2a2e 0%, #10363b 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.product-card .art img {
  max-height: 128px; max-width: 84%; border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  transition: transform 200ms ease;
}
.product-card:hover .art img { transform: scale(1.04) rotate(-1.5deg); }
.product-card .art .placeholder { color: rgba(255, 255, 255, 0.5); font-size: 13px; }
.art-badge {
  position: absolute; top: var(--space-3); right: var(--space-3);
  background: var(--color-gold); color: var(--color-black);
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  /* a highlight chip, never a banner: whatever the data says, it must
     not spread across the card art */
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.art-sub {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 12px 8px;
  /* Scrim over the art zone, whose ground is the fixed dark teal above:
     like a fill token, it keeps a fixed white companion text in every
     theme. Not a themed surface; do not swap these for text-role tokens. */
  background: linear-gradient(to top, rgba(5, 20, 23, 0.92) 0%, rgba(5, 20, 23, 0.6) 55%, rgba(5, 20, 23, 0) 100%);
  color: #FFFFFF;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  line-height: 1.25; text-align: left;
}
.art-sub-kicker {
  display: block;
  font-size: 10px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
  margin-bottom: 1px;
}
.product-card .body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.issuer-chip {
  display: inline-block; align-self: flex-start;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--color-text-secondary);
  background: var(--color-surface-subtle); border: 1px solid var(--color-border);
  padding: 2px 8px; border-radius: var(--radius-pill);
}
.product-card h3 { font-size: 17px; margin: var(--space-2) 0 var(--space-2); }
.product-card h3 a { color: var(--color-text-primary); }
.pc-meta { margin-bottom: var(--space-2); }
.product-card .fee { font-family: var(--font-heading); font-weight: 700; font-size: 16px; }
.pc-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.product-card .foot { margin-top: auto; padding-top: var(--space-4); display: flex; gap: var(--space-2); }

/* Ghost tile at the end of card grids: "Don't see your card?" */
.ghost-card {
  border-style: dashed;
  border-color: var(--color-teal);
  background: var(--color-surface-subtle);
}
.ghost-card:hover { box-shadow: 0 4px 18px rgba(52, 199, 205, 0.18); }
.ghost-art {
  background: linear-gradient(135deg, rgba(52, 199, 205, 0.10) 0%, rgba(236, 185, 71, 0.14) 100%) !important;
  text-decoration: none;
}
.ghost-mark {
  width: 128px; height: 82px;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--color-teal);
  border-radius: 8px;
  font-family: var(--font-heading); font-weight: 700; font-size: 40px;
  color: var(--color-teal-text);
  background: var(--color-white);
  transition: transform 200ms ease;
}
.ghost-card:hover .ghost-mark { transform: scale(1.04) rotate(-1.5deg); }
.ghost-chip {
  border-style: dashed;
  color: var(--color-teal-text);
  border-color: var(--color-teal);
  background: rgba(52, 199, 205, 0.06);
}

/* ---- Ranking results ---- */
.rank-row {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  margin-bottom: var(--space-3);
}
.rank-row.top { border-color: var(--color-gold); box-shadow: 0 2px 12px rgba(236, 185, 71, 0.12); }
.rank-num {
  font-family: var(--font-heading); font-weight: 700; font-size: 20px;
  color: var(--color-text-muted); width: 30px; flex-shrink: 0;
}
.rank-value { font-family: var(--font-heading); font-weight: 700; font-size: 24px; }
.rank-value.pos { color: var(--color-success); }
.rank-value.neg { color: var(--color-danger); }
.value-parts { font-size: 13px; color: var(--color-text-secondary); }
.value-parts .plus { color: var(--color-success); }
.value-parts .minus { color: var(--color-danger); }

details.breakdown { margin-top: var(--space-3); }
details.breakdown summary {
  cursor: pointer; color: var(--color-teal-text); font-size: 13px;
  font-family: var(--font-heading); font-weight: 500;
}
details.breakdown table { margin-top: var(--space-3); font-size: 13px; }

/* ---- Calculator category inputs ---- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}
.cat-input {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}
.cat-input label { font-family: var(--font-heading); font-weight: 500; font-size: 14px; display: block; margin-bottom: var(--space-2); }
.cat-input .input-group { display: flex; align-items: center; }
.cat-input .input-group span { padding: 0 var(--space-2); color: var(--color-text-muted); }

/* Spend sliders on the monthly calculator. Each tile is a flex column
   with the track pinned to the bottom edge, so a two-line label can't
   push its slider out of line with the neighbors in the same row. */
.cat-input:has(.spend-slider) { display: flex; flex-direction: column; }
.cat-slider-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-2); margin-bottom: var(--space-3);
}
.cat-slider-head label { margin-bottom: 0; }
.cat-amount {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--color-text-primary); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cat-amount.is-zero { color: var(--color-text-muted); font-weight: 400; }
.spend-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; margin-top: auto; height: 20px;
  background: transparent; cursor: pointer;
}
/* Light grey track with a gold fill up to the thumb (--fill set by the
   page script). WebKit has no native progress fill, hence the gradient. */
.spend-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right,
    var(--color-gold) 0%, var(--color-gold) var(--fill, 0%),
    #E4E8EC var(--fill, 0%), #E4E8EC 100%);
}
.spend-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%; margin-top: -6px;
  background: var(--color-gold); border: 2px solid var(--color-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.spend-slider::-moz-range-track { height: 6px; border-radius: 3px; background: #E4E8EC; }
.spend-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--color-gold); }
.spend-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-gold); border: 2px solid var(--color-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Scenario chips in big-purchase results */
.scenario {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: var(--space-3);
  background: var(--color-surface-subtle);
}
.scenario.best { border-color: var(--color-teal); background: rgba(52, 199, 205, 0.06); }
.scenario .amt { font-family: var(--font-heading); font-weight: 700; font-size: 18px; }

/* tiny helper text */
.tiny { font-size: 12px; }

/* card-detail art banner */
.detail-art {
  background: linear-gradient(135deg, #0c2a2e 0%, #10363b 100%);
  padding: var(--space-6);
  display: flex; align-items: center; justify-content: center;
}
.detail-art img {
  max-width: 90%; max-height: 190px; border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

/* sign-up bonus banner, directly under the card art on the detail page */
.welcome-banner {
  background: rgba(236, 185, 71, 0.10);
  border-bottom: 1px solid rgba(236, 185, 71, 0.22);
  padding: var(--space-3) var(--space-5);
  text-align: center;
}
.welcome-banner .wb-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--color-gold-text);
}
.welcome-banner .wb-reward {
  font-family: var(--font-heading); font-weight: 700; font-size: 19px;
  line-height: 1.25; margin-top: 1px; color: var(--color-text-primary);
}
/* Recurring credits, on the card detail page. The generic table padding
   insets the outer cells 16px, which pushed the credit text in past the
   card header and the note underneath, and cost the value column the
   room it needed, so the amounts were being clipped at the card's edge.
   Giving that padding back runs the row edge to edge inside the card
   body and leaves the 32px between the columns as the gap it was always
   meant to be. The summary column claims the slack, so the value column
   asks for one line's worth of width and no more. */
.credits-table td:first-child { width: 100%; padding-left: 0; }
.credits-table td:last-child { padding-right: 0; }
/* The unlock condition is a sentence, not a label: let it wrap inside
   the otherwise unbreakable value cell. */
.credits-table .cg-gate { white-space: normal; }

/* Third-party sign-in button (Google, etc.) on the auth pages */
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 10px 16px; margin-top: var(--space-2);
  background: #ffffff; color: #1f1f1f;
  border: 1px solid #dadce0; border-radius: var(--radius-btn, 8px);
  font-weight: 600; font-size: 15px; text-decoration: none;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.social-btn:hover {
  background: #f8f9fa; color: #1f1f1f;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.social-btn__icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Card search combobox — shared by the My Cards picker and the Requested
   Cards page. Three layered zones: supported cards, community requests
   (with inline vote pills), and a "request it" row. */
.card-search-host { overflow: visible; }  /* let the results dropdown escape the card */
.card-search { position: relative; }
.card-search__panel {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin-top: 6px; background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), 0 12px 32px rgba(0, 0, 0, 0.10);
  max-height: 320px; overflow-y: auto; overflow-x: hidden;
  padding: 4px;
}
.card-search__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; padding: 9px 12px;
  border: 0; border-radius: 8px;
  background: transparent; text-align: left; cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease;
}
.card-search__item:hover {
  background: rgba(52, 199, 205, 0.08);
  text-decoration: none;
}
.card-search__item .cs-name { font-weight: 600; font-size: 14px; color: var(--color-text-primary); }
.card-search__item .cs-issuer { font-size: 12px; color: var(--color-text-secondary); }
.card-search__item .cs-flag {
  font-size: 11px; font-weight: 600; color: var(--color-success);
  margin-top: 2px;
}
.card-search__empty { padding: 12px; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }

/* Under the My Cards picker: the road to the catalog page for people who
   would rather browse than remember an exact card name. */
.card-browse__link {
  display: inline-block; margin-top: 6px;
  font-size: 13px; font-weight: 600; color: var(--color-teal-text);
  text-decoration: none;
}
.card-browse__link:hover { text-decoration: underline; }

/* Section separators inside the panel */
.cs-section {
  padding: 8px 12px 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
}
.cs-section:first-child { border-top: 0; margin-top: 0; }

/* Community-request rows: name left, vote pill right */
.card-search__item.cs-req {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 12px; cursor: default;
}

/* The "request this card" call-to-action row */
.card-search__item.cs-request-new .cs-name { color: var(--color-teal-text); }
.card-search__item.cs-request-new:hover { background: rgba(52, 199, 205, 0.12); }
.cs-request-done { color: var(--color-success); font-weight: 600; }

/* Optional email follow-up after an anonymous request is created. Wraps
   at phone widths; the input flexes, the button doesn't. */
.cs-notify { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.cs-notify input { flex: 1 1 200px; min-width: 0; }
.cs-notify button { flex-shrink: 0; }

/* Vote pill (also used on the Requested Cards board) */
.cs-vote {
  flex-shrink: 0;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  padding: 6px 14px; min-width: 58px; text-align: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-white); color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 140ms ease;
}
.cs-vote:hover:not(:disabled) {
  border-color: var(--color-teal-text); color: var(--color-teal-text);
  transform: translateY(-1px);
}
.cs-vote.is-voted {
  background: var(--color-teal); border-color: var(--color-teal);
  color: var(--color-black);
}
.cs-vote:disabled { opacity: 0.6; cursor: wait; }

/* Requested Cards board */
.request-box { overflow: visible; }
.request-list { display: flex; flex-direction: column; gap: 10px; }
.request-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  transition: box-shadow 140ms ease;
}
.request-row:hover { box-shadow: var(--shadow-card); }
.request-row form { margin: 0; }
.request-row.is-added { background: var(--color-surface-subtle); }
.request-row.is-added .cs-vote { pointer-events: none; }

.welcome-banner .wb-value {
  color: var(--color-gold-text); font-size: 15px; white-space: nowrap;
}
.welcome-banner .wb-terms {
  font-size: 12px; margin-top: 2px; color: var(--color-text-secondary);
}

/* card thumbnail in ranked result rows */
.rank-art {
  width: 64px; height: 40px; object-fit: cover; border-radius: 5px;
  flex-shrink: 0; box-shadow: var(--shadow-card);
}

/* nav account area */
.nav-account {
  color: var(--color-text-secondary); font-size: 13px;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-signout { font-size: 14px; }
/* Plan tier marker: a small emoji beside the account name (tooltip
   carries the plan name), inline so the name stays aligned with the
   rest of the menu. Explorer telescope, Navigator compass, Founder crown. */
.nav-plan-emoji { font-size: 12px; margin-left: 5px; cursor: default; }

/* Toast stack: messages float below the header instead of occupying the
   top of the page, so acting never scrolls the visitor away. web.js
   dismisses each after a few seconds; clicking dismisses immediately. */
#toast-stack {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  width: min(560px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
#toast-stack .alert {
  pointer-events: auto;
  cursor: pointer;
  margin: 0;
  border-radius: 12px;
  /* Solid while readable: the tinted alert backgrounds sit on an opaque
     white layer so page text never bleeds through, even mid-fade. */
  background-color: var(--color-white);
  background-image: linear-gradient(var(--toast-tint, rgba(207, 250, 254, 0.6)), var(--toast-tint, rgba(207, 250, 254, 0.6)));
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  /* Fade is slow and deliberate; the hold time before it starts lives
     in web.js (5s, errors 8s). Hovering pauses the clock. */
  transition: opacity 1.5s ease, transform 1.5s ease;
}
#toast-stack .alert-success { --toast-tint: rgba(209, 250, 229, 0.7); }
#toast-stack .alert-danger { --toast-tint: rgba(252, 231, 235, 0.7); }
#toast-stack .alert-warning { --toast-tint: rgba(254, 243, 199, 0.7); }
#toast-stack .alert.toast-out { opacity: 0; transform: translateY(-8px); }

/* Playbook tile pencil: a small chip control, quiet until the tile is
   hovered. Inline SVG (no icon font is loaded) tinted via currentColor. */
.pb-tile { position: relative; }
.pb-tile-edit {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-secondary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.pb-tile-edit svg { flex-shrink: 0; pointer-events: none; }

/* Per-credit email bell: sits between the tracking switch and the lead
   input; dimmed until the row is tracked and the box is ticked. */
.rem-bell { display: inline-flex; align-items: center; gap: 3px; margin: 0 4px; cursor: pointer; }
.rem-bell input { accent-color: var(--color-teal-text); }
.rem-bell input:disabled + span { opacity: 0.35; }
.rem-bell input:not(:checked) + span { opacity: 0.55; }
.pb-tile:hover .pb-tile-edit, .pb-tile-edit:focus { opacity: 1; }
.pb-tile-edit:hover, .pb-tile-edit:focus { color: var(--color-text-primary); }
/* Touch screens have no hover: keep the chip faintly visible. */
@media (hover: none) { .pb-tile-edit { opacity: 0.6; } }
.nav-signin { font-weight: 600; }

/* "sign in to save your wallet" prompt on My Cards */
.signin-prompt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  background: rgba(52, 199, 205, 0.08);
  border: 1px solid var(--color-teal);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  font-size: 14px; color: var(--color-text-secondary);
}
.signin-prompt strong { color: var(--color-text-primary); }

/* django-allauth pages (sign in, code entry, logout): the <main> is the card */
.auth-page {
  max-width: 480px; margin: var(--space-8) auto;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-panel); padding: var(--space-8);
}
.auth-page h1 { font-size: 24px; margin-bottom: var(--space-2); }
.auth-page p { color: var(--color-text-secondary); }
.auth-page form { margin-top: var(--space-4); }
.auth-page hr { margin: var(--space-5) 0; border: 0; border-top: 1px solid var(--color-border); }
/* allauth renders form fields with Django as_p (bare label/input); style them here */
.auth-page label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.auth-page p { margin-bottom: var(--space-3); }
.auth-page input[type="email"],
.auth-page input[type="text"],
.auth-page input[type="password"],
.auth-page input[type="number"] {
  display: block; width: 100%; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--color-border); border-radius: var(--radius-button);
}
.auth-page input[type="checkbox"] { margin-right: 6px; }
.auth-divider {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--color-text-muted); font-size: 12px; margin: var(--space-4) 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--color-border);
}
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; padding: 10px; font-weight: 600;
  border: 1px solid var(--color-border); border-radius: var(--radius-button);
  background: var(--color-white); color: var(--color-text-primary); text-decoration: none;
}
.auth-google:hover { border-color: var(--color-text-secondary); }

/* Grouped benefit tiles on the card page */
.benefit-group { margin-bottom: var(--space-5); }
.benefit-group:last-child { margin-bottom: 0; }
.benefit-group-head {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.bg-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-subtle);
}
.bg-icon .benefit-svg { width: 18px; height: 18px; }
/* group-tinted backgrounds + icon stroke colors */
.bg-icon--lounges    { background: rgba(52, 199, 205, 0.14); color: #1f9ba0; }
.bg-icon--status     { background: rgba(236, 185, 71, 0.16);  color: var(--color-gold-text); }
.bg-icon--travel     { background: rgba(52, 199, 205, 0.14); color: #1f9ba0; }
.bg-icon--lifestyle  { background: rgba(150, 110, 210, 0.16); color: #7d54c9; }
.bg-icon--protection { background: rgba(60, 170, 110, 0.16);  color: #2e9e63; }
.bg-label {
  font-family: var(--font-heading); font-weight: 600; font-size: 15px;
  color: var(--color-text-primary);
}
.bg-count {
  font-size: 11px; font-weight: 600; color: var(--color-text-secondary);
  background: var(--color-surface-subtle); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 1px 8px;
}
/* Tiles flow as wrapping rows that grow to fill the width, so a lone tile
   spans the row instead of leaving empty grid columns. A group-colored left
   border ties each tile to its group. */
.benefit-tiles {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch;
}
.benefit-tile {
  flex: 1 1 300px;
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  transition: box-shadow 140ms ease;
}
.benefit-tile:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.benefit-tile.tile--lounges    { border-left-color: #1f9ba0; }
.benefit-tile.tile--status     { border-left-color: var(--color-gold-text); }
.benefit-tile.tile--travel     { border-left-color: #1f9ba0; }
.benefit-tile.tile--lifestyle  { border-left-color: #7d54c9; }
.benefit-tile.tile--protection { border-left-color: #2e9e63; }
.benefit-tile .tile-mark {
  flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
.benefit-tile .tile-mark .benefit-svg { width: 17px; height: 17px; }
.benefit-tile .tile-body { min-width: 0; }
.benefit-tile p {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-text-primary);
}
/* highlighted estimated-value badge on a tile */
.tile-value {
  display: inline-block; margin-bottom: 3px;
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  color: var(--color-gold-text);
  background: rgba(236, 185, 71, 0.12);
  border-radius: var(--radius-pill); padding: 1px 8px;
}

/* collapse tiles beyond the first few until expanded */
.benefit-tile.collapse-extra { display: none; }
[data-expandable].is-expanded .benefit-tile.collapse-extra { display: flex; }

/* travel/hotel perks line in big-purchase results */
.perks-line {
  font-size: 12px;
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-button);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}
.perks-head { display: flex; align-items: center; gap: var(--space-2); }
.perks-icon { font-size: 15px; }
.perks-label {
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  color: var(--color-text-primary);
}
.perks-list {
  list-style: none; margin: var(--space-1) 0 0; padding: 0;
}
.perks-list li {
  position: relative; padding-left: 18px; margin-bottom: 3px; line-height: 1.4;
}
.perks-list li::before {
  content: '✓'; position: absolute; left: 0; color: var(--color-teal-text); font-weight: 700;
}
/* collapsed extras revealed by the show-more toggle */
.perks-list li.collapse-extra { display: none; }
[data-expandable].is-expanded .perks-list li.collapse-extra { display: list-item; }

.link-toggle {
  background: none; border: none; padding: 2px 0; margin-top: 2px;
  color: var(--color-teal-text); font-family: var(--font-heading);
  font-weight: 500; font-size: 12px; cursor: pointer;
}
.link-toggle:hover { text-decoration: underline; }

/* everyday-merchant perk chips in calculator results */
.merchant-chips {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
}
.merchant-chips .mc-label {
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  color: var(--color-text-secondary);
}
.merchant-chips .mc-chip {
  font-size: 12px; color: var(--color-text-primary);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px 10px; white-space: nowrap;
}
.merchant-chips .mc-chip em {
  font-style: normal; color: var(--color-gold-text); font-weight: 600;
}
/* a chip that matches what the user entered "lights up" */
.merchant-chips .mc-chip.hit {
  background: rgba(236, 185, 71, 0.12);
  border-color: var(--color-gold-text);
  font-weight: 600;
  box-shadow: 0 1px 6px rgba(236, 185, 71, 0.18);
}

/* sign-up bonus line in calculator results */
.sub-line {
  font-size: 12px;
  color: var(--color-text-secondary);
  /* Tokened gold surface, not a translucent wash: a wash LIGHTENS a dark
     page surface and swallows the light text on it. --gold-050 is dark
     in the dark theme; the rgba fallback covers pages without v3.css. */
  background: var(--gold-050, rgba(236, 185, 71, 0.09));
  border-left: 3px solid var(--color-gold-text);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius-button) var(--radius-button) 0;
  margin-top: var(--space-2);
}
.sub-emoji { font-size: 14px; margin-right: 2px; }
/* family-pairing boost note (teal variant of the sub-line) */
.sub-line.synergy-line {
  background: var(--teal-050, rgba(52, 199, 205, 0.08));
  border-left-color: var(--color-teal);
}
.sub-line.synergy-line .est-badge {
  background: rgba(52, 199, 205, 0.16); color: var(--link, #1f9ba0);
}

/* category emoji icon in calculator inputs */
.cat-icon { font-size: 16px; margin-right: 2px; }
.scenario .amt { font-size: 17px; }

/* facts vs estimates */
.est-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(236, 185, 71, 0.14); color: var(--color-warning);
}
.fact-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--color-surface-subtle); color: var(--color-text-secondary);
}

/* ad placeholder — collapses cleanly when empty */
.ad-slot { }
.ad-slot:empty { display: none; }
.ad-slot .ad-frame {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* disclosure / trust */
.disclosure {
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-4);
}

/* ---- Footer ---- */
.web-footer {
  background: var(--color-black);
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--space-16);
}
.web-footer .inner { max-width: 1200px; margin: 0 auto; padding: var(--space-10) var(--space-6); }
.web-footer h4 { color: var(--color-white); font-size: 14px; margin-bottom: var(--space-3); }
.web-footer a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.web-footer a:hover { color: var(--color-teal); }
/* Footer link color must not bleed into buttons placed in the footer:
   dark letters on the teal button, always. */
.web-footer a.btn-primary, .web-footer a.btn-primary:hover { color: var(--color-black); }
.web-footer .fine { font-size: 12px; color: rgba(255, 255, 255, 0.5); line-height: 1.6; }
.footer-base {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
}

/* Legal / policy prose */
.legal-prose { max-width: 800px; }
.legal-prose h1 { margin-bottom: var(--space-3); }
.legal-prose h2 {
  font-size: 20px;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.legal-prose p, .legal-prose li { color: var(--color-text-secondary); line-height: 1.7; }
.legal-prose ul { margin-bottom: var(--space-4); }
.legal-prose .callout {
  background: rgba(52, 199, 205, 0.08);
  border: 1px solid var(--color-teal);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  color: var(--color-text-primary);
}

/* Horizontal scroll container for wide tables on small screens */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > .table { min-width: 480px; }
/* The recurring-credits table is exempt: the phone block stacks each row
   into two lines, which fits any width, so its wrapper is a safety net
   for a runaway summary and not a scroller the reader has to work. */
.table-scroll > .credits-table { min-width: 0; }
/* Flex children default to min-width:auto and refuse to shrink, so a wide
   table inside a rank row would blow the row past the viewport instead of
   scrolling inside .table-scroll. Let the content column actually shrink. */
.rank-row .flex-grow-1 { min-width: 0; }

/* ---- Mobile ---- */
@media (max-width: 820px) {
  /* Mobile header: brand + hamburger on one row; the menu drops down as
     a full-width stacked panel while open. (Replaces the horizontally
     swipeable pill row, which cut links off mid-word.) */
  .web-header .inner {
    height: auto; min-height: 56px; flex-wrap: wrap;
    padding: var(--space-2) var(--space-4);
    gap: var(--space-3);
  }
  .web-brand img { height: 32px; width: 32px; }
  .nav-burger { display: flex; }
  .web-nav { display: none; }
  .web-header.nav-open .web-nav {
    display: flex;
    flex-direction: column; align-items: stretch;
    width: 100%; margin-left: 0;
    padding: var(--space-1) 0 var(--space-4);
    gap: var(--space-1);
  }
  .web-header.nav-open .web-nav a {
    font-size: 16px; padding: var(--space-3) var(--space-3);
  }
  .web-header.nav-open .web-nav a.nav-cta { text-align: center; margin-top: var(--space-2); }
  .nav-account {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .web-container { padding: var(--space-6) var(--space-4); }
  .hero .web-container { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  .hero h1 { font-size: 32px; }
  .hero p.lead { font-size: 16px; }
  .how-band { padding: var(--space-5); }

  /* Ranked result rows: let the flex row wrap so the value block drops to its
     own line instead of crushing the card name. */
  .rank-row { padding: var(--space-4); }
  .rank-row .d-flex { flex-wrap: wrap; }
  .rank-row .rank-value { font-size: 20px; }
  .rank-row .text-end { margin-left: auto; }

  /* Card detail: smaller art banner and lighter section padding */
  .detail-art { padding: var(--space-4); }
  .detail-art img { max-height: 150px; }

  .web-footer .inner { padding: var(--space-8) var(--space-4); }
}

@media (max-width: 620px) {
  /* Recurring-credits rows stack: description on top, value underneath,
     instead of a squeezed two-column strip. Every selector here names
     tbody: `.table tbody td` in style.css outranks a bare
     `.credits-table td`, so without it the cells keep their 16px inset
     and their own bottom border, and the value line ends up indented
     under a doubled rule. */
  .credits-table tbody tr { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
  .credits-table tbody tr:last-child { border-bottom: 0; }
  .credits-table tbody td { display: block; border: 0; padding: 0; }
  .credits-table tbody td.credit-val { text-align: left !important; white-space: normal !important; margin-top: 2px; }
}

@media (max-width: 520px) {
  /* Auth card: fill the phone width instead of floating as a fixed 480px box */
  .auth-page {
    margin: var(--space-4);
    padding: var(--space-5);
  }
  .benefit-tile { flex-basis: 100%; }
  .fomo-grid { grid-template-columns: 1fr 1fr; }
  .fomo-tile { padding: var(--space-4); }
  .fomo-amt { font-size: 21px; }
  .fomo-icon { width: 42px; height: 42px; font-size: 24px; }
  .cat-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .cat-input { padding: var(--space-3); }
  /* Narrow tiles: let the amount wrap under the label instead of overflowing */
  .cat-slider-head { flex-wrap: wrap; }
  /* Keep the SUB chart readable on phones: scroll it instead of shrinking
     its labels below legibility (the wrapper is .sh-scroll). */
  .sub-history-chart { min-width: 560px; }

  /* My Cards phone rules moved to the end of this file: they must come
     AFTER the component styles they override (same specificity, so
     source order decides), and those are defined below this line. */
}

@media (prefers-reduced-motion: reduce) {
  .feature-card, .product-card, .btn { transition: none; }
  .feature-card:hover { transform: none; }
}

/* ---- Wallet playbook (My Cards) ---- */
.pb-summary {
  background: var(--gold-050, rgba(236, 185, 71, 0.08));
  border: 1px solid rgba(236, 185, 71, 0.28);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  font-size: 15px; line-height: 1.55;
}
.pb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}
.pb-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
}
.pb-card.is-sock { background: var(--color-surface-subtle); }
.pb-head { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.pb-art { width: 76px; height: 48px; object-fit: cover; border-radius: 5px; box-shadow: var(--shadow-card); flex-shrink: 0; }
.pb-name { font-family: var(--font-heading); font-weight: 700; font-size: 16px; text-decoration: none; }
.pb-meta { font-size: 12px; color: var(--color-text-secondary); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.pb-sock-chip {
  font-size: 11px; font-weight: 700;
  background: #ECEFF2; color: var(--color-text-secondary);
  padding: 1px 8px; border-radius: var(--radius-pill);
}
.pb-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--color-text-muted); margin: var(--space-3) 0 var(--space-1);
}
.pb-uses { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pb-use {
  font-size: 13px; font-weight: 600;
  background: rgba(52, 199, 205, 0.10); border: 1px solid rgba(52, 199, 205, 0.35);
  padding: 3px 10px; border-radius: var(--radius-pill);
}
.pb-use em { font-style: normal; color: var(--color-gold-text); font-weight: 700; }
.pb-use--base { background: var(--color-surface-subtle); border-color: var(--color-border); }
.pb-sock-note { font-size: 13.5px; color: var(--color-text-secondary); margin: 0; }
.pb-synergy { font-size: 13px; color: var(--color-text-secondary); margin: var(--space-2) 0 0; }
.pb-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.pb-list li { padding: 6px 0; border-bottom: 1px dashed var(--color-border); display: flex; justify-content: space-between; gap: var(--space-2); line-height: 1.45; }
.pb-list li:last-child { border-bottom: 0; }
.pb-val { color: var(--color-gold-text); font-weight: 700; white-space: nowrap; }
.pb-more { font-size: 12px; color: var(--color-text-muted); margin: var(--space-1) 0 0; }

/* ---- My Cards tabs ---- */
.tab-nav {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--space-2); margin-bottom: var(--space-5);
}
.tab-btn {
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  color: var(--color-text-secondary);
  padding: 6px 14px; cursor: pointer; transition: all 140ms ease;
}
.tab-btn:hover { border-color: var(--color-teal); color: var(--color-text-primary); }
.tab-btn.is-active {
  background: var(--color-teal); border-color: var(--color-teal);
  color: var(--color-black);
}
.tab-count {
  background: rgba(0, 0, 0, 0.15); border-radius: var(--radius-pill);
  font-size: 11px; padding: 1px 7px; margin-left: 2px;
}
.tab-btn:not(.is-active) .tab-count { background: var(--color-surface-subtle); }

/* Which-card-when and credits tables. One vertical rhythm throughout:
   9px row padding, space-5 after each block inside a tab. */
.tab-pane > :first-child { margin-top: 0; }
.tab-pane > .table-scroll { margin-bottom: var(--space-5); }
.pb-table { margin-bottom: 0; }
/* The which-card table FITS the viewport instead of scrolling: no forced
   minimum, and the card cell wraps. The .table-scroll wrapper stays as a
   safety net only. */
.table-scroll > .pb-fit { min-width: 0; }
/* Card names may wrap, but not into a one-word tower when there is
   room; the phone block below releases the floor so the table still
   fits 390px. */
.pb-fit .pb-t-card { min-width: 172px; }
.pb-table th {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--color-text-muted); border-bottom-width: 2px;
  padding-top: 8px; padding-bottom: 8px;
}
.pb-table td { vertical-align: middle; font-size: 14px; padding-top: 9px; padding-bottom: 9px; }
.pb-t-cat { font-weight: 600; white-space: nowrap; }
.pb-t-rate { color: var(--color-gold-text); font-weight: 700; white-space: nowrap; }
.pb-t-rate .rate-scope { white-space: normal; font-weight: 400; max-width: 26ch; }
.pb-t-perks { font-size: 13px; color: var(--color-text-secondary); }
/* Perks that stack: the SECOND row of a category pair, spanning the card
   and rate columns (the category cell spans both rows), so the chip
   list has the whole width instead of a squeezed fourth column. Chips
   wrap at chip boundaries, each name on one line ("The Edit by Chase
   Travel"); the phone block lets chips wrap inside so 390px still fits.
   The pair reads as one item: no rule between its two rows. */
.pb-table tr.has-perks > td:not(.pb-t-cat) { border-bottom: 0; padding-bottom: 2px; }
.pb-table tr.pb-perks-row > td { padding-top: 0; }
.pb-perks { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pb-perks-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--color-text-muted); margin-right: 2px;
}
.pb-perks .perk-link { margin: 0; white-space: nowrap; }
.pb-perks-hint { margin-top: var(--space-2); }
.pb-t-credit { max-width: 340px; }

/* Playbook tiles: the at-a-glance summary */
/* The playbook split: earning tiles on the left, merchant credits on the
   right, both visible in one view (no tabs). */
.pb-columns {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-4);
  align-items: start;
}
.pb-col-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  margin: 0 0 var(--space-2);
}
/* Small tiles that wrap, so the column grows in rows of two or three
   instead of one long list. Smaller than the earning card tiles.
   Multi-column (masonry) rather than a grid: tiles pack under each
   other with no dead space below a short neighbor. Flow is top to
   bottom per column, so the sort's most actionable tiles fill the
   first column. */
.pb-merch {
  columns: 150px;
  column-gap: 8px;
}
.pb-merch-tile {
  display: flex; flex-direction: column; gap: 3px;
  break-inside: avoid;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: 8px 10px; color: inherit;
  transition: border-color 140ms ease;
}
.pb-merch-tile:hover, .pb-merch-tile:focus-visible { border-color: var(--color-teal); color: inherit; }
/* Current-period usage tint, same palette as the utilization grid.
   Solid -050 surfaces + semantic borders, not rgba washes: washes
   lighten dark surfaces (theme contract) and read fuzzy against the
   high-contrast theme's stark ground. */
.pb-merch-tile.is-used { background: var(--positive-050, #e8f4ed); border-color: var(--positive, #197948); }
.pb-merch-tile.is-missed { background: var(--negative-050, #faeceb); border-color: var(--negative, #B3261E); }
.pb-merch-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; }
.pb-merch-names { font-weight: 600; font-size: 12.5px; line-height: 1.3; }
.pb-merch-card {
  font-size: 11px; color: var(--color-text-muted); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-merch-value {
  font-weight: 700; font-size: 12.5px; color: var(--color-gold-text);
  white-space: nowrap;
}
.pb-merch-note { font-size: 12px; color: var(--color-text-muted); margin: var(--space-2) 0 0; }

.pb-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-3);
}
.pb-tile {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-3); text-decoration: none; color: inherit;
  transition: border-color 140ms ease, transform 140ms ease;
}
.pb-tile:hover { border-color: var(--color-teal); transform: translateY(-1px); color: inherit; }
.pb-tile.is-sock { background: var(--color-surface-subtle); }
.pb-tile-art { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; box-shadow: var(--shadow-card); flex-shrink: 0; }
.pb-tile-left { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; width: 64px; }
.pb-tile-fee { display: flex; flex-direction: column; font-size: 10.5px; line-height: 1.3; text-align: center; color: var(--color-text-muted); font-weight: 600; }
.pb-fee-offset { color: var(--positive, #1B7F4B); font-weight: 700; }
/* Live sign-up bonus window: gold accent (gold-tinted surface + gold
   border, theme text on it), sits between name and chips. The surface
   must be the token, not literal #fdf6e3: the inherited text color flips
   light in the dark theme, so the fill has to darken with it. */
.pb-tile-sub {
  font-size: 12px; font-weight: 700; margin-bottom: 6px;
  background: var(--gold-050, #fdf6e3); border: 1px solid #ecb947;
  border-radius: var(--radius-pill);
  padding: 1px 8px; display: inline-block;
}
.pb-tile-sub em { font-style: normal; color: var(--color-gold-text, #a17300); }
.pb-tile-name { font-family: var(--font-heading); font-weight: 700; font-size: 13.5px; line-height: 1.25; margin-bottom: 6px; }
.pb-tile-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* The body must be allowed to shrink (flex min-width:auto otherwise lets
   one long nowrap chip drag the whole column past the tile's border,
   taking the hold note with it), and a chip wider than the tile clips
   with an ellipsis instead of overflowing. */
.pb-tile-body { min-width: 0; flex: 1 1 auto; }
.pb-tile-chip {
  font-size: 12px; font-weight: 700;
  background: rgba(52, 199, 205, 0.10); border: 1px solid rgba(52, 199, 205, 0.35);
  padding: 1px 7px; border-radius: var(--radius-pill); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.pb-tile-chip.is-base { background: var(--color-surface-subtle); border-color: var(--color-border); font-weight: 600; }
.pb-tile-chip.is-more { background: none; border-color: var(--color-border); color: var(--color-text-muted); }
.pb-tile-chip.is-sockchip { background: #ECEFF2; border-color: #ECEFF2; color: var(--color-text-secondary); }
/* Credit chips: a job the card still has, but a credit, not a
   multiplier: dashed border keeps the two visually distinct. */
.pb-tile-chip.is-credit { border-style: dashed; background: rgba(52, 199, 205, 0.05); cursor: pointer; }
.pb-tile-chip.is-credit.is-done { border-style: solid; background: var(--color-surface-subtle); border-color: var(--color-border); color: var(--color-text-muted); cursor: default; }
.pb-tile-note { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }

/* Card thumbnails inline in tables and gap picks */
.pb-thumb {
  width: 34px; height: 22px; object-fit: cover; border-radius: 3px;
  box-shadow: var(--shadow-card); margin-right: 6px; vertical-align: middle;
}
.pb-thumb--lg { width: 44px; height: 28px; }

/* Wallet gaps: category -> recommended card */
.pb-gaps-panel {
  background: var(--color-surface-subtle);
  border: 1px dashed var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5);
}
.pb-gaps-label { font-size: 13px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.pb-gap {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: 5px 0; font-size: 14px;
}
.pb-gap-cat { font-weight: 600; min-width: 150px; }
.pb-gap-arrow { color: var(--color-text-muted); }

/* Credits tab: per-card groups */
.credit-group {
  background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4);
}
.credit-group .table-scroll { margin-bottom: 0; }
.cg-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3); font-size: 15px;
}
/* Card groups are an accordion: the header is a <summary> wearing its
   own chevron; only one card per section stays open. */
summary.cg-head { cursor: pointer; list-style: none; margin-bottom: 0; }
summary.cg-head::-webkit-details-marker { display: none; }
summary.cg-head::before {
  content: '▸'; color: var(--color-text-muted); font-size: 18px;
  line-height: 24px; width: 24px; height: 24px; text-align: center;
  flex: 0 0 24px;
  transition: transform 140ms ease; display: inline-block;
}
details[open] > summary.cg-head { margin-bottom: var(--space-3); }
details[open] > summary.cg-head::before { transform: rotate(90deg); }
.cg-total { color: var(--color-gold-text); font-weight: 700; font-size: 13px; }
.cg-per { color: var(--color-text-muted); font-weight: 400; font-size: 12px; }
/* Unlock condition under a spend-gated credit's amount ("after $5,000
   spend"): informational, never counted in the group totals. */
.cg-gate { color: var(--color-text-muted, #7B8490); font-weight: 400; font-size: 11px; white-space: nowrap; }
/* Spend-category group header icon, and the per-row card cell shown in the
   by-category view of Track credits (the card is no longer the header). */
.cg-icon { font-size: 15px; line-height: 1; }
.pb-cardcell { min-width: 116px; padding-right: 12px; }
.pb-cardcell img.pb-thumb { vertical-align: middle; margin-right: 6px; }
.pb-cardname { font-weight: 600; font-size: 13px; vertical-align: middle; }

/* Track credits rows: the credit's description runs the full width of
   the row and the facts (card, merchant, reset, amount, reminder) sit on
   the line beneath it, each still under its header. A long description
   used to stack into a one-word-per-line tower in a 340px column while
   the row grew to five lines tall.
   Each row stays ONE <tr> (web.js keys saves, flashes and deep links off
   tr[data-benefit-id]) and becomes a subgrid of the table, so every row
   shares the header's column tracks. The hidden Credit header keeps the
   sorter's header-to-cell index in step. Browsers without subgrid keep
   the plain table. */
@supports (grid-template-columns: subgrid) {
  .pb-credits {
    display: grid;
    /* card | merchant | resets every | you get | tracking | scoreboard */
    grid-template-columns:
      minmax(150px, 1.1fr) minmax(80px, .8fr) max-content max-content
      minmax(120px, max-content) minmax(220px, 1.4fr);
    min-width: 0;
  }
  .pb-credits.is-bycard {
    grid-template-columns: minmax(100px, .8fr) max-content max-content
      minmax(120px, max-content) minmax(220px, 1.4fr);
  }
  /* By merchant: card | resets every | you get | tracking | scoreboard (the merchant
     is the group header). */
  .pb-credits.is-bymerchant {
    grid-template-columns: minmax(150px, 1fr) max-content max-content
      minmax(120px, max-content) minmax(220px, 1.4fr);
  }
  .pb-credits > thead, .pb-credits > tbody { display: contents; }
  .pb-credits tr {
    display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
    /* Top-aligned: a value that wraps hangs below its first line rather
       than floating mid-row beside single-line neighbours. */
    align-items: start;
  }
  .pb-credits tbody td { vertical-align: top; }
  .pb-credits th.pb-th-credit { display: none; }
  .pb-credits td.pb-t-credit {
    grid-column: 1 / -1; max-width: none;
    padding-bottom: 2px; border-bottom: 0;
    font-size: 14px; line-height: 1.45; color: var(--color-text-primary);
  }
  .pb-credits tbody td:not(.pb-t-credit) { padding-top: 2px; font-size: 13px; }
  /* One divider per credit, on the row, not one per cell at whatever
     height each cell happens to end. */
  .pb-credits tbody td { border-bottom: 0; }
  .pb-credits tbody tr { border-bottom: 1px solid var(--color-border); }
  .pb-credits tbody tr:last-child { border-bottom: 0; }
  .pb-credits .pb-cardcell { min-width: 0; }
  /* The reminder controls may wrap onto a second line inside their cell
     rather than pushing the row into a sideways scroll. */
  .pb-credits .rem-cell { flex-wrap: wrap; row-gap: 4px; }
}
.date-missing { color: var(--negative, #B3261E); font-weight: 600; }
a.date-missing { color: var(--negative, #B3261E); text-decoration: underline; }
a.date-missing:hover { color: var(--negative, #8C1D16); }

/* Flash highlight on the manage tiles missing an opening date */
@keyframes flash-outline {
  0%, 60% { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0); }
}
.flash-outline { animation: flash-outline 2s ease-out 1; }

/* Inline more/less toggle for truncated text */
.ml-toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-teal-text, #0E90A5); font-size: 12px; font-weight: 600;
}
.ml-toggle:hover { text-decoration: underline; }

/* Companion owner badge: whose card this is, on every shared-card
   surface. Same visual weight as .badge-low; never gold-on-dark. */
.owner-badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  background: rgba(52, 199, 205, 0.14);
  border: 1px solid rgba(52, 199, 205, 0.45);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; line-height: 1.6;
  color: var(--color-text-primary); white-space: nowrap;
  vertical-align: middle;
}

/* Return link inside a deep-linked credit row */
.rem-return {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: var(--space-2); max-width: 100%; white-space: nowrap;
  background: rgba(52, 199, 205, 0.12);
  border: 1px solid rgba(52, 199, 205, 0.4); border-radius: 8px;
  padding: 4px 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--color-primary); line-height: 1.35; text-decoration: none;
}
.rem-return:hover { background: rgba(52, 199, 205, 0.25); text-decoration: none; }
.rem-return:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.rem-return a { color: inherit; text-decoration: none; }

/* Tracked credits' jump into the utilization grid: quiet text link,
   sits with the reminder controls, hidden while tracking is off. */
.util-jump {
  background: none; border: 0; padding: 0; margin-left: var(--space-2);
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--color-primary); text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: 2px;
}
.util-jump:hover { text-decoration-style: solid; }

/* Extra Perks category browser.  The catalog's full issuer prose lives in
   expandable rows; the default surface is a small set of useful benefit
   types.  Every grid track is allowed to shrink so this never widens the
   page at phone sizes. */
.xp-intro { margin-bottom: var(--space-4); }
.xp-intro h2 { margin: 0 0 3px; font-size: 25px; }
.xp-intro p { margin: 0; color: var(--text-muted, var(--color-text-secondary)); }
.xp-search-wrap {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-width: 0; margin-bottom: var(--space-4); padding: 0 15px;
  border: 1px solid var(--border-strong, var(--color-border));
  border-radius: var(--radius, 12px); color: var(--text-muted, var(--color-text-secondary));
  background: var(--surface, var(--color-white));
}
.xp-search-wrap:focus-within { box-shadow: var(--focus-ring); border-color: var(--link, var(--color-primary)); }
.xp-search {
  flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; outline: 0;
  color: var(--text, var(--color-text-primary)); background: transparent;
  font: inherit;
}
/* v3's opt-in form rules load after this adapter and can otherwise paint a
   second rectangular control inside the rounded search shell in some themes.
   The shell owns every boundary and the focus ring. */
.v3-mycards .xp-search-wrap .xp-search,
.v3-mycards .xp-search-wrap .xp-search:focus {
  padding: 0; border: 0; border-radius: 0; outline: 0;
  box-shadow: none; background: transparent; appearance: none;
}
.xp-search::-webkit-search-decoration { -webkit-appearance: none; }
.xp-search::placeholder { color: var(--text-muted, var(--color-text-secondary)); }
.xp-categories {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-bottom: var(--space-4);
}
.xp-category {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 12px;
  align-items: center; gap: 8px; min-width: 0; min-height: 92px;
  padding: 14px; text-align: left; cursor: pointer;
  color: var(--text, var(--color-text-primary));
  background: var(--surface, var(--color-white));
  border: 1px solid var(--border, var(--color-border));
  border-radius: var(--radius, 12px);
}
.xp-category:hover { border-color: var(--teal-400, var(--color-primary)); }
.xp-category:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.xp-category.is-active {
  border: 2px solid var(--gold, #ecb947); padding: 13px;
  box-shadow: 0 0 0 1px rgba(236, 185, 71, .08);
}
/* High contrast cannot depend on a fine gold edge.  A heavy black boundary,
   tinted fill, and check mark provide shape, fill, and symbol cues. */
[data-theme="high-contrast"] .xp-category.is-active {
  padding: 11px; border: 4px solid #000000;
  background: var(--teal-050); box-shadow: none;
}
[data-theme="high-contrast"] .xp-category.is-active .xp-category-arrow {
  color: #000000; font-size: 0; font-weight: 900;
}
[data-theme="high-contrast"] .xp-category.is-active .xp-category-arrow::before {
  content: "✓"; font-size: 18px;
}
.xp-category-icon { font-size: 25px; text-align: center; }
.xp-category-copy { display: block; min-width: 0; }
.xp-category-copy strong {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 4px;
  white-space: nowrap; font-size: 14px; line-height: 1.25;
}
.xp-category-wide,
.xp-category-short { min-width: 0; }
.xp-category-copy > span:last-child {
  display: block; margin-top: 5px; color: var(--text-muted, var(--color-text-secondary));
  font-size: 12px; line-height: 1.35;
}
.xp-category-count {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  min-width: 23px; height: 23px; padding: 0 6px;
  border-radius: 999px; background: rgba(42, 177, 184, .14);
  color: var(--text, var(--color-text-primary)); font-size: 12px;
}
.xp-category-short { display: none; }
.xp-category-arrow { color: var(--text-muted, var(--color-text-secondary)); font-size: 24px; }
.xp-search-note { margin: 0 0 10px; color: var(--text-muted, var(--color-text-secondary)); font-size: 13px; }
.xp-section {
  min-width: 0; padding: 16px;
  background: var(--surface, var(--color-white));
  border: 1px solid var(--border, var(--color-border));
  border-radius: var(--radius, 12px);
}
.xp-section-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 12px;
}
.xp-section-head h3 { margin: 0 0 2px; font-size: 19px; }
.xp-section-head h3 span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; margin-left: 5px; padding: 0 7px;
  border-radius: 999px; background: rgba(42, 177, 184, .14); font-size: 12px;
}
.xp-section-head p { margin: 0; color: var(--text-muted, var(--color-text-secondary)); font-size: 13px; }
.xp-section-head a { flex: none; margin-top: 3px; color: var(--link, var(--color-primary)); font-size: 13px; font-weight: 600; }
.xp-benefit-list {
  overflow: hidden; border: 1px solid var(--border, var(--color-border));
  border-radius: var(--radius, 12px);
}
.xp-benefit { min-width: 0; border-bottom: 1px solid var(--border, var(--color-border)); }
.xp-benefit:last-child { border-bottom: 0; }
.xp-benefit > summary {
  display: grid; grid-template-columns: minmax(185px, 1.25fr) minmax(180px, .9fr) auto 18px;
  align-items: center; gap: 13px; min-width: 0; padding: 13px 15px;
  cursor: pointer; list-style: none;
}
.xp-benefit > summary::-webkit-details-marker { display: none; }
.xp-benefit > summary:hover { background: var(--surface-alt, rgba(42, 177, 184, .05)); }
.xp-benefit > summary:focus-visible { outline: 0; box-shadow: inset var(--focus-ring); }
.xp-benefit-copy { min-width: 0; }
.xp-benefit-copy strong, .xp-benefit-copy span { display: block; }
.xp-benefit-copy strong { line-height: 1.3; }
.xp-benefit-copy span { margin-top: 2px; color: var(--text-muted, var(--color-text-secondary)); font-size: 12px; }
.xp-benefit-cards { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.xp-card-chip, .xp-card-more {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  padding: 4px 8px; border: 1px solid var(--border, var(--color-border));
  border-radius: 999px; color: var(--text, var(--color-text-primary));
  background: var(--surface-alt, rgba(42, 177, 184, .05)); font-size: 11px;
}
.xp-card-chip img { width: 22px; height: 14px; object-fit: contain; border-radius: 2px; }
.xp-condition {
  white-space: nowrap; padding: 4px 8px; border-radius: 999px;
  color: var(--color-gold-text, #876000); background: var(--gold-050, #fdf6e3);
  font-size: 11px; font-weight: 700;
}
.xp-chevron { color: var(--text-muted, var(--color-text-secondary)); font-size: 19px; transition: transform .15s ease; }
.xp-benefit[open] .xp-chevron { transform: rotate(180deg); }
.xp-benefit-detail {
  padding: 0 15px 14px; background: var(--surface-alt, rgba(42, 177, 184, .04));
}
.xp-source-detail {
  display: grid; grid-template-columns: minmax(145px, .35fr) minmax(0, 1fr);
  gap: 14px; padding: 12px 0; border-top: 1px solid var(--border, var(--color-border));
}
.xp-source-card { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; font-size: 12px; }
.xp-source-card img { width: 35px; height: 23px; object-fit: contain; border-radius: 3px; }
.xp-source-detail p { margin: 0; color: var(--text-muted, var(--color-text-secondary)); font-size: 13px; line-height: 1.45; }
.xp-empty { margin-top: 12px; }

@media (max-width: 767px) {
  .xp-intro h2 { font-size: 22px; }
  .xp-intro p { font-size: 13px; }
  .xp-search-wrap { padding: 0 12px; }
  .xp-search { height: 44px; font-size: 14px; }
  .xp-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .xp-category {
    grid-template-columns: 27px minmax(0, 1fr) 10px; gap: 7px;
    min-height: 80px; padding: 11px 9px;
  }
  .xp-category.is-active { padding: 10px 8px; }
  [data-theme="high-contrast"] .xp-category.is-active { padding: 8px 6px; }
  .xp-category-icon { font-size: 21px; }
  .xp-category-copy strong { font-size: 13px; }
  .xp-category-copy > span:last-child { display: none; }
  .xp-category-wide { display: none; }
  .xp-category-short { display: inline; }
  .xp-category-count { min-width: 22px; height: 22px; padding: 0 5px; font-size: 11px; }
  .xp-category-arrow { font-size: 19px; }
  .xp-section { padding: 12px; }
  .xp-section-head { display: block; }
  .xp-section-head h3 { font-size: 18px; }
  .xp-section-head a { display: inline-block; margin-top: 7px; }
  .xp-benefit > summary {
    grid-template-columns: minmax(0, 1fr) 18px; gap: 8px; padding: 12px;
  }
  .xp-benefit-cards { grid-column: 1 / -1; }
  .xp-condition { grid-column: 1; justify-self: start; }
  .xp-chevron { grid-column: 2; grid-row: 1; }
  .xp-source-detail { display: block; }
  .xp-source-detail p { margin-top: 8px; }
}

/* Perk chips in the which-card table deep-link to the Credits tab */
.perk-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-teal-text, #0E90A5); font-size: 13px;
  text-decoration: underline dotted; text-underline-offset: 3px;
  /* Buttons center their text; a chip wrapping inside a narrow column
     must read as flowing text instead. */
  text-align: left; margin-right: 6px;
}
.perk-link:hover { color: var(--color-text-primary); }
@keyframes row-flash {
  0% { background: rgba(236, 185, 71, 0.35); }
  100% { background: transparent; }
}
tr.row-flash td { animation: row-flash 1.5s ease-out 1; }
/* Same gold attention fade for block elements (the SUB edit section). */
.block-flash { animation: row-flash 1.5s ease-out 1; border-radius: 6px; }

/* Credit reminder controls. .rem-cell is a DIV inside the td (a flex td
   breaks table row-height alignment when neighboring text wraps). */
.rem-cell { display: flex; align-items: center; gap: var(--space-2); }
.pb-table td { vertical-align: middle; }
.rem-switch { position: relative; display: inline-block; width: 36px; height: 20px; margin: 0; flex-shrink: 0; }
.rem-switch input { opacity: 0; width: 0; height: 0; }
.rem-slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: 20px;
  background: #CBD3D9; transition: background 140ms ease;
}
.rem-slider::before {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  left: 3px; top: 3px; background: var(--color-white); transition: transform 140ms ease;
}
.rem-switch input:checked + .rem-slider { background: var(--color-teal); }
.rem-switch input:checked + .rem-slider::before { transform: translateX(16px); }
.rem-lead { width: 70px; display: inline-block; }
.rem-days { font-size: 12px; color: var(--color-text-muted); }
.rem-warn { cursor: help; }
tr.rem-saved td { background: rgba(52, 199, 205, 0.08); transition: background 600ms ease; }

.soon-panel .soon-emoji { font-size: 40px; margin-bottom: var(--space-2); }

/* Benefit utilization tab */
.ut-strip { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ut-stat {
  flex: 1 1 140px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--space-3) var(--space-4);
  text-align: center;
}
.ut-amt { font-family: var(--font-heading); font-weight: 700; font-size: 22px; }
.ut-amt.pos { color: var(--positive, #1B7F4B); }
.ut-amt.neg { color: var(--negative, #B3261E); }
.ut-lbl { font-size: 12px; color: var(--color-text-secondary); }
.ut-bar {
  height: 8px; border-radius: 4px; background: #E4E8EC; overflow: hidden;
}
.ut-bar-fill { height: 100%; border-radius: 4px; background: var(--color-gold); }
.ut-row-text { min-width: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.ut-cycles { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ut-chip {
  font-size: 11.5px; font-weight: 700; padding: 1px 8px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.ut-chip.is-used { background: var(--positive-050, #e8f4ed); color: var(--positive, #197948); border-color: var(--positive, #197948); }
.ut-chip.is-missed { background: var(--negative-050, #faeceb); color: var(--negative, #B3261E); border-color: var(--negative, #B3261E); }
.ut-chip.is-unused { background: var(--color-surface-subtle); color: var(--color-text-muted); border-color: var(--color-border); }
.ut-chip.is-pending { background: rgba(236, 185, 71, 0.15); color: var(--color-gold-text); border-color: rgba(236, 185, 71, 0.45); }
.ut-snooze { font-size: 12px; color: var(--color-text-secondary); }
/* vertical-align keeps wrapped (actionable) dots on the same line as
   bare ones; without it the first answerable column sat visibly higher. */
.ut-slot { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.ut-chip-btn { cursor: pointer; }
.ut-fix { display: inline-flex; gap: 4px; }
.cc-scoreline {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px 14px; margin-bottom: 6px; white-space: nowrap;
  font-size: 12px; color: var(--color-text-secondary);
}
.cc-scoreline strong { color: var(--positive, #1B7F4B); }
.cc-cycles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cc-cycle { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.cc-cycle-label { font-size: 9px; line-height: 1; color: var(--color-text-muted); white-space: nowrap; }
.cc-cycles .ut-slot { position: relative; }
.cc-cycles .ut-fix {
  position: absolute; left: 50%; bottom: calc(100% + 4px);
  transform: translateX(-50%);
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-button); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  padding: 6px; white-space: nowrap; z-index: 30;
}
.cc-not-scored {
  display: inline-block; max-width: 220px; font-size: 12px;
  line-height: 1.35; color: var(--color-text-muted);
}

/* Track credits uses stacked benefit blocks instead of a wide table.
   Root, section, and item tracking controls share one right edge while
   every text column remains free to shrink at phone width. */
.cc-pane-head { margin-bottom: var(--space-4); }
.cc-pane-head h2 { margin: 0; font-size: 24px; }
.cc-pane-head p { margin: 2px 0 0; color: var(--color-text-muted); font-size: 13px; }
.cc-root-control {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-3); padding: 12px 14px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.cc-root-control > div:first-child { min-width: 0; }
.cc-root-control > div:first-child > span {
  display: block; margin-top: 2px; color: var(--color-text-muted); font-size: 12px;
}
.v3-cc-controls { margin-bottom: var(--space-4); }
.cc-toggle-wrap {
  width: 108px; display: flex; align-items: center; justify-content: flex-end;
  gap: 9px; margin: 0; color: var(--color-text-secondary); font-size: 12px;
  white-space: nowrap;
}
.cc-toggle-wrap.is-partial > span:first-child { color: var(--color-gold-text); font-weight: 700; }
.cc-group.credit-group { position: relative; min-width: 0; padding: 0; overflow: visible; }
.cc-group .cg-head {
  display: grid; grid-template-columns: 24px minmax(0, 1fr);
  align-items: center; gap: var(--space-2); margin: 0; padding: 12px 136px 12px 14px;
  background: var(--color-surface-subtle); border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.cc-group[open] > summary.cg-head { margin-bottom: 0; }
.cc-group:not([open]) > summary.cg-head { border-radius: var(--radius-card); }
.cc-section-control {
  position: absolute; top: 14px; right: 14px; z-index: 2;
}
.cc-group-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cc-group-identity > div { min-width: 0; }
.cc-group-identity strong { display: inline; overflow-wrap: anywhere; }
.cc-group-identity > div > span:not(.owner-badge) {
  display: block; margin-top: 2px; color: var(--color-text-muted); font-size: 12px;
}
.cc-group-rows { min-width: 0; }
.cc-credit { min-width: 0; padding: 15px 14px; border-top: 1px solid var(--color-border); }
.cc-credit:first-child { border-top-color: transparent; }
.cc-credit-main {
  display: grid; grid-template-columns: minmax(0, 1fr) 108px;
  align-items: start; gap: var(--space-4); min-width: 0;
}
.cc-credit-copy { min-width: 0; }
.cc-card-identity {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  margin-bottom: 7px; color: var(--color-text-secondary); font-size: 12px; font-weight: 700;
}
.cc-card-identity .pb-thumb { width: 30px; flex: 0 0 auto; }
.cc-credit-title { display: block; overflow-wrap: anywhere; }
.cc-credit-summary {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; margin: 3px 0 0; color: var(--color-text-secondary);
  font-size: 13px; line-height: 1.45; overflow-wrap: anywhere;
}
.cc-credit-details { display: inline-block; margin-top: 3px; max-width: 100%; font-size: 12px; }
.cc-credit-details summary { cursor: pointer; color: var(--color-primary); font-weight: 700; }
.cc-credit-details > div {
  margin-top: 6px; color: var(--color-text-secondary); font-size: 13px;
  line-height: 1.45; overflow-wrap: anywhere;
}
.cc-track-control {
  width: 108px; display: flex; align-items: center; justify-content: flex-end;
  gap: 9px; color: var(--color-text-secondary); font-size: 12px; white-space: nowrap;
}
.cc-credit-facts {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 11px;
  color: var(--color-text-secondary); font-size: 13px;
}
.cc-credit-facts strong { color: var(--color-text-primary); }
.cc-scoreboard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 11px; }
.cc-scoreboard-label { color: var(--color-text-secondary); font-size: 12px; font-weight: 700; }
.cc-scoreboard-note { color: var(--color-text-muted); font-size: 12px; }
.cc-scoreboard.is-off { margin-top: 8px; }
.cc-credit.rem-saved { background: rgba(52, 199, 205, 0.08); transition: background 600ms ease; }
.cc-credit.row-flash { animation: row-flash 1.5s ease-out 1; }

@media (max-width: 640px) {
  .cc-root-control, .cc-group .cg-head, .cc-credit-main { gap: 10px; }
  .cc-root-control, .cc-credit { padding-left: 11px; padding-right: 11px; }
  .cc-group .cg-head { padding: 12px 103px 12px 11px; }
  .cc-section-control { top: 14px; right: 11px; }
  .cc-toggle-wrap, .cc-track-control { width: 82px; }
  .cc-credit-main { grid-template-columns: minmax(0, 1fr) 82px; }
  .cc-credit-facts { gap: 5px 14px; }
  .cc-group-identity .pb-thumb--lg { width: 38px; }
}
.ut-act {
  font-size: 12px; font-weight: 700; cursor: pointer;
  border-radius: var(--radius-pill); padding: 2px 9px;
  background: var(--color-white);
}
.ut-act.is-used { border: 1px solid var(--positive, #1B7F4B); color: var(--positive, #1B7F4B); }
.ut-act.is-used:hover { background: var(--positive-050, #e8f4ed); }
.ut-act.is-missed { border: 1px solid var(--negative, #B3261E); color: var(--negative, #B3261E); }
.ut-act.is-missed:hover { background: var(--negative-050, #faeceb); }
.ut-act.is-clear { border: 1px solid var(--color-border, #8a969d); color: var(--color-text-secondary, #4a5a63); }
.ut-act.is-clear:hover { background: rgba(106, 122, 131, 0.12); }
.ut-act:disabled { opacity: 0.5; cursor: default; }

/* Utilization year grid: one thin column per month, cells merged across
   each credit's reset period, an eligibility circle per cell. */
.ug-table { width: auto; border-collapse: collapse; }
.ug-table th.ug-name { min-width: 260px; }
.ug-table th.ug-mh {
  width: 28px; min-width: 28px; padding: 2px 0 4px; text-align: center;
  vertical-align: bottom; border-bottom: 2px solid var(--color-border);
}
.ug-table th.ug-mh span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.ug-table th.ug-mh.is-now span { font-weight: 800; color: var(--color-text-primary); }
.ug-label {
  padding: 6px 10px 6px 0; border-bottom: 1px dashed var(--color-border);
  max-width: 340px;
}
.ug-bell { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; }
.ug-bell:hover { transform: scale(1.15); }
.ug-l1 { font-size: 13px; font-weight: 600; line-height: 1.25; }
/* The credit's name deep-links to its Credits row; wraps rather than
   truncating (labels used to shrink to a single unhelpful word). */
.ug-name-link {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.ug-name-link:hover { color: var(--color-teal-text, #0E90A5); }
.ug-l2 { font-size: 11.5px; color: var(--color-gold-text); font-weight: 700; }
.ug-cell {
  position: relative; text-align: center; padding: 6px 0;
  border-bottom: 1px dashed var(--color-border);
  /* Same divider token as the dashed row lines, so the column seams
     read in every theme. Fainter tokens (subtle surface, the page
     background) both vanished against the navigator-dark panel. */
  border-left: 1px solid var(--color-border, #D9DEE3);
}
.ug-dot {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px dashed #C4CCD2; background: transparent; padding: 0;
  vertical-align: middle;
}
button.ug-dot { cursor: pointer; }
button.ug-dot:hover { transform: scale(1.15); }
.ug-dot.is-used { border: 2px solid #1B7F4B; background: #1B7F4B; }
.ug-dot.is-missed { border: 2px solid #B3261E; background: #B3261E; }
.ug-dot.is-unused { border: 2px solid #9AA3AC; background: #9AA3AC; }
.ug-dot.is-pending { border: 2px dashed #A8842C; background: rgba(236, 185, 71, 0.4); }
.ug-key { width: 12px; height: 12px; vertical-align: text-bottom; }
.ug-cell .ut-fix {
  position: absolute; left: 50%; bottom: calc(100% - 2px);
  transform: translateX(-50%);
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-button); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  padding: 6px; white-space: nowrap; z-index: 30;
}

/* Batch check-off page (from the digest email) */
.batch-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border);
}
.batch-row:last-of-type { border-bottom: 0; }
.batch-info { min-width: 0; flex: 1 1 300px; }
.batch-card { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); }
.batch-summary { font-size: 14px; line-height: 1.4; }
.batch-choices { display: flex; gap: var(--space-2); }
.batch-pick {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 6px 12px; margin: 0;
}
.batch-pick.is-used:has(input:checked) { background: var(--positive-050, #e8f4ed); border-color: var(--positive, #1B7F4B); color: var(--positive, #1B7F4B); }
.batch-pick.is-missed:has(input:checked) { background: var(--negative-050, #faeceb); border-color: var(--negative, #B3261E); color: var(--negative, #B3261E); }

/* Spending-style presets on the monthly calculator */
.preset-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2);
}
.preset-label {
  font-size: 13px; font-weight: 600; color: var(--color-text-secondary);
  margin-right: var(--space-1);
}
.preset-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-white); color: var(--color-text-primary);
  cursor: pointer;
  transition: all 140ms ease;
}
.preset-btn:hover {
  border-color: var(--color-teal-text); color: var(--color-teal-text);
  transform: translateY(-1px);
}
.preset-btn.is-active {
  background: var(--color-teal); border-color: var(--color-teal);
  color: var(--color-black);
}
.preset-emoji { font-size: 15px; }

/* Monthly/Annually segmented toggle on the calculator */
.period-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-white);
}
.period-btn {
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  padding: 7px 16px; border: 0; background: transparent;
  color: var(--color-text-secondary); cursor: pointer;
  transition: all 140ms ease;
}
.period-btn.is-active {
  background: var(--color-teal);
  color: var(--color-black);
}
.period-btn:hover:not(.is-active) { color: var(--color-teal-text); }

/* Running total of the selected spend ranges */
.spend-total {
  display: inline-flex; align-items: baseline; gap: 8px;
  background: rgba(52, 199, 205, 0.08);
  border: 1px solid rgba(52, 199, 205, 0.35);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
}
.spend-total .st-label { font-size: 13px; color: var(--color-text-secondary); }
.spend-total .st-amt {
  font-family: var(--font-heading); font-weight: 700; font-size: 18px;
  color: var(--color-text-primary);
}
.spend-total .st-unit { font-size: 12px; color: var(--color-text-muted); }
.spend-total .st-sep { color: var(--color-text-muted); }

/* Sign-up bonus history: filled steps (templates/web/_sub_history.html).
   The two fill tiers are FILL-role tokens with fixed companion inks
   (v3.css); everything else is a text/border-role token with its light
   value as fallback, since this partial also loads on legacy interiors. */
.sub-history-chart { width: 100%; height: auto; display: block; }
.sh-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sub-history-chart text { font-family: var(--font-heading); }
.sub-history-chart .sh-tick {
  font-family: var(--font-body); font-size: 10px;
  fill: var(--text-muted, #5d6b6e);
}
.sub-history-chart .sh-callout {
  font-size: 11px; font-weight: 600; fill: var(--text, #1f2a2c);
}
.sub-history-chart .sh-value { font-size: 11px; font-weight: 600; pointer-events: none; }
.sub-history-chart .sh-fill-light .sh-mark { fill: var(--gold, #ecb947); }
.sub-history-chart .sh-fill-mid .sh-mark { fill: var(--gold-500, #c9962a); }
.sub-history-chart .sh-fill-dark .sh-mark { fill: var(--gold-700, #8a6300); }
/* Companion inks: the fills' fixed constants, never a themed token. */
.sub-history-chart .sh-fill-light .sh-value,
.sub-history-chart .sh-fill-mid .sh-value { fill: #000000; }
.sub-history-chart .sh-fill-dark .sh-value { fill: #ffffff; }
.sub-history-chart .sh-bar, .sub-history-chart .sh-gap { outline: none; }
.sub-history-chart .sh-bar:hover .sh-mark,
.sub-history-chart .sh-bar:focus-visible .sh-mark { filter: brightness(1.08); }
.sub-history-chart .sh-bar:focus-visible .sh-hit,
.sub-history-chart .sh-gap:focus-visible rect {
  stroke: var(--link, #0a7183); stroke-width: 1.5;
}

/* SUB history legend: square swatches wearing the marks' own tokens */
.sh-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 12px; color: var(--text-muted, #5d6b6e);
  margin-bottom: 6px;
}
.sh-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sh-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.sh-swatch--light { background: var(--gold, #ecb947); }
.sh-swatch--mid { background: var(--gold-500, #c9962a); }
.sh-swatch--dark { background: var(--gold-700, #8a6300); }
.sh-swatch--ref {
  width: 14px; height: 0; border-radius: 0;
  border-top: 2px dashed var(--link, #0a7183);
}
.sh-swatch--gap {
  background: repeating-linear-gradient(135deg,
    var(--border-strong, #849194) 0 1px, var(--surface-alt, #f7faf9) 1px 4px);
  border: 1px solid var(--border-strong, #849194);
}

/* Support page topic picker */
.sup-topics { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sup-topic {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 7px 14px; font-size: 14px; font-weight: 600; margin: 0;
}
.sup-topic:has(input:checked) {
  background: rgba(52, 199, 205, 0.10); border-color: var(--color-teal);
}
.sup-topic input { accent-color: var(--color-teal); }

/* ---- Buy Me a Mile (/support-us/): donate card + donor wall ---- */
.donate-card {
  background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius-panel);
  padding: var(--space-6); box-shadow: var(--shadow-card);
}
.donate-label {
  display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: 13px; margin-bottom: var(--space-2);
}
.donate-presets { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.donate-chip {
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  padding: 8px 18px; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-white); border: 1.5px solid var(--color-border);
  transition: all 140ms ease;
}
.donate-chip:hover { border-color: var(--color-teal); }
.donate-chip.is-active {
  background: var(--color-teal); border-color: var(--color-teal);
  color: var(--color-black);
}
.donate-custom { width: 110px; }
.donate-hint { font-size: 12.5px; color: var(--color-text-muted); margin: var(--space-2) 0 0; }
.donate-empty {
  border: 1.5px dashed var(--color-border); border-radius: var(--radius-panel);
  padding: var(--space-8); text-align: center; color: var(--color-text-muted);
}
/* The departure board: masonry like the merchant tiles, gold ticket accent */
.donor-wall { columns: 240px; column-gap: var(--space-3); }
.donor-card {
  break-inside: avoid; margin-bottom: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-card); padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
}
.donor-name { font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; }
.donor-message { font-size: 14px; color: var(--color-text-secondary); margin: var(--space-2) 0 0; }
.donor-date { font-size: 11.5px; color: var(--color-text-muted); margin-top: var(--space-2); }

/* ---- Homepage v2 (/v2/): the card-companion positioning ------------------
   Review-preview alternate homepage. Reuses .hero, .feature-card, .how-band,
   and the card grid; everything below is v2-specific. Pale teal and pale
   gold section tints give the page rhythm without new brand colors. */
.v2-eyebrow {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--color-gold); margin-bottom: var(--space-3);
}
/* Headline reads as two natural lines; gold stays on "coupon book" only. */
.v2-hero h1 { max-width: none; font-size: 42px; }
.v2-reassure { font-size: 14px; color: rgba(255, 255, 255, 0.75); margin: var(--space-4) 0 0; }
.v2-final .v2-reassure { color: var(--color-text-muted); }

/* Hero product panel: a compact wallet snapshot on the dark hero */
.v2-hero-panel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-panel);
  padding: var(--space-5);
  backdrop-filter: blur(4px);
  align-self: center;
  min-width: 0;
}
.v2-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  color: var(--color-white); margin-bottom: var(--space-3);
}
.v2-sample-pill {
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  background: rgba(236, 185, 71, 0.2); color: var(--color-gold);
  border: 1px solid rgba(236, 185, 71, 0.45);
  padding: 1px 10px; border-radius: var(--radius-pill);
}
.v2-panel-rows { list-style: none; margin: 0; padding: 0; }
.v2-panel-rows li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: 7px 0; font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.v2-panel-rows li span { color: rgba(255, 255, 255, 0.75); }
.v2-panel-rows li strong { color: var(--color-white); text-align: right; }
.v2-panel-rows li strong em { font-style: normal; color: var(--color-teal); font-weight: 600; }
/* Value strip: a tone pulled from the hero gradient, not a hard black break */
.v2-strip { background: #0B2529; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.v2-strip-inner {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  padding-top: var(--space-5); padding-bottom: var(--space-5);
}
.v2-strip-inner span {
  color: rgba(255, 255, 255, 0.92); font-family: var(--font-heading);
  font-size: 15.5px; font-weight: 600;
}

/* Section tints and shared copy styles */
.v2-tint-gold { background: #FCF6E8; }
.v2-tint-teal { background: #EAF6F7; }
.v2-section-lead { color: var(--color-text-secondary); font-size: 16.5px; max-width: 62ch; margin-bottom: var(--space-6); }
.v2-sample-note { font-size: 13px; color: var(--color-text-muted); margin: var(--space-2) 0 var(--space-4); }

/* Before/after: the coupon book vs the plan */
.v2-beforeafter {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-5);
  align-items: stretch;
}
.v2-before, .v2-after {
  border-radius: var(--radius-panel); padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
/* The coupon book feels fragmented; the playbook feels ordered and calm. */
.v2-before {
  background: #FFFCF3; border: 1.5px dashed #D9C89A;
}
.v2-after {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-teal);
}
.v2-before h3, .v2-after h3 { font-size: 17px; margin-bottom: var(--space-4); }
.v2-arrow { align-self: center; font-size: 30px; color: var(--color-teal-text); font-weight: 700; }
.v2-coupon-chips { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-2); }
.v2-coupon-chips span {
  font-size: 13px; padding: 4px 12px; border-radius: 2px;
  background: var(--color-white); border: 1px dashed #C9B57E;
  color: var(--color-text-secondary);
  box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.05);
  transform: rotate(-2deg);
}
.v2-coupon-chips span:nth-child(2n) { transform: rotate(2.2deg) translateY(3px); }
.v2-coupon-chips span:nth-child(3n) { transform: rotate(-1deg) translateY(-2px); }
.v2-coupon-chips span:nth-child(5n) { transform: rotate(3deg); }
.v2-plan-list { list-style: none; margin: 0; padding: 0; }
.v2-plan-list li {
  padding: 6px 0; font-size: 14.5px;
  border-bottom: 1px dotted var(--color-border);
}
.v2-plan-list li:last-child { border-bottom: 0; }

/* Wallet section: one dominant recommendation, three supporting stats */
.v2-reco-layout {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-4); margin-bottom: var(--space-5); align-items: stretch;
}
.v2-reco {
  background: linear-gradient(135deg, #0c2a2e 0%, #10363b 100%);
  border-radius: var(--radius-panel); padding: var(--space-8) var(--space-6);
  color: var(--color-white);
  display: flex; align-items: center; gap: var(--space-6);
}
.v2-reco-copy { flex: 1; min-width: 0; }
.v2-reco-cta { margin-top: var(--space-6); }
.v2-reco-cta p { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); margin: var(--space-3) 0 0; max-width: 34ch; }
/* The printed playbook laid over a real card: same size, they live
   together in a wallet. Hovering fans them apart. */
.v2-reco-stack {
  position: relative; width: 46%; max-width: 340px; flex-shrink: 0;
  padding-top: 30px;
}
.v2-reco-card {
  position: absolute; top: 0; right: 4px; width: 90%;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transform: rotate(5deg);
  transition: transform 320ms ease;
}
.v2-reco-shot {
  position: relative; width: 100%;
  border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transform: rotate(-2deg);
  transition: transform 320ms ease;
}
.v2-reco-stack:hover .v2-reco-card,
.v2-reco-stack:focus-within .v2-reco-card { transform: rotate(9deg) translate(14px, -12px); }
.v2-reco-stack:hover .v2-reco-shot,
.v2-reco-stack:focus-within .v2-reco-shot { transform: rotate(-5deg) translate(-12px, 8px); }
@media (prefers-reduced-motion: reduce) {
  .v2-reco-card, .v2-reco-shot { transition: none; }
}
.v2-reco-kicker {
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-gold);
  margin-bottom: var(--space-3);
}
.v2-reco-main { font-family: var(--font-heading); font-size: 30px; line-height: 1.2; margin: 0 0 var(--space-3); }
.v2-reco-main strong { color: var(--color-teal); }
.v2-reco-sub { font-size: 15px; color: rgba(255, 255, 255, 0.75); margin: 0; }
.v2-reco-side { display: grid; gap: var(--space-3); }
.v2-mini {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-panel); padding: var(--space-6) var(--space-5) var(--space-4);
  box-shadow: var(--shadow-card); position: relative;
}
.v2-mini::before {
  content: attr(data-label);
  position: absolute; top: 8px; left: var(--space-5);
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--color-teal-text);
}
.v2-mini-big { font-family: var(--font-heading); font-weight: 700; font-size: 24px; margin: var(--space-2) 0 0; }
.v2-mini-note { font-size: 13px; color: var(--color-text-secondary); margin: 2px 0 0; }

/* Combined reminders + fee payoff: columns stretch together, and the
   left column's button row rides its bottom edge, level with the panel. */
.v2-twocol {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6); align-items: stretch; margin-bottom: var(--space-6);
}
.v2-attention { display: flex; flex-direction: column; }
.v2-col-head { font-size: 16px; margin-bottom: var(--space-4); }
.v2-remind-stack { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.v2-remind {
  font-size: 14.5px; font-weight: 600; padding: 10px 16px;
  border-radius: var(--radius-card); border: 1px solid var(--color-border);
  background: var(--color-white); box-shadow: var(--shadow-card);
}
.v2-remind.is-now { border-color: rgba(23, 140, 115, 0.5); background: rgba(23, 140, 115, 0.08); }
.v2-remind.is-soon { border-color: rgba(236, 185, 71, 0.7); background: rgba(236, 185, 71, 0.12); }
.v2-remind.is-unused { border-color: rgba(216, 74, 98, 0.45); background: rgba(216, 74, 98, 0.07); }
.v2-payoff {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-panel); padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
}
.v2-payoff .v2-col-head { margin-bottom: var(--space-3); }
.v2-payoff-big { font-family: var(--font-heading); font-weight: 700; font-size: 22px; margin: 0 0 var(--space-3); }
.v2-progress {
  height: 12px; border-radius: var(--radius-pill);
  background: var(--color-neutral-gray); overflow: hidden; margin-bottom: var(--space-4);
}
.v2-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-teal), #2ab1b8); border-radius: var(--radius-pill); }
.v2-payoff-rows { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.v2-payoff-rows li {
  display: flex; justify-content: space-between; padding: 6px 0;
  font-size: 14.5px; border-bottom: 1px dotted var(--color-border);
}
.v2-payoff-rows li:last-child { border-bottom: 0; }
.v2-payoff-shot {
  width: 100%; max-width: 380px; display: block;
  border: 1px solid var(--color-border); border-radius: 8px;
  margin-bottom: var(--space-3);
}
.v2-attention .v2-cta-row { margin-top: auto; padding-top: var(--space-6); }
/* The heading sits inside the left column, so the two columns start level
   and finish at roughly the same height. */
.v2-attention .v2-section-lead { margin-bottom: var(--space-5); }
.v2-fine { font-size: 13px; color: var(--color-text-muted); margin: 0; }
.v2-cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Gap prompts and final band */
.v2-gap-prompts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.v2-gap-prompts a {
  font-size: 14px; font-weight: 600; text-decoration: none;
  padding: 7px 16px; border-radius: var(--radius-pill);
  background: var(--color-white); border: 1px solid var(--color-border);
  color: var(--color-teal-text);
}
.v2-gap-prompts a:hover { border-color: var(--color-teal); }
.v2-final { background: var(--color-surface-subtle); border-top: 1px solid var(--color-border); }
.v2-final .v2-section-lead { max-width: 52ch; }

/* Question-tile titles read as real buttons: tiles appear all over the
   product, so the title should not be mistaken for a static image. */
.v2-tint-teal .feature-card h3 {
  display: inline-block;
  font-size: 15px; font-weight: 600;
  padding: 8px 16px;
  background: var(--color-white);
  border: 1.5px solid var(--color-teal-text);
  border-radius: var(--radius-button);
  color: var(--color-teal-text);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.v2-tint-teal .feature-card:hover h3,
.v2-tint-teal .feature-card:focus-visible h3 {
  background: var(--color-teal); border-color: var(--color-teal);
  color: var(--color-black);
}
.v2-request-line { font-size: 14px; color: var(--color-text-secondary); margin-bottom: var(--space-4); }

/* Compact how-it-works: it supports the product previews, not competes */
.v2-how { padding-top: 0; padding-bottom: 0; }
.v2-how .how-band { padding: var(--space-5) var(--space-6); margin-bottom: 0; }
.v2-how .how-step p { font-size: 13.5px; }

@media (max-width: 900px) {
  .v2-hero h1 { font-size: 34px; }
  .v2-br { display: none; }
  .v2-beforeafter { grid-template-columns: 1fr; }
  .v2-arrow { transform: rotate(90deg); justify-self: center; }
  .v2-reco-layout { grid-template-columns: 1fr; }
  .v2-reco { padding: var(--space-6) var(--space-5); flex-direction: column; align-items: stretch; }
  .v2-reco-stack { width: 100%; max-width: none; margin-top: var(--space-4); }
  .v2-reco-main { font-size: 24px; }
  .v2-twocol { grid-template-columns: 1fr; }
  .v2-strip-inner { flex-direction: column; gap: var(--space-3); }
}

/* =====================================================================
   Mobile layer (audit 2026-07-14). Lives at the END of the file on
   purpose: these override component styles of equal specificity, so
   source order is what makes them win. The block that used to sit
   mid-file silently lost that fight.
   ===================================================================== */

/* Anchored landings (deep links, gold highlight flashes, return links)
   must arrive ON SCREEN, not tucked under the sticky header. Applies to
   every scrollIntoView / :target scroll, all widths. */
[id], summary, .flash-outline { scroll-margin-top: 84px; }

/* Device-matched wording: one link, two labels. The cutoff matches the
   header's burger breakpoint so "mobile" means "sees the burger menu". */
.only-mobile { display: none; }
@media (max-width: 820px) {
  .only-mobile { display: inline; }
  .only-desktop { display: none; }
}

/* Scroll cues: an inset edge shadow says "more content this way" and a
   class toggle from web.js keeps it honest about which way. Inset
   shadows paint on the container itself, so they hold still while the
   content scrolls beneath. */
.table-scroll.cue-right { box-shadow: inset -18px 0 14px -14px rgba(12, 42, 46, 0.30); }
.table-scroll.cue-left { box-shadow: inset 18px 0 14px -14px rgba(12, 42, 46, 0.30); }
.table-scroll.cue-left.cue-right {
  box-shadow: inset -18px 0 14px -14px rgba(12, 42, 46, 0.30),
              inset 18px 0 14px -14px rgba(12, 42, 46, 0.30);
}
/* One-time swipe hint under the utilization grid; web.js removes it on
   the first real swipe. Hidden where the grid fits without scrolling. */
.ug-swipe-hint {
  display: none; font-size: 12px; color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}
.table-scroll.cue-right + .ug-swipe-hint { display: block; }

/* Collapsible filter panel on the cards list: phones get a one-line
   disclosure instead of two screens of stacked selects. web.js opens it
   on wide screens where the space is free. */
details.filter-collapse > summary {
  cursor: pointer; font-weight: 600; list-style: none;
}
details.filter-collapse > summary::-webkit-details-marker { display: none; }
details.filter-collapse > summary::after { content: ' ▾'; color: var(--color-text-muted); }
details.filter-collapse[open] > summary::after { content: ' ▴'; }
@media (min-width: 641px) {
  details.filter-collapse > summary { display: none; }
}

@media (max-width: 640px) {
  /* Whitespace discipline: tighter section padding on phones. */
  .web-container { padding: var(--space-5) var(--space-3); }
  .credit-group, .pb-gaps-panel { padding: var(--space-3) var(--space-3); }

  /* Tab bar: chips wrap into fully visible rows. Navigation never hides
     off-screen; only data tables earn a horizontal scroll (with cues). */
  .tab-nav { gap: var(--space-1) var(--space-2); }
  .tab-btn { font-size: 13px; padding: 7px 12px; }

  /* Playbook header stacks left on phones: title line, then one tidy
     action row, instead of buttons zigzagging around the wrap. */
  .pb-header { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .pb-header h2 { width: 100%; }
  .pb-header .text-end { text-align: left; }
  .pb-header .text-end .d-flex { justify-content: flex-start !important; }

  /* Playbook stacks; merchant tiles fill the width two-up. Grid items
     get min-width: 0 so an unwrappable chip row cannot blow the single
     column past the phone viewport. */
  .pb-columns { grid-template-columns: 1fr; }
  .pb-columns > *, .pb-tile, .pb-tiles > * { min-width: 0; }
  .pb-tiles { grid-template-columns: 1fr; }
  .pb-merch { columns: 2; }
  .pb-gap-cat { min-width: 0; width: 100%; }
  .pb-col-title { margin-top: var(--space-2); }

  /* Wide playbook/credits tables: readable columns, scroll for the
     rest; the cue shadows carry the "more to the right" message. */
  .pb-table th { white-space: nowrap; }
  .pb-table td { font-size: 13px; padding-top: 7px; padding-bottom: 7px; }
  /* The fit variant trades nowrap for wrapping everywhere so all four
     columns share a phone viewport without a scrollbar. */
  /* .table thead th.sortable (style.css) pins headers nowrap; match its
     specificity so the fit variant's headers may wrap. */
  .table.pb-fit thead th { white-space: normal; }
  .pb-fit .pb-t-cat, .pb-fit .pb-t-rate { white-space: normal; }
  .pb-fit .pb-t-card { min-width: 0; }
  .pb-fit .pb-t-perks { min-width: 0; }
  .pb-perks { gap: 2px 8px; }
  .pb-perks .perk-link { white-space: normal; }
  /* Bootstrap's .table > :not(caption) > * > * padding outguns a bare
     class; mirror its shape to slim the gutters. */
  .table.pb-fit > :not(caption) > * > * { padding-left: 6px; padding-right: 6px; }
  .table.pb-fit > :not(caption) > * > :first-child { padding-left: 0; }
  .table.pb-fit > :not(caption) > * > :last-child { padding-right: 0; }
  /* Track credits on a phone: no sideways scroll at all. The header row
     goes, each credit stacks as description, then a facts line (card,
     merchant, amount, cadence), then its reminder controls. Plain flex, so browsers without subgrid
     get the same phone layout. */
  .credits-center .pb-table { min-width: 0; }
  .pb-credits, .pb-credits > tbody { display: block; }
  .pb-credits > thead { display: none; }
  .pb-credits tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px;
    padding: 12px 0; border-bottom: 1px solid var(--color-border);
  }
  .table.pb-credits > :not(caption) > * > * { display: block; padding: 0; border: 0; }
  .pb-credits td.pb-t-credit {
    flex: 1 1 100%; min-width: 0; max-width: none;
    font-size: 14px; line-height: 1.45; margin-bottom: 2px;
  }
  /* Three quiet lines under the description, all left-aligned so the
     eye runs straight down: the card (small, secondary), one facts
     line "Uber · $15 / 1 month", then the reminder controls. */
  .pb-credits td.pb-c-card { flex: 1 1 100%; min-width: 0; }
  .pb-credits .pb-cardname { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
  .pb-credits .pb-cardcell img.pb-thumb { width: 26px; }
  .pb-credits td.pb-c-merch, .pb-credits td.pb-c-val, .pb-credits td.pb-c-reset {
    font-size: 13px; color: var(--color-text-secondary);
  }
  .pb-credits td.pb-c-merch:has(.pb-nomerch) { display: none; }
  .pb-credits td.pb-c-merch::after { content: " ·"; color: var(--color-text-muted); }
  .pb-credits td.pb-c-val { order: 1; margin-left: 0; font-weight: 700; color: var(--color-text-primary); }
  /* No header row to name the cadence, so it follows the amount. */
  .pb-credits td.pb-c-reset { order: 2; }
  .pb-credits td.pb-c-reset::before { content: "/ "; }
  .pb-credits td.pb-c-rem { order: 3; flex: 1 1 100%; margin-top: 4px; }
  .pb-credits td.pb-c-score { order: 4; flex: 1 1 100%; margin-top: 8px; }
  .pb-credits .rem-cell { flex-wrap: wrap; row-gap: 4px; }
  .cc-scoreline { justify-content: flex-start; }

  /* Show-the-math breakdown: compact rows so it stops being a
     two-thousand-pixel wall. */
  details.breakdown .table th, details.breakdown .table td {
    font-size: 12px; padding: 4px 8px;
  }

  /* Utilization grid: narrower label column so several months fit,
     smaller dots but a full-size tap area. */
  .ug-table th.ug-name { min-width: 128px; }
  .ug-label { max-width: 140px; padding-right: 6px; }
  .ug-l1 { font-size: 12px; }
  .ug-table th.ug-mh { width: 24px; min-width: 24px; }
  .ug-dot { width: 14px; height: 14px; }
  .ut-slot { position: static; }
  .ut-stat { flex: 1 1 40%; }

  /* The Used/Missed/Clear bubble becomes a bottom action sheet: fixed
     positioning escapes the scroller that was clipping it mid-button.
     It rests ABOVE the v3 bottom tab bar (--tabbar-h, plus the phone's
     home-indicator safe area), which is fixed to the viewport edge and
     would otherwise cover the buttons; the 0px fallback keeps the sheet
     at the bottom on a page without the bar. */
  .ug-cell .ut-fix, .cc-cycles .ut-fix {
    position: fixed; left: 50%;
    bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom, 0px) + 12px);
    top: auto; transform: translateX(-50%);
    padding: 10px; gap: 8px; z-index: 60;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.30);
  }
  .ug-cell .ut-fix .ut-act, .cc-cycles .ut-fix .ut-act { font-size: 14px; padding: 8px 14px; }
}

/* Elite-status editor (preferences + wallet). Each program is one row:
   name, tier picker, save. Rows stack their pieces on narrow screens so
   the page never needs to scroll sideways. */
.loyalty-status-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.loyalty-status-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.loyalty-status-name { flex: 1 1 40%; min-width: 140px; margin: 0; font-weight: 600; }
/* The select lives inside the column-flex .loyalty-status-pick, so it must
   NOT carry a vertical flex-basis (that stretched it to 200px tall). Full
   width, and an explicit small-control height: a site-wide rule forces
   12px vertical padding on form controls, which overrides form-select-sm
   and left the box ~47px tall, so pin the padding/line-height here to sit
   level with the Save button beside it. */
.loyalty-status-select {
  flex: 0 0 auto;
  width: 100%;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 20px;
}
.loyalty-status-save { flex: 0 0 auto; }
@media (max-width: 560px) {
  .loyalty-status-row { align-items: stretch; }
  .loyalty-status-name { flex-basis: 100%; }
  .loyalty-status-save { align-self: flex-start; }
}

/* Elite-status nudges on the card detail page: one line per program,
   comfortably spaced. The gold badge (light gold, black text) marks the
   states worth acting on; already-held states read as plain muted lines. */
.status-nudge { padding: var(--space-2) 0; line-height: 1.5; }
.status-nudge + .status-nudge { border-top: 1px solid var(--color-border, #e5e7eb); }
.status-nudge--already_equal,
.status-nudge--already_higher { color: var(--color-text-muted, #6b7280); }
.status-nudge .badge-gold { margin-right: var(--space-1); }

/* "For your wallet" fit panel and issuer application rules on the card
   detail page: plain wrapping text lines in the status-nudge rhythm.
   No fixed widths or tables, so 390px never scrolls sideways. Caution
   rows read muted; wins wear the light gold badge (black text). */
.fit-insight,
.issuer-rule { padding: var(--space-2) 0; line-height: 1.5; }
.fit-insight + .fit-insight,
.issuer-rule + .issuer-rule { border-top: 1px solid var(--color-border, #e5e7eb); }
.fit-insight--caution { color: var(--color-text-muted, #6b7280); }
.fit-insight .badge-gold,
.fit-insight .badge-medium { margin-right: var(--space-1); }
/* truncated insight tails (e.g. the full transfer partner list),
   revealed inline by the site's show-more toggle */
.fit-insight .collapse-extra { display: none; }
.fit-insight[data-expandable].is-expanded .collapse-extra { display: inline; }
.fit-matches { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--color-border, #e5e7eb); }
/* Personal read under an issuer rule: the wallet's own 5/24 count, cap
   tally, or held-before flag. Plain wrapping text, badge only when the
   line is worth acting on. */
.rule-personal { margin-top: 2px; font-size: 14px; }
.rule-personal--clear { color: var(--color-text-muted, #6b7280); }
.rule-personal .badge-gold,
.rule-personal .badge-medium { margin-right: var(--space-1); }

/* Loyalty statuses tab: program logos and the picker column. Height is the
   single binding dimension so every logo reads the same size regardless of
   aspect ratio; max-width is generous enough that wide wordmarks are never
   clipped below that height (the old 56px cap shrank them and made the row
   of logos look inconsistent). */
.loyalty-logo {
  height: 26px; width: auto; max-width: 120px; object-fit: contain;
  vertical-align: middle; margin-right: 8px; border-radius: 3px;
}
.loyalty-held { margin-bottom: var(--space-4); }

/* Status-you-hold tiles: stacked and wrapped so short benefit lists no
   longer leave a river of white space down the right of the page. */
.loyalty-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.loyalty-tile {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.lt-program { font-size: 12px; font-weight: 700; color: var(--color-text-muted, #6b7280);
  text-transform: uppercase; letter-spacing: 0.02em; }
.lt-status { font-size: 16px; font-weight: 700; }
.lt-source { font-size: 12px; font-weight: 400; color: var(--color-text-muted, #6b7280); }

/* Tier scale: pips left (lowest) to right (highest); reached rungs fill
   in, the current one is ringed. Names sit under their pip and wrap. */
.lt-scale {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 4px; align-items: flex-start;
}
.lt-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 3px; text-align: center; }
.lt-pip {
  width: 100%; height: 6px; border-radius: 999px;
  background: var(--color-border, #e5e7eb);
}
.lt-step.is-reached .lt-pip { background: var(--color-gold, #ecb947); }
/* Ring and emphasis take the strong-TEXT token, not --color-black:
   black is the fixed fill-companion shade and disappears on dark. */
.lt-step.is-current .lt-pip { box-shadow: 0 0 0 2px var(--color-text-primary, #111); }
.lt-step-name {
  font-size: 10px; line-height: 1.15;
  color: var(--color-text-muted, #6b7280);
}
.lt-step.is-current .lt-step-name { color: var(--color-text-primary, #111); font-weight: 700; }

/* Match opportunities woven into the tiles. A dotted ring marks a rung
   a status match can reach (accent-as-text token, never a fill); the
   note under the ladder says how and links out. Only rendered when the
   landing tier beats what the member, or their Companion, holds. */
.lt-legend {
  margin: 2px 0 0; font-size: 12px;
  color: var(--color-text-muted, #6b7280);
}
.lt-step.is-opportunity .lt-pip {
  background: transparent;
  outline: 2px dotted var(--link, #0e90a5);
  outline-offset: -1px;
}
.lt-step.is-opportunity .lt-step-name { color: var(--link, #0e90a5); }
.lt-matches {
  margin-top: auto; padding-top: var(--space-2);
  border-top: 1px dotted var(--color-border, #e5e7eb);
  display: flex; flex-direction: column; gap: var(--space-2);
}
/* The card route into a prospect program, sitting beside the match
   route. Same quiet register as a match line; the link carries the
   accent (accent-as-text token, never a fill). */
.lt-grant-route {
  margin: 0; font-size: 12.5px; line-height: 1.4;
  color: var(--color-text-secondary, #374151);
}
.lt-grant-route a { color: var(--link, #0e90a5); }
.lt-match-line {
  margin: 0; font-size: 12.5px; line-height: 1.4;
  color: var(--color-text-secondary, #374151);
}
/* The bold lead carries the "you could get this" promise on tiles
   whose landing tier is decided at review (no dotted rung to point at). */
.lt-match-line strong { color: var(--color-text-primary, #111); }
.lt-match-actions {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.lt-match-actions form { margin: 0; }
.lt-match-actions .lt-more { margin-top: 0; }
.lt-match .collapse-extra { display: none; }
.lt-match.is-expanded .collapse-extra { display: block; }
.lt-match-details { font-size: 12px; }
.lt-match-details p { margin: 0 0 3px; line-height: 1.4; }
.lt-match-meta { color: var(--color-text-muted, #6b7280); }

.lt-benefit-list {
  list-style: disc; margin: 0; padding-left: 18px;
  font-size: 13px; color: var(--color-text-secondary, #374151);
}
.lt-benefit-list li { margin: 2px 0; line-height: 1.4; }
.lt-benefit-list li.collapse-extra { display: none; }
[data-expandable].is-expanded .lt-benefit-list li.collapse-extra { display: list-item; }
.lt-more {
  margin-top: 4px; padding: 0; border: 0; background: none;
  /* --color-link never existed; the old fallback painted this generic
     blue in every theme. --link is the house accent-as-text token. */
  font-size: 12px; font-weight: 600; color: var(--link, #0e90a5); cursor: pointer;
}
.loyalty-status-pick { flex: 1 1 200px; max-width: 100%; display: flex; flex-direction: column; gap: 2px; }
/* Companion out-ranks you here: a full-width sub-line under the row's
   controls. flex-basis 100% forces its own line, so the name, picker, and
   buttons above keep their columns. */
/* Companion out-ranks you here: sits inside the picker column, directly
   under its dropdown and left-aligned to it. Tight top margin ties it to
   the control above; the companion name reuses the wallet playbook's
   .owner-badge chip (left margin reset since it leads the line). */
.loyalty-status-companion {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted, #6b7280);
}
.loyalty-status-companion .owner-badge { margin-left: 0; }
@media (max-width: 560px) {
  .loyalty-status-pick { flex-basis: 100%; }
}

/* ===== My Cards v2 preview (scoped under .mycards-v2; the live page is
   untouched). Overview panel + sticky tabs + 2-col mobile tab grid. ===== */

/* At-a-glance panel: light-surface variant of the homepage hero rows. */
.wallet-overview {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.wallet-overview .ov-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.wallet-overview .ov-title { font-weight: 700; }
.wallet-overview .ov-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.wallet-overview .ov-rows { list-style: none; margin: 0; padding: 0; }
.wallet-overview .ov-rows li { border-bottom: 1px solid var(--color-border, #e5e7eb); }
.wallet-overview .ov-rows li:last-child { border-bottom: 0; }
.wallet-overview .ov-rows a {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); padding: 7px 2px;
  font-size: 14px; text-decoration: none; color: inherit;
}
.wallet-overview .ov-rows a:hover { background: var(--color-surface-subtle, #f4f6f8); }
.wallet-overview .ov-rows span { color: var(--color-text-muted, #6b7280); }
.wallet-overview .ov-rows strong { text-align: right; }

/* Sticky tab nav, sitting under the sticky site header. */
.mycards-v2 .tab-nav {
  position: sticky;
  top: var(--header-h, 64px);
  z-index: 30;                        /* below the v3-header (40) and its
                                          open dropdown menu (50), so the
                                          menu is never covered on scroll */
  background: var(--color-soft-white, #fbfbf9);
  scroll-margin-top: var(--header-h, 64px);
  padding-top: var(--space-2);
}
:root { --header-h: 64px; }
@media (max-width: 820px) { :root { --header-h: 56px; } }

/* Fine-tune reveal: per-credit bells and lead-day inputs stay hidden
   until the details opens (JS toggles show-finetune on .credits-center). */
.mycards-v2 .rem-finetune { display: none; }
.mycards-v2 .credits-center.show-finetune .rem-finetune {
  display: inline-flex; align-items: center; gap: var(--space-1);
}
.credit-finetune summary { cursor: pointer; font-weight: 600; }
.credit-finetune .cf-body { padding: var(--space-2) 0 0 var(--space-3); }

@media (max-width: 640px) {
  /* 2-column tab grid: four tidy rows instead of ragged pill wrap. */
  .mycards-v2 .tab-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1) var(--space-2);
  }
  .mycards-v2 .tab-btn {
    width: 100%; text-align: center;
    font-size: 13px; padding: 8px 6px;
    min-width: 0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  /* A real phone's visible viewport is ~660px; every saved pixel above
     the tabs is discoverability. Tighter panel, rows, and headline. */
  .mycards-v2 h1 { margin-bottom: 2px; font-size: 26px; }
  .mycards-v2 .signin-prompt { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); }
  .wallet-overview { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
  .wallet-overview .ov-rows a { font-size: 13px; padding: 5px 2px; }
  .wallet-overview .ov-rows strong { max-width: 55%; }
}

/* Companion tier on the Status-you-hold scale: their rung wears a ring
   in the companion-badge teal (the owner-badge palette), higher or
   lower. When companion and holder share the rung, both rings stack. */
.lt-step.is-companion .lt-pip { box-shadow: 0 0 0 2px rgba(52, 199, 205, 0.55); }
.lt-step.is-current .lt-pip { box-shadow: 0 0 0 2px var(--color-text-primary, #111); }
.lt-step.is-current.is-companion .lt-pip {
  box-shadow: 0 0 0 2px var(--color-black, #111), 0 0 0 4px rgba(52, 199, 205, 0.55);
}

/* Companion's higher-tier benefits under the holder's own list. */
.lt-companion {
  border-top: 1px dashed var(--color-border, #e5e7eb);
  padding-top: var(--space-2);
}
.lt-companion-head { font-size: 12px; margin-bottom: 2px; }
.lt-companion .owner-badge { margin-left: 0; }

/* Companion-only tile: their benefits are the tile's only list, so no
   separator pretending there is a list above it. */
.loyalty-tile.is-companion-only .lt-companion { border-top: 0; padding-top: 0; }

/* Partial-usage adjust form on the reminder action landing page. */
.pa-partial-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pa-partial-form input { width: 90px; }