/* ============================================================
   Splitit v2 — polished dark fintech system
   Sharper radii · hairline lists · floating insight · safe areas
   Brand: charcoal/teal/snow, tangerine = CTA only.

   TOKENS: every color below resolves 1:1 to a named token in
   splitit-brand/system.css ("Splitit Brand Guidelines v1.0").
   No invented hex values. See TOKEN-MAP.md for the full table.
   Exceptions (documented in TOKEN-MAP.md §3): functional status
   colors (--pos/--warn/--danger — no equivalents exist in the
   brand guide; flagged for brand sign-off) and third-party
   merchant/network marks (.m-*, Mastercard circles).
   ============================================================ */
@import url('assets/vendor/fonts.css');

:root {
  /* ---- Brand tokens (verbatim from splitit-brand/system.css) ---- */
  --st-charcoal: #1D252D;
  --st-teal: #0B8286;
  --st-tropical-teal: #20A5A6;
  --st-snow: #FFFFFF;
  --st-charcoal-50: #434950;
  --st-charcoal-40: #686E73;
  --st-charcoal-30: #8E9296;
  --st-charcoal-20: #B4B6B9;
  --st-charcoal-10: #D2D3D5;
  --st-teal-50: #34979A;
  --st-teal-40: #5CACAE;
  --st-teal-30: #85C1C3;
  --st-teal-20: #AED5D7;
  --st-teal-10: #CEE6E7;
  --st-tropical-teal-50: #45B4B5;
  --st-tropical-teal-20: #B5E1E1;
  --st-tropical-teal-10: #D2EDED;
  --st-forest-green: #064143;
  --st-jet-black: #13191E;
  --st-slate: #5D737E;
  --st-lunar-gray: #CFD5D9;
  --st-platinum: #F5F5F7;
  --st-lichen: #CAE9EA;
  /* RESTRICTED: CTA buttons on digital surfaces ONLY (system.css §4). */
  --st-tangerine: #FFA963;
  --st-tangerine-hover: #F09548;
}

:root,
:root[data-theme="dark"] {
  /* Charcoal / Jet Black scale per build plan item 1 */
  --bg: var(--st-jet-black);
  --surface: var(--st-charcoal);
  --surface-2: var(--st-charcoal-50);
  --device-bg: var(--st-jet-black);
  --line: color-mix(in srgb, var(--st-snow) 8%, transparent);
  --line-strong: color-mix(in srgb, var(--st-snow) 14%, transparent);
  --ink: var(--st-snow);
  --muted: var(--st-charcoal-20);
  --faint: var(--st-charcoal-30);
  --teal: var(--st-tropical-teal);
  --teal-deep: var(--st-teal);
  --teal-soft: color-mix(in srgb, var(--st-tropical-teal) 14%, transparent);
  --finn-ink: var(--st-tropical-teal);
  --finn-path2: var(--st-snow);
  --finn-eye: var(--st-snow);
  --finn-soft: var(--st-lichen);
  --finn-mark: var(--finn-ink);
  --tangerine: var(--st-tangerine);
  --tangerine-hover: var(--st-tangerine-hover);
  --accent-ink: var(--st-charcoal);
  --meter-track: color-mix(in srgb, var(--st-snow) 7%, transparent);
  --full-pay: var(--st-slate);
  --homebar: color-mix(in srgb, var(--st-snow) 32%, transparent);
  --scrim: color-mix(in srgb, var(--st-jet-black) 55%, transparent);
  --fab-shadow: 0 12px 28px color-mix(in srgb, var(--st-jet-black) 40%, transparent);
  --sheet-shadow: 0 -20px 50px color-mix(in srgb, var(--st-jet-black) 50%, transparent);
  --cta-shadow: 0 12px 26px color-mix(in srgb, var(--st-tropical-teal) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--st-snow) 25%, transparent);
  /* ONE glass recipe for every piece of chrome. The status bar, the top bar and
     the bottom dock are the same material and must read identically — they used
     to drift (72% vs 46%, saturate 1.35 vs 1.32). Change the frost here, never
     per-surface. --chrome-bg / --dock-bg stay as aliases so existing rules and
     the Figma token names keep resolving. */
  --frost-bg: color-mix(in srgb, var(--st-jet-black) 46%, transparent);
  --frost-filter: blur(28px) saturate(1.32);
  --frost-sheen-top: color-mix(in srgb, var(--st-snow) 8%, transparent);
  --frost-sheen-bottom: color-mix(in srgb, var(--st-snow) 2%, transparent);
  --chrome-bg: var(--frost-bg);
  --chrome-border: color-mix(in srgb, var(--st-snow) 12%, transparent);
  --dock-bg: var(--frost-bg);
  --dock-sheen-top: var(--frost-sheen-top);
  --dock-sheen-bottom: var(--frost-sheen-bottom);
  --dock-topline: color-mix(in srgb, var(--st-snow) 12%, transparent);
  --dock-shadow: 0 -10px 28px color-mix(in srgb, var(--st-jet-black) 26%, transparent);
  --dock-active-bg: color-mix(in srgb, var(--st-tropical-teal) 16%, transparent);
  --dock-active-ring: color-mix(in srgb, var(--st-tropical-teal) 28%, transparent);
  --dock-split-ring: color-mix(in srgb, var(--st-jet-black) 50%, transparent);
  /* Functional status colors — NOT in the brand guide; single point of
     definition, flagged for brand sign-off (TOKEN-MAP.md §3). */
  --pos: #57c98a;
  --warn: var(--st-tangerine-hover);
  --danger: #ef8a82;
  --r-card: 16px;
  --r-tile: 12px;
  --r-chip: 8px;
  /* 59 = the safe-area inset on every current Dynamic Island iPhone, and the
     design baseline. 44 was the old notch value: too short, so the top bar
     landed at y=44 and its buttons sat under the Island (which ends at ~48).
     Designing to the largest current inset clears it on every device; smaller
     insets just leave a little more air. Static Figma frames mirror this 59. */
  --statusbar-h: 59px;
  --homebar-h: 34px;
  /* Device safe areas, resolved once. Everything downstream reads these tokens
     rather than env() directly, so a platform class can restate them and the
     prototype can override them to preview a notch it isn't actually running on. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --screen-pad: clamp(14px, 5.1vw, 22px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-fast: 150ms;
  --motion-exit: 130ms;
  --motion-med: 280ms;
  --motion-slow: 720ms;
  --font: 'Reddit Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Merriweather Sans', -apple-system, system-ui, sans-serif;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: var(--st-platinum);
  --surface: var(--st-snow);
  --surface-2: var(--st-platinum);
  --device-bg: var(--st-lunar-gray);
  --line: color-mix(in srgb, var(--st-charcoal) 10%, transparent);
  --line-strong: color-mix(in srgb, var(--st-charcoal) 17%, transparent);
  --ink: var(--st-charcoal);
  --muted: var(--st-slate);
  --faint: var(--st-charcoal-30);
  --teal: var(--st-teal);
  --teal-deep: var(--st-forest-green);
  --teal-soft: color-mix(in srgb, var(--st-teal) 11%, transparent);
  --finn-ink: var(--st-teal);
  --finn-path2: var(--st-snow);
  --finn-eye: var(--st-snow);
  --finn-soft: var(--st-lichen);
  --finn-mark: var(--finn-ink);
  /* Brand defines ONE Tangerine + one hover — identical in both themes. */
  --tangerine: var(--st-tangerine);
  --tangerine-hover: var(--st-tangerine-hover);
  --accent-ink: var(--st-snow);
  --meter-track: color-mix(in srgb, var(--st-charcoal) 9%, transparent);
  --full-pay: var(--st-lunar-gray);
  --homebar: color-mix(in srgb, var(--st-charcoal) 28%, transparent);
  --scrim: color-mix(in srgb, var(--st-charcoal) 32%, transparent);
  --fab-shadow: 0 14px 30px color-mix(in srgb, var(--st-charcoal) 18%, transparent);
  --sheet-shadow: 0 -18px 48px color-mix(in srgb, var(--st-charcoal) 22%, transparent);
  --cta-shadow: 0 12px 26px color-mix(in srgb, var(--st-teal) 24%, transparent), inset 0 1px 0 color-mix(in srgb, var(--st-snow) 28%, transparent);
  /* Same single frost recipe, restated for light. See :root for the rationale. */
  --frost-bg: color-mix(in srgb, var(--st-snow) 46%, transparent);
  --frost-sheen-top: color-mix(in srgb, var(--st-snow) 10%, transparent);
  --frost-sheen-bottom: color-mix(in srgb, var(--st-snow) 3%, transparent);
  --chrome-bg: var(--frost-bg);
  --chrome-border: color-mix(in srgb, var(--st-charcoal) 10%, transparent);
  --dock-bg: var(--frost-bg);
  --dock-sheen-top: var(--frost-sheen-top);
  --dock-sheen-bottom: var(--frost-sheen-bottom);
  --dock-topline: color-mix(in srgb, var(--st-charcoal) 12%, transparent);
  --dock-shadow: 0 -10px 28px color-mix(in srgb, var(--st-charcoal) 10%, transparent);
  --dock-active-bg: color-mix(in srgb, var(--st-teal) 12%, transparent);
  --dock-active-ring: color-mix(in srgb, var(--st-teal) 24%, transparent);
  --dock-split-ring: color-mix(in srgb, var(--st-snow) 58%, transparent);
  --pos: #1f9b62;
  --warn: #bd7b22;
  --danger: #ce514a;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Form controls don't inherit font-family, so anything that doesn't set one
   explicitly falls back to the UA default (Arial) — this caught the Finn
   signal bar and the month chips. */
button, input, select, textarea { font-family: inherit; }

html, body { margin: 0; background: var(--device-bg); }

/* Any author `display` beats the browser's own [hidden] rule, so a .row or .tx with
   display:grid stays on screen while el.hidden reports true — the element lies about
   itself and JS tests pass against a visibly broken UI. Make hidden mean hidden. */
[hidden] { display: none !important; }

/* Fluid mobile canvas — no fixed 390px device assumption.
   Lays out correctly from 320px up; capped at 430px logical width
   (largest current phone class) and centered beyond that.
   Tested at 360 / 390 / 430 per build plan item 3. */
body.mobile {
  width: 100%;
  max-width: 430px;
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

/* ── Phone frame + safe areas ─────────────────────────────────── */
.app {
  position: relative;
  width: 100%;
  height: 100vh;   /* fallback: older Android System WebView has no svh */
  height: 100svh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* max(), NOT sat + bar-h. The inset zone IS the status bar area — adding them
     stacked a 59px inset on top of a 44px bar and reserved 103px of dead chrome.
     Must stay identical to .statusbar's height or a gap opens above the top bar. */
  padding-top: max(var(--sat), var(--statusbar-h));
  padding-bottom: max(var(--sab), var(--homebar-h));
}
.app.has-dock,
.app:has(.dock) {
  padding-bottom: 0;
}

/* Preserve the exact phone frame when embedded in the index gallery */
body.mobile.framed, body.mobile.framed .app { width: 390px; height: 844px; max-width: none; }

/* Android: shorter status bar, gesture pill instead of the home indicator.
   Applied by app.js from the UA, or forced with ?platform=android. */
.app.android { --statusbar-h: 30px; --homebar-h: 18px; }

/* No backdrop-filter (older Android System WebView, some Flutter webview stacks).
   Every translucent surface below leans on the blur to separate itself from the
   content behind it; unblurred they wash out or vanish. Trade the glass for
   opacity — legibility is not the thing to lose here. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* One override, because --chrome-bg and --dock-bg both alias --frost-bg. */
  :root { --frost-bg: color-mix(in srgb, var(--st-jet-black) 96%, transparent); }
  :root[data-theme="light"] { --frost-bg: color-mix(in srgb, var(--st-snow) 96%, transparent); }
  /* Reveal button is the only way to see the full card number — it must not fade out */
  .vc-reveal { background: color-mix(in srgb, var(--st-jet-black) 78%, transparent); }
  .map-card, .map-pin-chip, .map-online-list { background: var(--surface); }
}

/* Status bar. Occupies the safe-area inset zone itself — the band the OS reserves
   for the clock and the Island. Height must stay identical to .app's padding-top.
   Centered, not bottom-pinned: at 59 that puts the clock's centre on y=29.5, which
   is exactly the Dynamic Island's centre, so the two read as one row. */
.statusbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: max(var(--sat), var(--statusbar-h));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(18px, 6.6vw, 28px);
  font: 600 15px/1 var(--font);
  color: var(--ink);
  z-index: 12;
  pointer-events: none;
  /* Same glass as the dock — tint, sheen and filter all come from the frost
     tokens. The blur enhances the tint; it must never be the only thing making
     the bar readable, or the clock disappears on any Android WebView without
     backdrop-filter support.

     NO SHEEN GRADIENT HERE — flat tint only. The status bar and the top bar are
     two stacked elements that read as ONE band. Giving each its own 8%→2% sheen
     made the status bar fade to 2% by y=59 and the top bar jump straight back to
     8%, producing a hard step at the seam that reads as a gradient across the
     chrome. The dock can carry a sheen because it is a single element. Frost
     parity is the tint + the filter, not the decoration. */
  background: var(--chrome-bg);
  border-bottom: 0;
  backdrop-filter: var(--frost-filter);
  -webkit-backdrop-filter: var(--frost-filter);
}
.statusbar .sig { display: flex; align-items: center; gap: 6px; }
.statusbar .sig svg { height: 13px; width: auto; }

/* Home indicator (iOS) / gesture pill (Android). Stands in for the one the OS
   draws, so it stays pinned to the physical bottom edge — no --sab offset, or it
   would float up into the content and stop lining up with the real indicator. */
.homebar {
  position: absolute;
  left: 50%; bottom: 9px;
  width: 138px; height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--homebar);
  z-index: 16;
}
/* Android's pill is shorter, thinner, and sits tighter to the edge */
.app.android .homebar { width: 108px; height: 4px; bottom: 7px; }

.scroll {
  flex: 1;
  overflow-y: auto;
  /* contain: stop an overscroll at either end from chaining out to the page.
     Android chains far more eagerly than iOS's rubber-band. */
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--screen-pad) calc(var(--sab) + var(--homebar-h) + 30px);
  scrollbar-width: none;
}
.app.has-dock .scroll,
.app:has(.dock) .scroll {
  padding-bottom: calc(142px + var(--sab));
}
.scroll::-webkit-scrollbar { display: none; }

/* ── Restrained motion system: quick, legible, finance-safe ───── */
/* Smooth, blink-free page-to-page nav: native cross-document view transitions. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 160ms var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in 200ms var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

.topbar,
.greet,
.hero,
.insight,
.qa,
.sec,
.card,
.spend-card,
.list,
.plan,
.finn-note,
.chat,
.composer {
  animation: surface-in var(--motion-med) var(--ease) both;
}

.icon-btn,
.theme-toggle,
.qa a,
.month-chip,
.carousel-dots button,
.term-picker button,
.review-split,
.tx a,
.row,
.plan,
.filter,
.choice,
.btn,
.chip-btn,
.qa-row,
.composer button {
  transition:
    transform var(--motion-fast) var(--ease),
    background-color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease);
}

@media (hover: hover) {
  .icon-btn:hover,
  .theme-toggle:hover,
  .qa a:hover,
  .row[href]:hover,
  .plan:hover,
  .qa-row:hover,
  .btn:hover,
  .chip-btn:hover {
    transform: translateY(-1px);
  }
}

.meter > span,
.progress > span {
  transform-origin: left center;
  animation: meter-grow var(--motion-slow) var(--ease) both;
}

@keyframes surface-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes app-screen-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes app-screen-out {
  to { opacity: 0; transform: translateX(-8px); }
}

@keyframes meter-grow {
  from { transform: scaleX(0.18); }
  to { transform: scaleX(1); }
}

/* ── Header ───────────────────────────────────────────────────── */
.greet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 16px;
}
.greet .ey { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.greet h1 { margin: 2px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.greet .right { display: flex; align-items: center; gap: 10px; }
.theme-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  width: 64px;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  background: var(--surface);
  color: var(--faint);
  cursor: pointer;
}
.theme-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 28px;
  border-radius: 9px;
  background: var(--teal-soft);
  transform: translateX(28px);
  transition: transform 180ms var(--ease), background 180ms var(--ease);
}
:root[data-theme="light"] .theme-toggle::before { transform: translateX(0); }
.theme-toggle .theme-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 32px;
  transition: color 180ms var(--ease);
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .moon { color: var(--teal); }
:root[data-theme="light"] .theme-toggle .sun { color: var(--teal); }
:root[data-theme="light"] .theme-toggle .moon { color: var(--faint); }
.theme-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: var(--r-tile);
  background: var(--surface); color: var(--ink); cursor: pointer;
  position: relative;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 999px; background: var(--tangerine); border: 2px solid var(--surface); }
/* The box stays 40px because that's what the design measures at; the tap area is
   pushed out to 44 invisibly. The 10px .tb-actions gap absorbs the overhang, so
   neighboring targets still don't overlap. */
.icon-btn::after, .avatar::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; }
.avatar {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--teal-soft); color: var(--teal);
  font-weight: 700; font-size: 14px;
  /* REQUIRED. Without it the ::after hit-slop below resolves against .topbar
     (position:sticky) instead of the avatar, stretching an invisible tap target
     across the whole bar and routing the back button, bell and Finn into the
     profile menu. Any element given hit-slop must establish its own containing block. */
  position: relative;
}

/* ── Hero (the one number) ────────────────────────────────────── */
.hero { padding: 4px 2px 18px; }
.hero .lbl { color: var(--muted); font-size: 13px; font-weight: 500; }
.hero .amount {
  margin: 6px 0 0;
  font-size: clamp(36px, 11.8vw, 46px); font-weight: 700; letter-spacing: -0.025em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero .amount .c { color: var(--faint); font-weight: 500; }
.meter {
  margin-top: 16px;
  height: 7px; border-radius: 999px;
  background: var(--meter-track);
  overflow: hidden;
}
.meter > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal-deep), var(--teal)); }
.meter-row { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.meter-row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-due { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.hero-due .dd-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 16%, transparent); }
.hero-due .dd-txt { flex: 1 1 auto; }
.hero-due .dd-txt b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-due .dd-pay { flex: none; padding: 5px 14px; border-radius: 999px; background: var(--teal); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.hero-due .dd-pay:active { background: var(--teal-deep); }

/* ── Floating insight (the signature component) ───────────────── */
.insight {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line));
  border-radius: var(--r-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 12%, var(--surface)), var(--surface));
  text-decoration: none;
  color: var(--ink);
}
.insight .f {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--finn-mark);
}
.insight .f svg,
.insight .f .finn-character { width: 37px; height: 37px; }
.insight .t { min-width: 0; }
.insight .t b { display: block; font-size: 13.5px; font-weight: 600; }
.insight .t span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.insight .go { color: var(--teal); }
.insight .go svg { width: 18px; height: 18px; display: block; }

/* ── Quick actions ────────────────────────────────────────────── */
.qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.qa a {
  display: grid; justify-items: center; gap: 7px;
  padding: 13px 0 11px;
  border: 1px solid var(--line); border-radius: var(--r-tile);
  background: var(--surface); color: var(--ink);
  font-size: 11px; font-weight: 600; text-decoration: none;
}
.qa a svg { width: 21px; height: 21px; color: var(--teal); }
.qa a:active { transform: translateY(1px); }

/* ── Section heading ──────────────────────────────────────────── */
.sec { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 0 12px; }
.sec h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.sec a { color: var(--teal); font-size: 12px; font-weight: 600; text-decoration: none; }

/* ── Spend insight card ───────────────────────────────────────── */
.card { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 16px; }
.card.tight { padding: 14px 16px; }
.spend-head { margin-top: 2px; }
.spend-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.spend-card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--teal) 8%, var(--surface)), var(--surface));
  padding: 15px;
}
.spend-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.spend-top h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cycle-intent {
  max-width: 205px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.spend-total { text-align: right; }
.spend-total strong {
  display: block;
  font-size: 21px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.spend-total span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11.5px;
}
.month-strip {
  display: flex;
  gap: 6px;
  margin: 15px 0 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  overflow-x: auto;
  scrollbar-width: none;
}
.month-strip::-webkit-scrollbar { display: none; }
.month-chip {
  flex: 1 0 42px;
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.month-chip.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.month-chip:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.spend-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-bottom: 12px;
}
.driver-card,
.statement-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 78%, var(--bg));
}
.driver-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 11px;
  padding: 12px;
}
.driver-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.driver-card p:last-child {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.driver-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}
.statement-card {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
}
.statement-card span {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.statement-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.statement-card b {
  color: var(--ink);
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.statement-card i {
  color: var(--teal);
  font-style: normal;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}
.carousel-dots {
  display: flex;
  gap: 7px;
  margin: 0 0 10px;
}
.carousel-dots button {
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}
.carousel-dots button.active {
  border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
  background: var(--teal-soft);
  color: var(--teal);
}
.carousel-dots button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.spend-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.spend-rail::-webkit-scrollbar { display: none; }
.spend-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  min-height: 224px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface) 88%, var(--bg));
}
.slide-copy h4 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.slide-copy p:last-child {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.42;
}
.impact-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.impact-row span {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.impact-row b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.impact-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.25;
}
.category-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}
.category-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 78%, var(--bg));
}
.category-item:first-child {
  border-color: color-mix(in srgb, var(--teal) 34%, var(--line));
  background: color-mix(in srgb, var(--teal) 9%, var(--surface));
}
.category-icon {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 12px;
  color: var(--teal);
  background: var(--teal-soft);
}
.category-icon svg {
  width: 19px;
  height: 19px;
}
.category-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.category-text b {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-text small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-item strong {
  color: var(--ink);
  font-size: 16px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.trend-panel {
  margin-top: 16px;
  padding: 13px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
}
.trend-panel svg {
  width: 100%;
  height: 112px;
  color: var(--teal);
}
.trend-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trend-range {
  fill: color-mix(in srgb, var(--teal) 10%, transparent);
  stroke: none;
}
.trend-dots circle {
  fill: var(--surface);
  stroke: currentColor;
  stroke-width: 2;
}
.trend-dots circle.active {
  fill: var(--teal);
  stroke: var(--teal);
}
.trend-labels {
  display: grid;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}
.term-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 16px;
}
.term-picker button,
.review-split {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.term-picker button.active {
  border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
  background: var(--teal-soft);
  color: var(--teal);
}
.review-split {
  width: 100%;
  margin-top: 10px;
  border-color: color-mix(in srgb, var(--teal) 34%, var(--line));
  color: var(--teal);
}
.term-picker button:focus-visible,
.review-split:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.term-picker button:active,
.review-split:active { transform: translateY(1px); }

/* ── Transactions: hairline list + real merchant marks ────────── */
.tx { margin-top: 4px; }
.month-label { margin-top: 16px; }
.month-label:first-child { margin-top: 4px; }
.tx a {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 13px 2px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.tx a:last-child { border-bottom: 0; }
.tx a:active { background: color-mix(in srgb, var(--st-snow) 2%, transparent); }
.mlogo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-tile); }
.mlogo svg { width: 22px; height: 22px; color: var(--st-snow); }
/* Real merchant logos (logo.dev): white tile so any brand mark reads on the
   dark canvas, mark centered with breathing room. Overrides the brand-color
   glyph background once the image has loaded. */
.mlogo.has-logo { background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.mlogo-img { width: 100%; height: 100%; object-fit: contain; padding: 22%; box-sizing: border-box; display: block; }
.detail-hero .mlogo.has-logo, .tx-head-top .mlogo.has-logo { padding: 0; }
.tx a > span:nth-child(2) { min-width: 0; }
.tx .nm { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; }
.tx .sub { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx .amt { text-align: right; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tx .tag { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: var(--teal); text-align: right; }
.tx .tag.muted { color: var(--faint); }
/* Highnote-derived customer states */
.tx .tag.pending { color: var(--warn); }
.tx .tag.declined { color: var(--danger); }
.tx .tag.refunded,
.tx .tag.paidoff { color: var(--pos); }
.tx .tag.review { color: var(--warn); }
.tx .amt.pos { color: var(--pos); }
.tx .amt.amt-dim { color: var(--faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--faint) 55%, transparent); }

/* Merchant tile colors (brand-ish, tinted) */
/* Third-party merchant & network marks — content colors, not UI palette (TOKEN-MAP.md §3) */
.m-apple { background: #1c1c1e; }
.m-food { background: #d8472b; }
.m-retail { background: #1668c4; }
.m-box { background: #2f3a46; }
.m-play { background: #b81d24; }
.m-cup { background: #0b6b4f; }
.m-travel { background: #6a3fb0; }
.m-bag { background: var(--teal-deep); }

/* ── Dock: stable product navigation (safe-area aware) ─────────── */
.dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 10px 12px calc(var(--homebar-h) + var(--sab) + 8px);
  min-height: 112px;
  border-top: 1px solid var(--dock-topline);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, var(--dock-sheen-top), var(--dock-sheen-bottom)),
    var(--dock-bg);
  backdrop-filter: var(--frost-filter);
  -webkit-backdrop-filter: var(--frost-filter);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--st-snow) 12%, transparent),
    var(--dock-shadow);
}
.tab {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  min-height: 60px;
  padding: 6px 0 4px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font);
}
.tab-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 34px;
  border-radius: 16px;
}
.tab svg,
.tab-lordicon {
  width: 25px;
  height: 25px;
  stroke-width: 2;
}
.tab-animated-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}
.tab-lordicon {
  display: block;
  position: relative;
  width: 28px;
  height: 28px;
  opacity: 1;
  color: currentColor;
  --lord-icon-primary: currentColor;
  --lord-icon-secondary: currentColor;
  transition: opacity .18s var(--ease);
}
.tab-lordicon svg {
  display: block;
  width: 28px;
  height: 28px;
}
.tab .tab-ico .splitit-mark-line,
.qa-row .ic .splitit-mark-line {
  width: 26px;
  height: 26px;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
.qa-row .ic .splitit-mark-line { width: 24px; height: 24px; }
.tab { position: relative; background: transparent; box-shadow: none; transition: color .2s var(--ease), transform .2s var(--ease); }
.tab-label {
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.tab-ico { background: transparent; box-shadow: none; transition: transform .28s var(--ease), color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.tab svg,
.tab-lordicon {
  transition: transform .28s var(--ease), stroke-width .2s var(--ease);
}
.tab.active,
.tab[aria-current="page"] {
  color: var(--teal);
  background: transparent;
  box-shadow: none;
}
.tab.active .tab-ico,
.tab[aria-current="page"] .tab-ico {
  color: var(--teal);
  --lord-icon-primary: var(--teal);
  --lord-icon-secondary: var(--teal);
  background: var(--dock-active-bg);
  box-shadow: inset 0 0 0 1px var(--dock-active-ring);
}
.tab.active .tab-lordicon,
.tab[aria-current="page"] .tab-lordicon {
  transform: translateY(-1px) scale(1.1);
}
.tab:hover .tab-lordicon,
.tab:focus-visible .tab-lordicon {
  animation: tab-icon-pulse .46s var(--ease);
}
.tab.active .tab-label,
.tab[aria-current="page"] .tab-label {
  color: var(--teal);
  font-weight: 700;
  text-decoration-line: underline;
}
@keyframes tab-tick {
  0% { opacity: 0; transform: translate(-50%, 4px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes tab-icon-pulse {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-3px) scale(1.14) rotate(-4deg); }
  100% { transform: translateY(0) scale(1); }
}
.tab.active::after,
.tab[aria-current="page"]::after {
  display: none;
  content: none;
}
.tab:active .tab-ico { transform: scale(.86); }
.tab.active:active .tab-ico { transform: translateY(-2px) scale(.9); }
.tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@keyframes tab-pop {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-5px) scale(1.14); }
  100% { transform: translateY(-2px) scale(1); }
}
/* Raised center Split action */
.dock { overflow: visible; }
.split-tab { color: var(--ink); }
.split-tab .tab-ico {
  position: relative; z-index: 2;
  width: 58px; height: 58px; margin-top: -28px; border-radius: 50%;
  border: 0;
  background: var(--teal);
  color: var(--accent-ink);
  box-shadow:
    0 0 0 8px var(--dock-split-ring),
    0 14px 26px color-mix(in srgb, var(--teal) 28%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--st-snow) 22%, transparent);
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.split-tab .tab-label { color: var(--muted); font-weight: 600; text-decoration-line: none; margin-top: 24px; }
.split-tab .tab-ico .splitit-mark-line { stroke: currentColor; width: 28px; height: 28px; transform: translateY(1px); }
.split-tab::after { display: none; }
.split-tab[aria-expanded="true"],
.split-tab.sheet-open { color: var(--ink); }
.split-tab[aria-expanded="true"] .tab-ico,
.split-tab.sheet-open .tab-ico {
  transform: translateY(-2px);
  background: var(--st-forest-green);
  color: var(--st-snow);
  box-shadow:
    0 0 0 8px var(--dock-split-ring),
    0 14px 26px color-mix(in srgb, var(--teal-deep) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--st-snow) 20%, transparent);
}
.split-tab[aria-expanded="true"] .tab-label,
.split-tab.sheet-open .tab-label {
  text-decoration-line: none;
}
.split-tab:active .tab-ico { transform: translateY(1px) scale(.94); }

/* Wallet provisioning badges (item 6): official platform lockups only */
.wallet-zone { margin: 0 0 20px; display: grid; justify-items: center; }
.wallet-badge { border: 0; background: transparent; padding: 0; cursor: pointer; line-height: 0; }
.wallet-badge svg { height: 46px; width: auto; display: block; }
.wallet-badge:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 10px; }

/* Finn in the top bar (item 8) — same tap target as icon-btn */
.finn-tb .fz { display: grid; place-items: center; width: 84px; height: 34px; display:none}
.finn-tb .fz svg, .finn-tb .fz img, .finn-tb .fz .finn-character { width: 30px; height: 30px; }

.finn-character {
  display: block;
  width: 1em;
  height: 1em;
  line-height: 0;
  background: transparent;
}
.finn-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.finn-svg-mark { flex: 0 0 auto; }
.finn-robot {
  display: block;
  width: 100%;
  height: 100%;
}
.finn-robot-art { transform-origin: center; }
/* Fixed 2-tone so Finn reads on the teal chip in BOTH themes (never currentColor). */
.finn-robot-ink { fill: var(--st-forest-green); }
.finn-robot-path2 { fill: var(--st-snow); }
.finn-robot-eye { fill: var(--st-snow); }
.finn-robot-soft { fill: var(--st-lichen); }

/* Quick-action sheet */
.scrim {
  position: absolute; inset: 0; z-index: 14;
  background: var(--scrim);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms var(--ease);
}
.scrim.open { opacity: 1; pointer-events: auto; }
.qsheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 15;
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 260ms var(--ease), visibility 0s linear 260ms;
  background: var(--surface-2);
  border-top: 1px solid var(--line-strong);
  border-radius: 24px 24px 0 0;
  padding: 12px 18px calc(var(--sab) + var(--homebar-h) + 14px);
  box-shadow: var(--sheet-shadow), inset 0 1px 0 color-mix(in srgb, var(--st-snow) 10%, transparent);
}
/* Closed sheets must be invisible AND unfocusable: translateY(105%) alone
   leaves them reachable below the container, and focusing one (or scrolling
   to it) drags every stacked sheet into view — the Activity sort/filter
   sheets and the Split center sheet leaked onto each other that way. */
.qsheet.open { transform: translateY(0); visibility: visible; transition: transform 260ms var(--ease), visibility 0s; }
.qsheet .grab { width: 42px; height: 4.5px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 26%, var(--line-strong)); margin: 0 auto 14px; }
.qsheet h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.qsheet .qh-sub { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; }
.qa-row {
  display: grid; grid-template-columns: 44px 1fr 18px;
  align-items: center; gap: 13px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
}
.qa-row:last-of-type { border-bottom: 0; }
.qa-row:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-radius: 8px; }
.qa-row .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--teal-soft); color: var(--teal); }
.qa-row .ic svg { width: 22px; height: 22px; }
.qa-row b { display: block; font-size: 14.5px; font-weight: 600; }
.qa-row .d { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
/* Every .chev gets a size, here, once.

   I.chev is emitted as <svg class="chev" viewBox="0 0 24 24"> with no width or
   height attribute. .row .chev and .offer-banner .chev set one; .qa-row .chev
   set only a colour, and an <svg> with a viewBox and no size is not 18px by
   default — it resolves against its aspect ratio and whatever box it is given.
   Blink happened to clamp it to the 18px grid track. WebKit did not: it laid
   the chevron out at 346x346, which made each row in the Split center's footer
   375px tall instead of 73 and pushed 296px of horizontal overflow into the
   sheet. That is what was actually wrong on the phone — the rows were never
   just "below the fold", they were enormous — and no amount of Chromium
   testing was ever going to show it.

   A base rule means an unsized chevron cannot happen again. The two rules that
   want a different size are more specific and still win. */
.chev { width: 18px; height: 18px; }
.qa-row .chev { color: var(--faint); }

/* Split center sheet — polished (#6) */
.qs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.qs-head h3 { margin: 0 0 3px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.qs-head .qh-sub { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.35; max-width: 32ch; }
.qs-stat { flex: none; display: grid; justify-items: center; gap: 1px; padding: 8px 15px; border-radius: 14px; background: var(--teal-soft); }
.qs-stat b { font-size: 20px; font-weight: 800; line-height: 1; color: var(--teal); font-variant-numeric: tabular-nums; }
.qs-stat span { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--teal); opacity: .82; }
.qs-hero { display: grid; grid-template-columns: 52px 1fr 20px; align-items: center; gap: 14px; margin-bottom: 14px; padding: 15px 16px; border-radius: 18px; text-decoration: none; color: var(--accent-ink);
  background: linear-gradient(135deg, var(--teal), var(--teal-deep)); box-shadow: 0 14px 30px color-mix(in srgb, var(--teal) 36%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent); }
.qs-hero:active { transform: translateY(1px); }
.qs-hero-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: color-mix(in srgb, #fff 22%, transparent); color: var(--accent-ink); }
.qs-hero-ic svg { width: 30px; height: 30px; }
.qs-hero-ic .splitit-mark-line { stroke: currentColor; }
.qs-hero-t b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.qs-hero-t span { display: block; margin-top: 2px; font-size: 12px; opacity: .86; }
.qs-hero-go { display: grid; place-items: center; color: var(--accent-ink); opacity: .9; }
.qs-hero-go svg { width: 20px; height: 20px; }
.qs-list { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 0 14px; }
.qsheet-split .qs-list .qa-row { padding: 14px 0; }
/* Split center — at-a-glance header. Premium treatment: a teal-kissed glass
   card with a soft glow and hairline dividers. The numbers are the hero —
   no decorative icons competing with them. */
.qs-glance {
  position: relative;
  margin: 0 0 14px;
  padding: 15px 15px 14px;
  border-radius: 20px;
  background:
    radial-gradient(130% 150% at 10% 0%, color-mix(in srgb, var(--teal) 13%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--teal) 5%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
  box-shadow:
    0 14px 32px color-mix(in srgb, var(--st-jet-black) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--st-snow) 30%, transparent);
  overflow: hidden;
}
.qsg-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.qsg-ttl { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.qsg-per { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--teal) 9%, var(--surface)); font-size: 11.5px; font-weight: 700; color: var(--teal); cursor: pointer; }
.qsg-per svg { width: 13px; height: 13px; }
.qsg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qsg-stat { position: relative; display: flex; flex-direction: column; gap: 3px; }
.qsg-stat + .qsg-stat::before { content: ''; position: absolute; left: -5.5px; top: 5px; bottom: 3px; width: 1px; background: color-mix(in srgb, var(--teal) 14%, var(--line)); }
/* Numbers lead — they're the content. The decorative icon chips sat above
   them and took visual precedence, so they're gone. */
.qsg-ic { display: none; }
.qsg-stat b { font-size: 23px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.05; }
.qsg-stat > span:last-child { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); line-height: 1.25; }
/* Split center — today's split-eligible purchases, floated up */
.qs-ready { margin-bottom: 12px; }
.qsr-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 9px; font-size: 13px; font-weight: 800; color: var(--ink); }
.qsr-head a { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--teal); text-decoration: none; }
.qsr-head a svg { width: 14px; height: 14px; }
.qsr-row { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; text-decoration: none; }
.qsr-row:active { transform: translateY(1px); }
.qsr-row .mlogo { width: 38px; height: 38px; flex: 0 0 auto; }
.qsr-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qsr-b b { font-size: 14px; font-weight: 700; color: var(--ink); }
.qsr-b span { font-size: 12px; color: var(--muted); }
.qsr-amt { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.qsr-amt > b { font-size: 14px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Row-level Split is a secondary action — a quiet outline chip, not a filled
   CTA. The sheet's one loud action is the Free split below. */
.qsr-go { flex: 0 0 auto; padding: 4px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line)); background: color-mix(in srgb, var(--teal) 9%, var(--surface)); color: var(--teal); font-size: 11.5px; font-weight: 800; }

/* Split center · free split — THE primary action of the sheet. Tangerine-kissed
   glass card + glowing CTA so the eye lands here first; every other action on
   the sheet is deliberately quieter. */
.qs-free { margin: 0 0 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--tangerine) 42%, var(--line)); border-radius: 20px; background: radial-gradient(130% 160% at 100% 0%, color-mix(in srgb, var(--tangerine) 15%, transparent), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--tangerine) 7%, var(--surface)), var(--surface)); box-shadow: 0 16px 34px color-mix(in srgb, var(--tangerine) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--st-snow) 28%, transparent); }
.qsf-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.qsf-head > span:first-child { font-size: 13px; font-weight: 800; color: var(--ink); }
.qsf-meta { font-size: 11.5px; font-weight: 700; color: var(--tangerine); }
.qsf-tx { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; margin-bottom: 10px; }
.qsf-tx .mlogo { width: 34px; height: 34px; flex: 0 0 auto; }
.qsf-tx .qsr-b b { font-size: 14px; font-weight: 700; color: var(--ink); }
.qsf-tx .qsr-b span { font-size: 12px; color: var(--muted); }
.qsf-badge { flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; background: var(--tangerine); color: #1c1206; font: 800 10px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; }
.qsf-apply { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 16px; background: linear-gradient(180deg, var(--tangerine), var(--tangerine-hover)); color: #1c1206; font: 800 16px/1 var(--font); letter-spacing: -0.01em; cursor: pointer; box-shadow: 0 12px 26px color-mix(in srgb, var(--tangerine) 42%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent); }
.qsf-apply:active { filter: brightness(.96); transform: translateY(1px); }
.qsf-note { margin: 9px 2px 0; font-size: 11.5px; color: var(--muted); text-align: center; }
.qsf-used { display: flex; align-items: center; gap: 11px; padding: 4px 2px; }
.qsf-check { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; background: var(--teal); color: var(--accent-ink); }
.qsf-check svg { width: 20px; height: 20px; }
.qsf-used .qsr-b b { font-size: 14px; font-weight: 700; color: var(--ink); }
.qsf-used .qsr-b span { font-size: 12px; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .qsheet .qa-row {
    opacity: 0;
    transform: translateY(12px);
  }

  .qsheet.open .qa-row {
    animation: sheet-row-in 320ms var(--ease) both;
  }

  .qsheet.open .qa-row:nth-of-type(1) { animation-delay: 45ms; }
  .qsheet.open .qa-row:nth-of-type(2) { animation-delay: 75ms; }
  .qsheet.open .qa-row:nth-of-type(3) { animation-delay: 105ms; }
  .qsheet.open .qa-row:nth-of-type(4) { animation-delay: 135ms; }
}

@keyframes sheet-row-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   v2 shared chrome — top bar, drawer, sub-page components
   (injected by app.js so every screen is identical)
   ============================================================ */

/* ── Top bar (sticky) ─────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px;
  min-height: 50px;
  margin: 0 calc(var(--screen-pad) * -1) 8px;
  padding: 0 var(--screen-pad) 10px;
  border-bottom: 0;
  /* Same tint + filter as .statusbar and the dock. Flat — no sheen; see .statusbar
     for why a per-element gradient seams the two-part top chrome. */
  background: var(--chrome-bg);
  backdrop-filter: var(--frost-filter);
  -webkit-backdrop-filter: var(--frost-filter);
  box-shadow: none;
}
/* Drawn size stays 40 tall — the top bar's height depends on it, and growing the
   BOX to 44 pushed .topbar from 50px to 54px and shifted the title on every
   back-button screen. The 44px tap target comes from ::after hit-slop instead,
   the same way .icon-btn and .avatar do it. Grow the hit area, never the box. */
.back-btn { position: relative; display: grid; place-items: center; height: 40px; cursor: pointer; }
/* Back = plain teal chevron, no box. The negative margin keeps the chevron
   optically centered on --screen-pad (34/2 - 6 = 11 = 44/2 - 11). */
.back-btn { width: 34px; justify-self: start; margin-left: -6px; border: 0; background: transparent; color: var(--teal); }
.back-btn svg { width: 26px; height: 26px; }
/* Hit-slop to 44x44: hamburger 40+4=44; back 34+10=44 wide, 40+4=44 tall. */
.back-btn::after { content: ''; position: absolute; inset: -2px -5px; }
.back-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 8px; }
.back-btn:active { transform: translateX(-2px); }
/* The title slot is a 1fr grid track — 162.2px at a 390 viewport. Left to wrap, a long
   title takes two lines and grows the bar 50 → 54, which shifts every screen's content
   down 4px and breaks the fixed-chrome contract. The bar's height must not depend on
   its copy, so the title is single-line and truncates (same rule as .fsig-lead b). */
.topbar-title { min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--teal-soft); color: var(--teal); }
.brand-mark svg { width: 17px; height: 17px; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.tb-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }

/* ── Drawer ───────────────────────────────────────────────────── */
/* Real Splitit wordmark, theme-swapped */
.brand-logo { height: 22px; width: auto; display: none; }
.brand-logo.bl-dark { display: block; }
:root[data-theme="light"] .brand-logo.bl-dark { display: none; }
:root[data-theme="light"] .brand-logo.bl-light { display: block; }
.topbar .brand { display: flex; align-items: center; }
.drawer-group { margin: 8px 0 12px; }
.drawer-label { margin: 4px 0 2px; padding: 0 8px; color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.drawer-foot { padding: 14px 20px 0; border-top: 1px solid var(--line); }
.signout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--danger); font: 700 13px/1 var(--font); cursor: pointer; }
.signout svg { width: 18px; height: 18px; }
.signout:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── Sub-page building blocks ─────────────────────────────────── */
.page-hero { padding: 4px 0 14px; }
.page-hero h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.022em; }
.page-hero p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.42; }
.section-label { margin: 16px 2px 8px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.list { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; margin-bottom: 14px; }
.row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 14px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.row.action-row { width: 100%; border-width: 0 0 1px; border-style: solid; border-color: var(--line); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.row:last-child { border-bottom: 0; }
.row.action-row:last-child { border-bottom: 0; }
.row:active { background: color-mix(in srgb, var(--st-snow) 2%, transparent); }
.row.action-row:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.row.two { grid-template-columns: 1fr auto; }
.row .ri { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--teal-soft); color: var(--teal); }
.row .ri svg { width: 19px; height: 19px; }
.row .rt b { display: block; font-size: 14px; font-weight: 600; }
.row .rt span { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.row .rv { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row .rv b { color: var(--ink); font-weight: 600; }
.row .chev { width: 16px; height: 16px; color: var(--faint); }
.row.card-row { grid-template-columns: 68px 1fr auto; }
.card-thumb { width: 62px; aspect-ratio: 1.58 / 1; border-radius: 9px; overflow: hidden; background: color-mix(in srgb, var(--teal) 18%, var(--surface)); box-shadow: 0 8px 18px color-mix(in srgb, var(--st-jet-black) 22%, transparent); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.chip.ok { background: color-mix(in srgb, var(--pos) 17%, transparent); color: var(--pos); }
.chip.warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.chip.danger { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.chip.info { background: var(--teal-soft); color: var(--teal); }
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; margin: 0 0 6px 2px; font-size: 12px; color: var(--muted); font-weight: 600; }
.field input, .field select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); color: var(--ink); font: 400 15px/1 var(--font-body); }
.field input:focus, .field select:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border-radius: var(--r-tile); border: 0; font: 700 15px/1 var(--font); cursor: pointer; text-decoration: none; }
.btn svg { width: 19px; height: 19px; }
/* Tangerine CTA: Charcoal text per system.css §4 ("never Snow") */
.btn.primary { background: var(--tangerine); color: var(--st-charcoal); box-shadow: var(--cta-shadow); }
.btn.primary:hover { background: var(--tangerine-hover); }
.btn.teal { background: var(--teal); color: var(--accent-ink); }
.btn.ghost { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.stack { display: grid; gap: 10px; }
.note { margin: 12px 4px 0; color: var(--faint); font-size: 11.5px; line-height: 1.45; text-align: center; }
.amount-xl { margin: 0; font-size: clamp(32px, 10.2vw, 40px); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; }
.choice { padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); color: var(--ink); text-align: center; cursor: pointer; }
.choice.active { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); background: var(--teal-soft); }
.choice b { display: block; font-size: 16px; font-weight: 800; }
.choice small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.choice.amount-choice b { font-size: clamp(17px, 4.6vw, 20px); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.choice.amount-choice small { margin-top: 5px; font-size: 11.5px; }
.choice:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Spending-controls helpers */
.ctl-hint { margin: -4px 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.ctl-sub { margin: 6px 0 6px; color: var(--faint); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.cat-chip { padding: 9px 13px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: 700 12.5px/1 var(--font); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.cat-chip.on { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); background: var(--teal-soft); color: var(--teal); }
.cat-chip:not(.on) { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--faint) 55%, transparent); }
.cat-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.merch-list { margin: -6px 0 6px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.merch-row { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 11px; padding: 8px 6px; }
.merch-row .mlogo { width: 34px; height: 34px; font-size: 14px; font-weight: 800; color: var(--st-snow); }
.mr-nm { font-size: 14px; font-weight: 700; }
.mr-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 13px; cursor: pointer; }
.mr-add { width: 100%; margin-top: 2px; padding: 11px; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: transparent; color: var(--teal); font: 700 13px/1 var(--font); cursor: pointer; }
.summary { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 2px 14px; margin-bottom: 16px; }
.summary .sr { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.summary .sr:last-child { border-bottom: 0; }
.summary .sr span { color: var(--muted); }
.summary .sr b { font-weight: 700; font-variant-numeric: tabular-nums; }
.summary .sr.total b { color: var(--teal); font-size: 16px; }
.secret-field { display: grid; justify-items: end; gap: 6px; max-width: 210px; text-align: right; overflow-wrap: anywhere; }
.secret-field .filter { min-height: 28px; padding: 0 10px; }
.secret-field .filter:disabled { cursor: not-allowed; }
.plan { display: block; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 14px; margin-bottom: 12px; text-decoration: none; color: var(--ink); }
.plan-top { display: flex; align-items: center; gap: 12px; }
.plan-top .pn { flex: 1; min-width: 0; }
.plan-top .pn b { font-size: 14.5px; font-weight: 700; }
.plan-top .pn span { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.plan-top .pa { text-align: right; font-variant-numeric: tabular-nums; }
.plan-top .pa b { font-size: 15px; }
.plan-top .pa span { display: block; margin-top: 1px; font-size: 11px; color: var(--muted); }
.progress { height: 8px; border-radius: 999px; background: var(--meter-track); overflow: hidden; margin: 12px 0 6px; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal-deep), var(--teal)); }
.plan-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.toggle { position: relative; width: 46px; height: 27px; border-radius: 999px; background: var(--meter-track); border: 1px solid var(--line); cursor: pointer; flex: 0 0 auto; padding: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 999px; background: var(--faint); transition: transform 180ms var(--ease), background 180ms var(--ease); }
.toggle[aria-checked="true"] { background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); }
.toggle[aria-checked="true"]::after { transform: translateX(18px); background: var(--teal); }

/* ── Tap-target hit-slop ──────────────────────────────────────────
   These controls are deliberately short: a 34px filter chip and a 27px switch
   are the right *visual* sizes and match what the design measures at. But iOS
   wants 44pt of touchable area and Android 48dp. So grow the touch area with a
   pseudo-element, not the box — the design doesn't move, the thumb gets its
   target, and Figma stays in sync.

   Vertical only, on purpose. All of these sit in horizontal rows; expanding
   sideways would overlap the neighboring chip and steal its taps, which is
   worse than the small target. Each is already >=45px wide, so height is the
   only shortfall. .toggle uses ::before because ::after is its knob. */
.filter, .mini-pill, .month-chip, .toggle, .power-switch,
.vcb-all, .seg-opt, .seg, .sc-pill, .review-split { position: relative; }

.filter::after, .mini-pill::after, .month-chip::after, .toggle::before,
.power-switch::after, .vcb-all::after, .seg-opt::after, .seg::after,
.sc-pill::after, .review-split::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 44px;
  transform: translateY(-50%);
  pointer-events: auto;
}
.toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.filter-row { display: flex; gap: 8px; margin: 2px 0 12px; overflow-x: auto; scrollbar-width: none; }
.filter-row.wrap { flex-wrap: wrap; overflow: visible; }
.filter-row.wrap .filter { min-height: 38px; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-row.wrap { flex-wrap: wrap; overflow: visible; margin-bottom: 2px; }
.filter { flex: 0 0 auto; min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.filter.active { border-color: color-mix(in srgb, var(--teal) 42%, var(--line)); background: var(--teal-soft); color: var(--teal); }
.filter:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Activity — search + sort + filter controls */
.act-controls { display: flex; gap: 9px; align-items: center; margin: 2px 0 10px; }
.act-controls .filter { display: inline-flex; align-items: center; min-height: 46px; }
.filter .fcount { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 6px; border-radius: 999px; background: var(--teal); color: var(--accent-ink); font-size: 10px; font-weight: 800; }
.filter .fcount[hidden] { display: none; }
/* Compact icon controls (sort / filter / map toggle) — keep side padding (#1) */
.icon-ctrl { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); cursor: pointer; }
.icon-ctrl svg { width: 20px; height: 20px; }
.icon-ctrl:active { transform: translateY(1px); }
.icon-ctrl.active, .icon-ctrl.map-on { border-color: color-mix(in srgb, var(--teal) 42%, var(--line)); background: var(--teal-soft); color: var(--teal); }
.icon-ctrl:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.icon-ctrl .fcount { position: absolute; top: -6px; right: -6px; margin: 0; border: 2px solid var(--bg); }
#viewToggle .vt-map { display: grid; place-items: center; }
#viewToggle .vt-list { display: none; place-items: center; }
#viewToggle.map-on .vt-map { display: none; }
#viewToggle.map-on .vt-list { display: grid; }

/* Activity map view (#5) — transactions on a map */
.act-map { position: relative; margin: 4px calc(var(--screen-pad) * -1) 0; }
.act-map-canvas { position: relative; height: 468px; overflow: hidden; border-top: 1px solid var(--line); background: var(--surface); }
#leaflet { position: absolute; inset: 0; z-index: 0; }
/* Map view = full-bleed immersive map to the screen bottom (under the dock) */
.app.map-open .scroll { overflow: hidden; padding-bottom: 0; }
.leaflet-control-attribution { font-size: 9px; opacity: .6; }
.leaflet-container { background: var(--surface); font: inherit; }
/* Merchant marker (Leaflet divIcon) */
.map-pin-wrap { background: none !important; border: 0 !important; }
.map-pin-chip { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.35); color: #fff; cursor: pointer; transition: transform 120ms var(--ease); }
.map-pin-chip svg { width: 20px; height: 20px; color: var(--st-snow); }
/* Real merchant logo inside a pin. The extra specificity is deliberate: inside
   .leaflet-container, Leaflet's own img rule beats the plain .mlogo-img class, so
   without this the logo renders at natural size and gets clipped to a blank crop. */
.map-pin-chip.has-logo { background: #fff; overflow: hidden; }
.map-pin-chip img.mlogo-img { width: 100%; height: 100%; padding: 20%; box-sizing: border-box; object-fit: contain; display: block; }
.map-pin-chip.sel { transform: scale(1.16); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 55%, transparent), 0 8px 16px rgba(0,0,0,.4); }
/* Tappable "online purchases" note — reveals the list of off-map purchases */
.map-note { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 601; margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid var(--line-strong); box-shadow: 0 6px 16px rgba(0,0,0,.22); font: 700 11.5px/1 var(--font); color: var(--ink); white-space: nowrap; cursor: pointer; }
.map-note > svg { width: 14px; height: 14px; color: var(--teal); }
.map-note .mn-chev { width: 15px; height: 15px; color: var(--muted); transition: transform 180ms var(--ease); }
.map-note.open .mn-chev { transform: rotate(180deg); }
.map-note:active { transform: translateX(-50%) translateY(1px); }
/* Off-map (online) purchases list panel */
.map-online-list { position: absolute; top: 50px; left: var(--screen-pad); right: var(--screen-pad); z-index: 601; max-height: 44vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 5px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); border: 1px solid var(--line-strong); box-shadow: 0 16px 34px rgba(0,0,0,.34); }
.mol-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 9px 9px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.mol-row:active { background: color-mix(in srgb, var(--st-snow) 8%, transparent); }
.mol-row .mlogo { width: 38px; height: 38px; }
.mol-nm { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.mol-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.mol-amt { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Selected-transaction overlay card with Split / Undo actions */
.map-card { position: absolute; left: var(--screen-pad); right: var(--screen-pad); bottom: calc(var(--sab) + 158px); z-index: 600; padding: 10px 13px 12px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 58%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); border: 1px solid color-mix(in srgb, var(--st-snow) 16%, transparent); box-shadow: 0 16px 34px rgba(0,0,0,.4); }
/* Prev / next navigation between mapped purchases */
.mc-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mc-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--st-snow) 10%, transparent); color: var(--ink); cursor: pointer; }
.mc-arrow:active { background: color-mix(in srgb, var(--st-snow) 18%, transparent); }
.mc-arrow svg { width: 18px; height: 18px; }
.mc-count { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; }
.map-card .mc-main { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.map-card .mlogo { width: 44px; height: 44px; }
.map-card .mc-nm { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.map-card .mc-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.map-card .mc-meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.map-card .mc-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mc-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.mc-tag-teal { background: var(--teal-soft); color: var(--teal); }
.mc-tag-muted { background: var(--surface-2); color: var(--muted); }
.mc-tag-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.mc-tag-danger { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.mc-tag-pos { background: color-mix(in srgb, var(--pos) 18%, transparent); color: var(--pos); }
.map-card .mc-amt { align-self: start; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.map-card .mc-amt.pos { color: var(--pos); }
.map-card .mc-amt.amt-dim { color: var(--faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--faint) 55%, transparent); }
.mc-actions { display: flex; gap: 9px; margin-top: 11px; padding-top: 11px; border-top: 1px solid color-mix(in srgb, var(--st-snow) 12%, transparent); }
/* On-brand buttons — teal CTA + teal-outline ghost, matching the app's button system */
.mc-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1.5px solid transparent; border-radius: 12px; font: 700 13px/1 var(--font); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: transform 120ms var(--ease), background 120ms var(--ease); }
.mc-btn:active { transform: translateY(1px); }
.mc-btn.primary { background: var(--teal); color: var(--accent-ink); box-shadow: var(--cta-shadow); }
.mc-btn.primary:active { background: var(--teal-deep); }
.mc-btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--teal); }
.mc-btn.ghost:active { background: color-mix(in srgb, var(--teal) 10%, transparent); }
.mc-done { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; }
.mc-done .mc-done-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--teal); color: var(--accent-ink); }
.mc-done .mc-done-ic svg { width: 24px; height: 24px; }
/* Sort sheet options */
.sort-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 15px/1 var(--font); text-align: left; cursor: pointer; }
.sort-opt:last-child { border-bottom: 0; }
.sort-opt[aria-checked="true"] { color: var(--teal); }
.sort-opt .tick { width: 20px; height: 20px; opacity: 0; }
.sort-opt[aria-checked="true"] .tick { opacity: 1; }
/* Filter sheet */
.fsheet { max-height: 82%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fsheet .fsec { padding: 13px 0; border-top: 1px solid var(--line); }
.fsheet .fsec:first-of-type { border-top: 0; padding-top: 4px; }
.fsheet .fsec > h4 { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.fsheet .fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fsheet .fchips .filter { min-height: 38px; }
/* Filters sheet: actions live in a sticky header at the TOP of the sheet, not a
   bottom bar that floated over the pills as the sheet scrolled. */
.fsheet-top { position: sticky; top: 0; z-index: 3; background: var(--surface-2); padding-bottom: 12px; margin: 0 -2px; padding-left: 2px; padding-right: 2px; border-bottom: 1px solid var(--line); }
.fsheet-top h3 { margin: 0 0 12px; }
.fsheet-actions { display: flex; gap: 10px; }
.fsheet-actions .btn-reset { flex: 0 0 auto; padding: 0 20px; min-height: 48px; border-radius: 14px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 700 15px/1 var(--font); cursor: pointer; }
.fsheet-actions .btn-apply { flex: 1; min-height: 48px; border-radius: 14px; border: 0; background: var(--teal); color: var(--accent-ink); font: 700 15px/1 var(--font); cursor: pointer; }
.fsheet-actions .btn-apply:active { background: var(--teal-deep); }
.day-label { margin: 16px 2px 4px; color: var(--faint); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.detail-hero { display: grid; justify-items: center; gap: 4px; padding: 8px 0 16px; text-align: center; }
.detail-hero .mlogo { width: 54px; height: 54px; border-radius: 16px; margin-bottom: 6px; color: var(--st-snow); font-size: 22px; font-weight: 800; }
.detail-hero .mlogo svg { width: 28px; height: 28px; }
.detail-hero .dn { font-size: 15px; font-weight: 600; color: var(--muted); }

/* Transaction detail header — faded map BEHIND merchant + amount (#1) */
.tx-head { position: relative; margin: -4px calc(var(--screen-pad) * -1) 12px; padding: 0 var(--screen-pad); overflow: hidden; }
.tx-map-bg { position: absolute; inset: 0; z-index: 0; }
.tx-map-bg[hidden] { display: none; }
.tx-map-bg .map-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.tx-map-bg.online .map-art { opacity: .4; }
.tx-map-bg .map-art[hidden] { display: none; }
#txLeaflet { opacity: .6; }
#txLeaflet.map-street { background: var(--surface); }
.tx-pin-mark { display: block; color: var(--teal); filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--teal) 55%, transparent)); }
.tx-pin-mark svg { width: 32px; height: 32px; display: block; }
.tx-map-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 22%, transparent) 0%, transparent 20%, color-mix(in srgb, var(--bg) 66%, transparent) 58%, var(--bg) 92%); }
.tx-map-bg .map-pin { position: absolute; left: 27%; top: 30%; transform: translate(-50%, -60%); z-index: 1; color: var(--teal); filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--teal) 50%, transparent)); }
.tx-map-bg .map-pin svg { width: 40px; height: 40px; display: block; }
.tx-map-bg .map-pin.online-glyph { left: 50%; top: 34%; color: var(--muted); filter: none; }
.tx-head-body { position: relative; z-index: 1; padding-top: 140px; }
.tx-head-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tx-head-top .mlogo { width: 58px; height: 58px; border-radius: 16px; color: var(--st-snow); font-size: 22px; font-weight: 800; box-shadow: 0 10px 22px rgba(0,0,0,.3); }
.tx-head-top .mlogo svg { width: 30px; height: 30px; }
.tx-head-top .amount-xl { line-height: .95; }
.tx-merchant { margin: 13px 0 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.tx-addr { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.tx-head-meta { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 14px 0 2px; }
.tx-head-meta .tx-when { font-size: 12.5px; color: var(--faint); }

/* Your split card — 3-column stats + segmented bar + fees pill (#3) */
.split-card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 16px; margin-bottom: 14px; }
.sc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
/* Also renders as an <a> on Plans, where the card is the whole plan and the title
   is its way into the purchase. Inherit, or the browser paints it default-blue. */
.sc-title { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
a.sc-title:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
.sc-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.sc-badge { flex: none; padding: 5px 11px; border-radius: 999px; background: var(--teal-soft); color: var(--teal); font-size: 11px; font-weight: 800; white-space: nowrap; }
.sc-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-col { display: grid; gap: 3px; }
.sc-col:nth-child(2) { justify-items: center; text-align: center; }
.sc-col:nth-child(3) { justify-items: end; text-align: right; }
.sc-lbl { font-size: 11px; color: var(--faint); font-weight: 600; }
.sc-val { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sc-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; margin: 14px 0 12px; }
.sc-seg { height: 9px; border-radius: 999px; background: var(--meter-track); }
.sc-seg.paid { background: linear-gradient(90deg, var(--teal-deep), var(--teal)); }
/* The next payment due. It was a solid teal fill, which read as PAID — a 1-of-3
   split showed two filled bars against a badge saying one. An outline says the
   same thing the badge does: this slot is next, and it is still empty. */
.sc-seg.current { background: var(--meter-track); box-shadow: inset 0 0 0 2px var(--teal); }
.sc-seg.left { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--teal) 22%, transparent) 0 3px, transparent 3px 7px), var(--meter-track); }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-foot .sc-fee { padding: 4px 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-weight: 700; font-size: 11.5px; }
.split-card .payoff-cta { margin-top: 15px; }
/* In-card pill actions (Apple-Card style) — Pay in full + Undo split */
.sc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.sc-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; font: 700 13.5px/1 var(--font); letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; text-decoration: none; }
.sc-pill.primary { background: var(--teal-soft); color: var(--teal); }
.sc-pill.primary:active { background: color-mix(in srgb, var(--teal) 24%, transparent); }
.sc-pill.ghost { background: var(--surface-2); color: var(--ink); }
.sc-pill.ghost:active { background: color-mix(in srgb, var(--st-snow) 8%, var(--surface-2)); }
.sc-pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.sc-cap { margin: 13px 0 0; font-size: 11.5px; line-height: 1.42; color: var(--faint); }
/* Transaction state banner (Pending / Declined / Under review) */
.tx-state { display: grid; grid-template-columns: 44px 1fr; gap: 13px; align-items: center; margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.tx-state .ts-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
.tx-state .ts-ic svg { width: 24px; height: 24px; }
.tx-state .ts-body b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.tx-state .ts-body span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.tx-state.tone-warn { border-color: color-mix(in srgb, var(--warn) 32%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.tx-state.tone-warn .ts-ic { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.tx-state.tone-danger { border-color: color-mix(in srgb, var(--danger) 32%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.tx-state.tone-danger .ts-ic { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }

/* Compare-and-split options — one screen, one tap (#2, image 2) */
.split-opts { display: grid; gap: 10px; margin-bottom: 13px; }
.split-opt { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 13px; width: 100%; padding: 15px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); text-align: left; cursor: pointer; }
.split-opt:active { transform: translateY(1px); }
.split-opt.selected { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 9%, var(--surface)); }
.split-opt .so-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; }
.split-opt.selected .so-radio { border-color: var(--teal); }
.split-opt.selected .so-radio::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--teal); }
.split-opt .so-main b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.split-opt .so-mo { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--teal); }
.split-opt .so-right { text-align: right; }
.split-opt .so-right b { display: block; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.split-opt .so-fee { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.split-done { display: grid; justify-items: center; text-align: center; gap: 3px; padding: 24px 16px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--teal) 26%, var(--line)); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 10%, var(--surface)), var(--surface)); }
.split-done .sd-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--teal); margin-bottom: 8px; }
.split-done .sd-ic svg { width: 28px; height: 28px; color: var(--accent-ink); }
.split-done h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.split-done p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.split-done .sd-cta { margin-top: 15px; width: 100%; }

/* Pay screen — split-payoff vs full-statement switch (#11) */
.seg-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 2px 0 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.seg-switch[hidden], .pay-scope[hidden], .field[hidden] { display: none; }
.seg-switch .seg { min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 700 13.5px/1 var(--font); cursor: pointer; }
.seg-switch .seg.active { background: var(--teal); color: var(--accent-ink); }
.seg-switch .seg:active { transform: translateY(1px); }
.pay-scope { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; margin: 0 0 15px; padding: 12px 14px; border-radius: var(--r-card); background: var(--teal-soft); border: 1px solid color-mix(in srgb, var(--teal) 26%, var(--line)); font-size: 12.5px; line-height: 1.42; color: var(--muted); }
.pay-scope svg { width: 18px; height: 18px; color: var(--teal); margin-top: 1px; }
.pay-scope b { color: var(--ink); font-weight: 700; }
.summary .sr.waive b { color: var(--pos); }

/* Early-payoff installment card (#9) — scales to 12 months, no scroll */
.payoff { border: 1px solid color-mix(in srgb, var(--teal) 26%, var(--line)); border-radius: var(--r-card); background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 8%, var(--surface)), var(--surface)); padding: 16px; margin-bottom: 14px; }
.payoff-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.payoff-head .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.payoff-head .prog { font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.payoff-amt { margin: 7px 0 2px; font-size: 13px; color: var(--muted); }
.payoff-amt b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.inst-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; margin: 14px 0 2px; }
.inst-seg { display: grid; gap: 5px; justify-items: center; }
.inst-seg .bar { width: 100%; height: 7px; border-radius: 999px; background: var(--meter-track); }
.inst-seg.paid .bar { background: var(--teal); }
.inst-seg.current .bar { background: color-mix(in srgb, var(--teal) 52%, var(--meter-track)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 34%, transparent); }
.inst-seg .mo { font-size: 9.5px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.inst-seg.paid .mo, .inst-seg.current .mo { color: var(--muted); }
.fee-line { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.fee-line + .fee-line { margin-top: 0; padding-top: 8px; border-top: 0; }
.fee-line span { color: var(--muted); }
.fee-line b { font-weight: 700; font-variant-numeric: tabular-nums; }
.fee-line.waive b { color: var(--pos); }
.payoff-cta { margin-top: 15px; }
.payoff-cta .btn { min-height: 56px; flex-direction: column; gap: 3px; }
.payoff-cta .btn .sub { font-size: 11.5px; font-weight: 600; opacity: .82; }

/* Reverse / undo purchase (#10) — shown only when Highnote flag is eligible */
.reverse-card { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; margin: 2px 0 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.reverse-card .ri { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.reverse-card .ri svg { width: 20px; height: 20px; }
.reverse-card .rc-body h4 { margin: 1px 0 3px; font-size: 14px; font-weight: 700; }
.reverse-card .rc-body p { margin: 0 0 10px; font-size: 12px; line-height: 1.42; color: var(--muted); }
.reverse-card .rc-btn { min-height: 40px; padding: 0 15px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); background: transparent; color: var(--danger); font: 700 13px/1 var(--font); cursor: pointer; }
.reverse-card .rc-btn:active { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.finn-note { display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; margin: 4px 0 16px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line)); border-radius: var(--r-card); background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 11%, var(--surface)), var(--surface)); }
.finn-note .f { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 0; border: 0; background: transparent; color: var(--finn-mark); }
.finn-note .f svg,
.finn-note .f img,
.finn-note .f .finn-character { width: 40px; height: 40px; }
.finn-note p { margin: 0; font-size: 13px; line-height: 1.4; }
.finn-note .acts { margin-top: 10px; display: flex; gap: 8px; }
.finn-note .acts a { flex: 1; text-align: center; min-height: 40px; display: grid; place-items: center; border-radius: 10px; text-decoration: none; font-size: 13px; font-weight: 700; }
.finn-note .acts .yes { background: var(--teal); color: var(--accent-ink); }
.finn-note .acts .no { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }

/* ── Finn chat ────────────────────────────────────────────────── */
.finn-hero {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 14px;
  margin: 2px 0 12px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--teal) 22%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--teal) 8%, var(--surface)), var(--surface));
}
.finn-hero-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--finn-mark);
  box-shadow: none;
}
.finn-hero-mark svg,
.finn-hero-mark img,
.finn-hero-mark .finn-character { width: 68px; height: 68px; }
.finn-hero h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.finn-hero p:last-child {
  margin: 7px 0 0;
  color: var(--muted);
  font: 400 12.5px/1.42 var(--font-body);
}
.finn-snapshot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 13px;
}
.fact {
  min-width: 0;
  padding: 11px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 86%, var(--bg));
}
.fact span {
  display: block;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
}
.fact b {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.chat { display: flex; flex-direction: column; gap: 12px; padding: 2px 0 6px; }
.msg { display: flex; gap: 9px; max-width: 88%; animation: message-in 220ms var(--ease) both; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.finn-av {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--finn-mark);
  box-shadow: none;
}
.finn-av svg,
.finn-av img,
.finn-av .finn-character { width: 38px; height: 38px; }
.bubble { padding: 11px 13px; border: 1px solid var(--line); border-radius: 16px; border-bottom-left-radius: 5px; background: var(--surface); font-size: 13.5px; line-height: 1.42; color: var(--ink); }
.bubble b {
  display: block;
  margin-bottom: 4px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.bubble span {
  display: block;
  color: var(--muted);
}
.msg.me .bubble { border: 0; border-radius: 16px; border-bottom-right-radius: 5px; background: var(--teal-soft); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px 41px; }
.chip-title { flex: 0 0 100%; margin: 0 0 1px; color: var(--faint); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.chip-btn { padding: 9px 13px; border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--teal) 9%, var(--surface)); color: var(--ink); font: 700 12.5px/1 var(--font); cursor: pointer; }
.chip-btn:active { transform: translateY(1px); }
.chip-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.composer { position: sticky; bottom: 0; display: flex; gap: 9px; align-items: center; margin-top: 12px; padding: 7px 7px 7px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.composer input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 14px/1 var(--font-body); outline: none; }
.composer button { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 999px; background: var(--teal); color: var(--accent-ink); cursor: pointer; }
.composer button svg { width: 18px; height: 18px; }
.composer button:active { transform: scale(.94); }
.msg.typing .bubble {
  min-width: 54px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--muted);
  opacity: .45;
  animation: typing-pulse 1.1s var(--ease) infinite;
}
.typing-dot:nth-child(2) { animation-delay: 120ms; }
.typing-dot:nth-child(3) { animation-delay: 240ms; }

@keyframes message-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes typing-pulse {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  38% { transform: translateY(-3px); opacity: .9; }
}

/* ── OTP boxes ────────────────────────────────────────────────── */
.unread-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--tangerine); flex: 0 0 auto; }

/* ── Card art + card screens ─────────────────────────────────── */
.cardwrap { perspective: 1400px; margin: 6px 0 14px; }
.cardart { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 18px; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.cardart .face { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 18px 40px color-mix(in srgb, var(--st-jet-black) 42%, transparent); }
.cardart .front img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .45s var(--ease); }
.card-num-ov { position: absolute; left: 20px; bottom: 17px; color: var(--st-snow); font: 700 17px/1 var(--font); letter-spacing: .16em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px color-mix(in srgb, var(--st-jet-black) 40%, transparent); transition: opacity .3s var(--ease); }
.cardart.frozen .front .card-num-ov { opacity: .72; }
.cardart.frozen .front img { filter: grayscale(.85) brightness(.5); }
.cardart .frost { position: absolute; inset: 0; display: none; place-items: center; place-content: center; grid-auto-flow: row; gap: 9px; background: linear-gradient(160deg, color-mix(in srgb, var(--st-jet-black) 60%, transparent), color-mix(in srgb, var(--st-jet-black) 74%, transparent)); backdrop-filter: blur(2px); color: var(--st-snow); }
.cardart.frozen .front .frost { display: grid; }
.cardart .frost svg { width: 26px; height: 26px; }
.cardart .frost span { font: 700 11px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; }
.custom-card-preview { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px color-mix(in srgb, var(--st-jet-black) 42%, transparent); background: linear-gradient(135deg, #19474b, #2c8d8e); transition: background .25s var(--ease), transform .25s var(--ease); }
.custom-card-preview .default-card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .25s var(--ease); }
.custom-card-preview:not([data-style="default"]) .default-card-art { opacity: 0; }
.custom-photo { position: absolute; inset: 0; opacity: 0; background-image: var(--custom-photo); background-size: cover; background-position: center; transition: opacity .25s var(--ease); }
.custom-card-preview[data-style="photo"] .custom-photo { opacity: 1; }
.custom-card-preview .card-num-ov { z-index: 2; }
.custom-card-preview[data-style="teal"] { background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--teal) 52%, white), transparent 28%), linear-gradient(135deg, #0d3a3d, #1ca7a8 70%, #0e4f52); }
.custom-card-preview[data-style="graphite"] { background: linear-gradient(140deg, #111820, #303841 55%, #111820); }
.custom-card-preview[data-style="signal"] { background: radial-gradient(circle at 80% 18%, #ffb05f, transparent 26%), linear-gradient(135deg, #10191d, #207f7e 58%, #f29a48); }
.custom-card-logo { position: absolute; right: 20px; top: 18px; z-index: 2; width: 74px; height: auto; opacity: 0; transition: opacity .25s var(--ease); }
.card-sprite { position: absolute; right: 18px; bottom: 28px; z-index: 2; width: 98px; height: 106px; color: color-mix(in srgb, var(--teal) 52%, transparent); opacity: 0; transform: rotate(-9deg); transition: opacity .25s var(--ease); }
.card-sprite svg { width: 100%; height: 100%; stroke-width: 1.8; }
.custom-mc { position: absolute; right: 20px; bottom: 18px; z-index: 2; display: inline-flex; opacity: 0; transition: opacity .25s var(--ease); }
.custom-mc i { width: 22px; height: 22px; border-radius: 999px; display: block; }
.custom-mc i:first-child { background: #eb001b; }
.custom-mc i:last-child { background: #f79e1b; margin-left: -8px; mix-blend-mode: screen; }
.custom-card-preview:not([data-style="default"]) .custom-card-logo,
.custom-card-preview:not([data-style="default"]) .card-sprite,
.custom-card-preview:not([data-style="default"]) .custom-mc { opacity: 1; }
.custom-card-preview[data-style="photo"]::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--st-jet-black) 36%, transparent), transparent 36%, color-mix(in srgb, var(--st-jet-black) 42%, transparent)); pointer-events: none; }
.swatch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.swatch { display: grid; grid-template-columns: 42px 1fr; grid-template-areas: "mark title" "mark sub"; align-items: center; gap: 2px 10px; min-height: 72px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.swatch.active { border-color: color-mix(in srgb, var(--teal) 48%, var(--line)); background: var(--teal-soft); }
.swatch:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.swatch .sw { grid-area: mark; width: 40px; height: 28px; border-radius: 7px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-snow) 10%, transparent); }
.swatch b { grid-area: title; font-size: 13px; }
.swatch small { grid-area: sub; color: var(--muted); font-size: 11px; }
.sw.default { background: linear-gradient(135deg, #173a3f, #2b8586); }
.sw.teal { background: linear-gradient(135deg, #0d3a3d, #1ca7a8); }
.sw.graphite { background: linear-gradient(135deg, #111820, #3a434c); }
.sw.signal { background: linear-gradient(135deg, #10191d, #207f7e 55%, #f29a48); }
@media (prefers-reduced-motion: no-preference) {
  .cardwrap { opacity: 0; transform: translateY(10px); animation: card-in .55s var(--ease) forwards; }
}
@keyframes card-in { to { opacity: 1; transform: translateY(0); } }
.card-meta { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 16px; font-size: 12.5px; color: var(--muted); }
.card-meta .mc { display: inline-flex; }
.card-meta .mc i { display: block; width: 15px; height: 15px; border-radius: 999px; }
.card-meta .mc i:first-child { background: #eb001b; }
.card-meta .mc i:last-child { background: #f79e1b; margin-left: -6px; mix-blend-mode: screen; }
.card-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.card-actions-primary { grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
.cact { display: grid; justify-items: center; gap: 7px; padding: 13px 4px 11px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.cact svg { width: 21px; height: 21px; color: var(--teal); transition: transform .2s var(--ease); }
.cact.danger-action svg { color: var(--danger); }
.cact.on { border-color: color-mix(in srgb, var(--teal) 46%, var(--line)); background: var(--teal-soft); color: var(--teal); }
.cact:active { transform: translateY(1px); }
.cact:active svg { transform: scale(.9); }
.cact:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.cact:disabled { opacity: .4; pointer-events: none; }
.card-power { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.power-copy { display: flex; align-items: center; gap: 12px; min-width: 0; }
.power-copy b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.power-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.power-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--pos) 17%, transparent); color: var(--pos); }
.power-ic svg { width: 20px; height: 20px; }
.power-switch { position: relative; width: 54px; height: 32px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--pos) 38%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--pos) 76%, transparent); padding: 0; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.power-switch span { position: absolute; top: 3px; left: 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--st-snow); box-shadow: 0 2px 8px color-mix(in srgb, var(--st-jet-black) 22%, transparent); transition: left .2s var(--ease); }
.power-switch[aria-checked="false"] { background: var(--meter-track); border-color: var(--line); }
.power-switch[aria-checked="false"] span { left: 3px; background: var(--faint); }
.power-switch:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.power-switch:disabled { opacity: .55; cursor: not-allowed; }

/* ── Multiple virtual cards: carousel + flip + copy (Highnote) ─────── */
.vc-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 6px calc(var(--screen-pad) * -1) 12px; padding: 4px var(--screen-pad) 6px; }
.vc-rail::-webkit-scrollbar { display: none; }
.vc-slot { flex: 0 0 100%; scroll-snap-align: center; }
.vc-slot .cardwrap { margin: 0; }
.vc-rail .cardart { cursor: pointer; }
.veil { position: absolute; inset: 0; pointer-events: none; }
.veil-brand { background: radial-gradient(130% 90% at 12% 8%, color-mix(in srgb, var(--teal) 24%, transparent), transparent 62%); }
.veil-forest { background: radial-gradient(130% 95% at 14% 8%, color-mix(in srgb, var(--st-forest-green) 88%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--st-forest-green) 30%, transparent), transparent 55%); }
.veil-deep { background: radial-gradient(130% 95% at 14% 8%, color-mix(in srgb, var(--teal-deep) 78%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--teal-deep) 24%, transparent), transparent 55%); }
.veil-teal { background: radial-gradient(130% 95% at 14% 8%, color-mix(in srgb, var(--teal) 68%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--teal) 20%, transparent), transparent 55%); }
.veil-slate { background: radial-gradient(130% 95% at 14% 8%, color-mix(in srgb, var(--surface-2) 92%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, #000 22%, transparent), transparent 55%); }
.vc-label { position: absolute; left: 18px; top: 16px; display: inline-flex; align-items: center; gap: 7px; color: var(--st-snow); font: 800 13px/1 var(--font); letter-spacing: -0.01em; text-shadow: 0 1px 6px color-mix(in srgb, #000 45%, transparent); }
.vc-tag { padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, #fff 22%, transparent); font-size: 9.5px; font-weight: 800; letter-spacing: .02em; }
.vc-net { position: absolute; right: 16px; top: 14px; width: 40px; height: 24px; }
.vc-net svg { width: 100%; height: 100%; }
.vc-tap { position: absolute; right: 18px; bottom: 18px; color: color-mix(in srgb, var(--st-snow) 82%, transparent); font: 700 10px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; }
.cardart.frozen .vc-tap, .cardart.flipped .vc-tap { display: none; }
.cardart .back { transform: rotateY(180deg); background: linear-gradient(155deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-strong); }
.cardart.flipped { transform: rotateY(180deg); }
.vc-back { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 15px; }
.vcb-top { display: flex; align-items: center; justify-content: space-between; }
.vcb-top .vc-label { position: static; text-shadow: none; }
.vcb-top svg { width: 38px; height: 22px; }
.vcb-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--st-snow) 5%, transparent); color: var(--ink); cursor: pointer; text-align: left; }
.vcb-row:active { background: color-mix(in srgb, var(--teal) 10%, transparent); }
.vcb-k { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.vcb-v { font: 700 14px/1 var(--font); letter-spacing: .04em; font-variant-numeric: tabular-nums; text-align: right; }
.vcb-c { display: grid; place-items: center; width: 22px; height: 22px; color: var(--teal); font-weight: 800; }
.vcb-c svg { width: 16px; height: 16px; }
.vcb-row.copied .vcb-c { color: var(--pos); }
.vcb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vcb-all { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border-radius: 12px; border: 0; background: var(--teal); color: var(--accent-ink); font: 700 13.5px/1 var(--font); cursor: pointer; }
.vcb-all svg { width: 16px; height: 16px; }
.vcb-all.done { background: var(--pos); }
.vc-add { width: 100%; aspect-ratio: 3 / 2; display: grid; align-content: center; justify-items: center; gap: 3px; border: 1.5px dashed var(--line-strong); border-radius: 18px; background: color-mix(in srgb, var(--teal) 5%, var(--surface)); color: var(--ink); cursor: pointer; }
.vc-add-plus { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font-size: 26px; line-height: 1; margin-bottom: 4px; }
.vc-add > span { font: 800 15px/1 var(--font); }
.vc-add small { font-size: 11.5px; color: var(--muted); }
.vc-dots { display: flex; justify-content: center; gap: 7px; margin: -4px 0 14px; }
.vc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); cursor: pointer; transition: width .2s var(--ease), background .2s var(--ease); }
.vc-dot.on { width: 20px; border-radius: 999px; background: var(--teal); }
.vc-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.vc-meta-l { display: flex; align-items: center; gap: 9px; }
.vc-meta-l b { font-size: 15px; font-weight: 800; }
.vc-meta-r { display: grid; justify-items: end; gap: 2px; text-align: right; }
.vc-meta-r span { font-size: 12px; color: var(--muted); }
.vc-meta-lim { font-weight: 700; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.danger-ic { color: var(--danger) !important; }

/* ── Multiple virtual cards: swipeable carousel + flip-to-reveal ───── */
.vc-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 6px calc(var(--screen-pad) * -1) 6px; padding: 6px var(--screen-pad) 8px; }
.vc-rail::-webkit-scrollbar { display: none; }
.vc-slot { flex: 0 0 84%; scroll-snap-align: center; }
.vc-slot .cardwrap { margin: 0; }
/* Color veils so each virtual card reads distinct while keeping the brand art */
.veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.veil-forest { background: var(--st-forest-green); mix-blend-mode: color; opacity: .72; }
.veil-deep { background: var(--teal-deep); mix-blend-mode: color; opacity: .68; }
.veil-teal { background: var(--teal); mix-blend-mode: color; opacity: .6; }
.veil-slate { background: #434950; mix-blend-mode: color; opacity: .55; }
.vc-label { position: absolute; top: 15px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; color: var(--st-snow); font: 800 13px/1 var(--font); letter-spacing: -0.01em; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.vc-tag { padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.22); font: 700 9px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; }
.face.front .vc-net { display: none; }
.vc-tap { position: absolute; right: 16px; bottom: 18px; z-index: 2; color: rgba(255,255,255,.82); font: 700 10px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.vc-reveal { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border-radius: 999px; background: color-mix(in srgb, var(--st-jet-black) 42%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--st-snow); font: 800 11px/1 var(--font); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-snow) 20%, transparent); }
.vc-reveal svg { width: 15px; height: 15px; }
.cardart.frozen .vc-reveal, .cardart.flipped .vc-reveal { display: none; }
.cardart.flipped { transform: rotateY(180deg); }
.cardart.flipped .vc-tap { opacity: 0; }
.cardart .face.back { transform: rotateY(180deg); background: linear-gradient(145deg, var(--st-jet-black), var(--st-charcoal)); border: 1px solid color-mix(in srgb, var(--st-snow) 13%, transparent); }
.cardart .face.back::before { content: none; }
.vc-back { position: absolute; inset: 0; padding: 15px; display: flex; flex-direction: column; gap: 8px; }
.vcb-top { display: flex; align-items: center; justify-content: space-between; position: static; margin-bottom: 1px; }
.vcb-top .vc-label { position: static; text-shadow: none; }
.vcb-top svg, .vc-net svg { width: 34px; height: 21px; display: block; }
.vcb-row { display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 4px 8px; width: 100%; padding: 10px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.075); color: var(--st-snow); cursor: pointer; text-align: left; }
.vcb-row:active { background: rgba(255,255,255,.16); }
.vcb-k { grid-row: 1; grid-column: 1; font: 700 9.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--st-snow) 62%, transparent); }
.vcb-v { grid-row: 2; grid-column: 1; min-width: 0; font: 700 14px/1 var(--font-mono, ui-monospace); letter-spacing: .035em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcb-c { grid-row: 1 / span 2; grid-column: 2; display: grid; place-items: center; color: color-mix(in srgb, var(--st-lichen, #CAE9EA) 90%, #fff); }
.vcb-c svg { width: 17px; height: 17px; }
.vcb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vcb-all { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 0; border-radius: 12px; background: var(--teal); color: var(--accent-ink); font: 700 13.5px/1 var(--font); cursor: pointer; }
.vcb-all svg { width: 17px; height: 17px; }
.vcb-all.done { background: var(--pos); }
.vc-hide { display: block; margin-top: 1px; color: color-mix(in srgb, var(--st-snow) 58%, transparent); font-size: 10px; font-weight: 700; text-align: center; letter-spacing: .04em; text-transform: uppercase; }
.cardart.closed { opacity: .55; }
.cardart.closed .front img { filter: grayscale(1) brightness(.5); }
/* Add-card tile */
.vc-add { display: grid; place-content: center; justify-items: center; gap: 4px; width: 100%; aspect-ratio: 3 / 2; border: 1.5px dashed var(--line-strong); border-radius: 18px; background: color-mix(in srgb, var(--teal) 5%, var(--surface)); color: var(--ink); cursor: pointer; }
.vc-add-plus { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font: 700 24px/1 var(--font); }
.vc-add span { font: 700 14px/1 var(--font); }
.vc-add small { color: var(--muted); font-size: 11px; }
/* Dots */
.vc-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 14px; }
.vc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); cursor: pointer; transition: width .2s var(--ease), background .2s var(--ease); }
.vc-dot.on { width: 18px; border-radius: 999px; background: var(--teal); }
/* Selected-card meta strip */
.vc-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.vc-meta-l { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; }
.vc-meta-r { display: grid; justify-items: end; gap: 2px; text-align: right; font-size: 12px; color: var(--muted); }
.vc-meta-lim { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.danger-ic { color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 14%, transparent) !important; }
.activity-list { margin-bottom: 12px; }
.activity-row { grid-template-columns: 38px 1fr auto; padding: 12px 14px; }
.activity-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--teal-soft); color: var(--teal); font: 800 14px/1 var(--font); }
.activity-row .rv b { font-variant-numeric: tabular-nums; }
.danger-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin: 16px 0 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line)); border-radius: var(--r-card); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.danger-panel b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); }
.danger-panel span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.danger-btn { min-height: 40px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--danger) 44%, var(--line)); border-radius: 999px; background: transparent; color: var(--danger); font: 800 12px/1 var(--font); white-space: nowrap; cursor: pointer; }
.danger-btn:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.danger-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Spending controls: flexible purchase limit */
.limit-card { display: grid; gap: 12px; margin: 4px 0 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line)); border-radius: var(--r-card); background: var(--surface); }
.limit-card.alert-limit { border-color: var(--line); }
.limit-card.is-disabled { opacity: .72; }
.limit-head { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; }
.limit-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--teal) 15%, transparent); color: var(--teal); }
.limit-ic.soft-pink { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.limit-ic svg { width: 20px; height: 20px; }
.limit-copy b { display: block; font-size: 14px; font-weight: 800; }
.limit-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.money-field { display: grid; grid-template-columns: auto 1fr; align-items: center; min-height: 58px; padding: 0 15px; border-radius: 12px; background: color-mix(in srgb, var(--teal) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--teal) 12%, var(--line)); }
.money-field span { color: var(--muted); font: 800 22px/1 var(--font); }
.money-field input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 800 28px/1 var(--font); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.money-field input:disabled { color: var(--muted); }
.limit-range { width: 100%; accent-color: var(--teal); }
.preset-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mini-pill { min-height: 34px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 800 12px/1 var(--font); cursor: pointer; }
.mini-pill.active { border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); background: var(--teal-soft); color: var(--teal); }
.mini-pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ============ Card screen — reveal, power, activity, close (2026-07 polish) ============ */
/* Front: clear reveal affordance replaces the subtle "tap to reveal" text */
.vc-reveal { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, #fff 30%, transparent); background: color-mix(in srgb, #000 40%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 800 11px/1 var(--font); letter-spacing: .01em; text-transform: none; cursor: pointer; }
.vc-reveal svg { width: 15px; height: 15px; }
.cardart.frozen .vc-reveal, .cardart.flipped .vc-reveal, .cardart.closed .vc-reveal { display: none; }

/* Back face — cleaner type, no clipping, unified teal copy icons */
.cardart .face.back { background: linear-gradient(152deg, #1c242c 0%, #10151a 100%); }
.vc-back { padding: 15px 15px 14px; gap: 9px; }
.vcb-top .vc-label { font-size: 12.5px; letter-spacing: .01em; }
.vcb-row { grid-template-columns: 1fr 22px; gap: 3px 10px; padding: 9px 12px; background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.09); }
.vcb-k { font-size: 9px; letter-spacing: .09em; color: color-mix(in srgb, #fff 56%, transparent); }
.vcb-v { font-size: 14.5px; letter-spacing: .06em; color: #fff; }
.vcb-split .vcb-v { font-size: 13.5px; letter-spacing: .09em; }
.vcb-c { color: var(--teal); }
.vcb-c svg { width: 16px; height: 16px; }
.vcb-row.copied .vcb-c { color: var(--pos); }
.vcb-all { min-height: 42px; font-size: 13.5px; }

/* Card power (on / off) — replaces the Freeze tile, iOS card-toggle pattern */
.card-power { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0 0 16px; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); text-align: left; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.card-power .cp-l { display: grid; gap: 3px; }
.card-power .cp-l b { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.card-power .cp-l span { font-size: 12.5px; color: var(--muted); }
.card-power.off { border-color: color-mix(in srgb, var(--warn) 36%, var(--line)); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.card-power.off .cp-l b { color: var(--warn); }
.card-power .toggle { pointer-events: none; }
.card-power:disabled { opacity: .5; pointer-events: none; }

/* This card's activity */
.vc-activity-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 8px; }
.vc-activity-head .section-label { margin: 0; }
.vc-activity-head a { font-size: 12.5px; font-weight: 700; color: var(--teal); text-decoration: none; }
.tx-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.tx-row:last-child { border-bottom: 0; }
.tx-row .tx-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--surface-2); color: var(--ink); font: 800 14px/1 var(--font); }
.tx-row .tx-m b { display: block; font-size: 14px; font-weight: 700; }
.tx-row .tx-m span { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.tx-row .tx-amt { font: 800 14.5px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tx-row .tx-amt.pos { color: var(--pos); }
.vc-empty { padding: 20px 14px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* Close card — restrained destructive, no heavy red icon well */
.close-card { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin: 4px 0 6px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); border-radius: 12px; background: transparent; color: var(--danger); font: 700 14px/1 var(--font); cursor: pointer; transition: background .2s var(--ease); }
.close-card svg { width: 17px; height: 17px; }
.close-card:active { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.close-card:disabled { opacity: .55; pointer-events: none; color: var(--muted); border-color: var(--line); }

/* Compact 4-up quick actions on the card screen (keeps activity high on the page) */
.card-actions.quad { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.card-actions.quad .cact { padding: 12px 3px 10px; font-size: 10.5px; gap: 6px; }
.card-actions.quad .cact svg { width: 20px; height: 20px; }
/* Card activity uses the dashboard .tx list; give the header the standard rhythm */
#cardActivity .sec { margin-top: 4px; }

/* Armed state for the two-tap Close-card confirm on the manage screen */
.danger-btn.confirm { background: var(--danger); border-color: var(--danger); color: var(--st-jet-black); }

/* Top-bar avatar is now a link to Profile (sign out reachable from anywhere) */
a.avatar { text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.avatar:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Sign out sits at the end of Profile with a little breathing room */
.signout.profile-signout { margin-top: 18px; }
.signout.confirm { background: var(--danger); border-color: var(--danger); color: var(--st-jet-black); }

/* ===== Card scroller + flip-back fixes (2026-07) ===== */
/* Remove the drop shadow (looked heavy, esp. light mode) */
.cardart .face { box-shadow: none; }
/* Full-width slots so the FIRST card centers in the snap rail (84% peek left it off-center) */
.vc-rail { padding-inline: var(--screen-pad); }
.vc-slot { flex: 0 0 100%; scroll-snap-align: center; }
/* Flip-back: everything fits inside the 3:2 card, no clipping */
.vc-back { padding: 13px 13px 12px; gap: 7px; }
.vcb-top { margin-bottom: 0; justify-content: flex-start; }
.vcb-all { margin-top: 2px; min-height: 40px; }
.vc-hide { margin-top: 0; font-size: 9.5px; opacity: .8; }

/* ===== Profile — KYC-locked PII (name not editable, Update pills, income verification) ===== */
.pii-name { display:flex; align-items:center; gap:14px; margin: 2px 2px 8px; }
.pii-name .avatar { width:56px; height:56px; font-size:20px; }
.pii-name b { display:block; font-size:20px; font-weight:800; letter-spacing:-0.01em; }
.pii-name .locked { display:inline-flex; align-items:center; gap:5px; margin-top:3px; font-size:11.5px; font-weight:700; color:var(--faint); }
.pii-name .locked svg { width:13px; height:13px; }
.pii-card { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; margin-bottom:14px; }
.pii-row { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; padding:14px; border-bottom:1px solid var(--line); }
.pii-row:last-child { border-bottom:0; }
.pii-ic { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--surface-2); color:var(--ink); }
.pii-ic svg { width:20px; height:20px; }
.pii-b { min-width:0; }
.pii-b .k { display:block; font-size:12px; color:var(--muted); }
.pii-b .v { display:block; margin-top:2px; font-size:15px; font-weight:700; letter-spacing:-0.005em; }
.pii-b .v.two { font-size:14px; line-height:1.32; font-weight:700; }
.pii-b .verified { display:inline-flex; align-items:center; gap:4px; margin-top:5px; font-size:11px; font-weight:800; color:var(--pos); }
.pii-b .verified svg { width:13px; height:13px; }
/* Both a <button> (fields that just raise a request) and an <a> (fields with a real
   flow behind them, like email). inline-flex so the anchor centres like the button. */
.pii-update { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 15px; border:0; border-radius:999px; background:var(--teal); color:var(--accent-ink); font:800 12.5px/1 var(--font); text-decoration:none; cursor:pointer; white-space:nowrap; }
.pii-update:active { background:var(--teal-deep); }
.pii-update:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

/* ===== Empty / error / maintenance states (reusable) ===== */
.state { display:grid; place-content:center; justify-items:center; text-align:center; gap:0; min-height:70vh; padding:32px 24px; }
.state-ic { display:grid; place-items:center; width:88px; height:88px; border-radius:28px; background:var(--teal-soft); color:var(--teal); margin-bottom:18px; }
.state-ic svg { width:40px; height:40px; }
.state-ic.warn { background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }
.state-ic.danger { background:color-mix(in srgb, var(--danger) 15%, transparent); color:var(--danger); }
.state-code { margin:0 0 8px; font:800 12px/1 var(--font); letter-spacing:.22em; text-transform:uppercase; color:var(--faint); }
.state h1 { margin:0; font-size:23px; font-weight:800; letter-spacing:-0.02em; }
.state p { margin:10px 0 0; max-width:32ch; color:var(--muted); font-size:14px; line-height:1.5; text-wrap:pretty; }
.state-actions { display:grid; gap:10px; width:100%; max-width:280px; margin-top:24px; }
.state-actions .btn { min-height:50px; }
/* Inline empty block (drops into a list area, keeps the dock) */
.empty-inline { display:grid; place-items:center; justify-items:center; text-align:center; gap:0; padding:44px 24px; }
.empty-inline .state-ic { width:72px; height:72px; border-radius:22px; margin-bottom:14px; }
.empty-inline .state-ic svg { width:32px; height:32px; }
.empty-inline h2 { margin:0; font-size:18px; font-weight:800; letter-spacing:-0.01em; }
.empty-inline p { margin:8px 0 0; max-width:30ch; color:var(--muted); font-size:13.5px; line-height:1.5; }

/* ===== Late-payment alert banner (dashboard) + severity notification wells ===== */
.alert-banner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin:0 0 16px; padding:14px; border-radius:var(--r-card); border:1px solid color-mix(in srgb, var(--danger) 34%, var(--line)); background:color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.alert-banner.warn { border-color:color-mix(in srgb, var(--warn) 38%, var(--line)); background:color-mix(in srgb, var(--warn) 9%, var(--surface)); }
.alert-ic { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:color-mix(in srgb, var(--danger) 16%, transparent); color:var(--danger); }
.alert-banner.warn .alert-ic { background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }
.alert-ic svg { width:20px; height:20px; }
.alert-b { min-width:0; }
.alert-b b { display:block; font-size:14px; font-weight:800; letter-spacing:-0.01em; }
.alert-b span { display:block; margin-top:2px; font-size:12.5px; color:var(--muted); line-height:1.35; }
.alert-cta { display:inline-flex; align-items:center; min-height:36px; padding:0 15px; border:0; border-radius:999px; background:var(--tangerine); color:var(--st-charcoal); font:800 12.5px/1 var(--font); white-space:nowrap; text-decoration:none; cursor:pointer; }
.alert-cta:hover { background:var(--tangerine-hover); }
/* Severity icon wells in notification rows */
.row .ri.sev-danger { background:color-mix(in srgb, var(--danger) 15%, transparent); color:var(--danger); }
.row .ri.sev-warn { background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }

/* Payment-status card in the insight slot: past-due variant + single Pay button */
.insight.due { border-color: color-mix(in srgb, var(--danger) 36%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 10%, var(--surface)), var(--surface)); }
.insight.due .t b { color: var(--danger); }
.insight-pay, .owed-cta { display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:38px; padding:0 16px; border-radius:999px; border:0; cursor:pointer; background:var(--tangerine); color:var(--st-charcoal); font:800 13px/1 var(--font); white-space:nowrap; text-decoration:none; }
.insight-pay:hover, .owed-cta:hover { background:var(--tangerine-hover); }
.insight-pay:active, .owed-cta:active { transform:translateY(1px); }

.insight[hidden] { display: none; }

/* ===== Appearance theme switcher (profile) ===== */
.segbar { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:5px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.seg-opt { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; border:0; border-radius:10px; background:transparent; color:var(--muted); font:800 13px/1 var(--font); cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease); }
.seg-opt svg { width:17px; height:17px; }
.seg-opt.active { background:var(--teal-soft); color:var(--teal); }
.seg-opt:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

/* ===== Finn hover-lottie mark (replaces static robot svg) ===== */
.finn-lottie { width: 100%; height: 100%; display: block; }
.finn-lottie-mark { display: grid; place-items: center; }

/* ===== Global avatar menu — Profile + Sign out from any screen ===== */
button.avatar { border: 0; padding: 0; font: 700 14px/1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.av-menu { position: absolute; z-index: 60; top: 86px; right: 14px; min-width: 194px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: 0 16px 36px color-mix(in srgb, #000 42%, transparent); }
.av-menu[hidden] { display: none; }
.av-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 700 14px/1 var(--font); text-decoration: none; cursor: pointer; text-align: left; }
.av-item svg { width: 19px; height: 19px; color: var(--muted); }
.av-item:hover, .av-item:active { background: var(--surface-2); }
.av-item.danger { color: var(--danger); }
.av-item.danger svg { color: var(--danger); }

/* ===== AutoPay enroll — date select + account radios ===== */
.fld-select { width:100%; min-height:52px; padding:0 40px 0 14px; border:1px solid var(--line); border-radius:12px; background-color:var(--surface-2); color:var(--ink); font:700 15px/1 var(--font); -webkit-appearance:none; appearance:none; background-repeat:no-repeat; background-position:right 14px center; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238E9296' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }
.fld-select:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.acct { width:100%; text-align:left; background:transparent; border:0; outline:0; cursor:pointer; }
.acct.on { background:color-mix(in srgb, var(--teal) 8%, transparent); }
.acct:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; }
.acct .bank { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; color:#fff; font:800 11px/1 var(--font); }
.acct .bank.chase { background:#1668c4; }
.acct .bank.bofa { background:#b81d24; }
.acct .bank svg { width:20px; height:20px; }
.acct-radio { position:relative; width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); display:grid; place-items:center; }
.acct.on .acct-radio { border-color:var(--teal); }
.acct.on .acct-radio::after { content:''; width:11px; height:11px; border-radius:50%; background:var(--teal); }

.money-field[hidden] { display: none; }

/* ===== Finn status stack — one Finn, multiple messages (on-track, past-due, disputes) ===== */
.finn-stack { margin:4px 0 18px; padding:6px 14px 8px; border:1px solid color-mix(in srgb, var(--teal) 30%, var(--line)); border-radius:var(--r-card); background:linear-gradient(180deg, color-mix(in srgb, var(--teal) 10%, var(--surface)), var(--surface)); }
.fs-head { display:flex; align-items:center; gap:9px; padding:8px 0 2px; }
.fs-head .f { width:32px; height:32px; display:grid; place-items:center; }
.fs-head b { font-size:12.5px; font-weight:800; letter-spacing:.03em; }
.fs-msgs { display:grid; }
.fs-msg { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:12px 2px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
.fs-msg:first-child { border-top:0; }
.fs-t b { display:block; font-size:14px; font-weight:800; letter-spacing:-0.01em; }
.fs-t span { display:block; margin-top:2px; font-size:12.5px; color:var(--muted); line-height:1.35; }
.fs-msg.tone-danger .fs-t b { color:var(--danger); }
.fs-msg.tone-info .fs-t b { color:var(--teal); }
.fs-go { width:20px; height:20px; color:var(--muted); flex:0 0 auto; }
.fs-cta { display:inline-flex; align-items:center; min-height:34px; padding:0 15px; border-radius:999px; background:var(--tangerine); color:var(--st-charcoal); font:800 12.5px/1 var(--font); white-space:nowrap; text-decoration:none; }
.fs-cta:hover { background:var(--tangerine-hover); }

/* ===== Dispute a charge (bank-grade multi-step) ===== */
.radio-opt { display:grid; grid-template-columns:24px 1fr; align-items:center; gap:12px; width:100%; padding:15px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); text-align:left; cursor:pointer; margin-bottom:10px; font:600 14px/1.35 var(--font); }
.radio-opt .rd { width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); display:grid; place-items:center; }
.radio-opt.on { border-color:color-mix(in srgb, var(--teal) 45%, var(--line)); background:var(--teal-soft); }
.radio-opt.on .rd { border-color:var(--teal); }
.radio-opt.on .rd::after { content:''; width:11px; height:11px; border-radius:50%; background:var(--teal); }
.radio-opt:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
/* Multi-select charge picker. Same .tx row as Activity plus a checkbox column, so
   a charge looks the same everywhere it's listed. Teal check = state, per the
   token roles; the CTA stays tangerine like every other CTA. */
.tx.pick button { display:grid; grid-template-columns:40px 1fr auto 24px; align-items:center; gap:13px; width:100%; padding:13px 2px; border:0; border-bottom:1px solid var(--line); background:none; color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
.tx.pick button:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; border-radius:8px; }
.pick-box { width:22px; height:22px; border-radius:7px; border:2px solid var(--line-strong); display:grid; place-items:center; transition:background .16s var(--ease), border-color .16s var(--ease); }
.pick-box svg { width:14px; height:14px; color:var(--accent-ink); opacity:0; transform:scale(.5); transition:opacity .16s var(--ease), transform .16s var(--ease); }
.tx.pick button[aria-checked="true"] .pick-box { background:var(--teal); border-color:var(--teal); }
.tx.pick button[aria-checked="true"] .pick-box svg { opacity:1; transform:none; }
/* Sticky footer: the running count and the CTA have to stay put while the list
   scrolls, or picking the 4th charge means scrolling back down to find Continue. */
.app.has-pickbar .scroll { padding-bottom:0; }
/* The .app layout already ends .scroll above the home indicator, so the bar only
   needs its own breathing room — adding sab + homebar-h here double-counts it. */
.pickbar { position:sticky; bottom:0; z-index:4; margin:14px calc(var(--screen-pad) * -1) 0; padding:12px var(--screen-pad); border-top:1px solid var(--line); background:var(--bg); }
.pickbar .btn { margin:0; }
.pick-count { display:block; margin:0 0 9px; text-align:center; font-size:12px; font-weight:600; color:var(--muted); }
.pick-recap { margin:0 0 18px; }

/* ===== Activity multi-select to dispute =====
   Minimalist: no new persistent chrome. A select toggle in the control row reveals
   a checkbox column; while selecting, the dock is swapped for a slim Dispute bar so
   the mode costs no extra vertical space. Off by default — Activity stays a list. */
.icon-ctrl.on { background:var(--teal); border-color:var(--teal); color:var(--accent-ink); }
#txList.selecting .tx a { grid-template-columns:40px 1fr auto 24px; }
#txList.selecting .tx a .pick-box { justify-self:end; }
.tx a .pick-box { display:none; }
#txList.selecting .tx a .pick-box { display:grid; }
.tx a[aria-checked="true"] .pick-box { background:var(--teal); border-color:var(--teal); }
.tx a[aria-checked="true"] .pick-box svg { opacity:1; transform:none; }
/* In select mode a row picks, it doesn't navigate — soften the pressed-nav feel. */
#txList.selecting .tx a { cursor:pointer; }
.select-bar { position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:13; width:100%; max-width:430px; display:none; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:12px var(--screen-pad) calc(var(--sab) + 14px); border-top:1px solid var(--line); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.app.selecting .select-bar { display:grid; }
.app.selecting .dock { display:none; }
.select-bar .sb-count { font-size:13px; font-weight:700; color:var(--ink); }
.select-bar .sb-count span { color:var(--muted); font-weight:600; }
.select-bar .sb-act { display:flex; gap:8px; align-items:center; }
.select-bar .sb-cancel { background:none; border:0; color:var(--muted); font:700 13px/1 var(--font); padding:10px 6px; cursor:pointer; }
.select-bar .sb-dispute { min-height:42px; padding:0 18px; border:0; border-radius:12px; background:var(--tangerine); color:var(--st-charcoal); font:800 13px/1 var(--font); cursor:pointer; }
.select-bar .sb-dispute:disabled { opacity:.5; }
/* Dispute entry — a real labeled button, not a mystery icon in the control cluster. */
.act-second { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 2px 12px; }
.dispute-entry { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 11px; border:1px solid color-mix(in srgb, var(--teal) 30%, var(--line)); border-radius:999px; background:var(--surface); color:var(--teal); font:700 11.5px/1 var(--font); cursor:pointer; }
.dispute-entry svg { width:15px; height:15px; }
.dispute-entry:active { transform:translateY(1px); }
.dispute-entry.on { background:var(--teal); border-color:var(--teal); color:var(--accent-ink); }
.dispute-entry:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

/* Split center — free split entry. Teal, badged Ready, with a live countdown. */
.qs-offer { display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:12px; margin:10px 0 0; padding:12px 13px; border:1px solid color-mix(in srgb, var(--teal) 32%, var(--line)); border-radius:var(--r-card); background:color-mix(in srgb, var(--teal) 9%, var(--surface)); text-decoration:none; color:var(--ink); }
.qs-offer-ic { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--teal); color:var(--accent-ink); }
.qs-offer-ic svg { width:22px; height:22px; }
.qs-offer-t { display:grid; gap:2px; min-width:0; }
.qs-offer-t b { font-size:13.5px; font-weight:700; }
.qs-offer-t span { font-size:12px; line-height:1.4; color:var(--muted); }
.qs-offer-t span b { color:var(--teal); font-weight:700; }
.qs-offer-badge { flex:0 0 auto; padding:4px 9px; border-radius:999px; background:var(--teal); color:var(--accent-ink); font:800 10px/1 var(--font); letter-spacing:.04em; text-transform:uppercase; }

/* ===== Yearly fee-free split =====
   The perk is the product's own feature given away once a year, so it wears the
   product's colour — teal, the split glyph — not a gold "promo" costume that would
   read as someone else's ad inside the app. */
.offer-hero { display:grid; justify-items:start; gap:0; margin:6px 0 18px; }
.offer-mark { display:grid; place-items:center; width:64px; height:64px; margin-bottom:14px; border-radius:20px; background:var(--teal); color:var(--accent-ink); animation:lockPop 460ms var(--ease) both; }
.offer-mark svg { width:32px; height:32px; stroke-width:2; }
.offer-hero.is-used .offer-mark { background:var(--surface-2); color:var(--muted); }
.offer-eyebrow { margin:0 0 6px; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); }
.offer-hero.is-used .offer-eyebrow { color:var(--faint); }
.offer-hero h1 { margin:0; font-size:clamp(24px,7.2vw,29px); font-weight:800; letter-spacing:-0.03em; line-height:1.14; }
.offer-sub { margin:10px 0 0; font-size:14px; line-height:1.5; color:var(--muted); }
.offer-sub b { color:var(--ink); font-weight:700; }
.free-b { color:var(--pos); }
/* Free-split promo banner (Home + Split a purchase). A dark hero card that
   surfaces the yearly fee-free split: left copy + CTA, right a stylized Splitit
   card with a "3 months no fee" ring badge. Colours are fixed light-on-dark so
   the banner reads the same in light and dark mode. */
.fs-banner { position:relative; display:block; overflow:hidden; border-radius:20px; background:var(--jet,#13191E); border:1px solid rgba(255,255,255,.09); padding:18px 20px; min-height:120px; margin:6px 0 14px; text-decoration:none; }
.fs-banner .fsb-in { position:relative; z-index:2; width:60%; }
.fsb-new { display:inline-block; margin-bottom:11px; padding:3px 10px; border-radius:999px; background:var(--teal); color:var(--accent-ink); font:800 10px/1 var(--font); letter-spacing:.09em; text-transform:uppercase; }
.fsb-h { margin:0; font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.12; color:#fff; }
.fsb-sub { margin:5px 0 0; font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.64); }
.fsb-cta { display:inline-block; margin-top:13px; padding:8px 16px; border-radius:999px; background:var(--teal); color:var(--accent-ink); font:800 12.5px/1 var(--font); }
.fs-banner:active .fsb-cta { transform:translateY(1px); }
.fs-banner.is-applied .fsb-cta { background:var(--pos); color:var(--accent-ink); }
.fs-art { position:absolute; right:2px; top:0; bottom:0; width:48%; max-width:220px; z-index:1; pointer-events:none; }
.fs-art svg { position:absolute; right:0; top:50%; transform:translateY(-50%); width:100%; height:auto; }
@media (max-width:359px){ .fs-banner .fsb-in{width:66%} .fs-art{opacity:.85} }

/* Home banner. Teal wash + the split glyph — same family as .insight, but it is an
   offer, not an advisory, so it never collapses behind the Finn chevron. */
.offer-banner { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; margin:0 0 14px; padding:13px 14px; border:1px solid color-mix(in srgb, var(--teal) 30%, var(--line)); border-radius:var(--r-card); background:color-mix(in srgb, var(--teal) 8%, var(--surface)); text-decoration:none; color:var(--ink); }
.offer-banner .ob-ic { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--teal); color:var(--accent-ink); }
/* stroke must be named here: these glyphs carry no stroke attribute of their own,
   and fill:none without a stroke paints nothing — the well renders as a solid block. */
.offer-banner .ob-ic svg { width:21px; height:21px; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.offer-banner .ob-t { display:grid; gap:2px; min-width:0; }
.offer-banner .ob-t b { font-size:13.5px; font-weight:700; }
.offer-banner .ob-t span { font-size:12px; line-height:1.4; color:var(--muted); }
.offer-banner .chev { width:18px; height:18px; color:var(--faint); }
.offer-banner:active { background:color-mix(in srgb, var(--teal) 13%, var(--surface)); }
/* Used state: the free split is spent — tone down from the teal offer to a neutral
   "done" note so the screen reads honest, not like it's still pitching the perk. */
.offer-banner.is-used { border-color:var(--line); background:var(--surface); }
.offer-banner.is-used .ob-ic { background:color-mix(in srgb, var(--pos) 20%, transparent); color:var(--pos); }
/* Green, not teal: this is money not spent, same role as .amt.pos in Activity. */
.so-fee.is-free b { color:var(--pos); }
.free-note { margin:0 0 12px; padding:11px 13px; border:1px solid color-mix(in srgb, var(--pos) 30%, var(--line)); border-radius:12px; background:color-mix(in srgb, var(--pos) 8%, var(--surface)); font-size:12.5px; line-height:1.45; color:var(--muted); }
.free-note b { color:var(--ink); font-weight:700; }

/* First-split recommendation. Carries the celebration the old screen never had —
   the glyph pops in, teal, once. Not confetti: this is a money decision, and the
   reward for setting it up is that it looks handled. */
.dflt-card { margin:2px 0 14px; padding:18px 16px; border:1px solid color-mix(in srgb, var(--teal) 30%, var(--line)); border-radius:var(--r-card); background:color-mix(in srgb, var(--teal) 8%, var(--surface)); }
.dflt-mark { display:grid; place-items:center; width:52px; height:52px; margin-bottom:13px; border-radius:16px; background:var(--teal); color:var(--accent-ink); animation:lockPop 460ms var(--ease) both; }
.dflt-mark svg { width:27px; height:27px; stroke-width:2; }
.dflt-kicker { display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); }
.dflt-kicker .dflt-tag { margin-left:0; }
.dflt-line { margin:0; font-size:20px; font-weight:800; letter-spacing:-0.02em; line-height:1.3; }
.dflt-line b { color:var(--teal); font-weight:800; }
.dflt-eg { margin:9px 0 0; font-size:12.5px; line-height:1.45; color:var(--muted); }
.dflt-eg b { color:var(--ink); font-weight:700; }
.adv-toggle { display:block; margin:0 auto 16px; }
/* The decline. Reachable and plainly labelled, but a link — not the visual twin of
   the CTA it argues against. --muted, not --teal: teal reads as an action we want,
   and this one isn't. Needs .linkish.opt-out — .linkish sets teal at equal
   specificity and is declared later, so a bare .opt-out loses. */
.linkish.opt-out { display:block; margin:14px auto 0; color:var(--muted); font-weight:600; }
.linkish.opt-out:hover { color:var(--ink); }
.optout-confirm { margin:16px 0 0; padding:16px; border:1px solid color-mix(in srgb, var(--teal) 26%, var(--line)); border-radius:var(--r-card); background:color-mix(in srgb, var(--teal) 7%, var(--surface)); }
.oc-h { margin:0 0 7px; font-size:16px; font-weight:800; letter-spacing:-0.01em; }
.oc-b { margin:0 0 14px; font-size:13px; line-height:1.5; color:var(--muted); }
/* Banner-shaped, but nothing to tap — it explains the CTA rather than competing. */
.offer-banner.is-static { grid-template-columns:38px 1fr; cursor:default; }
@media (prefers-reduced-motion: reduce) { .dflt-mark, .offer-mark { animation:none; } }

/* Notification settings. A sub-row belongs to the row above it — indented into the
   icon column so the ownership is visual, not something you have to infer. */
.row.sub-row { grid-template-columns: 1fr auto; padding-left: 64px; background: color-mix(in srgb, var(--st-snow) 2%, transparent); }
[data-theme="light"] .row.sub-row { background: color-mix(in srgb, var(--st-charcoal) 3%, transparent); }
.row.sub-row .rt b { font-weight: 600; }
/* Locked = shown, explained, not editable. Dimming the whole row would read as
   broken; only the control is unavailable, the information still matters. */
.row.locked-row .rt b { color: var(--ink); }
.chip.lock { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--st-snow) 8%, transparent); color: var(--muted); }
[data-theme="light"] .chip.lock { background: color-mix(in srgb, var(--st-charcoal) 7%, transparent); }
.chip.lock svg { width: 11px; height: 11px; }
.perm-banner { display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 11px; margin: 6px 0 14px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line)); border-radius: var(--r-card); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.perm-banner .pb-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.perm-banner .pb-ic svg { width: 19px; height: 19px; }
.perm-banner .pb-t { display: grid; gap: 3px; }
.perm-banner .pb-t b { font-size: 13.5px; font-weight: 700; }
.perm-banner .pb-t span { font-size: 12px; line-height: 1.45; color: var(--muted); }

/* Actionable notification — a question you can answer without leaving the list.
   Ringed while it's asking; the ring drops once answered so the eye stops
   returning to something that's already dealt with. */
.ask-card { border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--line)); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); transition: border-color .3s var(--ease), background .3s var(--ease); }
.ask-card.answered { border-color: var(--line); background: var(--surface); }
/* The question and its two answers are ONE item, not two list rows. .row draws a
   bottom rule whenever it isn't the last child, which put a full-bleed grey line
   between the alert and the buttons that answer it — flush against their top edge,
   with 14px of air above it, so the pair read as detached and the spacing looked
   lopsided. No rule; the buttons belong to the question above them. */
.ask-card .row { border-bottom: 0; }
.ask-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 14px 14px; }
/* Both answers are opaque so they read as a matched pair. "Yes" used pure --surface
   over the card's danger tint, which punched a white hole next to a translucent red
   chip and made the two buttons look like different components. */
.ask-btn { min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 700 13px/1.2 var(--font); cursor: pointer; }
.ask-btn:active { transform: translateY(1px); }
.ask-btn.danger { border-color: color-mix(in srgb, var(--danger) 44%, var(--line)); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.ask-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dispute-text { width:100%; min-height:130px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--ink); font:400 14px/1.5 var(--font); resize:vertical; }
.dispute-text:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.char-left { display:block; text-align:right; margin:6px 2px 0; font-size:11.5px; color:var(--faint); }
.dz { display:grid; place-items:center; gap:6px; padding:34px 20px; border:1.5px dashed var(--line-strong); border-radius:16px; background:color-mix(in srgb, var(--teal) 4%, var(--surface)); text-align:center; cursor:pointer; }
.dz svg { width:38px; height:38px; color:var(--teal); }
.dz b { font-size:14px; font-weight:700; }
.dz .browse { color:var(--teal); font-weight:800; }
.dz small { color:var(--muted); font-size:12px; }
.file-chip { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-top:10px; }
.file-chip .fi { color:var(--teal); } .file-chip .fi svg { width:22px; height:22px; }
.file-chip b { font-size:13.5px; } .file-chip small { color:var(--muted); font-size:11.5px; display:block; margin-top:2px; }
.file-chip .rm { display:grid; place-items:center; width:30px; height:30px; background:transparent; border:0; color:var(--muted); cursor:pointer; } .file-chip .rm svg { width:18px; height:18px; }
.certify { display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; padding:2px; margin:16px 2px; background:transparent; border:0; text-align:left; cursor:pointer; }
.certify .ck { margin-top:1px; width:22px; height:22px; border-radius:6px; border:2px solid var(--line-strong); display:grid; place-items:center; color:transparent; flex:0 0 auto; }
.certify.on .ck { border-color:var(--teal); background:var(--teal); color:var(--accent-ink); }
.certify .ck svg { width:14px; height:14px; }
.certify span { font-size:13px; color:var(--muted); line-height:1.45; }
.dispute-ok { display:grid; place-items:center; text-align:center; gap:0; padding:44px 24px; min-height:66vh; }
.dispute-ok .ok-ring { display:grid; place-items:center; width:96px; height:96px; border-radius:50%; border:3px solid var(--teal); color:var(--teal); margin-bottom:20px; }
.dispute-ok .ok-ring svg { width:44px; height:44px; }
.dispute-ok h1 { margin:0; font-size:22px; font-weight:800; letter-spacing:-0.02em; }
.dispute-ok p { margin:12px 0 0; max-width:32ch; color:var(--muted); font-size:14px; line-height:1.5; text-wrap:pretty; }

.btn:disabled { opacity:.5; pointer-events:none; box-shadow:none; }

/* ===== Finn signals — compact, collapsible (signal, not noise) ===== */
.finn-signals { margin:4px 0 18px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; }
.fsig-head { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:11px; width:100%; padding:12px 14px; border:0; background:transparent; text-align:left; cursor:pointer; }
.fsig-head .f { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; }
.fsig-lead { min-width:0; }
.fsig-lead b { display:block; font-size:14px; font-weight:800; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fsig-lead span { display:block; margin-top:1px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.finn-signals.tone-danger .fsig-lead b { color:var(--danger); }
.finn-signals.tone-warn .fsig-lead b { color:var(--warn); }
.finn-signals.tone-info .fsig-lead b { color:var(--teal); }
.fsig-badge { display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--teal); color:var(--accent-ink); font:800 11.5px/1 var(--font); }
.fsig-badge[hidden] { display:none; }
.fsig-chev { width:20px; height:20px; color:var(--muted); transition:transform .2s var(--ease); flex:0 0 auto; }
.fsig-chev[hidden] { display:none; }
.finn-signals:not(.collapsed) .fsig-chev { transform:rotate(180deg); }
.fsig-body { padding:0 14px 8px; }
.fsig-body[hidden] { display:none; }
.fsig-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
.fsig-row .rt b { display:block; font-size:13.5px; font-weight:800; letter-spacing:-0.01em; }
.fsig-row .rt span { display:block; margin-top:2px; font-size:12px; color:var(--muted); line-height:1.35; }
.fsig-row.tone-danger .rt b { color:var(--danger); }
.fsig-row.tone-warn .rt b { color:var(--warn); }
.fsig-row.tone-info .rt b { color:var(--teal); }
.fsig-row .rgo { width:18px; height:18px; color:var(--muted); flex:0 0 auto; }
.fsig-cta { display:inline-flex; align-items:center; min-height:32px; padding:0 14px; border-radius:999px; background:var(--tangerine); color:var(--st-charcoal); font:800 12px/1 var(--font); text-decoration:none; white-space:nowrap; }
.fsig-cta:hover { background:var(--tangerine-hover); }

/* ===== Upload zone — mobile-native (tap → Photos / Files / Camera). Drag-drop is desktop-only sugar ===== */
.dz { display:grid; place-items:center; gap:5px; padding:24px 18px 20px; border:1px solid var(--line); border-radius:16px; background:color-mix(in srgb, var(--teal) 4%, var(--surface)); text-align:center; cursor:pointer; }
.dz.over { border-color:var(--teal); background:var(--teal-soft); }
.dz-ic { display:grid; place-items:center; width:54px; height:54px; border-radius:16px; background:var(--teal-soft); color:var(--teal); margin-bottom:6px; }
.dz-ic svg { width:26px; height:26px; }
.dz b { font-size:15px; font-weight:800; letter-spacing:-0.01em; }
.dz small { color:var(--muted); font-size:12px; }
.dz-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; margin-top:14px; }
.dz-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 12px; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); color:var(--ink); font:800 13px/1 var(--font); cursor:pointer; }
.dz-btn svg { width:17px; height:17px; color:var(--teal); }
.dz-btn:active { background:var(--surface-2); }
.dz-btn:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }

/* Finn mark: always fill its slot (context rules below can still pin exact px) */
.finn-character { width: 100%; height: 100%; }
/* Banner Finn was collapsing to ~13px — give it a real size */
.fsig-head .f { width: 36px; height: 36px; }
.fsig-head .f .finn-character { width: 36px; height: 36px; }

/* ============ Onboarding — 8-screen flow (2026-07) ============
   Pre-auth screens: no dock, no avatar cluster. One decision per screen.
   Components here are reused by Account (auto-split rule, link a bank). */

/* Phase meter — thin, honest, never a spinner-in-disguise.
   Three segments, one per phase (You · Your account · Your setup) — NOT one per
   screen. Nine numbered dots invited counting, and counting a nine-step setup is
   how people abandon one. Each segment fills FRACTIONALLY as you move through its
   phase, so the bar still advances on every single screen while only ever asking
   you to hold three things in your head. --f is the fill for that segment. */
.ob-steps { display: flex; gap: 5px; margin: 2px 0 20px; }
.ob-steps[hidden] { display: none; }
.ob-steps i { position: relative; flex: 1; height: 3px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.ob-steps i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--f, 0%); border-radius: 999px; background: var(--teal); transition: width .35s var(--ease); }
.ob-steps i.on { --f: 100%; }

/* Welcome */
.ob-splash { display: grid; justify-items: center; text-align: center; padding: 18px 6px 0; }
.ob-splash .art { width: 218px; margin-bottom: 26px; filter: drop-shadow(0 22px 40px color-mix(in srgb, #000 40%, transparent)); animation: obRise .7s var(--ease) both; }
.ob-splash h1 { margin: 0; font: 800 27px/1.15 var(--font); letter-spacing: -0.03em; }
.ob-splash p { margin: 10px 0 0; max-width: 300px; color: var(--muted); font: 400 14px/1.5 var(--font-body); }
@keyframes obRise { from { opacity: 0; transform: translateY(14px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ob-splash .art { animation: none; } }

/* One-time code */
.otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 4px 0 14px; }
.otp input { width: 100%; min-height: 58px; padding: 0; text-align: center; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: 800 24px/1 var(--font); font-variant-numeric: tabular-nums; caret-color: var(--teal); }
.otp input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.otp input.filled { border-color: color-mix(in srgb, var(--teal) 45%, var(--line)); background: var(--teal-soft); }
.otp.bad input { border-color: var(--danger); animation: otpShake .3s var(--ease); }
@keyframes otpShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .otp.bad input { animation: none; } }
.otp-err { margin: -6px 0 10px; color: var(--danger); font: 600 12.5px/1.4 var(--font); }
.otp-err[hidden] { display: none; }
.linkish { border: 0; background: transparent; color: var(--teal); font: 700 13px/1 var(--font); cursor: pointer; padding: 8px 2px; text-decoration: none; }
.linkish:disabled { color: var(--faint); cursor: default; }

/* Agreement — scroll to the end before you can accept */
.agree-box { height: 250px; overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 15px; }
.agree-box h2 { margin: 15px 0 6px; font: 800 13.5px/1.3 var(--font); }
.agree-box h2:first-child { margin-top: 0; }
.agree-box p { margin: 0 0 10px; font: 400 12.5px/1.55 var(--font-body); color: var(--muted); }
.agree-box .placeholder { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 10px 12px; color: var(--faint); font-size: 12px; }
.agree-hint { display: flex; align-items: center; gap: 7px; margin: 10px 2px 12px; color: var(--muted); font: 600 12px/1 var(--font); }
.agree-hint svg { width: 15px; height: 15px; }
.agree-hint.read { color: var(--pos); }

/* Plaid bank link — consent, picker, sign-in, accounts in one flow */
.pl-link { display: flex; align-items: center; margin: 8px 0 22px; }
.pl-node { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); flex: 0 0 auto; }
.pl-node img, .pl-node svg { width: 28px; height: 28px; }
.pl-dots { flex: 1; height: 2px; margin: 0 10px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 11px); }
.bank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bank-tile { display: grid; place-items: center; gap: 9px; min-height: 94px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: 800 13px/1.2 var(--font); text-align: center; cursor: pointer; }
.bank-tile:active { transform: translateY(1px); }
.bank-tile .bl { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--surface-2); color: var(--teal); }
.bank-tile .bl svg { width: 20px; height: 20px; }
.pl-secure { display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.pl-secure svg { width: 18px; height: 18px; color: var(--teal); flex: 0 0 auto; margin-top: 1px; }
.pl-secure p { margin: 0; color: var(--muted); font: 400 12.5px/1.5 var(--font-body); }

/* Auto-split rule — the threshold that decides what splits itself */
.as-value { text-align: center; padding: 4px 0 2px; }
.as-value b { display: block; font: 800 42px/1 var(--font); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.as-value span { display: block; margin-top: 7px; color: var(--muted); font: 400 12.5px/1.4 var(--font-body); }
.as-ticks { display: flex; justify-content: space-between; margin-top: 4px; color: var(--faint); font: 600 11px/1 var(--font); }

/* Digital wallet — Highnote in-app push provisioning */
.wallet-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 18px; border: 0; border-radius: var(--r-tile); background: #000; color: #fff; font: 700 15px/1 var(--font); cursor: pointer; }
.wallet-btn svg { width: 22px; height: 22px; }
.wallet-btn:active { transform: translateY(1px); }
.wallet-btn:disabled { opacity: .45; pointer-events: none; }
.wallet-btn.added { background: var(--teal-soft); color: var(--teal); border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line)); }
:root[data-theme="light"] .wallet-btn { background: #1D252D; }
:root[data-theme="light"] .wallet-btn.added { background: var(--teal-soft); }

/* A late-fee heads-up must not wear the same calm teal as an FYI. */
.pay-scope.warn { background: color-mix(in srgb, var(--warn) 13%, transparent); border-color: color-mix(in srgb, var(--warn) 38%, var(--line)); }
.pay-scope.warn svg { color: var(--warn); }

/* `hidden` must win over every layout display we set. Class-level display:grid
   silently beats the attribute, which has bitten .insight, .money-field,
   .ob-steps, and .state — so cover the whole family in one place. */
.state[hidden], .list[hidden], .summary[hidden], .stack[hidden], .preset-row[hidden], .segbar[hidden], .otp[hidden],
.lock-in[hidden], .split-opts[hidden], .sv-bar[hidden] { display: none; }

/* ============ Onboarding masthead + first-split moment (2026-07) ============
   A signup screen with an empty top bar reads unfinished, not calm. Each step
   now carries: centered wordmark, progress, a step eyebrow, then the question. */
.tb-brand { justify-self: center; }

.ob-head { margin: 2px 0 20px; }
.ob-head .ob-steps { margin: 0 0 14px; }
.ob-eyebrow { margin: 0 0 8px; color: var(--teal); font: 800 11px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; }
.ob-head h1 { margin: 0; font: 800 26px/1.16 var(--font); letter-spacing: -0.032em; }
.ob-head p { margin: 9px 0 0; color: var(--muted); font: 400 14px/1.5 var(--font-body); }

/* Progress: the active segment's fill grows on arrival, so progress reads as
   earned rather than asserted. Segments already completed are simply full — they
   were earned on an earlier screen and re-animating them would fake the work. */
.ob-steps i.fill::after { transform-origin: left center; animation: obStep var(--motion-med) var(--ease) both; }
@keyframes obStep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Heading + body settle in on load — 2 elements, one beat, no carnival. */
.ob-head .ob-eyebrow { animation: obRiseSm 320ms var(--ease) both; }
.ob-head h1 { animation: obRiseSm 380ms var(--ease) 40ms both; }
.ob-head > p { animation: obRiseSm 380ms var(--ease) 90ms both; }
@keyframes obRiseSm { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }


/* Confirm: the rule locks in. A single check that draws itself — the bank-grade
   version of confetti. */
.lock-in { display: grid; place-items: center; gap: 0; }
.lock-ring { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 22px; background: var(--teal); animation: lockPop 460ms var(--ease) both; }
.lock-ring svg { width: 32px; height: 32px; stroke: var(--accent-ink); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; animation: lockDraw 340ms var(--ease) 180ms forwards; }
@keyframes lockPop { 0% { opacity: 0; transform: scale(.82); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lockDraw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ob-steps i.fill::after, .ob-head .ob-eyebrow, .ob-head h1, .ob-head > p,
  .split-opt.in, .lock-ring, .lock-ring svg { animation: none; }
  .lock-ring svg { stroke-dashoffset: 0; }
}

/* ============ Onboarding micro-animations, part 2 (2026-07) ============
   The remaining moments that snapped. Each one marks a state change the user
   caused — nothing here is ambient decoration. */

/* Code entry: a digit lands, then all six confirm before we move on. */
.otp input { transition: border-color .16s var(--ease), background-color .16s var(--ease); }
.otp input.pop { animation: otpPop .2s var(--ease); }
@keyframes otpPop { 50% { transform: scale(1.07); } 100% { transform: none; } }
.otp.ok input { border-color: color-mix(in srgb, var(--teal) 70%, transparent); background: var(--teal-soft); animation: otpOk .38s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes otpOk { 45% { transform: translateY(-5px); } 100% { transform: none; } }

/* Plaid flow: sub-steps move forward, and back when you go back. Direction is
   the whole point — it tells you the back arrow did something. */
[data-step] { animation: stepIn .28s var(--ease) both; }
[data-step].rev { animation-name: stepBack; }
@keyframes stepIn { from { opacity: 0; transform: translateX(9px); } to { opacity: 1; transform: none; } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-9px); } to { opacity: 1; transform: none; } }

/* Agreement: reaching the end unlocks the button — say so with one beat. */
.agree-hint { transition: color .2s var(--ease); }
.btn.unlocked { animation: unlockPulse .46s var(--ease); }
@keyframes unlockPulse { 42% { transform: scale(1.018); } 100% { transform: none; } }

/* Wallet: the check draws itself once the token lands. */
.wb-check { stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; animation: lockDraw .34s var(--ease) forwards; }

@media (prefers-reduced-motion: reduce) {
  .otp input.pop, .otp.ok input, [data-step], [data-step].rev, .btn.unlocked, .wb-check { animation: none; }
  .wb-check { stroke-dashoffset: 0; }
}

/* ============ Fee transparency (2026-07) ============
   The fee was rendered at 11.5px in --faint: the smallest, palest text on a
   split row — fine print by any other name, on the one number that tells you
   what splitting costs. It now reads at body scale in --muted with the dollar
   amount in full ink. Applies everywhere a split is offered: the first-split
   setup, the manual split screen, and the purchase detail. */
/* The term column was 1fr and ate 211px, squeezing the fee column to 90px so the
   fee wrapped mid-figure. The term only ever needs its own width; the money side
   takes the remainder. */
.split-opt { grid-template-columns: 24px auto 1fr; }
.split-opt .so-fee { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.split-opt .so-fee b { display: inline; font-size: inherit; color: var(--ink); font-weight: 800; }
.split-opt.selected .so-fee { color: var(--ink); }

/* The worked example that heads the plan comparison. */
.sv-eg { margin: 0 2px 10px; color: var(--muted); font: 400 13px/1.4 var(--font-body); }
.sv-eg b { color: var(--ink); font-weight: 800; }

/* ===== First split — the plans deal in =====
   The rows carry the animation now that they carry the comparison. Each plan
   settles in sequence so the three options read as a set being laid out, not a
   list that blinked into place. `.in` was being applied with no rule behind it. */
.split-opt { transition: border-color .18s var(--ease), background-color .18s var(--ease); }
.split-opt.in { animation: planIn 360ms var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes planIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.split-opt .so-radio { transition: border-color .18s var(--ease); }
.split-opt .so-radio::after { transition: transform .18s var(--ease); }
.split-opt.selected .so-radio::after { animation: radioPop 240ms var(--ease); }
@keyframes radioPop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .split-opt.in, .split-opt.selected .so-radio::after { animation: none; }
}

/* ===== Show-details pill: above the number, off the network mark =====
   The pill was pinned bottom-right, which is exactly where the Mastercard mark
   is baked into card-art.png — it sat on top of the logo. The card number lives
   bottom-left (.card-num-ov, left 20 / bottom 17), so the pill now stacks
   directly above it and shares its left edge. `right: auto` is required: both
   earlier .vc-reveal rules set `right: 14px`, and an absolutely-positioned box
   with left AND right set would stretch across the whole card. */
.vc-reveal { left: 20px; right: auto; bottom: 46px; }

/* ===== "Default" tag — marks the option already chosen for you =====
   The first-split screen arrives pre-set (3 months, $150 and up). Nothing said
   so, which left it reading as an unanswered question rather than a confirm. */
.dflt-tag { display: inline-block; margin-left: 8px; padding: 3px 7px; border-radius: 999px; background: var(--teal-soft); color: var(--teal); font: 800 9.5px/1 var(--font); letter-spacing: .07em; text-transform: uppercase; vertical-align: middle; }
.dflt-tag[hidden] { display: none; }
.as-value .dflt-tag { display: inline-block; margin: 8px 0 0; }

/* ── Money we owe you — overpayment / credit balance ───────────────
   Shown when a payment lands above what was owed. Three deliberate calls:

   1. NOT a Finn signal. Signals are advisories the user can safely ignore,
      collapsed behind a chevron. This is the customer's own money, and
      Reg Z §1026.11 gives them the right to ask for it back — burying that
      behind an accordion is a dark pattern. It gets its own module, above
      the signals, always expanded.
   2. Teal, never red, and never a minus sign. A negative balance reads as
      debt; this is the opposite. Lead with the plain fact ("We owe you"),
      not the accounting sign.
   3. Not framed as available credit. It offsets purchases, but calling it
      spending power would overstate it. */
/* One left spine. The icon+label is a caption row; everything under it — amount,
   copy, action — starts at the card's padding edge. The old layout nested the
   amount beside the icon, which put the header text 45px in from the body copy
   and left the 34px icon floating against a 43px stack, aligned to neither line. */
.owed {
  margin: 0 0 14px;
  padding: 16px;
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--teal) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 26%, var(--line));
  /* Height is driven in px by the script on state change; `auto` won't transition.
     overflow clips the copy while the box is mid-resize — safe here, the card has
     no outside stroke or shadow to shave. */
  overflow: hidden;
  transition: height .32s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
}
.owed-top { display: flex; align-items: center; gap: 10px; }
.owed-ic {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--teal-soft); color: var(--teal);
  transition: background .28s var(--ease), color .28s var(--ease);
}
.owed-ic svg { grid-area: 1 / 1; width: 16px; height: 16px; }
.owed-ic .ic-check { opacity: 0; }
.owed-lbl { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.owed-amt {
  margin: 8px 0 0;
  font: 700 26px/1 var(--font);
  letter-spacing: -0.02em;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  transition: color .28s var(--ease);
}
.owed-amt .c { font-weight: 500; opacity: .72; }
.owed-why { margin: 10px 0 0; font-size: 13px; color: var(--ink); }
.owed-what { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* Destination. Regulation Z §1026.11(a)(3) lets us refund "by cash, check, or money
   order, or credit to a deposit account" — we only do the last one, so the account is
   the whole decision and it belongs on screen before the tap, not in the receipt. */
.owed-dest {
  display: flex; align-items: center; gap: 11px;
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface);
}
.owed-dest .di {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--teal-soft); color: var(--teal);
}
.owed-dest .di svg { width: 17px; height: 17px; }
.owed-dest .dt { flex: 1; min-width: 0; }
.owed-dest .dt b { display: block; font-size: 13.5px; font-weight: 600; }
.owed-dest .dt span { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted); }
.owed-dest .dchange {
  flex: none; position: relative;
  padding: 6px 2px; border: 0; background: transparent;
  color: var(--teal); font: 600 12.5px/1 var(--font); text-decoration: none; cursor: pointer;
}
.owed-dest .dchange::after { content: ""; position: absolute; inset: -9px -8px; }
/* Once requested the account is settled, so the row stops looking editable. */
.owed-dest.is-locked .dt span { color: var(--faint); font-variant-numeric: tabular-nums; }
.owed-act { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.owed-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* .owed-cta is NOT its own button — it is the system's module-action pill.
   See the .insight-pay / .fsig-cta rule: tangerine + charcoal + 800. It was
   hand-rolled teal/700 here, which read off-brand (teal is product state, the
   action is tangerine) and duplicated a component that already existed. */
.owed-meta { font-size: 11.5px; color: var(--faint); line-height: 1.35; }

/* Credit balance: a negative current balance means WE owe THEM, so it reads teal,
   never the danger red a negative number would normally imply. */
.hero .amount.is-credit { color: var(--teal); }
.hero .amount.is-credit .c { color: color-mix(in srgb, var(--teal) 62%, transparent); }
/* Refund requested — the card confirms in place, then retires itself. The ask is
   done, so the module drops its CTA emphasis to a receipt: the teal wash goes flat,
   the icon strikes to a checkmark, and after a beat the whole card collapses away.
   No sheet — the destination account and the fee are already on the card, so a modal
   would only re-read the user what they just read. */
.owed.is-done { background: var(--surface); border-color: var(--line); }
.owed.is-done .owed-amt { color: var(--ink); }
.owed.is-done .owed-ic {
  background: color-mix(in srgb, var(--pos) 16%, transparent);
  color: var(--pos);
}
.owed.is-done .owed-ic .ic-undo { animation: owedIcOut .18s var(--ease) forwards; }
.owed.is-done .owed-ic .ic-check {
  opacity: 1;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: owedCheck .4s var(--ease) .14s forwards;
}
@keyframes owedIcOut { to { opacity: 0; transform: scale(.7); } }
@keyframes owedCheck { to { stroke-dashoffset: 0; } }

/* Collapse to nothing. Height is set in px by the script first — `auto` won't animate. */
.owed.is-closing {
  overflow: hidden;
  padding-top: 0; padding-bottom: 0;
  margin-bottom: 0;
  border-top-width: 0; border-bottom-width: 0;
  opacity: 0;
  transition: height .38s var(--ease), opacity .3s var(--ease),
              padding .38s var(--ease), margin .38s var(--ease), border-width .38s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .owed-ic, .owed-amt, .owed.is-closing { transition: none; }
  .owed.is-done .owed-ic .ic-undo,
  .owed.is-done .owed-ic .ic-check { animation: none; }
  .owed.is-done .owed-ic .ic-undo { opacity: 0; }
  .owed.is-done .owed-ic .ic-check { stroke-dashoffset: 0; }
}

/* ── Card alerts (notification-settings) — grouped accordion ───────────────── */
.nt-intro { padding: 6px 2px 18px; }
.nt-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); margin-bottom: 14px; }
.nt-badge svg { width: 15px; height: 15px; color: var(--teal); }
.nt-badge span { font-size: 12px; font-weight: 700; color: var(--ink); }
.nt-intro h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.nt-intro p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.nt-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.nt-where { padding: 15px 16px; margin-bottom: 20px; }
.nt-where .lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.nt-wrow { display: flex; align-items: center; gap: 12px; }
.nt-wrow .ic { color: var(--teal); display: flex; flex: 0 0 auto; }
.nt-wrow .ic svg { width: 18px; height: 18px; }
.nt-wrow .wb { flex: 1 1 auto; min-width: 0; }
.nt-wrow .wb b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.nt-wrow .wb span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-wrow .edit { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--teal); text-decoration: none; }
.nt-wdiv { height: 1px; background: var(--line); margin: 12px 0; }
.nt-groups { display: flex; flex-direction: column; gap: 14px; }
.nt-group { overflow: hidden; }
.nt-ghead { width: 100%; display: flex; align-items: center; gap: 13px; padding: 15px; background: none; border: 0; cursor: pointer; text-align: left; }
.nt-gic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; background: color-mix(in srgb, var(--teal) 16%, transparent); color: var(--teal); display: grid; place-items: center; }
.nt-gic svg { width: 21px; height: 21px; }
.nt-gt { flex: 1 1 auto; min-width: 0; }
.nt-gt b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.nt-gt span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.nt-gchev { flex: 0 0 auto; color: var(--muted); transition: transform .25s var(--ease); }
.nt-gchev svg { width: 20px; height: 20px; display: block; }
.nt-group.open .nt-gchev { transform: rotate(180deg); }
.nt-gbody { padding: 0 16px 6px; }
.nt-alert { border-top: 1px solid var(--line); padding: 15px 2px; }
.nt-atop { display: flex; align-items: flex-start; gap: 12px; }
.nt-ab { flex: 1 1 auto; min-width: 0; }
.nt-ab .an { font-size: 14px; font-weight: 700; color: var(--ink); }
.nt-ab .ad { font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.nt-toggle { flex: 0 0 auto; margin-top: 2px; width: 46px; height: 27px; border-radius: 999px; border: 0; position: relative; cursor: pointer; background: var(--surface-2); transition: background .2s var(--ease); }
.nt-toggle[aria-checked="true"] { background: var(--teal); }
.nt-toggle .knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .2s var(--ease); }
.nt-toggle[aria-checked="true"] .knob { transform: translateX(19px); }
.nt-always { flex: 0 0 auto; margin-top: 2px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 16%, transparent); color: var(--teal); font-size: 11.5px; font-weight: 800; }
.nt-always svg { width: 13px; height: 13px; }
.nt-sub { margin-top: 13px; display: flex; flex-direction: column; gap: 11px; }
.nt-thresh { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.nt-thresh .tl { font-size: 12.5px; color: var(--muted); }
.nt-thresh .tp { font-size: 14px; font-weight: 700; color: var(--muted); }
.nt-thresh input { width: 74px; height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--surface); text-align: center; }
.nt-thresh input:focus { outline: none; border-color: var(--teal); }
.nt-sendto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nt-sendto .sl { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.nt-ch { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-size: 13px; font-weight: 700; background: var(--surface); color: var(--muted); transition: all .15s var(--ease); }
.nt-ch svg { width: 16px; height: 16px; }
.nt-ch[aria-pressed="true"] { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal); }

/* Card alerts — mandatory email channel (locked) + mandatory-row indicator */
.nt-ch.locked { border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--teal); cursor: default; }
.nt-ch.locked svg { width: 16px; height: 16px; }
.nt-wrow .nt-mand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.nt-wrow .nt-mand svg { width: 13px; height: 13px; }

/* ── Shared plan card (3/6/12-month terms) ─────────────────────────────
   One consistent card everywhere we offer a plan. Header term + big
   $/month; a "Total payment (i)" row whose (i) reveals fee, rate, and
   the simple terms. Matches the golden reference exactly. */
.plan-cards { display: grid; gap: 12px; margin-bottom: 14px; }
.plan-card { display: block; width: 100%; text-align: left; padding: 18px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface); cursor: pointer; transition: border-color .18s var(--ease), background-color .18s var(--ease); }
.plan-card:active { transform: translateY(1px); }
.plan-card.selected { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 8%, var(--surface)); }
.plan-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pc-term { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.pc-per { text-align: right; line-height: 1.05; flex: 0 0 auto; }
.pc-per > b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-per > span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.pc-total-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }
.pc-total-l { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--muted); }
.pc-info { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1.5px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; flex: 0 0 auto; }
.pc-info svg { width: 14px; height: 14px; }
.pc-info[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--teal) 28%, transparent); }
.pc-total { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-break { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.pc-break[hidden] { display: none; }
.pc-brow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.pc-brow > span { color: var(--muted); }
.pc-brow > b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-terms { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ── Hide every Finn icon across all screens ─────────────────────────────
   Covers the top-bar Ask-Finn button injected by app.js (.finn-tb), the
   [data-finn-icon] mounts in insights/notes/signals, the lottie character
   itself, chat avatars and the hero mark on finn.html. Text content of
   Finn notes/signals stays — only the character artwork is removed. */
.finn-tb,
[data-finn-icon],
.finn-character,
.finn-lottie-mark,
.finn-lottie,
.finn-robot,
.finn-robot-art,
.finn-img,
.finn-svg-mark,
.finn-av,
.finn-hero-mark { display: none !important; }

/* Collapse the grid tracks those icons occupied. With the icon display:none,
   grid auto-placement shifts the remaining children into the next track, so
   note text was squeezed into the dead 42px icon column and the signals badge
   landed on the 1fr track and stretched into a pill. Reflow each container. */
.finn-note { grid-template-columns: 1fr; }
.insight { grid-template-columns: 1fr auto; }
.fsig-head { grid-template-columns: 1fr auto auto; }
.finn-hero { grid-template-columns: 1fr; }
/* Keep the signal-count badge a fixed circle regardless of track changes. */
.fsig-badge { width: 22px; min-width: 22px; padding: 0; }

/* ── Sheets: cap the height and let them scroll ───────────────────────────
   Sheet content is taller than small phones; with no max-height it slid up
   past the top of the screen and couldn't be reached. The Split center is the
   tallest of them and does scroll on a phone; that is what a sheet does. What
   was wrong there was not the height — it was the chevron blowing every row up
   to 375px in WebKit (see .chev) and the sheet sitting underneath the dock
   (see .qsheet's z-index). Both are fixed at source. */
.qsheet {
  max-height: 86%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* ── Activity: hide the map toggle (map view no longer reachable) ──────── */
#viewToggle { display: none !important; }


/* ── Split card v2 ─────────────────────────────────────────────────────────────
   Rebuilt around the question people actually ask about a split: what leaves my
   account each month, and how much of that is fee? The middle cell answers it and
   shows its own arithmetic — principal + fee — so the number is checkable on sight.
   Every figure is rendered by Splitit.splitCard from Splitit.splitState; no screen
   writes its own, which is what stopped Plans and Purchase detail drifting apart. */
.split-card.sc2 { padding: 15px 15px 4px; }
.sc2-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.sc2-head .mlogo { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.sc2-id { flex: 1; min-width: 0; }
.sc2-id .sc-title { font-size: 16.5px; }
.sc2-head .sc-badge { align-self: flex-start; }

.sc2-panel { display: grid; grid-template-columns: 0.95fr 1.24fr 0.9fr; border-radius: 14px; background: var(--surface-2); padding: 12px 1px; }
.sc2-cell { padding: 0 7px; min-width: 0; }
.sc2-cell + .sc2-cell { border-left: 1px solid var(--line); }
.sc2-cell.is-mid { text-align: center; }
.sc2-cell.is-end { text-align: right; }
.sc2-lbl { display: block; font-size: 10px; font-weight: 600; line-height: 1.25; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc2-val { display: block; margin-top: 6px; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.sc2-val.big { font-size: 21px; }
.sc2-val.fee { color: var(--teal); }
.sc2-sub { display: block; margin-top: 5px; font-size: 9.5px; line-height: 1.45; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc2-sub .fee { color: var(--teal); font-weight: 700; white-space: nowrap; }

.split-card.sc2 .sc-track { margin: 14px 0 11px; }
.sc2-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc2-paid { display: inline-flex; align-items: center; gap: 7px; }
.sc2-tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 999px; background: var(--teal); color: var(--accent-ink); }
.sc2-tick svg { width: 10px; height: 10px; }

.sc2-actions { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.sc2-paywrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sc2-pay { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 13px; background: var(--teal); color: var(--accent-ink); font: 800 14px/1 var(--font); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; cursor: pointer; }
.sc2-pay:active { background: color-mix(in srgb, var(--st-jet-black) 12%, var(--teal)); }
.sc2-undo { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); color: var(--ink); font: 700 13px/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer; }
.sc2-undo:active { background: color-mix(in srgb, var(--st-snow) 8%, var(--surface-2)); }
.sc2-pay:focus-visible, .sc2-undo:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Sits directly beneath Pay in full and only as wide as it, so the saving reads as
   what that button does — not as a footnote on the card. */
.sc2-save { text-align: center; font-size: 11.5px; line-height: 1.35; color: var(--faint); }
.sc2-save b { color: var(--teal); font-weight: 800; font-variant-numeric: tabular-nums; }
.sc2-cap { margin: 12px 0 11px; font-size: 11.5px; line-height: 1.42; color: var(--faint); }
.split-card.sc2 .sc2-actions + .sc2-cap { margin-top: 10px; }

/* ── Onboarding setup hub ──────────────────────────────────────────────────────
   One screen replaces three sequential preference steps. Everything arrives ON,
   with defaults chosen for the common case, so the default path is a single tap.
   Each row still drills into the full screen for anyone who wants the detail —
   the detailed screens weren't deleted, they were demoted to progressive
   disclosure. Preferences should never have gated the card in the first place. */
.ob-set-row .rv { gap: 7px; }
.ob-set-row .rv .chip { font-size: 10.5px; padding: 3px 8px; }
.ob-set-note { margin: 12px 2px 0; color: var(--faint); font: 400 11.5px/1.45 var(--font-body); }

/* ── Installed to the Home Screen ──────────────────────────────────────
   In standalone there is no browser chrome, and iOS draws the real status bar
   and the real home indicator itself. The prototype draws its own 9:41 bar and
   its own pill — on the home screen those land underneath the OS ones and you
   get two clocks and two pills. Hide both and hand the band back to the OS.

   --statusbar-h and --homebar-h drop to 0 so .app's padding collapses to
   max(env-inset, 0) — the real inset, whatever the device reports. With
   apple-mobile-web-app-status-bar-style="default" the web view already starts
   below the status bar, so the top inset is 0 and the top bar sits flush under
   an OS status bar tinted by <meta name="theme-color"> — the same #13191E the
   chrome uses, which is why the seam is invisible.

   Two selectors on purpose: display-mode is only honoured from iOS 16.4, and
   navigator.standalone (set as html.standalone by app.js) covers everything
   older. */
@media (display-mode: standalone) {
  .app { --statusbar-h: 0px; --homebar-h: 0px; }
  .app .statusbar, .app .homebar { display: none; }
}
html.standalone .app { --statusbar-h: 0px; --homebar-h: 0px; }
html.standalone .app .statusbar, html.standalone .app .homebar { display: none; }