/* ================================================================
   JOSE'S PALA CLUB — jfc.css v2.1
   Design: PRR system (Syne + Inter, #5200ff accent)
   Mobile-first. All classes namespaced: .jfc-*
   Fonts loaded in default.hbs: Syne (headings) + Inter/DM Sans (body)
   ================================================================ */

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --jfc-accent:        #5200ff;
  --jfc-accent-dim:    rgba(82,0,255,.10);
  --jfc-secondary:     #3cffd0;
  --jfc-bg:            #ffffff;
  --jfc-bg2:           #f6f7fb;
  --jfc-ink:           #0b0d10;
  --jfc-muted:         rgba(11,13,16,.68);
  --jfc-subtle:        rgba(11,13,16,.38);
  --jfc-hair:          rgba(11,13,16,.14);
  --jfc-shadow:        0 18px 50px rgba(11,13,16,.10);
  --jfc-shadow-accent: 0 16px 48px rgba(82,0,255,.28);
  --jfc-shadow-panel:  -4px 0 60px rgba(11,13,16,.18);
  --jfc-r:             20px;
  --jfc-r-btn:         999px;
  --jfc-max:           1300px;
  --jfc-panel-w:       460px;

  --jfc-hot:     #ff3b30;
	  --jfc-hot-bg:  rgba(255,59,48,.10);
	  --jfc-deal:    #00b474;
	  --jfc-deal-bg: rgba(0,180,116,.10);
	  --jfc-grd:     linear-gradient(128deg, #ff2777 0%, #6e10ff 48%, #00d97a 100%);
	  --jfc-racket-surface: var(--jfc-bg2);
	}

/* Dark theme — responds to OS preference AND the PRR theme toggle (body.dark / data-theme="dark") */
@media (prefers-color-scheme: dark) { :root { --jfc-dark: 1; } }

@media (prefers-color-scheme: dark) {
  :root {
    --jfc-bg:        #0b0d10;
    --jfc-bg2:       #0f1318;
    --jfc-ink:       #eef2f7;
    --jfc-muted:     rgba(238,242,247,.70);
    --jfc-subtle:    rgba(238,242,247,.38);
    --jfc-hair:      rgba(238,242,247,.14);
    --jfc-shadow:    0 18px 60px rgba(0,0,0,.35);
	    --jfc-hot-bg:    rgba(255,59,48,.15);
	    --jfc-deal-bg:   rgba(0,180,116,.15);
	    --jfc-racket-surface:
	      radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.08) 44%, rgba(60,255,208,.06) 100%),
	      linear-gradient(135deg, rgba(238,242,247,.12), rgba(82,0,255,.12));
	  }
	}

[data-theme="dark"],
body.dark {
  --jfc-bg:        #0b0d10;
  --jfc-bg2:       #0f1318;
  --jfc-ink:       #eef2f7;
  --jfc-muted:     rgba(238,242,247,.70);
  --jfc-subtle:    rgba(238,242,247,.38);
  --jfc-hair:      rgba(238,242,247,.14);
  --jfc-shadow:    0 18px 60px rgba(0,0,0,.35);
	  --jfc-shadow-panel: -4px 0 60px rgba(0,0,0,.45);
	  --jfc-hot-bg:    rgba(255,59,48,.15);
	  --jfc-deal-bg:   rgba(0,180,116,.15);
	  --jfc-racket-surface:
	    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.08) 44%, rgba(60,255,208,.06) 100%),
	    linear-gradient(135deg, rgba(238,242,247,.12), rgba(82,0,255,.12));
	}

[data-theme="dark"] .jfc-card-brand-logo,
body.dark .jfc-card-brand-logo,
[data-theme="dark"] .jfc-panel-brand-logo,
body.dark .jfc-panel-brand-logo {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

[data-theme="dark"] .jfc-panel-hero img,
body.dark .jfc-panel-hero img { mix-blend-mode: normal; }

[data-theme="dark"] .jfc-wl-item-img,
body.dark .jfc-wl-item-img { background: var(--jfc-racket-surface); }

/* ── Page base ──────────────────────────────────────────────── */
body.jfc-page {
  background: var(--jfc-bg);
  /* Offset anchor scrolls so sticky nav doesn't cover the target */
  scroll-padding-top: 72px;
}

body.jfc-page .site-main {
  padding: 0;
  max-width: none;
}

/* JFC pages use their own product-tool shell instead of the global reviews nav. */
body[class*="page-deals"] .site-header,
body[class*="page-deals"] .site-footer,
body.page-account .site-header,
body.page-account .site-footer,
body.jfc-page .site-header,
body.jfc-page .site-footer {
  display: none;
}

body.jfc-auth-open {
  overflow: hidden;
}

/* Ensure hidden attribute works on JFC buttons (overrides display:inline-flex) */
.jfc-btn[hidden],
.jfc-member-pill[hidden] {
  display: none !important;
}

/* ── Shared utility ─────────────────────────────────────────── */
.jfc-wrap {
  max-width: var(--jfc-max);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px)  { .jfc-wrap { padding: 0 32px; } }
@media (min-width: 1200px) { .jfc-wrap { padding: 0 48px; } }

/* ── Buttons ─────────────────────────────────────────────────── */
.jfc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: var(--jfc-r-btn);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  text-decoration: none;
  letter-spacing: -.01em;
}

.jfc-btn--primary {
  background: var(--jfc-grd);
  color: #fff;
  border-color: transparent;
}

.jfc-btn--primary:hover {
  background: var(--jfc-grd);
  border-color: transparent;
  box-shadow: var(--jfc-shadow-accent);
}

.jfc-btn--ghost {
  background: transparent;
  color: var(--jfc-muted);
  border-color: var(--jfc-hair);
}

.jfc-btn--ghost:hover {
  border-color: var(--jfc-ink);
  color: var(--jfc-ink);
}

.jfc-btn--text {
  background: none;
  border: none;
  color: var(--jfc-muted);
  padding: 9px 12px;
}

.jfc-btn--text:hover { color: var(--jfc-ink); }

.jfc-btn--hero {
  background: var(--jfc-accent);
  color: #fff;
  border-color: var(--jfc-accent);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 32px rgba(82,0,255,.35);
}

.jfc-btn--hero:hover {
  background: #4100cc;
  border-color: #4100cc;
  box-shadow: var(--jfc-shadow-accent);
}

/* ── Brand mark ─────────────────────────────────────────────── */
.jfc-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--jfc-ink);
  flex-shrink: 0;
}

.jfc-brand-icon {
  color: var(--jfc-accent);
  flex-shrink: 0;
}

.jfc-brand-name {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--jfc-ink);
}

.jfc-brand-beta {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--jfc-accent);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--jfc-r-btn);
  line-height: 1.6;
}

/* ================================================================
   TRACKER TOOL
   ================================================================ */

/* ── Masthead ─────────────────────────────────────────────────── */
.jfc-masthead {
  background: var(--jfc-bg);
  border-bottom: 1px solid var(--jfc-hair);
  position: sticky;
  top: 0;
  z-index: 50;
}

.jfc-masthead-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
}

.jfc-nav {
  display: flex;
  gap: 2px;
  flex: 1;
}

.jfc-nav-btn {
  position: relative;
  background: none;
  border: none;
  padding: 7px 14px;
  border-radius: var(--jfc-r-btn);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--jfc-muted);
  cursor: pointer;
  transition: color .12s, background .12s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.jfc-nav-btn:hover {
  color: var(--jfc-ink);
  background: var(--jfc-bg2);
}

.jfc-nav-btn--active {
  color: var(--jfc-ink);
  font-weight: 700;
}

.jfc-nav-btn--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--jfc-accent);
  border-radius: var(--jfc-r-btn);
}

.jfc-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--jfc-r-btn);
  background: var(--jfc-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.jfc-hdr-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── SEO intro ───────────────────────────────────────────────── */
.jfc-seo-hero {
  padding: 34px 24px 18px;
}

.jfc-seo-kicker {
  margin: 0 0 8px;
  color: var(--jfc-accent);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.jfc-seo-title {
  margin: 0;
  max-width: 760px;
  color: var(--jfc-ink);
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 42px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}

.jfc-seo-sub {
  margin: 12px 0 0;
  max-width: 760px;
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 700px) {
  .jfc-seo-hero {
    padding: 26px 20px 16px;
  }

  .jfc-seo-title {
    font-size: 31px;
    line-height: 1.04;
  }
}

/* ── Subheader ────────────────────────────────────────────────── */
.jfc-subheader {
  background: var(--jfc-bg2);
  border-bottom: 1px solid var(--jfc-hair);
  padding: 8px 0;
}

.jfc-subheader-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.jfc-subheader-text {
  font-size: 12px;
  color: var(--jfc-muted);
  margin: 0;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.jfc-subheader-legend {
  display: flex;
  gap: 16px;
  align-items: center;
}

.jfc-legend-item {
  font-size: 12px;
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

/* ── Filter bar ───────────────────────────────────────────────── */
.jfc-filterbar {
  background: var(--jfc-bg);
  border-bottom: 1px solid var(--jfc-hair);
  position: sticky;
  top: 56px;
  z-index: 40;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.jfc-filterbar::-webkit-scrollbar { display: none; }

.jfc-filterbar-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  min-width: max-content;
}

.jfc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--jfc-r-btn);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid var(--jfc-hair);
  background: var(--jfc-bg);
  color: var(--jfc-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s;
}

.jfc-chip:hover {
  border-color: var(--jfc-accent);
  color: var(--jfc-accent);
}

.jfc-chip.is-active {
  background: var(--jfc-grd);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

.jfc-chip--quick {
  font-weight: 700;
  color: var(--jfc-ink);
}

.jfc-chip--quick:not(.is-active) {
  background: color-mix(in srgb, var(--jfc-bg2) 82%, var(--jfc-accent) 18%);
}

.jfc-chip--hot.is-active {
  background: var(--jfc-hot);
  border-color: var(--jfc-hot);
}

.jfc-filter-sep {
  width: 1px;
  height: 20px;
  background: var(--jfc-hair);
  flex-shrink: 0;
  margin: 0 2px;
}

.jfc-sort-select {
  border: 1.5px solid var(--jfc-hair);
  border-radius: var(--jfc-r-btn);
  background: var(--jfc-bg);
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  cursor: pointer;
  appearance: none;
  outline: none;
  min-width: 100px;
}

.jfc-sort-select:focus {
  border-color: var(--jfc-accent);
  color: var(--jfc-ink);
}

.jfc-secondary-filters {
  display: none;
}

.jfc-secondary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.jfc-secondary-kicker,
.jfc-secondary-title,
.jfc-secondary-value {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-secondary-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--jfc-muted);
}

.jfc-secondary-clear {
  border: 0;
  background: transparent;
  color: var(--jfc-accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.jfc-secondary-group {
  padding: 14px 0;
  border-top: 1px solid var(--jfc-hair);
}

.jfc-secondary-title {
  display: block;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--jfc-subtle);
}

.jfc-secondary-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.jfc-secondary-options .jfc-chip {
  padding: 5px 10px;
  font-size: 12px;
}

.jfc-secondary-range {
  width: 100%;
  accent-color: var(--jfc-accent);
}

.jfc-secondary-value {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--jfc-muted);
}

@media (min-width: 1024px) {
  .jfc-content.has-secondary-filters {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .jfc-content.has-secondary-filters .jfc-secondary-filters {
    display: block;
    position: sticky;
    top: 122px;
    max-height: calc(100dvh - 146px);
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--jfc-hair);
    border-radius: var(--jfc-r);
    background: var(--jfc-bg);
    box-shadow: 0 12px 34px rgba(11,13,16,.06);
  }

  .jfc-content.has-secondary-filters .jfc-grid,
  .jfc-content.has-secondary-filters .jfc-empty,
  .jfc-content.has-secondary-filters .jfc-load-more-wrap {
    grid-column: 2;
  }
}

@media (max-width: 1023px) {
  .jfc-content.has-secondary-filters .jfc-secondary-filters {
    display: block;
    margin-bottom: 18px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--jfc-hair);
  }
}

/* ── Content / Grid ─────────────────────────────────────────── */
.jfc-content {
  padding-top: 28px;
  padding-bottom: 80px;
}

.jfc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 480px)  { .jfc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 800px)  { .jfc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .jfc-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Deal cards ─────────────────────────────────────────────── */
.jfc-card {
  background: var(--jfc-bg);
  border: 1.5px solid var(--jfc-hair);
  border-radius: var(--jfc-r);
  padding: 20px;
  cursor: pointer;
  transition: box-shadow .22s, transform .22s cubic-bezier(.34,1.4,.64,1), border-color .15s;
  box-shadow: var(--jfc-shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Gradient overlay fades in on hover via ::before */
.jfc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(128deg, #ff2777 0%, #6e10ff 48%, #00d97a 100%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  z-index: 0;
}

/* Lift all direct child content above the gradient */
.jfc-card-img,
.jfc-card-meta-row,
.jfc-card-model,
.jfc-card-brand,
.jfc-card-price-area,
.jfc-card-footer,
.jfc-card-savings-row,
.jfc-card-signals,
.jfc-card-cta,
.jfc-card-btns {
  position: relative;
  z-index: 1;
}

.jfc-card:hover {
  box-shadow: 0 18px 52px rgba(110,16,255,.38), 0 4px 16px rgba(255,39,119,.22);
  transform: translateY(-4px);
  border-color: transparent;
}

.jfc-card:hover::before { opacity: 1; }

/* ── Hover state: all text → white ───────────────────────── */
.jfc-card:hover .jfc-card-model          { color: #fff; }
.jfc-card:hover .jfc-card-brand          { color: rgba(255,255,255,.70); }
.jfc-card:hover .jfc-price-whole,
.jfc-card:hover .jfc-price-dec           { color: #fff; opacity: 1; }
.jfc-card:hover .jfc-price-was           { color: rgba(255,255,255,.60); }
.jfc-card:hover .jfc-savings-badge       { background: rgba(255,255,255,.20); color: #a4ffcf; }
.jfc-card:hover .jfc-card-merchants-count{ color: rgba(255,255,255,.65); }
.jfc-card:hover .jfc-card-badge          { background: rgba(255,255,255,.20); color: #fff; }
.jfc-card:hover .jfc-card-cta            { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.45); color: #fff; }
.jfc-card:hover .jfc-card-brand-logo     { filter: brightness(0) invert(1); opacity: .9; }
.jfc-card:hover .jfc-card-img            { background: transparent; }
/* Score orb reversal: white circle, gradient text */
.jfc-card:hover .jfc-score-orb           { background: rgba(255,255,255,.95); box-shadow: 0 0 0 2.5px rgba(255,255,255,.5); }
.jfc-card:hover .jfc-score-orb-num       { background: linear-gradient(135deg,#ff2777 0%,#6e10ff 55%,#00d97a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.jfc-card.is-selected {
  border-color: var(--jfc-accent);
  box-shadow: 0 0 0 3px var(--jfc-accent-dim), var(--jfc-shadow);
}

/* Racket image area — bleeds to top edge */
.jfc-card-img {
  width: calc(100% + 40px);
  margin: -20px -20px 16px;
  height: 130px;
  background: var(--jfc-racket-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--jfc-r) var(--jfc-r) 0 0;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.jfc-card-img img {
  max-height: 115px;
  max-width: 85%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .2s;
}

.jfc-card:hover .jfc-card-img img {
  transform: scale(1.04);
}

@media (prefers-color-scheme: dark) {
  .jfc-card-img { background: var(--jfc-racket-surface); }
  .jfc-card-img img { mix-blend-mode: normal; }
}

[data-theme="dark"] .jfc-card-img,
body.dark .jfc-card-img {
  background: var(--jfc-racket-surface);
}

[data-theme="dark"] .jfc-card-img img,
body.dark .jfc-card-img img {
  mix-blend-mode: normal;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}

/* Brand logo + badge row */
.jfc-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  min-height: 24px;
}

.jfc-card-brand-logo {
  height: 20px;
  max-width: 80px;
  object-fit: contain;
  object-position: left center;
  opacity: 0.75;
  display: block;
}

@media (prefers-color-scheme: dark) {
  .jfc-card-brand-logo {
    filter: brightness(0) invert(1);
    opacity: 0.9;
  }
}

/* Deal badge — pill */
.jfc-card-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--jfc-r-btn);
  letter-spacing: .01em;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  white-space: nowrap;
}

.jfc-badge--hot  { background: var(--jfc-hot-bg);     color: var(--jfc-hot);    }
.jfc-badge--deal { background: var(--jfc-deal-bg);    color: var(--jfc-deal);   }
.jfc-badge--fair { background: var(--jfc-accent-dim); color: var(--jfc-accent); }

/* Racket name */
.jfc-card-model {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--jfc-ink);
  letter-spacing: -.01em;
  margin-bottom: 3px;
}

.jfc-card-brand {
  font-size: 12px;
  color: var(--jfc-muted);
  margin-bottom: 14px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

/* Price */
.jfc-card-price-area {
  margin-bottom: 16px;
  margin-top: auto;
}

.jfc-price-now {
  display: flex;
  align-items: baseline;
  gap: 1px;
  margin-bottom: 4px;
}

.jfc-price-whole {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--jfc-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.jfc-price-dec {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--jfc-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.jfc-price-was {
  font-size: 13px;
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-price-save {
  color: var(--jfc-deal);
  font-weight: 600;
}

/* Savings badge row */
.jfc-card-savings-row {
  margin-bottom: 10px;
}

.jfc-savings-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--jfc-r-btn);
  background: var(--jfc-deal-bg);
  color: var(--jfc-deal);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* Score orb — EAFC/Pokemon style, absolute top-right of image area */
.jfc-score-orb {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2777 0%, #6e10ff 55%, #00d97a 100%);
  box-shadow: 0 2px 10px rgba(110,16,255,.40);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex-shrink: 0;
  transition: background .22s, box-shadow .22s;
}

.jfc-score-orb-num {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}

/* Card footer */
.jfc-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.jfc-card-score {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  color: var(--jfc-muted);
}

.jfc-card-score strong {
  color: var(--jfc-deal);
  font-weight: 700;
  font-size: 13px;
}

.jfc-card-merchants-count {
  font-size: 12px;
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-card-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px 16px;
  border-radius: var(--jfc-r-btn);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--jfc-hair);
  background: var(--jfc-bg);
  color: var(--jfc-accent);
  transition: all .12s;
  white-space: nowrap;
  margin-bottom: 8px;
}

.jfc-card-cta:hover {
  background: var(--jfc-accent);
  border-color: var(--jfc-accent);
  color: #fff;
}

/* ── Loading state ───────────────────────────────────────────── */
.jfc-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 24px;
  color: var(--jfc-muted);
  font-size: 16px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Empty state ─────────────────────────────────────────────── */
.jfc-empty {
  text-align: center;
  padding: 72px 24px;
  color: var(--jfc-muted);
  grid-column: 1 / -1;
}

.jfc-empty p {
  margin: 0 0 16px;
  font-size: 16px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-load-more-wrap {
  text-align: center;
  padding: 32px 24px 8px;
}

.jfc-price-disclaimer {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--jfc-muted);
  font-style: italic;
}

/* ── Comparison panel ─────────────────────────────────────────── */
.jfc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11,13,16,.55);
  z-index: 2147482999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.jfc-backdrop.is-visible {
  opacity: 1;
  pointer-events: all;
}

.jfc-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: var(--jfc-panel-w);
  background: var(--jfc-bg);
  box-shadow: var(--jfc-shadow-panel);
  z-index: 2147483001;
  transform: translateX(105%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.jfc-panel.is-open { transform: translateX(0); }

.jfc-panel-scroll {
  overflow-y: auto;
  flex: 1;
  overscroll-behavior: contain;
}

/* Panel hero image */
.jfc-panel-hero {
  width: 100%;
  height: 160px;
  background: var(--jfc-racket-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.jfc-panel-hero img {
  max-height: 140px;
  max-width: 80%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
  .jfc-panel-hero img { mix-blend-mode: normal; }
}

[data-theme="dark"] .jfc-panel-hero,
body.dark .jfc-panel-hero {
  background: var(--jfc-racket-surface);
}

[data-theme="dark"] .jfc-panel-hero img,
body.dark .jfc-panel-hero img {
  mix-blend-mode: normal;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.32));
}

.jfc-panel-close-hero {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(11,13,16,.45);
  backdrop-filter: blur(4px);
  border-radius: var(--jfc-r-btn);
  cursor: pointer;
  font-size: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}

.jfc-panel-close-hero:hover { background: rgba(11,13,16,.70); }

/* Fallback close (no image) */
.jfc-panel-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 20px 0;
}

.jfc-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--jfc-bg2);
  border-radius: var(--jfc-r-btn);
  cursor: pointer;
  font-size: 14px;
  color: var(--jfc-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}

.jfc-panel-close:hover {
  background: var(--jfc-hair);
  color: var(--jfc-ink);
}

.jfc-panel-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px 18px;
}

.jfc-panel-brand-logo {
  height: 24px;
  max-width: 90px;
  object-fit: contain;
  object-position: left center;
  opacity: 0.75;
  flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
  .jfc-panel-brand-logo {
    filter: brightness(0) invert(1);
    opacity: 0.9;
  }
}

.jfc-panel-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--jfc-ink);
  margin: 0 0 3px;
  line-height: 1.2;
}

.jfc-panel-sub {
  font-size: 13px;
  color: var(--jfc-muted);
  margin: 0;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-panel-score-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--jfc-accent);
  text-decoration: none;
  margin-top: 6px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-panel-score-link:hover { text-decoration: underline; }

.jfc-mini-score {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #ff2777 0%, #6e10ff 55%, #00d97a 100%);
  color: #fff;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(110,16,255,.22);
}

.jfc-price-review-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--jfc-accent) 24%, var(--jfc-hair));
  border-radius: var(--jfc-r);
  background: color-mix(in srgb, var(--jfc-bg2) 80%, var(--jfc-accent) 20%);
  color: var(--jfc-ink);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.jfc-price-review-callout span:not(.jfc-mini-score) {
  flex: 1;
  min-width: 0;
}

.jfc-price-review-callout strong {
  color: var(--jfc-accent);
  font-size: 12px;
  white-space: nowrap;
}

.jfc-price-review-callout:hover {
  border-color: var(--jfc-accent);
  text-decoration: none;
}

.jfc-panel-section {
  padding: 0 24px 20px;
  border-top: 1px solid var(--jfc-hair);
}

.jfc-panel-section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jfc-muted);
  margin: 16px 0 12px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

/* Price comparison table */
.jfc-price-table {
  border: 1.5px solid var(--jfc-hair);
  border-radius: var(--jfc-r);
  overflow: hidden;
}

.jfc-price-table-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--jfc-hair);
  transition: background .1s;
}

.jfc-price-table-row:last-child { border-bottom: none; }

.jfc-price-table-row.is-best { background: var(--jfc-deal-bg); }
.jfc-price-table-row.is-oos  { opacity: .45; }

.jfc-ptr-merchant {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.jfc-ptr-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.jfc-ptr-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--jfc-ink);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  white-space: nowrap;
}

.jfc-ptr-geo {
  font-size: 11px;
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  margin-top: 1px;
}

.jfc-ptr-price {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--jfc-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -.01em;
  flex-shrink: 0;
}

.jfc-price-table-row.is-best .jfc-ptr-price { color: var(--jfc-deal); }

.jfc-label-best {
  font-size: 10px;
  font-weight: 800;
  background: var(--jfc-deal);
  color: #fff;
  padding: 2px 8px;
  border-radius: var(--jfc-r-btn);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-label-oos {
  font-size: 10px;
  color: var(--jfc-muted);
  font-style: italic;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-ptr-buy {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--jfc-accent);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--jfc-r-btn);
  background: var(--jfc-accent-dim);
  white-space: nowrap;
  transition: background .12s, color .12s;
  flex-shrink: 0;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-ptr-buy:hover {
  background: var(--jfc-accent);
  color: #fff;
}

.jfc-ptr-buy--oos {
  background: transparent;
  color: var(--jfc-subtle);
  pointer-events: none;
  font-style: italic;
}

/* Sparkline */
.jfc-sparkline-card {
  background: var(--jfc-bg2);
  border-radius: var(--jfc-r);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.jfc-sparkline-meta { flex: 1; min-width: 0; }

.jfc-sparkline-label {
  font-size: 12px;
  color: var(--jfc-muted);
  margin-bottom: 4px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-sparkline-range {
  font-size: 13px;
  color: var(--jfc-ink);
  font-variant-numeric: tabular-nums;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-sparkline-range strong { color: var(--jfc-deal); }
.jfc-sparkline svg { display: block; flex-shrink: 0; }

/* Alert section */
.jfc-panel-alert-section {
  padding: 0 24px 28px;
  border-top: 1px solid var(--jfc-hair);
}

.jfc-gate {
  background: var(--jfc-ink);
  border-radius: var(--jfc-r);
  padding: 28px 24px;
  text-align: center;
}

.jfc-gate-icon { font-size: 32px; margin-bottom: 10px; }

.jfc-gate-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}

.jfc-gate-sub {
  font-size: 14px;
  color: rgba(238,242,247,.65);
  margin: 0 0 20px;
  line-height: 1.55;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-gate-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  background: var(--jfc-accent);
  color: #fff;
  border-radius: var(--jfc-r-btn);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background .12s, box-shadow .12s;
}

.jfc-gate-cta:hover {
  background: #4100cc;
  box-shadow: var(--jfc-shadow-accent);
}

.jfc-alert-form {
  background: var(--jfc-bg2);
  border-radius: var(--jfc-r);
  padding: 20px;
}

.jfc-alert-form-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--jfc-ink);
  margin: 0 0 4px;
  letter-spacing: -.01em;
}

.jfc-alert-form-sub {
  font-size: 13px;
  color: var(--jfc-muted);
  margin: 0 0 16px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-alert-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jfc-alert-cur {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--jfc-muted);
}

.jfc-alert-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--jfc-hair);
  border-radius: 12px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--jfc-ink);
  background: var(--jfc-bg);
  outline: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .12s;
  min-width: 0;
  letter-spacing: -.01em;
}

.jfc-alert-input:focus { border-color: var(--jfc-accent); }

.jfc-alert-submit {
  padding: 10px 18px;
  background: var(--jfc-accent);
  color: #fff;
  border: none;
  border-radius: var(--jfc-r-btn);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}

.jfc-alert-submit:hover { background: #4100cc; }

.jfc-alert-hint {
  font-size: 12px;
  color: var(--jfc-muted);
  margin: 10px 0 0;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

/* ── Dashboard view ─────────────────────────────────────────── */
.jfc-dashboard-view {
  padding: 32px 0 80px;
}

.jfc-dash-header { margin-bottom: 24px; }

.jfc-dash-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--jfc-ink);
  margin: 0 0 6px;
  line-height: 1.2;
}

.jfc-dash-sub {
  font-size: 14px;
  color: var(--jfc-muted);
  margin: 0;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-alert-item {
  background: var(--jfc-bg);
  border: 1.5px solid var(--jfc-hair);
  border-radius: var(--jfc-r);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  box-shadow: var(--jfc-shadow);
  transition: box-shadow .2s;
}

.jfc-alert-item:hover { box-shadow: var(--jfc-shadow-accent); }

.jfc-alert-item-info { flex: 1; min-width: 0; }

.jfc-alert-item-name {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--jfc-ink);
  margin-bottom: 3px;
  letter-spacing: -.01em;
}

.jfc-alert-item-detail {
  font-size: 13px;
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-alert-item-detail strong { color: var(--jfc-ink); }

.jfc-alert-status {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--jfc-r-btn);
  white-space: nowrap;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-status--watching  { background: var(--jfc-accent-dim); color: var(--jfc-accent); }
.jfc-status--triggered { background: var(--jfc-deal-bg);    color: var(--jfc-deal);   }

.jfc-alert-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--jfc-muted);
  font-size: 18px;
  padding: 4px;
  border-radius: var(--jfc-r-btn);
  line-height: 1;
  transition: color .12s;
}

.jfc-alert-remove:hover { color: var(--jfc-hot); }

/* Phase 2 alert builder: Wise/Kraken-inspired structure, JFC colors. */
.jfc-alert-builder {
  display: grid;
  gap: 18px;
  padding-bottom: 10px;
}

.jfc-alert-builder-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jfc-alert-round {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--jfc-bg2);
  color: var(--jfc-accent);
  cursor: pointer;
}

.jfc-alert-confirm-card,
.jfc-alert-price-card,
.jfc-alert-settings,
.jfc-alert-empty-state {
  border: 1px solid var(--jfc-hair);
  border-radius: 24px;
  background: var(--jfc-bg);
  box-shadow: 0 18px 50px rgba(11,13,16,.08);
}

.jfc-alert-confirm-card {
  padding: 22px;
}

.jfc-alert-confirm-top,
.jfc-alert-confirm-row,
.jfc-alert-price-head,
.jfc-alert-price-foot,
.jfc-alert-price-range,
.jfc-alert-setting-head,
.jfc-alert-existing-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.jfc-alert-confirm-icon {
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--jfc-grd);
  color: #fff;
  font-size: 20px;
}

.jfc-alert-confirm-chip {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--jfc-accent-dim);
  color: var(--jfc-accent);
  font-size: 12px;
  font-weight: 900;
}

.jfc-alert-confirm-card h3,
.jfc-alert-settings h3 {
  margin: 18px 0 10px;
  color: var(--jfc-ink);
  font: 950 30px/.98 Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  letter-spacing: 0;
}

.jfc-alert-confirm-card p {
  margin: 0 0 18px;
  color: var(--jfc-muted);
  font-size: 15px;
  line-height: 1.5;
}

.jfc-alert-confirm-row {
  padding-top: 16px;
  border-top: 1px solid var(--jfc-hair);
  color: var(--jfc-muted);
  font-size: 14px;
}

.jfc-alert-confirm-row strong {
  color: var(--jfc-ink);
  font-size: 20px;
}

.jfc-alert-price-card {
  padding: 18px;
  background: color-mix(in srgb, var(--jfc-bg2) 92%, var(--jfc-bg) 8%);
}

.jfc-alert-price-label {
  margin: 0 0 4px;
  color: var(--jfc-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.jfc-alert-price-card h3 {
  margin: 0;
  color: var(--jfc-ink);
  font-size: 34px;
  line-height: 1;
}

.jfc-alert-price-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--jfc-accent-dim);
  color: var(--jfc-accent);
  font-size: 12px;
  font-weight: 900;
}

.jfc-alert-price-chart {
  position: relative;
  margin: 18px 0 12px;
  min-height: 96px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--jfc-hair);
}

.jfc-alert-price-chart svg {
  width: 100%;
  height: 96px;
}

.jfc-alert-price-chart path {
  stroke: var(--jfc-accent);
  stroke-width: 2.5;
}

.jfc-alert-price-chart circle {
  fill: var(--jfc-accent);
}

.jfc-alert-price-dot {
  position: absolute;
  right: 16px;
  bottom: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(82,0,255,.12);
}

.jfc-alert-price-dot::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--jfc-accent);
}

.jfc-alert-price-foot,
.jfc-alert-price-range {
  color: var(--jfc-muted);
  font-size: 13px;
}

.jfc-alert-price-range {
  margin-top: 10px;
  color: var(--jfc-subtle);
}

.jfc-alert-settings {
  padding: 20px;
}

.jfc-alert-settings h3 {
  margin: 0;
  font-size: 22px;
}

.jfc-alert-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--jfc-hair);
}

.jfc-alert-toggle-row:first-of-type {
  margin-top: 16px;
}

.jfc-alert-toggle-row strong,
.jfc-alert-toggle-row em {
  display: block;
}

.jfc-alert-toggle-row strong {
  color: var(--jfc-ink);
  font-size: 16px;
}

.jfc-alert-toggle-row em {
  margin-top: 4px;
  color: var(--jfc-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
}

.jfc-alert-switch {
  appearance: none;
  width: 64px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jfc-muted) 40%, transparent);
  cursor: pointer;
  position: relative;
  transition: background .18s ease;
}

.jfc-alert-switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 12px rgba(11,13,16,.16);
  transition: transform .18s ease;
}

.jfc-alert-switch:checked {
  background: var(--jfc-accent);
}

.jfc-alert-switch:checked::after {
  transform: translateX(28px);
}

.jfc-alert-customise,
.jfc-alert-type-block {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--jfc-hair);
}

.jfc-alert-select {
  display: grid;
  gap: 8px;
}

.jfc-alert-select span,
.jfc-tracker-field-label {
  color: var(--jfc-ink);
  font-size: 13px;
  font-weight: 900;
  margin: 0;
}

.jfc-alert-select select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--jfc-hair);
  border-radius: 14px;
  background: var(--jfc-bg);
  color: var(--jfc-ink);
  font: 750 14px/1 Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
}

.jfc-alert-save-bar {
  min-height: 58px;
  width: 100%;
  font-size: 16px;
}

.jfc-alert-empty-state {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
  text-align: center;
}

.jfc-alert-empty-icon {
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  border-radius: 50%;
  background: var(--jfc-accent-dim);
  color: var(--jfc-accent);
  font-size: 48px;
}

.jfc-alert-empty-state h3 {
  max-width: 320px;
  margin: 0 0 14px;
  color: var(--jfc-ink);
  font: 950 42px/.95 Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  text-transform: uppercase;
}

.jfc-alert-empty-state p {
  max-width: 360px;
  margin: 0 0 28px;
  color: var(--jfc-muted);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  body.jfc-page .jfc-panel {
    border-radius: 28px 28px 0 0;
  }

  .jfc-alert-confirm-card h3 {
    font-size: 34px;
  }

  .jfc-alert-save-bar {
    position: sticky;
    bottom: 10px;
    z-index: 4;
    box-shadow: 0 18px 42px rgba(82,0,255,.28);
  }
}

.jfc-dash-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--jfc-muted);
}

.jfc-dash-empty p {
  font-size: 16px;
  margin: 0 0 16px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-dash-non-member {
  background: var(--jfc-bg);
  border: 1.5px solid var(--jfc-hair);
  border-radius: var(--jfc-r);
  padding: 48px 32px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: var(--jfc-shadow);
}

.jfc-dash-nm-icon { font-size: 40px; margin-bottom: 16px; }

.jfc-dash-nm-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--jfc-ink);
  margin: 0 0 10px;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.jfc-dash-nm-sub {
  font-size: 15px;
  color: var(--jfc-muted);
  margin: 0 0 24px;
  line-height: 1.6;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

/* ── Skeleton loading ──────────────────────────────────────── */
@keyframes jfc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.jfc-skeleton {
  background: linear-gradient(90deg,
    var(--jfc-hair) 25%,
    var(--jfc-bg2)  50%,
    var(--jfc-hair) 75%
  );
  background-size: 200% 100%;
  animation: jfc-shimmer 1.5s infinite;
  border-radius: var(--jfc-r);
  height: 240px;
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 480px) {
  .jfc-masthead-inner { gap: 8px; }
  .jfc-hdr-actions .jfc-btn--text { display: none; }
  .jfc-subheader-legend { display: none; }
  .jfc-panel { max-width: 100%; }
}

@media (min-width: 768px) {
  .jfc-content { padding-top: 32px; }
  .jfc-grid { gap: 20px; }
}

/* ================================================================
   LANDING PAGE
   ================================================================ */

.jfc-lp-nav {
  background: var(--jfc-bg);
  border-bottom: 1px solid var(--jfc-hair);
  position: sticky;
  top: 0;
  z-index: 50;
}

.jfc-lp-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 16px;
}

.jfc-lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jfc-lp-hero {
  background: var(--jfc-grd);
  padding: 80px 0 68px;
  position: relative;
  overflow: hidden;
}

/* Layered glow orbs for depth + aurora shimmer */
.jfc-lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 90% at 10% 50%, rgba(255,39,100,.38) 0%, transparent 60%),
    radial-gradient(ellipse 45% 80% at 88% 55%, rgba(0,220,120,.32) 0%, transparent 58%),
    radial-gradient(ellipse 30% 35% at 50% 0%,  rgba(255,255,255,.12) 0%, transparent 55%);
  pointer-events: none;
}

/* Eyebrow uses bright mint on the gradient */
.jfc-lp-hero .jfc-lp-eyebrow {
  color: rgba(140,255,190,.95);
}

.jfc-lp-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jfc-accent);
  margin: 0 0 18px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-lp-headline {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 20px;
}

.jfc-lp-sub {
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255,255,255,.80);
  max-width: 520px;
  line-height: 1.65;
  margin: 0 0 32px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-lp-hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.jfc-lp-hero-ghost {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.70);
  text-decoration: none;
  transition: color .15s;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-lp-hero-ghost:hover { color: #fff; }

.jfc-lp-hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.jfc-lp-stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 24px 0 0;
}

.jfc-lp-stat-item:first-child { padding-left: 0; }

.jfc-lp-stat-item strong {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.jfc-lp-stat-item span {
  font-size: 12px;
  color: rgba(238,242,247,.45);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-lp-stat-sep {
  width: 1px;
  height: 36px;
  background: rgba(238,242,247,.16);
  margin-right: 24px;
  flex-shrink: 0;
  align-self: center;
}

.jfc-lp-preview {
  padding: 64px 0;
  background: var(--jfc-bg2);
}

.jfc-lp-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.jfc-lp-section-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jfc-accent);
  margin: 0 0 8px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-lp-section-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--jfc-ink);
  margin: 0;
  line-height: 1.15;
}

.jfc-lp-see-all { align-self: flex-end; }

.jfc-lp-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .jfc-lp-preview-grid { grid-template-columns: repeat(4, 1fr); }
}

.jfc-preview-card {
  background: var(--jfc-bg);
  border: 1.5px solid var(--jfc-hair);
  border-radius: var(--jfc-r);
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .18s, border-color .15s;
  box-shadow: var(--jfc-shadow);
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
}

.jfc-preview-card:hover {
  box-shadow: var(--jfc-shadow-accent);
  transform: translateY(-3px);
  border-color: var(--jfc-accent);
}

.jfc-preview-card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--jfc-r) var(--jfc-r) 0 0;
}

.jfc-preview-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--jfc-r-btn);
  margin-bottom: 14px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  align-self: flex-start;
}

.jfc-preview-badge--hot  { background: var(--jfc-hot-bg);  color: var(--jfc-hot);  }
.jfc-preview-badge--deal { background: var(--jfc-deal-bg); color: var(--jfc-deal); }

.jfc-preview-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.jfc-preview-brand {
  font-size: 12px;
  color: var(--jfc-muted);
  margin-bottom: 2px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-preview-model {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--jfc-ink);
  margin-bottom: 4px;
  letter-spacing: -.01em;
}

.jfc-preview-meta {
  font-size: 12px;
  color: var(--jfc-muted);
  margin-bottom: 14px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-preview-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.jfc-preview-price {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--jfc-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.jfc-preview-was {
  font-size: 14px;
  color: var(--jfc-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-preview-merchants {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.jfc-preview-merch-chip {
  font-size: 10px;
  padding: 3px 9px;
  border-radius: var(--jfc-r-btn);
  background: var(--jfc-bg2);
  color: var(--jfc-muted);
  border: 1px solid var(--jfc-hair);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-preview-card--locked {
  background: linear-gradient(128deg, #ff2777 0%, #6e10ff 48%, #00d97a 100%);
  border-color: transparent;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.jfc-preview-lock-overlay { text-align: center; padding: 16px; }
.jfc-preview-lock-icon { font-size: 32px; margin-bottom: 12px; }

.jfc-preview-lock-text {
  font-size: 14px;
  color: rgba(238,242,247,.65);
  margin: 0 0 16px;
  line-height: 1.45;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-preview-lock-cta {
  display: inline-flex;
  padding: 9px 20px;
  background: var(--jfc-accent);
  color: #fff;
  border-radius: var(--jfc-r-btn);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background .12s;
}

.jfc-preview-lock-cta:hover { background: #4100cc; }

.jfc-lp-merchants {
  background: var(--jfc-bg);
  border-top: 1px solid var(--jfc-hair);
  border-bottom: 1px solid var(--jfc-hair);
  padding: 32px 0;
}

.jfc-lp-merchants-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jfc-muted);
  margin: 0 0 20px;
  text-align: center;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-lp-merchant-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jfc-merchant-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1.5px solid var(--jfc-hair);
  border-radius: var(--jfc-r-btn);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  min-width: 130px;
}

.jfc-merchant-logo:hover {
  border-color: var(--jfc-accent);
  box-shadow: 0 2px 14px rgba(82,0,255,.12);
}

.jfc-merchant-logo img {
  height: 28px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  display: block;
}

.jfc-lp-merchants-note {
  font-size: 12px;
  color: var(--jfc-muted);
  text-align: center;
  margin: 16px 0 0;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-lp-tour {
  padding: 72px 0;
  background: var(--jfc-bg2);
  border-bottom: 1px solid var(--jfc-hair);
}

.jfc-lp-tour-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.jfc-lp-tour-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
  border: 1px solid var(--jfc-hair);
  border-radius: 24px;
  background: var(--jfc-bg);
  box-shadow: 0 18px 48px rgba(11,13,16,.07);
  overflow: hidden;
}

.jfc-lp-tour-card--wide {
  background:
    radial-gradient(circle at 90% 0%, rgba(82,0,255,.15), transparent 32%),
    var(--jfc-bg);
}

.jfc-lp-tour-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--jfc-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.jfc-lp-tour-copy h3 {
  max-width: 480px;
  margin: 0 0 10px;
  color: var(--jfc-ink);
  font: 950 clamp(25px, 4vw, 42px)/1 Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  letter-spacing: 0;
}

.jfc-lp-tour-copy p {
  max-width: 520px;
  margin: 0;
  color: var(--jfc-muted);
  font-size: 15px;
  line-height: 1.55;
}

.jfc-lp-tour-visual {
  display: grid;
  place-items: center;
}

.jfc-lp-mini-browser {
  width: min(100%, 440px);
  padding: 14px;
  border: 1px solid var(--jfc-hair);
  border-radius: 22px;
  background: color-mix(in srgb, var(--jfc-bg2) 88%, var(--jfc-bg) 12%);
  box-shadow: 0 22px 54px rgba(82,0,255,.12);
}

.jfc-lp-mini-top {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.jfc-lp-mini-top span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jfc-hair);
}

.jfc-lp-mini-racket {
  height: 160px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--jfc-racket-surface);
}

.jfc-lp-mini-racket img {
  max-width: 82%;
  max-height: 150px;
  object-fit: contain;
}

.jfc-lp-mini-copy {
  display: grid;
  gap: 4px;
  margin-top: 14px;
}

.jfc-lp-mini-copy strong {
  color: var(--jfc-ink);
  font-size: 15px;
  line-height: 1.2;
}

.jfc-lp-mini-copy span {
  color: var(--jfc-muted);
  font-size: 13px;
}

.jfc-lp-mini-price {
  margin-top: 12px;
  color: var(--jfc-ink);
  font-size: 34px;
  font-weight: 950;
}

.jfc-lp-alert-mock {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--jfc-bg2) 90%, var(--jfc-ink) 10%);
}

.jfc-lp-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 4px;
  border-bottom: 1px solid var(--jfc-hair);
}

.jfc-lp-alert-row strong {
  color: var(--jfc-ink);
}

.jfc-lp-alert-row span {
  width: 54px;
  height: 30px;
  border-radius: 999px;
  background: var(--jfc-accent);
  position: relative;
}

.jfc-lp-alert-row span::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
}

.jfc-lp-alert-mock button {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--jfc-grd);
  color: #fff;
  font-weight: 900;
}

.jfc-lp-portfolio-mock {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 18px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--jfc-bg2) 90%, var(--jfc-ink) 10%);
}

.jfc-lp-portfolio-mock span {
  color: var(--jfc-muted);
}

.jfc-lp-portfolio-mock strong {
  color: var(--jfc-ink);
  font-size: 56px;
  line-height: 1;
}

.jfc-lp-portfolio-mock div {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.jfc-lp-portfolio-mock i {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--jfc-grd);
  color: #fff;
}

.jfc-lp-onboarding {
  padding: 0 0 72px;
  background: var(--jfc-bg2);
}

.jfc-lp-onboarding-panel {
  display: grid;
  gap: 24px;
  padding: 26px;
  border-radius: 24px;
  background: var(--jfc-bg);
  border: 1px solid var(--jfc-hair);
  box-shadow: 0 18px 48px rgba(11,13,16,.07);
}

.jfc-lp-onboarding-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.jfc-lp-onboarding-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--jfc-hair);
  border-radius: 18px;
  background: var(--jfc-bg2);
  color: var(--jfc-ink);
  text-decoration: none;
}

.jfc-lp-onboarding-card span {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--jfc-grd);
  color: #fff;
  font-weight: 950;
}

.jfc-lp-onboarding-card strong {
  color: var(--jfc-ink);
  font-size: 15px;
}

.jfc-lp-onboarding-card em {
  color: var(--jfc-muted);
  font-size: 13px;
  font-style: normal;
}

@media (min-width: 900px) {
  .jfc-lp-tour-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jfc-lp-tour-card--wide {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(320px, 1fr);
    align-items: center;
  }

  .jfc-lp-onboarding-panel {
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
  }

  .jfc-lp-onboarding-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .jfc-lp-hero-ctas {
    align-items: stretch;
    gap: 10px;
    margin-bottom: 34px;
  }

  .jfc-lp-hero-ctas .jfc-btn,
  .jfc-lp-hero-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .jfc-lp-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .jfc-lp-stat-item {
    padding-right: 0;
    min-width: 0;
  }

  .jfc-lp-stat-item:nth-child(5) {
    grid-column: 1 / -1;
  }

  .jfc-lp-stat-sep {
    display: none;
  }
}

.jfc-lp-how {
  padding: 72px 0;
  background: var(--jfc-bg);
}

.jfc-lp-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .jfc-lp-steps { grid-template-columns: repeat(3, 1fr); }
}

.jfc-step-num {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--jfc-hair);
  margin-bottom: 16px;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.jfc-step-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--jfc-ink);
  margin: 0 0 10px;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.jfc-step-body {
  font-size: 15px;
  color: var(--jfc-muted);
  line-height: 1.65;
  margin: 0;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-lp-pricing {
  padding: 72px 0;
  background: var(--jfc-bg2);
  border-top: 1px solid var(--jfc-hair);
}

.jfc-lp-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 960px;
  margin: 40px auto 0;
}

@media (min-width: 640px) {
  .jfc-lp-plans { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .jfc-lp-plans { grid-template-columns: repeat(3, 1fr); }
}

.jfc-plan {
  border: 1.5px solid var(--jfc-hair);
  border-radius: var(--jfc-r);
  padding: 32px 28px;
  background: var(--jfc-bg);
  position: relative;
  box-shadow: var(--jfc-shadow);
}

.jfc-plan--pro {
  background: linear-gradient(128deg, #ff2777 0%, #6e10ff 100%);
  border-color: transparent;
}

.jfc-plan-popular {
  position: absolute;
  top: -1px;
  left: 24px;
  background: var(--jfc-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 0 0 var(--jfc-r-btn) var(--jfc-r-btn);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-plan-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jfc-muted);
  margin-bottom: 10px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-plan--pro .jfc-plan-name    { color: rgba(255,255,255,.7); }
.jfc-plan--pro .jfc-plan-tagline { color: rgba(255,255,255,.8); }
.jfc-plan--pro .jfc-plan-period  { color: rgba(255,255,255,.6); }

.jfc-plan-price-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 12px;
}

.jfc-plan-amount {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--jfc-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.jfc-plan--pro .jfc-plan-amount  { color: #fff; }

.jfc-plan-period {
  font-size: 14px;
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}



.jfc-plan-tagline {
  font-size: 14px;
  color: var(--jfc-muted);
  margin: 0 0 24px;
  line-height: 1.5;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}



.jfc-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jfc-plan-features li {
  font-size: 14px;
  color: var(--jfc-muted);
  padding-left: 22px;
  position: relative;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-plan-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--jfc-deal);
  font-weight: 800;
}

.jfc-plan--pro .jfc-plan-features li        { color: rgba(255,255,255,.85); }
.jfc-plan--pro .jfc-plan-features li strong  { color: #fff; }
.jfc-plan--pro .jfc-plan-features li::before { color: rgba(255,255,255,.9); }

/* Max — gradient card */
.jfc-plan--max {
  background: linear-gradient(128deg, #6e10ff 0%, #3cffd0 100%);
  border-color: transparent;
}
.jfc-plan--max .jfc-plan-name    { color: rgba(255,255,255,.7); }
.jfc-plan--max .jfc-plan-amount  { color: #fff; }
.jfc-plan--max .jfc-plan-period  { color: rgba(255,255,255,.6); }
.jfc-plan--max .jfc-plan-tagline { color: rgba(255,255,255,.8); }
.jfc-plan--max .jfc-plan-features li        { color: rgba(255,255,255,.85); }
.jfc-plan--max .jfc-plan-features li strong  { color: #fff; }
.jfc-plan--max .jfc-plan-features li::before { color: rgba(255,255,255,.9); }
.jfc-plan--max .jfc-plan-popular {
  background: rgba(0,0,0,.2);
  color: #fff;
}

/* Current plan state */
/* White CTA buttons on gradient cards */
.jfc-plan--pro .jfc-plan-cta,
.jfc-plan--max .jfc-plan-cta {
  background: #fff;
  color: #0e0a16;
  border-color: transparent;
  font-weight: 700;
}
.jfc-plan--pro .jfc-plan-cta:hover,
.jfc-plan--max .jfc-plan-cta:hover {
  background: rgba(255,255,255,.88);
  color: #0e0a16;
}

.jfc-plan.is-current {
  box-shadow: 0 0 0 2.5px var(--jfc-accent);
}
.jfc-plan-current-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--jfc-r-btn);
  background: rgba(82,0,255,.1);
  color: var(--jfc-accent);
  margin-bottom: 10px;
  font-family: 'Inter', sans-serif;
}
.jfc-plan--pro.is-current .jfc-plan-current-badge,
.jfc-plan--max.is-current .jfc-plan-current-badge {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
}
.jfc-plan.is-current .jfc-plan-cta {
  opacity: .45;
  pointer-events: none;
  cursor: default;
}

/* Upgrade page layout */
.jfc-upgrade-page-v2 { padding: 72px 0 80px; background: var(--jfc-bg2); min-height: 60vh; }
.jfc-upgrade-smart-hero {
  text-align: center;
  margin-bottom: 52px;
}
.jfc-upgrade-smart-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jfc-accent);
  margin-bottom: 14px;
  font-family: 'Inter', sans-serif;
}
.jfc-upgrade-smart-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--jfc-ink);
  margin: 0 0 12px;
  line-height: 1.15;
}
.jfc-upgrade-smart-sub {
  font-size: 1.0625rem;
  color: var(--jfc-muted);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}
.jfc-upgrade-back {
  display: inline-block;
  margin-top: 32px;
  font-size: 0.875rem;
  color: var(--jfc-muted);
  text-decoration: none;
}
.jfc-upgrade-back:hover { color: var(--jfc-ink); }
.jfc-upgrade-back i { margin-right: 5px; }

.jfc-plan-cta { width: 100%; }

.jfc-lp-pricing-note {
  text-align: center;
  font-size: 13px;
  color: var(--jfc-muted);
  margin-top: 24px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

/* ── Branded Ghost Members auth modal ─────────────────────────── */
.jfc-auth-modal[hidden] {
  display: none !important;
}

.jfc-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 86px 18px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.jfc-auth-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.jfc-auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,13,16,.68);
  backdrop-filter: blur(14px);
}

.jfc-auth-dialog {
  position: relative;
  width: min(920px, 100%);
  max-height: calc(100dvh - 110px);
  display: grid;
  grid-template-columns: .9fr 1fr;
  overflow: auto;
  background: var(--jfc-bg);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  transform: translateY(12px) scale(.98);
  transition: transform .18s ease;
}

.jfc-auth-modal.is-open .jfc-auth-dialog {
  transform: translateY(0) scale(1);
}

.jfc-auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--jfc-r-btn);
  background: rgba(11,13,16,.72);
  color: #fff;
  cursor: pointer;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
}

.jfc-auth-close:hover {
  background: rgba(11,13,16,.88);
}

.jfc-auth-visual {
  min-height: 470px;
  padding: 38px;
  background: var(--jfc-grd);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.jfc-auth-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 90% at 10% 50%, rgba(255,39,100,.34) 0%, transparent 60%),
    radial-gradient(ellipse 45% 80% at 88% 55%, rgba(0,220,120,.28) 0%, transparent 58%),
    radial-gradient(ellipse 30% 35% at 50% 0%, rgba(255,255,255,.16) 0%, transparent 55%);
}

.jfc-auth-brand,
.jfc-auth-visual h2,
.jfc-auth-visual ul {
  position: relative;
}

.jfc-auth-brand {
  margin: 0 0 auto;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

.jfc-auth-visual h2 {
  margin: 0 0 20px;
  max-width: 360px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: 0;
  color: #fff;
}

.jfc-auth-visual ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  color: rgba(255,255,255,.82);
  font-size: 14px;
}

.jfc-auth-visual li::before {
  content: '✓';
  margin-right: 8px;
  font-weight: 900;
  color: #8cffbe;
}

.jfc-auth-form-panel {
  padding: 42px;
  align-self: center;
}

.jfc-auth-eyebrow {
  margin: 0 0 10px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--jfc-accent);
}

.jfc-auth-title {
  margin: 0 0 10px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 32px;
  line-height: 1.12;
  color: var(--jfc-ink);
  letter-spacing: 0;
}

.jfc-auth-sub {
  margin: 0 0 26px;
  max-width: 390px;
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  line-height: 1.6;
}

.jfc-auth-context {
  margin: -12px 0 22px;
  padding: 12px 14px;
  border: 1px solid rgba(110,16,255,.18);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(110,16,255,.08), rgba(0,220,120,.09));
  color: var(--jfc-ink);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.jfc-auth-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 20px;
  padding: 4px;
  border: 1px solid var(--jfc-hair);
  border-radius: 999px;
  background: var(--jfc-bg2);
}

.jfc-auth-mode-btn {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--jfc-muted);
  font: 850 13px/1 'Inter', 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
}

.jfc-auth-mode-btn.is-active {
  background: var(--jfc-bg);
  color: var(--jfc-ink);
  box-shadow: 0 8px 22px rgba(11,13,16,.08);
}

.jfc-auth-form {
  display: grid;
  gap: 14px;
}

.jfc-auth-field {
  display: grid;
  gap: 7px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--jfc-muted);
}
.jfc-auth-field[hidden] { display: none; }

.jfc-auth-field input {
  width: 100%;
  border: 1.5px solid var(--jfc-hair);
  border-radius: 12px;
  background: var(--jfc-bg);
  color: var(--jfc-ink);
  padding: 13px 14px;
  font: 500 15px 'Inter', 'DM Sans', system-ui, sans-serif;
  letter-spacing: 0;
  outline: none;
}

.jfc-auth-field input:focus {
  border-color: var(--jfc-accent);
  box-shadow: 0 0 0 4px var(--jfc-accent-dim);
}

.jfc-auth-submit {
  margin-top: 4px;
  min-height: 48px;
}

.jfc-auth-loading,
.jfc-auth-message {
  display: none;
}

.jfc-auth-form.loading .jfc-auth-submit-text {
  display: none;
}

.jfc-auth-form.loading .jfc-auth-loading {
  display: inline;
}

.jfc-auth-form.success .jfc-auth-message--success,
.jfc-auth-form.error .jfc-auth-message--error {
  display: block;
}

.jfc-auth-form.success .jfc-auth-field,
.jfc-auth-form.success .jfc-auth-submit {
  display: none;
}

.jfc-auth-message {
  margin: 2px 0 0;
  padding: 11px 13px;
  border-radius: 10px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

.jfc-auth-message--success {
  background: var(--jfc-deal-bg);
  color: var(--jfc-deal);
}

.jfc-auth-message--error {
  background: var(--jfc-hot-bg);
  color: var(--jfc-hot);
}

.jfc-auth-optin {
  font-size: 12px;
  color: var(--jfc-text-muted, #9ca3af);
  line-height: 1.5;
  margin: 6px 0 12px;
  padding: 10px 12px;
  background: rgba(110,16,255,.06);
  border-radius: 8px;
  border-left: 3px solid rgba(110,16,255,.25);
}

.jfc-auth-switch,
.jfc-auth-fallback {
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  color: var(--jfc-muted);
}

.jfc-auth-switch {
  margin: 18px 0 0;
}

.jfc-auth-switch button,
.jfc-auth-fallback a {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--jfc-accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

.jfc-auth-fallback {
  margin: 10px 0 0;
}

.jfc-auth-switch a,
.jfc-auth-fallback a {
  color: var(--jfc-accent);
  font-weight: 800;
  text-decoration: none;
}

.jfc-auth-page,
.jfc-account-page {
  min-height: calc(100dvh - 70px);
  padding: 72px 0;
  background: var(--jfc-bg2);
}

.jfc-auth-shell {
  display: flex;
  justify-content: center;
}

.jfc-auth-dialog--page {
  position: relative;
  width: min(980px, 100%);
  max-height: none;
  overflow: hidden;
}

.jfc-auth-dialog--page .jfc-auth-visual {
  min-height: 520px;
}

.jfc-account-hero {
  position: relative;
  overflow: hidden;
  padding: 56px;
  border-radius: var(--jfc-r);
  background: var(--jfc-grd);
  color: #fff;
  box-shadow: var(--jfc-shadow-accent);
}

.jfc-account-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 90% at 10% 50%, rgba(255,39,100,.34) 0%, transparent 60%),
    radial-gradient(ellipse 45% 80% at 88% 55%, rgba(0,220,120,.28) 0%, transparent 58%),
    radial-gradient(ellipse 30% 35% at 50% 0%, rgba(255,255,255,.16) 0%, transparent 55%);
  pointer-events: none;
}

.jfc-account-hero > * {
  position: relative;
}

.jfc-account-hero .jfc-lp-eyebrow {
  color: rgba(140,255,190,.95);
}

.jfc-account-title {
  margin: 0 0 14px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.05;
  letter-spacing: 0;
  color: #fff;
}

.jfc-account-sub {
  margin: 0;
  max-width: 560px;
  color: rgba(255,255,255,.82);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

.jfc-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.jfc-account-hero .jfc-btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.42);
}

.jfc-account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.jfc-account-card {
  padding: 26px;
  border: 1px solid var(--jfc-hair);
  border-radius: var(--jfc-r);
  background: var(--jfc-bg);
  box-shadow: 0 14px 40px rgba(11,13,16,.06);
}

.jfc-account-card-kicker {
  margin: 0 0 10px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jfc-muted);
}

.jfc-account-card h2 {
  margin: 0 0 10px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 24px;
  line-height: 1.15;
  color: var(--jfc-ink);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.jfc-account-card p {
  margin: 0;
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  line-height: 1.6;
}

.jfc-account-card-link {
  display: inline-flex;
  margin-top: 16px;
  color: var(--jfc-accent);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-weight: 800;
  text-decoration: none;
}

.jfc-account-auth {
  margin: 0 auto;
}

/* ── Notification Preferences ───────────────────────────────────── */
.jfc-account-prefs {
  margin-top: 32px;
  padding: 28px 32px;
  background: var(--jfc-card-bg, #fff);
  border: 1px solid var(--jfc-card-border, rgba(11,13,16,.08));
  border-radius: 16px;
}

.jfc-account-prefs-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--jfc-text-primary, #0b0d10);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}

.jfc-account-prefs-sub {
  font-size: 14px;
  color: var(--jfc-text-muted, #9ca3af);
  margin: 0 0 20px;
}

.jfc-prefs-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jfc-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--jfc-card-border, rgba(11,13,16,.07));
  cursor: pointer;
  gap: 16px;
}

.jfc-pref-row:last-child {
  border-bottom: none;
}

.jfc-pref-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.jfc-pref-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--jfc-text-primary, #0b0d10);
}

.jfc-pref-desc {
  font-size: 13px;
  color: var(--jfc-text-muted, #9ca3af);
}

.jfc-pref-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--jfc-card-border, rgba(11,13,16,.15));
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.jfc-pref-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.jfc-pref-toggle:checked {
  background: var(--jfc-accent, #6e10ff);
}

.jfc-pref-toggle:checked::after {
  transform: translateX(20px);
}

.jfc-prefs-saved {
  font-size: 13px;
  color: #00a86b;
  font-weight: 700;
  margin: 12px 0 0;
  min-height: 20px;
}

@media (max-width: 760px) {
  .jfc-auth-modal {
    align-items: flex-start;
    padding: max(16px, env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));
  }

  .jfc-auth-dialog {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - max(28px, env(safe-area-inset-top)) - 12px - env(safe-area-inset-bottom));
    border-radius: 16px;
  }

  .jfc-auth-visual {
    min-height: auto;
    padding: 28px 22px;
  }

  .jfc-auth-visual h2 {
    max-width: 100%;
    font-size: 25px;
  }

  .jfc-auth-visual ul {
    display: none;
  }

  .jfc-auth-modal .jfc-auth-visual {
    display: none;
  }

  .jfc-auth-form-panel {
    padding: 28px 22px calc(32px + env(safe-area-inset-bottom));
  }

  .jfc-auth-field,
  .jfc-auth-submit {
    scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .jfc-auth-page,
  .jfc-account-page {
    padding: 36px 0;
  }

  .jfc-auth-page {
    min-height: auto;
    padding: 18px 0 calc(42px + env(safe-area-inset-bottom));
  }

  .jfc-auth-dialog--page {
    max-height: none;
    overflow: visible;
  }

  .jfc-auth-dialog--page .jfc-auth-visual {
    display: none;
  }

  .jfc-auth-dialog--page .jfc-auth-form-panel {
    padding: 30px 20px calc(38px + env(safe-area-inset-bottom));
  }

  .jfc-account-hero {
    padding: 34px 22px;
  }

  .jfc-account-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) and (min-width: 761px) {
  .jfc-account-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep Ghost Portal above the sticky nav on JFC pages. The backdrop is
   intentionally glassy so the nav feels present but cannot block checkout. */
body.jfc-page .gh-portal-root,
body.jfc-page .gh-portal-popup-background,
body.jfc-page .gh-portal-popup-wrapper,
body.jfc-page .gh-portal-popup-container {
  z-index: 2147483600 !important;
}

body.jfc-page .gh-portal-popup-background,
body.jfc-page .gh-portal-root .gh-portal-popup-background {
  position: fixed !important;
  inset: 0 !important;
  padding-top: 72px !important;
  background: rgba(8, 10, 14, 0.42) !important;
  backdrop-filter: saturate(180%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px) !important;
  box-sizing: border-box !important;
}

body.jfc-page:has(.gh-portal-popup-background) .site-header {
  filter: blur(6px) saturate(130%);
  opacity: 0.78;
  pointer-events: none;
}

.jfc-lp-cta-section {
  padding: 88px 0;
  background: var(--jfc-grd);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.jfc-lp-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 90% at 10% 50%, rgba(255,39,100,.38) 0%, transparent 60%),
    radial-gradient(ellipse 45% 80% at 88% 55%, rgba(0,220,120,.32) 0%, transparent 58%),
    radial-gradient(ellipse 30% 35% at 50% 0%, rgba(255,255,255,.12) 0%, transparent 55%);
  pointer-events: none;
}

.jfc-lp-cta-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 18px;
  position: relative;
}

.jfc-lp-cta-sub {
  font-size: 17px;
  color: rgba(238,242,247,.65);
  max-width: 440px;
  margin: 0 auto 32px;
  line-height: 1.65;
  position: relative;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-lp-footer {
  border-top: 1px solid var(--jfc-hair);
  padding: 28px 0;
  background: var(--jfc-bg);
}

.jfc-lp-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.jfc-lp-footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.jfc-lp-footer-links a {
  font-size: 13px;
  color: var(--jfc-muted);
  text-decoration: none;
  transition: color .12s;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-lp-footer-links a:hover { color: var(--jfc-ink); }

/* ================================================================
   MOBILE RESPONSIVE — <480px
   ================================================================ */
@media (max-width: 479px) {

  /* ── Landing page nav ── */
  /* Hide sign-in on narrow screens — only "Join free" CTA survives */
  .jfc-lp-nav-actions .jfc-btn--text { display: none; }
  /* Brand shrinks so actions are never clipped off-screen */
  .jfc-lp-nav .jfc-brand { flex-shrink: 1; min-width: 0; overflow: hidden; }
  .jfc-lp-nav .jfc-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jfc-lp-nav-actions { flex-shrink: 0; }

  /* ── Hero ── */
  .jfc-lp-hero { padding: 52px 0 44px; }
  .jfc-lp-hero-ctas {
    align-items: stretch;
    gap: 10px;
    margin-bottom: 34px;
  }
  .jfc-lp-hero-ctas .jfc-btn,
  .jfc-lp-hero-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .jfc-lp-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* Stat numbers: reduce size so all 3 stats fit on one line at 375px */
  .jfc-lp-stat-item strong { font-size: 20px; }
  .jfc-lp-stat-item        { padding-right: 0; min-width: 0; }
  .jfc-lp-stat-item:nth-child(5) { grid-column: 1 / -1; }
  .jfc-lp-stat-item span   { font-size: 11px; }
  .jfc-lp-stat-sep         { display: none; }

  /* ── Preview grid ── */
  /* Cards in 2-col = ~155px wide. Reduce padding + scale down type/orb */
  .jfc-lp-preview-grid { gap: 10px; }
  .jfc-lp-preview .jfc-card               { padding: 12px; }
  .jfc-lp-preview .jfc-card .jfc-card-img {
    width: calc(100% + 24px);
    margin: -12px -12px 10px;
    height: 100px;
  }
  .jfc-lp-preview .jfc-card .jfc-score-orb     { width: 34px; height: 34px; top: 7px; right: 7px; }
  .jfc-lp-preview .jfc-card .jfc-score-orb-num { font-size: 12px; }
  .jfc-lp-preview .jfc-card .jfc-card-model    { font-size: 13px; }
  .jfc-lp-preview .jfc-card .jfc-price-whole   { font-size: 20px; }
  .jfc-lp-preview .jfc-card .jfc-price-dec     { font-size: 12px; }
  .jfc-lp-preview .jfc-card .jfc-savings-badge       { font-size: 11px; padding: 2px 7px; }
  .jfc-lp-preview .jfc-card .jfc-card-cta            { font-size: 11px; padding: 5px 10px; }
  .jfc-lp-preview .jfc-card .jfc-card-merchants-count{ font-size: 11px; }

  /* Section header: stack so "See all" doesn't crowd the title */
  .jfc-lp-section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .jfc-lp-see-all        { align-self: flex-start; }

  /* ── Merchant logo chips: 2×2 on mobile ── */
  .jfc-lp-merchant-list { gap: 8px; }
  .jfc-merchant-logo    { flex: 1 1 calc(50% - 4px); min-width: 0; }

  /* ── Footer: stack brand + links ── */
  .jfc-lp-footer-inner { flex-direction: column; gap: 16px; }
  .jfc-lp-footer-links { gap: 16px; }

  /* ── Tracker masthead ── */
  /* Brand text pushes nav + subscribe off-screen at 320-375px */
  .jfc-masthead .jfc-brand-name,
  .jfc-masthead .jfc-brand-beta { display: none; }

  /* ── Tracker cards at 1-col ── */
  /* Full-width card looks better with a taller hero image */
  .jfc-grid .jfc-card .jfc-card-img { height: 160px; }
}

/* ================================================================
   COUPON PAGE — /deals/coupons/
   ================================================================ */

/* ── Hero ─────────────────────────────────────────────────────── */
.jfc-coupons-hero {
  background: var(--jfc-bg);
  border-bottom: 1px solid var(--jfc-hair);
  padding: 52px 0 44px;
}

.jfc-coupons-headline {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--jfc-ink);
  margin: 0 0 18px;
}

.jfc-coupons-sub {
  font-size: clamp(14px, 1.6vw, 17px);
  color: var(--jfc-muted);
  max-width: 520px;
  line-height: 1.65;
  margin: 0;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

/* ── Body / filter + grid ─────────────────────────────────────── */
.jfc-coupons-body {
  padding: 40px 0 80px;
  background: var(--jfc-bg2);
  min-height: 60vh;
}

.jfc-coupons-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.jfc-coupons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 560px) {
  .jfc-coupons-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .jfc-coupons-grid { grid-template-columns: repeat(3, 1fr); }
}

.jfc-coupons-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
}

/* ── Coupon card ──────────────────────────────────────────────── */
.jfc-coupon-card {
  background: var(--jfc-bg);
  border: 1.5px solid var(--jfc-hair);
  border-radius: var(--jfc-r);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--jfc-shadow);
  transition: box-shadow .2s, transform .18s, border-color .15s;
  position: relative;
  overflow: hidden;
}

.jfc-coupon-card:hover {
  box-shadow: var(--jfc-shadow-accent);
  transform: translateY(-2px);
  border-color: var(--jfc-accent);
}

.jfc-coupon-card.is-expired {
  opacity: .55;
}

/* Top row: merchant logo + exclusive badge + % orb */
.jfc-coupon-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.jfc-coupon-merchant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jfc-coupon-merchant-logo {
  height: 24px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.jfc-coupon-merchant-name {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--jfc-ink);
}

.jfc-coupon-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--jfc-r-btn);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-coupon-badge--exclusive {
  background: linear-gradient(128deg, #ff2777 0%, #6e10ff 100%);
  color: #fff;
}

/* % discount orb */
.jfc-coupon-pct-orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2777 0%, #6e10ff 55%, #00d97a 100%);
  box-shadow: 0 2px 10px rgba(110,16,255,.35);
  flex-shrink: 0;
  line-height: 1;
}

.jfc-coupon-pct-num {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
}

.jfc-coupon-pct-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.80);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

/* Coupon label */
.jfc-coupon-label {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--jfc-ink);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
}

/* Code reveal row */
.jfc-coupon-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jfc-coupon-code-wrap {
  flex: 1;
  background: var(--jfc-bg2);
  border: 1.5px dashed var(--jfc-hair);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'Inter', 'DM Sans', monospace, system-ui;
  font-size: 16px;
  font-weight: 700;
  color: var(--jfc-ink);
  letter-spacing: .08em;
  text-transform: uppercase;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: border-color .15s, background .15s;
}

.jfc-coupon-code-wrap.is-revealed {
  border-color: var(--jfc-accent);
  background: var(--jfc-accent-dim);
}

.jfc-coupon-code-blur {
  color: var(--jfc-hair);
  letter-spacing: .12em;
  user-select: none;
}

.jfc-coupon-reveal-btn {
  padding: 10px 16px;
  border-radius: 10px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--jfc-accent);
  background: var(--jfc-accent);
  color: #fff;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
  flex-shrink: 0;
}

.jfc-coupon-reveal-btn:hover {
  background: #4100cc;
  border-color: #4100cc;
}

/* Card footer: expiry + CTA */
.jfc-coupon-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.jfc-coupon-expiry {
  font-size: 12px;
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-coupon-expiry--soon    { color: #f59e0b; font-weight: 600; }
.jfc-coupon-expiry--expired { color: var(--jfc-hot); font-weight: 600; }

.jfc-coupon-cta {
  padding: 8px 16px;
  border-radius: var(--jfc-r-btn);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--jfc-accent);
  border: 1.5px solid var(--jfc-hair);
  background: var(--jfc-bg);
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}

.jfc-coupon-cta:hover {
  background: var(--jfc-accent);
  border-color: var(--jfc-accent);
  color: #fff;
}

@media (max-width: 479px) {
  .jfc-coupons-hero { padding: 36px 0 32px; }
  .jfc-coupon-card  { padding: 18px; gap: 14px; }
  .jfc-coupon-label { font-size: 16px; }
}

/* ================================================================
   PHASE 3 — SIGNED-IN MASTHEAD
   ================================================================ */

.jfc-member-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 12px;
  border: 1px solid var(--jfc-hair);
  border-radius: var(--jfc-r-btn);
  background: var(--jfc-bg2);
}

.jfc-member-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--jfc-ink);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jfc-tier-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: var(--jfc-r-btn);
  text-transform: uppercase;
}

.jfc-tier-badge--free {
  background: color-mix(in srgb, var(--jfc-bg2) 82%, var(--jfc-muted) 18%);
  color: var(--jfc-muted);
}

.jfc-tier-badge--pro {
  background: linear-gradient(128deg, #ff2777 0%, #6e10ff 100%);
  color: #fff;
}

.jfc-tier-badge--max {
  background: linear-gradient(128deg, #6e10ff 0%, #3cffd0 100%);
  color: #fff;
}

/* ================================================================
   PHASE 3 — WISHLIST PANEL SECTION
   ================================================================ */

.jfc-wl-section {
  padding: 20px 0 4px;
  border-top: 1px solid var(--jfc-hair);
  margin-top: 8px;
}

.jfc-wl-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.jfc-wl-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--jfc-ink);
}

.jfc-wl-hdr-btns {
  display: flex;
  gap: 4px;
}

.jfc-wl-config-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--jfc-muted);
  margin: 0 0 8px;
}

.jfc-wl-retailers { margin-bottom: 14px; }

.jfc-wl-retailer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jfc-chip--retailer {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--jfc-hair);
  background: transparent;
  color: var(--jfc-muted);
  cursor: pointer;
  transition: all .15s;
}

.jfc-chip--retailer.is-active {
  border-color: #6e10ff;
  background: rgba(110,16,255,.12);
  color: var(--jfc-ink);
}

.jfc-wl-free-note {
  font-size: 11px;
  color: var(--jfc-muted);
  margin: 6px 0 0;
}

.jfc-wl-alert-type { margin-bottom: 14px; }

.jfc-wl-type-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--jfc-hair);
  border-radius: 8px;
  overflow: hidden;
}

.jfc-wl-type-tab {
  flex: 1;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: var(--jfc-muted);
  border: none;
  cursor: pointer;
  transition: all .15s;
}

.jfc-wl-type-tab.is-active {
  background: linear-gradient(128deg,#ff2777,#6e10ff);
  color: #fff;
}

.jfc-wl-slider-wrap {
  margin-bottom: 16px;
}

.jfc-wl-slider-wrap.is-hidden {
  display: none;
}

.jfc-wl-slider-label {
  display: block;
  font-size: 13px;
  color: var(--jfc-muted);
  margin-bottom: 10px;
}

.jfc-wl-slider-label strong {
  color: var(--jfc-ink);
}

.jfc-wl-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--jfc-hair);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.jfc-wl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(128deg, #ff2777, #6e10ff);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(110,16,255,.4);
}

.jfc-wl-slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--jfc-muted);
  margin-top: 4px;
}

.jfc-wl-save-btn {
  width: 100%;
  margin-top: 4px;
}

.jfc-wl-upsell {
  text-align: center;
  padding: 12px;
  background: rgba(110,16,255,.06);
  border-radius: 8px;
  border: 1px dashed rgba(110,16,255,.25);
}

.jfc-wl-upsell--full {
  padding: 16px;
}

.jfc-wl-upsell-msg {
  font-size: 13px;
  color: var(--jfc-muted);
  margin: 0 0 10px;
}

/* ================================================================
   PHASE 3 — MY WISHLIST DASHBOARD
   ================================================================ */

.jfc-wl-header {
  margin-bottom: 20px;
}

.jfc-wl-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px;
}

.jfc-wl-sub {
  font-size: 14px;
  color: var(--jfc-muted);
  margin: 0;
}

.jfc-wl-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--jfc-bg2);
  border: 1px solid var(--jfc-hair);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 16px;
}

.jfc-wl-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 2px;
}

.jfc-wl-stat-sep {
  width: 1px;
  height: 28px;
  background: var(--jfc-hair);
}

.jfc-wl-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--jfc-ink);
  font-family: 'Syne', sans-serif;
}

.jfc-wl-stat-label {
  font-size: 11px;
  color: var(--jfc-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.jfc-wl-stat--pro .jfc-wl-stat-num {
  background: linear-gradient(128deg, #ff2777, #6e10ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.jfc-wl-upgrade-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,39,119,.07);
  border: 1px solid rgba(255,39,119,.2);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--jfc-muted);
}

.jfc-wl-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jfc-wl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--jfc-bg2);
  border: 1px solid var(--jfc-hair);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .15s;
}

.jfc-wl-item:hover {
  border-color: rgba(110,16,255,.3);
}

.jfc-wl-item-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--jfc-racket-surface);
  flex-shrink: 0;
}

[data-theme="dark"] .jfc-wl-item-img,
body.dark .jfc-wl-item-img {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.24));
}

.jfc-wl-item-img--placeholder {
  background: var(--jfc-hair);
}

.jfc-wl-item-body {
  flex: 1;
  min-width: 0;
}

.jfc-wl-item-name {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jfc-wl-item-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--jfc-accent);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.jfc-wl-item-link:hover { text-decoration: underline; }

.jfc-wl-item-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--jfc-muted);
  margin: 2px 0 4px;
}

.jfc-wl-item-trend { font-weight: 600; }
.jfc-wl-trend--down { color: var(--jfc-deal); }

/* ── Prominent price row ── */
.jfc-wl-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 8px;
}

.jfc-wl-price-big {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: linear-gradient(128deg, #ff2777 0%, #6e10ff 50%, #00d97a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.jfc-wl-price-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(0,217,122,.12);
  color: #00a86b;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

/* ── Buy Now CTA ── */
.jfc-wl-buy-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(128deg, #ff2777 0%, #6e10ff 50%, #00d97a 100%);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 999px;
  margin: 4px 0 8px;
  transition: opacity .15s;
}
.jfc-wl-buy-cta:hover { opacity: .88; color: #fff; text-decoration: none; }

/* ── Interactive chart ── */
.jfc-wl-chart-wrap { margin: 6px 0 8px; }

.jfc-wl-sparkline-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--jfc-hair);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.jfc-wl-sparkline-btn:hover {
  border-color: var(--jfc-accent);
  background: rgba(110,16,255,.04);
}

.jfc-wl-chart-hint {
  font-size: 11px;
  color: var(--jfc-muted);
  white-space: nowrap;
}

.jfc-wl-chart-expanded {
  border: 1px solid var(--jfc-hair);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 6px;
  background: var(--jfc-surface);
}
.jfc-wl-chart-expanded.is-hidden { display: none; }

.jfc-wl-chart-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--jfc-muted);
  border-bottom: 1px solid var(--jfc-hair);
}

.jfc-wl-chart-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--jfc-muted);
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}
.jfc-wl-chart-close:hover { color: var(--jfc-fg); }

.jfc-wl-item-config {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.jfc-wl-history {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px;
  color: var(--jfc-muted);
  font-size: 12px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-wl-history svg {
  width: 120px;
  height: 36px;
}

.jfc-wl-similar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--jfc-muted);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-wl-similar button {
  border: 1px solid var(--jfc-hair);
  background: var(--jfc-bg);
  color: var(--jfc-muted);
  border-radius: var(--jfc-r-btn);
  padding: 4px 9px;
  cursor: pointer;
  font: inherit;
}

.jfc-wl-similar button:hover {
  border-color: var(--jfc-accent);
  color: var(--jfc-accent);
}

.jfc-wl-item-merchants,
.jfc-wl-item-alert {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--jfc-hair);
  color: var(--jfc-muted);
}

.jfc-wl-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.jfc-wl-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
}

.jfc-wl-status--on {
  background: rgba(0,217,122,.12);
  color: var(--jfc-deal);
}

.jfc-wl-status--off {
  background: var(--jfc-hair);
  color: var(--jfc-muted);
}

.jfc-wl-edit-btn,
.jfc-wl-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--jfc-muted);
  font-size: 16px;
  padding: 4px;
  line-height: 1;
  transition: color .15s;
}

.jfc-wl-remove-btn:hover { color: var(--jfc-hot); }
.jfc-wl-edit-btn:hover   { color: var(--jfc-ink); }

.jfc-dash-ctas {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.jfc-btn--sm {
  padding: 6px 12px;
  font-size: 12px;
}

@media (max-width: 479px) {
  .jfc-wl-stats    { padding: 12px; }
  .jfc-wl-stat-num { font-size: 18px; }
  .jfc-wl-item     { padding: 10px; gap: 10px; }
  .jfc-wl-item-img { width: 40px; height: 40px; }
  .jfc-wl-item-name { font-size: 13px; }
  .jfc-wl-upgrade-bar { flex-direction: column; align-items: flex-start; }
  .jfc-member-pill { gap: 5px; }
  .jfc-member-name { display: none; }
}

/* ================================================================
   TRACKER PANEL SECTION — redesigned
   ================================================================ */

.jfc-tracker-gate {
  background: var(--jfc-grd);
  border-radius: var(--jfc-r);
  padding: 28px 24px;
  text-align: center;
  border: 1.5px solid rgba(110,16,255,.25);
}

.jfc-tracker-gate-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(110,16,255,.18);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  color: #a78bfa;
}

.jfc-tracker-gate-title {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 18px; font-weight: 800;
  color: #fff; margin: 0 0 8px;
  letter-spacing: -.01em;
}

.jfc-tracker-gate-sub {
  font-size: 14px;
  color: rgba(238,242,247,.65);
  margin: 0 0 20px;
  line-height: 1.55;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-tracker-section {
  background: transparent;
  border-radius: var(--jfc-r);
  overflow: hidden;
}

.jfc-tracker-section-hdr {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--jfc-hair);
  margin-bottom: 16px;
}

.jfc-tracker-section-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700;
  color: var(--jfc-ink);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-tracker-hdr-actions {
  display: flex; align-items: center; gap: 4px;
}

.jfc-tracker-remove-btn {
  background: none; border: none; cursor: pointer;
  color: var(--jfc-subtle); font-size: 13px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: color .12s, background .12s;
}
.jfc-tracker-remove-btn:hover { color: var(--jfc-hot); background: var(--jfc-hot-bg); }

.jfc-tracker-body {
  padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}

.jfc-tracker-field {}

.jfc-tracker-field-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--jfc-muted);
  margin: 0 0 8px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-tracker-type-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}

.jfc-tracker-type-tab {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--jfc-hair);
  background: var(--jfc-bg);
  color: var(--jfc-muted);
  cursor: pointer;
  transition: all .14s;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-tracker-type-tab:hover {
  border-color: var(--jfc-accent);
  color: var(--jfc-accent);
}

.jfc-tracker-type-tab.is-active {
  border-color: var(--jfc-accent);
  background: var(--jfc-accent-dim);
  color: var(--jfc-accent);
}

.jfc-tracker-tab-icon {
  font-size: 18px; line-height: 1;
}

.jfc-tracker-tab-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: -.01em;
}

.jfc-tracker-save-btn {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  margin-top: 4px;
  border-radius: 14px;
  background: var(--jfc-grd);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  letter-spacing: -.01em;
}
.jfc-tracker-save-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.jfc-tracker-save-btn:active:not(:disabled) {
  transform: translateY(0);
}

.jfc-tracker-upsell {
  padding: 20px;
  text-align: center;
}

.jfc-tracker-upsell-title {
  font-size: 14px; font-weight: 700;
  color: var(--jfc-ink); margin: 0 0 6px;
  font-family: 'Syne', system-ui, sans-serif;
}

.jfc-tracker-upsell-body {
  font-size: 13px; color: var(--jfc-muted);
  margin: 0 0 14px; line-height: 1.5;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-tracker-inline-upgrade {
  background: none; border: none; cursor: pointer;
  color: var(--jfc-accent); font-weight: 600;
  font-size: inherit; padding: 0;
  text-decoration: underline;
}

/* ── Upgrade page ─────────────────────────────────────────────── */
.jfc-upgrade-page {
  background: var(--jfc-bg);
}

.jfc-upgrade-hero {
  position: relative;
  overflow: hidden;
  padding: 86px 0 72px;
  background: var(--jfc-grd);
  color: #fff;
}

.jfc-upgrade-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 90% at 10% 50%, rgba(255,39,100,.38) 0%, transparent 60%),
    radial-gradient(ellipse 45% 80% at 88% 55%, rgba(0,220,120,.32) 0%, transparent 58%),
    radial-gradient(ellipse 30% 35% at 50% 0%, rgba(255,255,255,.12) 0%, transparent 55%);
}

.jfc-upgrade-hero .jfc-wrap {
  position: relative;
}

.jfc-upgrade-hero .jfc-lp-eyebrow {
  color: rgba(140,255,190,.95);
}

.jfc-upgrade-title {
  max-width: 760px;
  margin: 0 0 18px;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: clamp(36px, 6vw, 70px);
  line-height: 1.02;
  color: #fff;
  letter-spacing: 0;
}

.jfc-upgrade-sub {
  max-width: 560px;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
}

.jfc-upgrade-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.jfc-upgrade-body {
  padding: 72px 0;
  background: var(--jfc-bg2);
}

.jfc-upgrade-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 28px;
  align-items: start;
}

.jfc-upgrade-benefits {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.jfc-upgrade-benefits div {
  padding: 18px 20px;
  border: 1px solid var(--jfc-hair);
  border-radius: var(--jfc-r);
  background: var(--jfc-bg);
}

.jfc-upgrade-benefits strong,
.jfc-upgrade-benefits span {
  display: block;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

.jfc-upgrade-benefits strong {
  margin-bottom: 5px;
  color: var(--jfc-ink);
  font-size: 15px;
}

.jfc-upgrade-benefits span {
  color: var(--jfc-muted);
  font-size: 14px;
  line-height: 1.55;
}

.jfc-upgrade-checkout {
  position: sticky;
  top: 92px;
}

.jfc-upgrade-secure {
  margin: 14px 0 0;
  text-align: center;
  color: rgba(238,242,247,.62);
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
}

@media (max-width: 900px) {
  .jfc-upgrade-grid {
    grid-template-columns: 1fr;
  }

  .jfc-upgrade-checkout {
    position: static;
  }
}

/* CTA is now a full-width text button above the card footer — no bell icon */
.jfc-card-cta::before { display: none; }

/* Section label for tracker in panel */
.jfc-panel-alert-section > .jfc-panel-section-label {
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--jfc-muted);
  margin: 0 0 12px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}

/* ── Toast notifications ────────────────────────────────────── */
.jfc-toasts {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 20000;
  pointer-events: none;
}

.jfc-toast {
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  background: #1c1f26;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  pointer-events: auto;
  max-width: 320px;
  text-align: center;
}

.jfc-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.jfc-toast--success { background: #0b6e4f; }
.jfc-toast--error   { background: #b91c1c; }
.jfc-toast--info    { background: #1d4ed8; }

[data-theme="dark"] .jfc-toast,
body.dark .jfc-toast { box-shadow: 0 4px 24px rgba(0,0,0,.5); }

/* ── Tracker save button loading state ─────────────────────── */
.jfc-tracker-save-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ── Tier pill ──────────────────────────────────────────────── */
.jfc-tier-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 2px 8px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}
.jfc-tier-pill--pro {
  background: linear-gradient(128deg,#ff2777,#6e10ff);
  color: #fff;
}
.jfc-tier-pill--max {
  background: linear-gradient(128deg,#6e10ff,#3cffd0);
  color: #fff;
}
.jfc-tier-pill--free {
  background: var(--jfc-bg2);
  color: var(--jfc-muted);
  border: 1px solid var(--jfc-hair);
}

/* ── Tracker header right ───────────────────────────────────── */
.jfc-tracker-hdr-right {
  display: flex; align-items: center; gap: 6px;
}

/* ── Target price tab PRO lock (free tier) ──────────────────── */
.jfc-tracker-type-tab[data-wl-type="target"].is-pro-locked {
  opacity: 0.55;
  cursor: default;
}

.jfc-tracker-type-tab[data-wl-type="target"].is-pro-locked::after {
  content: 'PRO';
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  background: var(--jfc-grd, linear-gradient(128deg,#ff2777,#6e10ff));
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── FAQ section ────────────────────────────────────────────── */
.jfc-lp-faq {
  padding: 64px 0;
  border-top: 1px solid var(--jfc-border);
}
.jfc-faq-list {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 32px auto 0;
}
.jfc-faq-item {
  border-bottom: 1px solid var(--jfc-border);
}
.jfc-faq-item:first-child {
  border-top: 1px solid var(--jfc-border);
}
.jfc-faq-q {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--jfc-text);
  padding: 18px 32px 18px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  position: relative;
}
.jfc-faq-q::-webkit-details-marker { display: none; }
.jfc-faq-q::after {
  content: '+';
  color: var(--jfc-muted);
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .15s;
}
.jfc-faq-item[open] .jfc-faq-q::after {
  content: '\2212';
}
.jfc-faq-a {
  padding: 0 0 18px;
}
.jfc-faq-a p {
  font-family: Inter, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--jfc-muted);
  margin: 0;
}
.jfc-faq-a a {
  color: var(--jfc-hot);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ================================================================
   TRACKER TRAY — desktop: always-docked glass panel (non-blocking)
                  mobile:  FAB + bottom sheet
   ================================================================ */

/* ── Shared ─────────────────────────────────────────────── */
.jfc-tray { font-family: Inter, sans-serif; }

/* Dismiss wrap — centered chevron at the top of the panel */
.jfc-tray-dismiss-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 0;
}
.jfc-tray-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 22px;
  border: none;
  background: none;
  color: rgba(255,255,255,.65);
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 6px;
  transition: color .15s;
}
.jfc-tray-dismiss:hover { color: #fff; }

/* ── Slot card row (horizontal scroll) ──────────────────── */
.jfc-slot-row {
  display: flex;
  gap: 12px;
  padding: 16px 24px 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.jfc-slot-row::-webkit-scrollbar { display: none; }

/* ── Base slot card — matches jfc-card design language ───── */
.jfc-slot-card {
  flex-shrink: 0;
  width: 120px;
  min-height: 172px;
  border-radius: var(--jfc-r);
  border: 1.5px solid var(--jfc-hair);
  background: var(--jfc-bg);
  box-shadow: var(--jfc-shadow);
  position: relative;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow .22s, transform .22s cubic-bezier(.34,1.4,.64,1), border-color .15s;
}
.jfc-slot-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(128deg, #ff2777 0%, #6e10ff 48%, #00d97a 100%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
  z-index: 0;
}
.jfc-slot-card--filled:hover,
.jfc-slot-card--empty:hover,
.jfc-slot-card--locked:hover {
  box-shadow: 0 12px 36px rgba(110,16,255,.32), 0 3px 10px rgba(255,39,119,.18);
  transform: translateY(-3px);
  border-color: transparent;
}
.jfc-slot-card--filled:hover::before,
.jfc-slot-card--empty:hover::before,
.jfc-slot-card--locked:hover::before { opacity: 1; }

/* All child content above gradient */
.jfc-slot-remove,
.jfc-slot-img-wrap,
.jfc-slot-info,
.jfc-slot-grip,
.jfc-slot-add-icon,
.jfc-slot-add-label,
.jfc-slot-lock-icon,
.jfc-slot-lock-label { position: relative; z-index: 1; }

/* ── Filled card ─────────────────────────────────────────── */
.jfc-slot-card--filled.is-dragging { opacity: .4; transform: scale(.96); }
.jfc-slot-card--filled.is-drag-over {
  border-color: var(--jfc-accent);
  box-shadow: 0 0 0 3px rgba(82,0,255,.2);
}
.jfc-slot-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(0,0,0,.07);
  color: var(--jfc-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  cursor: pointer;
  transition: background .12s, color .12s;
  z-index: 2;
  flex-shrink: 0;
}
.jfc-slot-remove:hover { background: rgba(239,68,68,.15); color: var(--jfc-hot); }
.jfc-slot-confirm {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--jfc-bg);
  border-radius: 13px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  z-index: 3;
}
.jfc-slot-confirm.is-visible {
  display: flex;
}
.jfc-slot-confirm-msg {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--jfc-ink);
  text-align: center;
  line-height: 1.35;
  margin: 0;
}
.jfc-slot-confirm-yes {
  width: 100%;
  padding: 5px 6px;
  background: var(--jfc-hot);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 0.6875rem;
  font-weight: 700;
  cursor: pointer;
}
.jfc-slot-confirm-yes:hover { filter: brightness(1.1); }
.jfc-slot-confirm-no {
  background: none;
  border: none;
  color: var(--jfc-muted);
  font-size: 0.6875rem;
  cursor: pointer;
  padding: 2px 4px;
}
.jfc-slot-confirm-no:hover { color: var(--jfc-ink); }
.jfc-slot-img-wrap {
  width: 100%;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px 4px;
  flex-shrink: 0;
  background: var(--jfc-racket-surface);
}
.jfc-slot-card--filled:hover .jfc-slot-img-wrap { background: transparent; }
.jfc-slot-img {
  max-width: 100%;
  max-height: 76px;
  object-fit: contain;
}
.jfc-slot-info {
  flex: 1;
  width: 100%;
  padding: 6px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jfc-slot-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--jfc-ink);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.jfc-slot-price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--jfc-ink);
}
.jfc-slot-price--na { color: var(--jfc-muted); }
.jfc-slot-drop {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--jfc-deal);
}
.jfc-slot-grip {
  color: var(--jfc-hair);
  font-size: 0.5625rem;
  padding: 4px 0 6px;
  cursor: grab;
  line-height: 1;
}
/* Hover: text → white, matching jfc-card */
.jfc-slot-card--filled:hover .jfc-slot-name  { color: #fff; }
.jfc-slot-card--filled:hover .jfc-slot-price { color: #fff; }
.jfc-slot-card--filled:hover .jfc-slot-drop  { color: #a4ffcf; }
.jfc-slot-card--filled:hover .jfc-slot-grip  { color: rgba(255,255,255,.4); }

/* ── Empty slot ──────────────────────────────────────────── */
.jfc-slot-card--empty {
  border-style: dashed;
  border-color: rgba(110,16,255,.4);
  gap: 12px;
  padding: 20px 8px;
  justify-content: center;
}
.jfc-slot-add-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(110,16,255,.12);
  color: var(--jfc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.jfc-slot-card--empty:hover .jfc-slot-add-icon { background: rgba(255,255,255,.25); color: #fff; }
.jfc-slot-add-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--jfc-accent);
  text-align: center;
  line-height: 1.4;
  transition: color .15s;
}
.jfc-slot-card--empty:hover .jfc-slot-add-label { color: #fff; }

/* ── Locked slot ─────────────────────────────────────────── */
.jfc-slot-card--locked {
  opacity: .6;
  gap: 12px;
  padding: 20px 8px;
  justify-content: center;
}
.jfc-slot-card--locked:hover { opacity: 1; }
.jfc-slot-lock-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--jfc-hair);
  color: var(--jfc-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.jfc-slot-card--locked:hover .jfc-slot-lock-icon { background: rgba(255,255,255,.25); color: #fff; }
.jfc-slot-lock-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--jfc-muted);
  text-align: center;
  line-height: 1.5;
  transition: color .15s;
}
.jfc-slot-card--locked:hover .jfc-slot-lock-label { color: rgba(255,255,255,.8); }
.jfc-slot-lock-label b { color: var(--jfc-accent); display: block; font-size: 0.75rem; }
.jfc-slot-card--locked:hover .jfc-slot-lock-label b { color: #fff; }

/* ── Guest CTA — text on dark glass ─────────────────────── */
.jfc-tray-guest {
  padding: 28px 24px;
  text-align: center;
}
.jfc-tray-guest-icon {
  font-size: 1.75rem;
  color: rgba(255,255,255,.8);
  margin-bottom: 12px;
  display: block;
}

/* ================================================================
   Redesign Lite: Wise-style tracker portfolio and onboarding
   ================================================================ */

.jfc-portfolio-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 28px;
}

.jfc-portfolio-icon-btn,
.jfc-how-round {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--jfc-bg2) 88%, var(--jfc-ink) 12%);
  color: var(--jfc-accent);
  font-size: 22px;
  cursor: pointer;
}

.jfc-portfolio-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 0 24px;
}

.jfc-portfolio-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--jfc-grd);
  color: #fff;
  font-size: 28px;
  margin-bottom: 18px;
}

.jfc-portfolio-label {
  margin: 0 0 8px;
  color: var(--jfc-muted);
  font-size: 18px;
  font-weight: 650;
}

.jfc-portfolio-balance {
  margin: 0;
  color: var(--jfc-ink);
  font-family: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: clamp(58px, 12vw, 104px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: 0;
}

.jfc-portfolio-sub {
  margin: 8px 0 18px;
  color: var(--jfc-muted);
  font-size: 15px;
}

.jfc-portfolio-detail-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--jfc-accent-dim);
  color: var(--jfc-accent);
  font-weight: 850;
  text-decoration: none;
}

[data-theme="dark"] .jfc-portfolio-detail-pill,
body.dark .jfc-portfolio-detail-pill {
  background: rgba(82,0,255,.24);
  color: #fff;
}

.jfc-portfolio-actions {
  width: min(620px, 100%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 34px auto 30px;
}

.jfc-portfolio-actions button {
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--jfc-ink);
  font: 850 14px/1 Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  cursor: pointer;
}

.jfc-portfolio-actions span {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--jfc-grd);
  color: #fff;
  font-size: 25px;
}

.jfc-portfolio-tabs {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0 auto 18px;
  padding: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jfc-bg2) 88%, var(--jfc-ink) 12%);
}

.jfc-portfolio-tabs button {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--jfc-muted);
  font: 800 15px/1 Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  cursor: pointer;
}

.jfc-portfolio-tabs button.is-active {
  background: var(--jfc-bg);
  color: var(--jfc-accent);
  box-shadow: 0 8px 22px rgba(11,13,16,.08);
}

.jfc-portfolio-stats {
  width: min(860px, 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.jfc-goal-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.jfc-goal-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--jfc-hair);
  border-radius: 18px;
  background: var(--jfc-bg);
}

.jfc-goal-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--jfc-accent-dim);
  color: var(--jfc-accent);
}

.jfc-goal-copy h3 {
  margin: 0 26px 5px 0;
  font-size: 15px;
  color: var(--jfc-ink);
}

.jfc-goal-copy p {
  margin: 0;
  color: var(--jfc-muted);
  font-size: 13px;
  line-height: 1.4;
}

.jfc-goal-cta {
  grid-column: 1 / -1;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--jfc-grd);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.jfc-goal-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--jfc-bg2);
  color: var(--jfc-muted);
  cursor: pointer;
}

.jfc-dash-empty--wise {
  min-height: min(620px, 72vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px 22px;
  text-align: center;
  background: var(--jfc-bg);
}

.jfc-dash-empty-bell {
  width: 180px;
  height: 180px;
  display: grid;
  place-items: center;
  margin-bottom: 40px;
  border-radius: 50%;
  background: var(--jfc-accent-dim);
  color: var(--jfc-accent);
  font-size: 82px;
}

.jfc-dash-empty--wise h2 {
  max-width: 620px;
  margin: 0 0 18px;
  color: var(--jfc-ink);
  font-family: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: clamp(44px, 9vw, 76px);
  font-weight: 950;
  line-height: .95;
  letter-spacing: 0;
  text-transform: uppercase;
}

.jfc-dash-empty--wise p {
  max-width: 560px;
  margin: 0 0 54px;
  color: var(--jfc-muted);
  font-size: clamp(18px, 4vw, 28px);
  line-height: 1.35;
}

.jfc-dash-empty-cta,
.jfc-how-cta {
  width: min(100%, 760px);
  min-height: 64px;
  border-radius: 999px;
  background: var(--jfc-grd);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.jfc-portfolio-panel {
  border: 1px solid var(--jfc-hair);
  border-radius: 20px;
  background: var(--jfc-bg);
  padding: 18px;
}

.jfc-portfolio-panel-head h2 {
  margin: 0 0 4px;
  color: var(--jfc-ink);
  font-size: 24px;
}

.jfc-portfolio-panel-head p {
  margin: 0 0 18px;
  color: var(--jfc-muted);
}

.jfc-alert-lite-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--jfc-hair);
  background: transparent;
  color: var(--jfc-ink);
  text-align: left;
  cursor: pointer;
}

.jfc-alert-lite-row:last-child { border-bottom: 0; }

.jfc-alert-lite-thumb {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--jfc-hair);
  background: var(--jfc-racket-surface);
}

.jfc-alert-lite-thumb img {
  max-width: 42px;
  max-height: 42px;
  object-fit: contain;
}

.jfc-alert-lite-row strong,
.jfc-alert-lite-row em {
  display: block;
}

.jfc-alert-lite-row strong {
  font-size: 15px;
}

.jfc-alert-lite-row em {
  margin-top: 3px;
  color: var(--jfc-muted);
  font-size: 13px;
  font-style: normal;
}

.jfc-how-open {
  overflow: hidden;
}

.jfc-how-modal {
  position: fixed;
  inset: 0;
  z-index: 100200;
}

.jfc-how-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,13,16,.52);
}

.jfc-how-sheet {
  position: absolute;
  inset: 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
  padding: 28px;
  border-radius: 34px;
  background: var(--jfc-bg);
  color: var(--jfc-ink);
  overflow: auto;
}

.jfc-how-top {
  display: flex;
  justify-content: space-between;
}

.jfc-how-hero {
  text-align: center;
  padding: 16px 0 0;
}

.jfc-how-kicker {
  margin: 0 0 8px;
  color: var(--jfc-muted);
  font-weight: 850;
}

.jfc-how-hero h2 {
  margin: 0 auto 14px;
  max-width: 620px;
  font-family: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: clamp(42px, 8vw, 76px);
  font-weight: 950;
  line-height: .95;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.jfc-how-hero p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--jfc-muted);
  font-size: 19px;
  line-height: 1.5;
}

.jfc-how-preview {
  display: grid;
  place-items: center;
}

.jfc-how-phone {
  width: min(100%, 360px);
  min-height: 280px;
  padding: 28px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--jfc-bg2) 92%, var(--jfc-ink) 8%);
  text-align: center;
}

.jfc-how-savings {
  font-size: 58px;
  font-weight: 950;
  color: var(--jfc-ink);
  line-height: 1;
}

.jfc-how-phone span {
  color: var(--jfc-muted);
}

.jfc-how-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 28px 0;
}

.jfc-how-actions i {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--jfc-grd);
  color: #fff;
}

.jfc-how-line {
  height: 18px;
  margin: 12px 0;
  border-radius: 999px;
  background: var(--jfc-bg);
}

.jfc-how-line--short {
  width: 70%;
}

.jfc-how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.jfc-how-steps div {
  padding: 14px;
  border-radius: 16px;
  background: var(--jfc-bg2);
}

.jfc-how-steps strong,
.jfc-how-steps span {
  display: block;
}

.jfc-how-steps strong {
  color: var(--jfc-accent);
  font-size: 22px;
}

.jfc-how-steps span {
  color: var(--jfc-muted);
  font-size: 13px;
}

@media (max-width: 760px) {
  .jfc-portfolio-appbar { margin: 12px 0 22px; }
  .jfc-portfolio-icon-btn,
  .jfc-how-round { width: 52px; height: 52px; }
  .jfc-portfolio-actions { gap: 10px; }
  .jfc-portfolio-actions span { width: 58px; height: 58px; }
  .jfc-portfolio-stats { grid-template-columns: repeat(2, 1fr); }
  .jfc-goal-strip { grid-template-columns: 1fr; }
  .jfc-portfolio-list { border-radius: 22px; }
  .jfc-how-sheet { inset: auto 0 0; max-height: 94dvh; border-radius: 34px 34px 0 0; }
  .jfc-how-hero h2 { font-size: clamp(34px, 10vw, 46px); }
  .jfc-how-steps { grid-template-columns: 1fr; }
}
.jfc-tray-guest-p {
  font-size: 0.875rem;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  margin: 0 0 18px;
}

/* ── DESKTOP: always-docked glass panel ─────────────── */
@media (min-width: 768px) {
  .jfc-tray {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    pointer-events: none; /* tray container is passthrough */
  }

  /* Panel is always visible — glass, non-blocking */
  .jfc-tray-panel {
    pointer-events: all;
    background: rgba(14,10,22,0.24);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 -8px 40px rgba(0,0,0,.22);
    animation: traySlideUp .25s cubic-bezier(.22,.68,0,1.2);
  }
  @keyframes traySlideUp {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* FAB hides on desktop when panel is open; shown when dismissed */
  .jfc-tray-fab { display: none; }
  .jfc-tray.panel-dismissed .jfc-tray-fab {
    display: flex;
    pointer-events: all;
  }

  /* No backdrop on desktop — non-blocking */
  .jfc-tray-backdrop { display: none !important; }

  /* Content padding to clear the docked panel (~210px) */
  .jfc-page .jfc-content { padding-bottom: 220px; }
}

/* ── MOBILE: FAB + bottom sheet ─────────────────────── */
@media (max-width: 767px) {
  .jfc-slot-row {
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-left: 16px;
  }

  .jfc-tray { position: fixed; z-index: 200; }

  /* FAB */
  .jfc-tray-fab {
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--jfc-accent);
    color: #fff;
    border: none;
    font-size: 1.125rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(82,0,255,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, box-shadow .15s;
  }
  .jfc-tray-fab:hover { transform: scale(1.06); box-shadow: 0 6px 24px rgba(82,0,255,.5); }
  .jfc-tray-fab-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    border-radius: 99px;
    background: var(--jfc-hot);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--jfc-bg);
  }

  /* Bottom sheet — glass */
  .jfc-tray-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(11,13,16,0.08);
    box-shadow: 0 -8px 34px rgba(11,13,16,.14);
    max-height: 75dvh;
    overflow-y: auto;
    animation: sheetSlideUp .28s cubic-bezier(.22,.68,0,1.2);
    z-index: 201;
  }
  @keyframes sheetSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Backdrop */
  .jfc-tray-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    z-index: 200;
  }

  body.jfc-tray-open { overflow: hidden; }
}

/* ── Dismiss tab (desktop only — when panel is dismissed) ─── */
.jfc-tray-tab {
  display: none;
}
@media (min-width: 768px) {
  .jfc-tray.panel-dismissed .jfc-tray-tab {
    display: flex;
    pointer-events: all;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 28px;
    border: none;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(128deg, #ff2777 0%, #6e10ff 48%, #00d97a 100%);
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
    box-shadow: 0 -4px 16px rgba(82,0,255,.35);
    transition: height .15s;
    z-index: 201;
  }
  .jfc-tray.panel-dismissed .jfc-tray-tab:hover { height: 34px; }
}

@media (max-width: 767px) {
  .jfc-tray.panel-dismissed .jfc-tray-fab {
    display: flex;
  }

  .jfc-tray-guest-icon {
    color: rgba(11,13,16,.72);
  }

  .jfc-tray-guest-p {
    color: rgba(11,13,16,.68);
  }

  .jfc-tray-dismiss {
    color: rgba(11,13,16,.55);
  }

  .jfc-tray-dismiss:hover {
    color: rgba(11,13,16,.88);
  }
}

/* ── Shake animation for newly-added slot card ──────────────── */
@keyframes jfcSlotPop {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.08) rotate(-2deg); }
  40%  { transform: scale(1.06) rotate(2deg); }
  60%  { transform: scale(1.04) rotate(-1deg); }
  80%  { transform: scale(1.02) rotate(1deg); }
  100% { transform: scale(1); }
}
.jfc-slot-just-added {
  animation: jfcSlotPop .7s cubic-bezier(.34,1.56,.64,1);
}

/* ================================================================
   UPGRADE MODAL
   ================================================================ */
.jfc-upgrade-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.jfc-upgrade-modal[hidden] { display: none; }

.jfc-upgrade-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.jfc-upgrade-modal-inner {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 0%, rgba(82,0,255,.34), transparent 38%),
    linear-gradient(180deg, #16002c 0%, #0b0714 48%, #06070b 100%);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07);
  padding: 22px;
  max-width: 470px;
  max-height: min(92dvh, 860px);
  width: 100%;
  overflow: auto;
  text-align: left;
  animation: upgradeModalIn .28s cubic-bezier(.34,1.4,.64,1);
}
@keyframes upgradeModalIn {
  from { transform: scale(.92) translateY(12px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.jfc-upgrade-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--jfc-muted);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: background .12s, color .12s;
}
.jfc-upgrade-close { color: rgba(255,255,255,.55); }
.jfc-upgrade-close:hover { background: rgba(255,255,255,.1); color: #fff; }

.jfc-upgrade-modal .jfc-upgrade-body {
  display: grid;
  gap: 16px;
  padding: 0;
  background: transparent;
  color: #fff;
}

.jfc-upgrade-premium-hero {
  padding: 34px 12px 8px;
  text-align: center;
}

.jfc-upgrade-icon {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--jfc-hair);
  color: var(--jfc-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
  margin: 0 auto 18px;
}
.jfc-upgrade-icon--gradient {
  background: var(--jfc-grd);
  color: #fff;
  box-shadow: 0 18px 50px rgba(82,0,255,.42);
}

.jfc-upgrade-eyebrow {
  margin: 0 0 10px;
  color: rgba(255,255,255,.64);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.jfc-upgrade-modal .jfc-upgrade-title {
  max-width: none;
  font-size: clamp(31px, 7vw, 44px);
  font-weight: 950;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  color: #fff;
  margin: 0 auto;
  line-height: .98;
  letter-spacing: 0;
}
.jfc-upgrade-modal .jfc-upgrade-desc {
  max-width: 380px;
  font-size: 0.95rem;
  color: rgba(255,255,255,.70);
  line-height: 1.5;
  margin: 14px auto 0;
}
.jfc-upgrade-modal .jfc-upgrade-features {
  list-style: none;
  padding: 0;
  margin: 0 2px;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.jfc-upgrade-modal .jfc-upgrade-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 4px;
  font-size: 0.94rem;
  font-weight: 750;
  color: rgba(255,255,255,.88);
}
.jfc-upgrade-modal .jfc-upgrade-features li .fas {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(60,255,208,.12);
  color: var(--jfc-secondary);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.jfc-upgrade-plans-modal {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.jfc-upgrade-plan-card {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1.5px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.jfc-upgrade-plan-card.is-featured {
  background: rgba(82,0,255,.16);
}

.jfc-upgrade-plan-card.is-selected {
  border-color: rgba(82,0,255,.98);
  box-shadow: inset 0 0 0 1px rgba(82,0,255,.98), 0 16px 38px rgba(82,0,255,.20);
}

.jfc-upgrade-plan-card strong,
.jfc-upgrade-plan-card em {
  display: block;
}

.jfc-upgrade-plan-card strong {
  font-size: 17px;
  line-height: 1.1;
}

.jfc-upgrade-plan-card em {
  margin-top: 4px;
  color: rgba(255,255,255,.56);
  font-style: normal;
  font-size: 13px;
}

.jfc-upgrade-plan-card b {
  justify-self: start;
  grid-column: 1;
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--jfc-accent);
  color: #fff;
  font-size: 11px;
}

.jfc-upgrade-plan-price {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  white-space: nowrap;
}

.jfc-upgrade-modal .jfc-upgrade-cta {
  position: sticky;
  bottom: 0;
  z-index: 2;
  width: 100%;
  min-height: 58px;
  font-size: 1rem;
  padding: 14px 24px;
  background: var(--jfc-grd);
  color: #fff;
  border-color: transparent;
  font-weight: 900;
  box-shadow: 0 -12px 30px rgba(6,7,11,.75), var(--jfc-shadow-accent);
}
.jfc-upgrade-modal .jfc-upgrade-cta:hover {
  color: #fff;
  box-shadow: var(--jfc-shadow-accent);
}
.jfc-upgrade-modal .jfc-upgrade-note {
  font-size: 0.8125rem;
  color: rgba(255,255,255,.45);
  margin: 0;
  text-align: center;
}

@media (max-width: 540px) {
  .jfc-upgrade-modal {
    align-items: flex-end;
    padding: 0;
  }

  .jfc-upgrade-modal-inner {
    max-width: none;
    max-height: 94dvh;
    border-radius: 30px 30px 0 0;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  }

  .jfc-upgrade-premium-hero {
    padding-top: 42px;
  }

  .jfc-upgrade-plan-card {
    padding: 15px;
  }

  .jfc-upgrade-plan-price {
    font-size: 16px;
  }
}

/* ================================================================
   CARD TRACK (BELL) BUTTON
   ================================================================ */
.jfc-card-track {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--jfc-accent);
  color: #fff;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .12s;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(110,16,255,.35);
}
.jfc-card-track:hover {
  background: #4a00e8;
  transform: scale(1.08);
}
@media (max-width: 479px) {
  .jfc-card-track { width: 52px; height: 52px; font-size: 1.25rem; }
}

/* ================================================================
   PANEL HERO ACTIONS + SHARE BUTTON
   ================================================================ */
.jfc-panel-hero { position: relative; }
.jfc-panel-hero-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}
.jfc-panel-share-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(11,13,16,.55);
  backdrop-filter: blur(6px);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  font-size: .875rem;
}
.jfc-panel-share-btn:hover { background: rgba(110,16,255,.75); }
/* Override original position:absolute — now sits inside .jfc-panel-hero-actions flex row */
.jfc-panel-hero-actions .jfc-panel-close-hero {
  position: static;
  top: auto;
  right: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(11,13,16,.55);
  backdrop-filter: blur(6px);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  font-size: .875rem;
}
.jfc-panel-hero-actions .jfc-panel-close-hero:hover { background: rgba(11,13,16,.8); }

/* ================================================================
   PORTFOLIO DASHBOARD — v2 (2026-05 UX overhaul)
   ================================================================ */

/* ── Portfolio header ──────────────────────────────────────────── */
.jfc-portfolio-hdr {
  padding: 24px 0 8px;
}
.jfc-portfolio-hdr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.jfc-portfolio-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.jfc-pstat {
  background: var(--jfc-bg2);
  border: 1.5px solid var(--jfc-hair);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
}
.jfc-pstat--positive {
  border-color: var(--jfc-deal);
  background: var(--jfc-deal-bg);
}
.jfc-pstat-num {
  display: block;
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--jfc-ink);
  letter-spacing: -.03em;
}
.jfc-pstat--positive .jfc-pstat-num { color: var(--jfc-deal); }
.jfc-pstat-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--jfc-subtle);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 3px;
}

/* ── Best opportunity card ─────────────────────────────────────── */
.jfc-portfolio-best-opp {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--jfc-accent-dim);
  border: 1.5px solid rgba(82,0,255,.2);
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s;
  margin-bottom: 12px;
}
.jfc-portfolio-best-opp:hover { background: rgba(82,0,255,.16); border-color: rgba(82,0,255,.4); }
.jfc-portfolio-best-opp img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--jfc-bg2);
  flex-shrink: 0;
}
.jfc-pbo-text { flex: 1; min-width: 0; }
.jfc-pbo-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--jfc-accent);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 2px;
}
.jfc-pbo-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--jfc-ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jfc-portfolio-best-opp .jfc-card-badge { flex-shrink: 0; }
.jfc-portfolio-best-opp .fa-chevron-right { color: var(--jfc-subtle); font-size: .8rem; }

/* ── Portfolio list ────────────────────────────────────────────── */
.jfc-portfolio-list {
  border: 1.5px solid var(--jfc-hair);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 8px;
}
.jfc-plist-head {
  display: grid;
  grid-template-columns: 1fr 100px 120px 120px;
  gap: 8px;
  padding: 10px 16px;
  background: var(--jfc-bg2);
  border-bottom: 1.5px solid var(--jfc-hair);
  font-size: .72rem;
  font-weight: 700;
  color: var(--jfc-subtle);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.jfc-plist-hide-sm { display: none; }
@media (min-width: 640px) { .jfc-plist-hide-sm { display: block; } }
@media (min-width: 640px) {
  .jfc-plist-head { grid-template-columns: 1fr 100px 120px 150px; }
}

/* ── Portfolio row ─────────────────────────────────────────────── */
.jfc-prow {
  display: grid;
  grid-template-columns: 1fr 100px 150px;
  gap: 8px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--jfc-hair);
  transition: background .12s;
}
.jfc-prow:last-child { border-bottom: none; }
.jfc-prow:hover { background: var(--jfc-bg2); }
@media (min-width: 640px) {
  .jfc-prow { grid-template-columns: 1fr 100px 120px 150px; }
}
.jfc-prow-racket {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.jfc-prow-img-wrap {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--jfc-racket-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--jfc-hair);
  cursor: pointer;
  overflow: hidden;
}
.jfc-prow-img { width: 100%; height: 100%; object-fit: contain; }
.jfc-prow-img--ph { background: var(--jfc-bg2); }
.jfc-prow-info { min-width: 0; }
.jfc-prow-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--jfc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}
.jfc-prow-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.jfc-prow-link:hover { color: var(--jfc-accent); }
.jfc-prow-meta {
  font-size: .73rem;
  color: var(--jfc-subtle);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jfc-prow-status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.jfc-prow-pricing {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.jfc-prow-price {
  font-size: 1rem;
  font-weight: 800;
  color: var(--jfc-ink);
  font-family: 'Syne', 'Inter', sans-serif;
}
.jfc-prow-delta {
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.jfc-prow-delta--down { color: var(--jfc-deal); }
.jfc-prow-delta--up   { color: var(--jfc-hot); }
.jfc-prow-delta--flat { color: var(--jfc-subtle); }
.jfc-prow-spark { display: flex; align-items: center; }
.jfc-prow-no-data { font-size: .72rem; color: var(--jfc-subtle); }
.jfc-prow-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ── Freshness badges ──────────────────────────────────────────── */
.jfc-card-signals {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding: 0 12px 4px;
}
.jfc-fresh-badge {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: .02em;
}
.jfc-fresh--new     { background: rgba(0,180,116,.15); color: #00a066; }
.jfc-fresh--recent  { background: rgba(0,180,116,.10); color: #009060; }
.jfc-fresh--week    { background: var(--jfc-bg2);       color: var(--jfc-subtle); }
.jfc-fresh--stale   { background: rgba(255,170,0,.12); color: #cc8800; }

/* ── 16-week low badge ─────────────────────────────────────────── */
.jfc-badge-low {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: linear-gradient(128deg, #3cffd0 0%, #5200ff 100%);
  color: #fff;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ── Compare + track button wrapper ────────────────────────────── */
.jfc-card-btns {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Compare button on cards ───────────────────────────────────── */
.jfc-card-compare {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1.5px solid var(--jfc-hair);
  background: var(--jfc-bg);
  color: var(--jfc-subtle);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
  flex-shrink: 0;
}
.jfc-card-compare:hover,
.jfc-card-compare.is-active {
  border-color: var(--jfc-accent);
  color: var(--jfc-accent);
  background: var(--jfc-accent-dim);
}
@media (max-width: 479px) {
  .jfc-card-compare { width: 52px; height: 52px; font-size: 1.1rem; }
}
.jfc-card.is-compared {
  box-shadow: 0 0 0 2px var(--jfc-accent);
}

/* ── Compare bar (floating bottom) ────────────────────────────── */
.jfc-compare-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--jfc-ink);
  color: #fff;
  padding: 10px 16px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.3);
  animation: jfc-slide-up .22s ease;
}
@keyframes jfc-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.jfc-cbar-inner {
  max-width: var(--jfc-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.jfc-cbar-items {
  display: flex;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}
.jfc-cbar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 6px 10px 6px 6px;
}
.jfc-cbar-img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: rgba(255,255,255,.15); }
.jfc-cbar-name { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.jfc-cbar-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  font-size: .8rem;
  padding: 0;
  line-height: 1;
}
.jfc-cbar-remove:hover { color: #fff; }
.jfc-cbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.jfc-cbar-hint { font-size: .8rem; color: rgba(255,255,255,.6); }
.jfc-compare-bar .jfc-btn--text { color: rgba(255,255,255,.7); }
.jfc-compare-bar .jfc-btn--text:hover { color: #fff; }

/* ── Comparison panel (wider on desktop) ───────────────────────── */
.jfc-panel--compare {
  width: min(98vw, 900px) !important;
}
.jfc-compare-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
  border-bottom: 1.5px solid var(--jfc-hair);
  position: sticky;
  top: 0;
  background: var(--jfc-bg);
  z-index: 2;
}
.jfc-compare-title {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--jfc-ink);
  margin: 0;
}
.jfc-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  overflow-x: auto;
}
.jfc-compare-col {
  padding: 16px;
  border-right: 1px solid var(--jfc-hair);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jfc-compare-col:last-child { border-right: none; }
.jfc-compare-hero {
  position: relative;
  background: var(--jfc-racket-surface);
  border-radius: 12px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.jfc-compare-hero img { width: 80%; height: 80%; object-fit: contain; }
.jfc-compare-badge,
.jfc-compare-badge-low {
  position: absolute;
  top: 8px;
  left: 8px;
}
.jfc-compare-badge-low { top: auto; bottom: 8px; }
.jfc-compare-logo { height: 22px; object-fit: contain; }
.jfc-compare-brand-row { display: flex; align-items: center; }
.jfc-compare-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--jfc-ink);
  line-height: 1.3;
}
.jfc-compare-price {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--jfc-ink);
}
.jfc-compare-score {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--jfc-muted);
  font-weight: 600;
}
.jfc-compare-attrs { font-size: .78rem; color: var(--jfc-subtle); }
.jfc-compare-history { display: flex; flex-direction: column; gap: 4px; }
.jfc-compare-range { font-size: .75rem; color: var(--jfc-subtle); font-weight: 600; }
.jfc-compare-prices { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.jfc-ptr-row-mini {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
  font-size: .75rem;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--jfc-bg2);
}
.jfc-ptr-row-mini.is-best { background: var(--jfc-deal-bg); }
.jfc-ptr-row-mini.is-oos  { opacity: .55; }
.jfc-ptr-row-mini span:first-child { font-weight: 600; color: var(--jfc-muted); }
.jfc-ptr-row-mini span:nth-child(2) { font-weight: 800; color: var(--jfc-ink); text-align: right; }
.jfc-compare-review { margin-top: auto; align-self: flex-start; }

/* ── Alert history timeline ────────────────────────────────────── */
.jfc-alog-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1.5px solid var(--jfc-hair);
}
.jfc-alog-list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.jfc-alog-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--jfc-bg2);
  transition: background .12s;
}
.jfc-alog-row:hover { background: var(--jfc-accent-dim); }
.jfc-alog-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--jfc-deal-bg);
  color: var(--jfc-deal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
}
.jfc-alog-body { flex: 1; min-width: 0; }
.jfc-alog-text {
  font-size: .84rem;
  color: var(--jfc-ink);
  margin: 0 0 2px;
  line-height: 1.4;
}
.jfc-alog-save {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--jfc-deal);
  background: var(--jfc-deal-bg);
  padding: 1px 6px;
  border-radius: 99px;
  margin-left: 4px;
}
.jfc-alog-date { font-size: .72rem; color: var(--jfc-subtle); margin: 0; }
.jfc-alog-bought-btn {
  font-size: .75rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1.5px solid var(--jfc-accent);
  color: var(--jfc-accent);
  background: var(--jfc-accent-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.jfc-alog-bought-btn:hover { background: var(--jfc-accent); color: #fff; }
.jfc-alog-bought-btn:disabled { opacity: .5; cursor: default; }
.jfc-alog-purchased {
  font-size: .75rem;
  font-weight: 700;
  color: var(--jfc-deal);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ================================================================
   FIXES: mobile, card hover, auth modal z-index (2026-05)
   ================================================================ */

/* ── Card hover: update button states for new sizes ───────────── */
.jfc-card:hover .jfc-card-track {
  background: rgba(255,255,255,.95);
  color: var(--jfc-accent);
  box-shadow: none;
}
.jfc-card:hover .jfc-card-compare {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
.jfc-card:hover .jfc-card-compare.is-active {
  background: rgba(255,255,255,.3);
  border-color: #fff;
}

/* ── Auth modal: explicit stacking within modal context ───────── */
.jfc-auth-backdrop { z-index: 0; }
.jfc-auth-dialog   { z-index: 1; }

/* ── Portfolio list: fix mobile grid columns ──────────────────── */
/* Mobile (< 640px): use 3 cols matching the row, drop 4th header track */
.jfc-plist-head {
  grid-template-columns: 1fr 80px 100px;
}
.jfc-prow {
  grid-template-columns: 1fr 80px 100px;
}
@media (min-width: 640px) {
  .jfc-plist-head { grid-template-columns: 1fr 100px 120px 150px; }
  .jfc-prow       { grid-template-columns: 1fr 100px 120px 150px; }
}

/* Very small phones (< 480px): hide row image, collapse to 2 cols */
@media (max-width: 479px) {
  .jfc-plist-head { grid-template-columns: 1fr 90px; }
  .jfc-prow       { grid-template-columns: 1fr 90px; }
  .jfc-prow-img-wrap { display: none; }
  .jfc-prow-spark { display: none; }
  /* Stack portfolio stats to 2 columns */
  .jfc-portfolio-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Compare bar: compact on mobile ──────────────────────────── */
@media (max-width: 640px) {
  .jfc-cbar-inner { gap: 8px; flex-wrap: nowrap; }
  .jfc-cbar-items { gap: 6px; flex-wrap: nowrap; overflow-x: auto; flex: 1; min-width: 0; }
  .jfc-cbar-item  { padding: 5px 8px 5px 5px; flex-shrink: 0; }
  .jfc-cbar-img   { width: 26px; height: 26px; }
  .jfc-cbar-name  { font-size: .72rem; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
  .jfc-cbar-hint  { display: none; }
  .jfc-cbar-actions { flex-shrink: 0; }
  .jfc-compare-bar { padding: 8px 12px; }
}

/* ================================================================
   JFC shell correction: match main PRR hamburger nav
   ================================================================ */

body.jfc-page .jfc-shell-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  box-shadow: none;
  font-family: var(--font-body);
}

body.jfc-page .jfc-shell-inner {
  min-height: 58px;
}

body.jfc-page .jfc-shell-brand {
  width: 118px;
  min-height: 44px;
}

body.jfc-page .jfc-shell-logo {
  width: 118px;
  height: auto;
}

body.jfc-page .jfc-shell-tracker-mark {
  margin-top: -5px;
  margin-left: 2px;
  padding: 1px 7px 2px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}

body.jfc-page .jfc-shell-links a {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 500;
  color: currentColor;
  opacity: .92;
  background: transparent;
}

body.jfc-page .jfc-shell-links a:hover {
  opacity: 1;
  background: transparent;
  color: currentColor;
}

body.jfc-page .jfc-shell-menu {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: currentColor;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1;
}

body.jfc-page .jfc-shell-menu:hover {
  background: rgba(127,127,127,.10);
  color: currentColor;
}

body.jfc-page .jfc-shell-drawer {
  z-index: 100000;
}

body.jfc-page .jfc-shell-drawer-backdrop {
  background: rgba(0,0,0,.55);
  backdrop-filter: saturate(120%) blur(6px);
}

body.jfc-page .jfc-shell-drawer-panel {
  inset: 0 0 0 auto;
  width: min(520px, 44vw);
  min-width: min(92vw, 420px);
  background: var(--accent);
  color: #fff;
  box-shadow: none;
  padding: 18px 18px 30px;
  overflow: auto;
}

body.jfc-page .jfc-shell-drawer-top {
  margin-bottom: 18px;
}

body.jfc-page .jfc-shell-drawer-logo {
  width: auto;
  max-width: 120px;
  max-height: 34px;
}

body.jfc-page .jfc-shell-drawer-tracker {
  margin-top: 2px;
  margin-left: 1px;
  padding: 1px 7px 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}

body.jfc-page .jfc-shell-close {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 34px;
  line-height: 1;
}

body.jfc-page .jfc-shell-close:hover {
  background: transparent;
  color: #fff;
}

body.jfc-page .jfc-shell-search--drawer {
  margin: 16px 0 24px;
}

body.jfc-page .jfc-shell-search--drawer .jfc-shell-search-input {
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: #fff;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
}

body.jfc-page .jfc-shell-search--drawer .jfc-shell-search-input:focus {
  border-color: #fff;
  background: rgba(255,255,255,.10);
  box-shadow: none;
}

body.jfc-page .jfc-shell-search--drawer .jfc-shell-search-button {
  height: 44px;
  width: 44px;
  right: 0;
  color: #fff;
}

body.jfc-page .jfc-shell-search--drawer .jfc-shell-search-results {
  background: rgba(255,255,255,.05);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  padding: 8px;
}

body.jfc-page .jfc-shell-drawer-links {
  display: block;
  border-top: 1px solid rgba(255,255,255,.25);
  padding-top: 14px;
}

body.jfc-page .jfc-shell-drawer-links a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  text-decoration: none;
}

body.jfc-page .jfc-shell-drawer-links a::after {
  content: "";
}

body.jfc-page .jfc-shell-drawer-links a:hover {
  background: transparent;
  color: #fff;
}

@media (max-width: 900px) {
  body.jfc-page .jfc-shell-drawer-panel {
    width: min(92vw, 420px);
    min-width: 0;
  }
}

@media (max-width: 760px) {
  body.jfc-page .jfc-shell-brand {
    width: 104px;
    min-height: 40px;
  }

  body.jfc-page .jfc-shell-logo {
    width: 104px;
  }

  body.jfc-page .jfc-shell-tracker-mark {
    margin-top: -4px;
    font-size: 7px;
    padding: 1px 6px 2px;
  }
}

/* True final mobile nav alignment: keep the menu button on the screen edge. */
@media (max-width: 760px) {
  body.jfc-page .jfc-shell-header .jfc-wrap {
    width: 100%;
    max-width: none;
  }

  body.jfc-page .jfc-shell-inner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding-right: 58px;
  }

  body.jfc-page .jfc-shell-links {
    display: none !important;
  }

  body.jfc-page .jfc-shell-actions {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 5;
    display: flex !important;
    margin-left: 0;
    justify-content: flex-end;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.jfc-page .jfc-shell-menu {
    display: inline-flex !important;
    color: var(--jfc-ink, #0b0d10) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.jfc-page .jfc-shell-signin,
  body.jfc-page .jfc-shell-join,
  body.jfc-page .jfc-shell-account {
    display: none !important;
  }
}

/* Final mobile nav alignment: keep the hamburger pinned to the right edge. */
@media (max-width: 760px) {
  body.jfc-page .jfc-shell-header .jfc-wrap {
    width: 100%;
    max-width: none;
  }

  body.jfc-page .jfc-shell-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  body.jfc-page .jfc-shell-links {
    display: none !important;
  }

  body.jfc-page .jfc-shell-actions {
    margin-left: auto;
    justify-content: flex-end;
  }
}

/* Redesign Lite final overrides: keep the new app-style tracker above legacy rules. */
body.jfc-page .jfc-portfolio-hero .jfc-portfolio-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto 16px;
}

body.jfc-page .jfc-portfolio-balance,
body.jfc-page .jfc-how-hero h2,
body.jfc-page .jfc-dash-empty--wise h2 {
  font-family: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  letter-spacing: 0;
}

body.jfc-page .jfc-portfolio-actions button,
body.jfc-page .jfc-portfolio-tabs button,
body.jfc-page .jfc-goal-cta {
  font-family: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  body.jfc-page .jfc-portfolio-hero .jfc-portfolio-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final JFC polish: collapsed tracker + mobile filter ergonomics. */
@media (min-width: 768px) {
  .jfc-page .jfc-content {
    padding-bottom: 88px;
  }

  .jfc-tray.panel-dismissed .jfc-tray-tab {
    width: 76px;
    height: 30px;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(14,10,22,.34);
    color: rgba(255,255,255,.92);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 -6px 22px rgba(11,13,16,.18);
  }

  .jfc-tray.panel-dismissed .jfc-tray-tab::after {
    content: "Tracker";
    font: 800 10px/1 var(--font-body);
    letter-spacing: .02em;
  }

  .jfc-tray.panel-dismissed .jfc-tray-tab:hover {
    height: 34px;
    background: rgba(14,10,22,.48);
  }
}

@media (max-width: 767px) {
  .jfc-toolbar-main {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .jfc-toolbar-search,
  .jfc-toolbar-quicks {
    grid-column: 1 / -1;
  }

  .jfc-toolbar-quicks {
    gap: 8px;
    padding-bottom: 1px;
  }

  .jfc-filter-toggle,
  .jfc-sort-select {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 40px;
  }

  .jfc-filter-toggle {
    justify-content: center;
  }

  .jfc-tray-fab {
    left: 50%;
    right: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: auto;
    min-width: 96px;
    height: 40px;
    gap: 7px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(11,13,16,.08);
    background: rgba(255,255,255,.76);
    color: var(--jfc-ink);
    box-shadow: 0 8px 24px rgba(11,13,16,.14);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    font-size: 14px;
  }

  .jfc-tray-fab::after {
    content: "Tracker";
    font: 800 12px/1 var(--font-body);
  }

  .jfc-tray-fab:hover {
    transform: translateX(-50%) translateY(-1px);
    box-shadow: 0 10px 26px rgba(11,13,16,.18);
  }

  .jfc-tray-fab-count {
    top: -7px;
    right: -5px;
    border-color: rgba(255,255,255,.84);
  }

  .jfc-tray-panel {
    background: rgba(255,255,255,.82);
  }
}

/* Final responsive pass after browser screenshots. */
body.jfc-page {
  overflow-x: hidden;
  font-family: var(--font-body);
}

body.jfc-page .jfc-app,
body.jfc-page .jfc-landing,
body.jfc-page .jfc-content,
body.jfc-page .jfc-filterbar,
body.jfc-page .jfc-seo-hero {
  max-width: 100%;
  overflow-x: hidden;
}

body.jfc-page .jfc-wrap {
  box-sizing: border-box;
  max-width: min(var(--jfc-max), 100%);
}

body.jfc-page .jfc-shell-brand {
  width: 112px;
  min-height: 42px;
}

body.jfc-page .jfc-shell-logo {
  width: auto;
  max-width: 112px;
  max-height: 36px;
  object-fit: contain;
}

body.jfc-page .jfc-shell-tracker-mark {
  margin-top: -3px;
}

body.jfc-page .jfc-seo-title {
  max-width: 100%;
  font-family: var(--font-heading);
  overflow-wrap: normal;
}

body.jfc-page .jfc-seo-sub {
  max-width: 760px;
}

@media (max-width: 900px) {
  body.jfc-page .jfc-shell-inner {
    min-height: 56px;
  }

  body.jfc-page .jfc-shell-brand {
    width: 100px;
    min-height: 40px;
  }

  body.jfc-page .jfc-shell-logo {
    max-width: 100px;
    max-height: 34px;
  }

  body.jfc-page .jfc-toolbar-main {
    grid-template-columns: minmax(180px, 1fr) auto auto auto;
  }
}

@media (max-width: 640px) {
  body.jfc-page .jfc-shell-inner {
    min-height: 50px;
    gap: 8px;
  }

  body.jfc-page .jfc-shell-brand {
    width: 92px;
    min-height: 38px;
  }

  body.jfc-page .jfc-shell-logo {
    max-width: 92px;
    max-height: 30px;
  }

  body.jfc-page .jfc-shell-tracker-mark {
    margin-top: -2px;
    font-size: 7px;
    padding: 1px 6px 2px;
  }

  body.jfc-page .jfc-shell-menu {
    width: 36px;
    height: 36px;
    font-size: 21px;
  }

  body.jfc-page .jfc-seo-hero {
    padding: 24px 20px 16px;
  }

  body.jfc-page .jfc-seo-kicker {
    font-size: 10px;
    line-height: 1.35;
  }

  body.jfc-page .jfc-seo-title {
    font-size: clamp(29px, 8vw, 34px);
    line-height: 1.05;
  }

  body.jfc-page .jfc-seo-sub {
    font-size: 15px;
  }

  body.jfc-page .jfc-subheader-inner {
    align-items: flex-start;
  }

  body.jfc-page .jfc-subheader-text {
    max-width: 100%;
    line-height: 1.45;
  }

  body.jfc-page .jfc-filterbar {
    top: 50px;
  }

  body.jfc-page .jfc-filterbar-inner {
    padding: 12px 20px;
  }

  body.jfc-page .jfc-toolbar-main {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body.jfc-page .jfc-toolbar-search {
    flex: 1 0 100%;
    height: 40px;
  }

  body.jfc-page .jfc-toolbar-quicks {
    flex: 1 0 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  body.jfc-page .jfc-chip {
    flex: 0 0 auto;
  }

  body.jfc-page .jfc-filter-toggle,
  body.jfc-page .jfc-sort-select {
    height: 40px;
  }

  body.jfc-page .jfc-sort-select {
    max-width: none;
  }

  body.jfc-page .jfc-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.jfc-page .jfc-card {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body.jfc-page .jfc-tray-panel {
    left: 0;
    right: 0;
    max-width: 100vw;
  }

  body.jfc-page .jfc-tray-guest {
    padding: 26px 20px calc(26px + env(safe-area-inset-bottom));
  }

  body.jfc-page .jfc-tray-guest-p {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: normal;
  }
}

/* ================================================================
   JFC shell refresh: product nav, cleaner filters, legible type
   ================================================================ */

body.jfc-page,
body.jfc-page .jfc-app,
body.jfc-page .jfc-landing {
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  letter-spacing: 0;
}

body.jfc-page .jfc-brand-name,
body.jfc-page .jfc-seo-title,
body.jfc-page .jfc-card-model,
body.jfc-page .jfc-price-whole,
body.jfc-page .jfc-price-dec,
body.jfc-page .jfc-lp-headline,
body.jfc-page .jfc-lp-section-title,
body.jfc-page .jfc-coupons-headline,
body.jfc-page .jfc-upgrade-smart-title,
body.jfc-page .jfc-compare-title,
body.jfc-page .jfc-compare-price,
body.jfc-page .jfc-panel-title,
body.jfc-page .jfc-alert-title,
body.jfc-page .jfc-dashboard-title {
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  letter-spacing: 0;
}

body.jfc-page .jfc-brand-name {
  font-size: 15px;
  font-weight: 900;
}

body.jfc-page .jfc-seo-title,
body.jfc-page .jfc-lp-headline,
body.jfc-page .jfc-coupons-headline,
body.jfc-page .jfc-upgrade-smart-title {
  font-weight: 900;
  line-height: .98;
}

.jfc-shell-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--jfc-bg);
  border-bottom: 1px solid var(--jfc-hair);
  box-shadow: 0 1px 0 rgba(11,13,16,.04);
}

.jfc-shell-inner {
  min-height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

.jfc-shell-brand {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 160px;
  min-height: 48px;
  text-decoration: none;
}

.jfc-shell-logo {
  display: block;
  width: 160px;
  height: auto;
}

.jfc-shell-logo--dark {
  display: none;
}

html[data-theme="dark"] .jfc-shell-logo--dark,
body.dark .jfc-shell-logo--dark {
  display: block;
}

html[data-theme="dark"] .jfc-shell-logo--light,
body.dark .jfc-shell-logo--light {
  display: none;
}

.jfc-shell-tracker-mark,
.jfc-shell-drawer-tracker {
  margin-top: -5px;
  margin-left: 3px;
  padding: 2px 8px 2px 9px;
  border-radius: 999px;
  background: var(--jfc-grd);
  color: #fff;
  font: 900 10px/1 Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(82,0,255,.22);
}

.jfc-shell-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.jfc-shell-links a,
.jfc-shell-drawer-links a {
  color: var(--jfc-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
}

.jfc-shell-links a {
  padding: 10px 12px;
  border-radius: 999px;
}

.jfc-shell-links a:hover,
.jfc-shell-drawer-links a:hover {
  color: var(--jfc-ink);
  background: var(--jfc-bg2);
}

.jfc-shell-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.jfc-shell-search-input {
  width: 100%;
  height: 40px;
  border: 1.5px solid var(--jfc-hair);
  border-radius: 999px;
  background: var(--jfc-bg2);
  color: var(--jfc-ink);
  padding: 0 42px 0 16px;
  font: 650 14px/1 Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  outline: none;
}

.jfc-shell-search-input:focus {
  border-color: var(--jfc-accent);
  background: var(--jfc-bg);
  box-shadow: 0 0 0 4px var(--jfc-accent-dim);
}

.jfc-shell-search-button,
.jfc-shell-menu,
.jfc-shell-close,
.jfc-filter-drawer-close {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--jfc-muted);
  cursor: pointer;
}

.jfc-shell-search-button {
  position: absolute;
  right: 2px;
}

.jfc-shell-menu:hover,
.jfc-shell-close:hover,
.jfc-shell-search-button:hover,
.jfc-filter-drawer-close:hover {
  background: var(--jfc-bg2);
  color: var(--jfc-ink);
}

.jfc-shell-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jfc-shell-menu {
  display: inline-flex;
  border: 1px solid rgba(11,13,16,.10);
  background: var(--jfc-bg);
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(11,13,16,.06);
}

.jfc-shell-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 85;
  border: 1px solid var(--jfc-hair);
  border-radius: 16px;
  background: var(--jfc-bg);
  box-shadow: 0 18px 48px rgba(11,13,16,.14);
  overflow: hidden;
}

.jfc-shell-result {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  color: var(--jfc-ink);
}

.jfc-shell-result:hover {
  background: var(--jfc-bg2);
}

.jfc-shell-result-img {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jfc-racket-surface);
}

.jfc-shell-result-img img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}

.jfc-shell-result-name,
.jfc-shell-result-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jfc-shell-result-name {
  font-size: 13px;
  font-weight: 850;
}

.jfc-shell-result-meta,
.jfc-shell-result-empty {
  font-size: 12px;
  color: var(--jfc-muted);
}

.jfc-shell-result-empty {
  padding: 14px;
}

.jfc-shell-drawer[hidden] {
  display: none;
}

.jfc-shell-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.jfc-shell-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,13,16,.58);
  backdrop-filter: blur(3px);
}

.jfc-shell-drawer-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(420px, 92vw);
  background:
    radial-gradient(circle at 18% 0%, rgba(60,255,208,.20), transparent 28%),
    linear-gradient(180deg, #1812f3 0%, #0c1020 42%, #07090f 100%);
  color: #fff;
  box-shadow: -28px 0 80px rgba(0,0,0,.34);
  padding: 22px;
  overflow: auto;
}

.jfc-shell-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.jfc-shell-drawer-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
}

.jfc-shell-drawer-logo {
  width: 128px;
  height: auto;
  display: block;
}

.jfc-shell-drawer-tracker {
  margin-left: 2px;
  background: rgba(255,255,255,.18);
  box-shadow: none;
  color: #fff;
}

.jfc-shell-search--drawer {
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.jfc-shell-search--drawer .jfc-shell-search-results {
  position: static;
  width: 100%;
  top: auto;
  left: auto;
  right: auto;
  margin-top: 8px;
  z-index: auto;
}

.jfc-shell-search--drawer .jfc-shell-search-input {
  height: 48px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.jfc-shell-search--drawer .jfc-shell-search-input::placeholder {
  color: rgba(255,255,255,.66);
}

.jfc-shell-search--drawer .jfc-shell-search-input:focus {
  border-color: rgba(60,255,208,.78);
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 4px rgba(60,255,208,.14);
}

.jfc-shell-search--drawer .jfc-shell-search-button {
  color: rgba(255,255,255,.78);
}

.jfc-shell-search--drawer .jfc-shell-search-results {
  background: #111626;
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
}

.jfc-shell-search--drawer .jfc-shell-result {
  color: #fff;
}

.jfc-shell-search--drawer .jfc-shell-result:hover {
  background: rgba(255,255,255,.10);
}

.jfc-shell-search--drawer .jfc-shell-result-meta,
.jfc-shell-search--drawer .jfc-shell-result-empty {
  color: rgba(255,255,255,.68);
}

.jfc-shell-drawer-links {
  display: grid;
  gap: 8px;
}

.jfc-shell-drawer-links a {
  position: relative;
  padding: 15px 16px;
  border-radius: 14px;
  font-size: 16px;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
}

.jfc-shell-drawer-links a::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.48);
  font-size: 20px;
}

.jfc-shell-drawer-links a:hover {
  color: #fff;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.20);
}

.jfc-shell-close {
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
}

.jfc-shell-close:hover {
  color: #fff;
  background: rgba(255,255,255,.20);
}

.jfc-filterbar {
  top: 64px;
  overflow: visible;
}

.jfc-filterbar-inner {
  display: block;
  min-width: 0;
  padding: 12px 20px;
}

@media (min-width: 768px) {
  .jfc-filterbar-inner { padding: 12px 32px; }
}

@media (min-width: 1200px) {
  .jfc-filterbar-inner { padding: 12px 48px; }
}

.jfc-toolbar-main {
  max-width: var(--jfc-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto auto;
  gap: 10px;
  align-items: center;
}

.jfc-toolbar-search {
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1.5px solid var(--jfc-hair);
  border-radius: 999px;
  background: var(--jfc-bg2);
  color: var(--jfc-muted);
}

.jfc-toolbar-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--jfc-ink);
  font: 650 14px/1 Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

.jfc-toolbar-quicks {
  display: flex;
  align-items: center;
  gap: 6px;
}

.jfc-filter-toggle {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1.5px solid var(--jfc-hair);
  border-radius: 999px;
  background: var(--jfc-bg);
  color: var(--jfc-ink);
  font: 800 13px/1 Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  cursor: pointer;
}

.jfc-filter-toggle span {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--jfc-accent);
  color: #fff;
  font-size: 11px;
}

.jfc-sort-select {
  height: 40px;
  padding: 0 14px;
}

.jfc-result-count {
  color: var(--jfc-muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.jfc-active-filters {
  max-width: var(--jfc-max);
  margin: 10px auto 0;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.jfc-active-filters[hidden] {
  display: none;
}

.jfc-active-filter,
.jfc-active-clear {
  flex: 0 0 auto;
  border: 1px solid var(--jfc-hair);
  border-radius: 999px;
  background: var(--jfc-bg);
  color: var(--jfc-muted);
  padding: 6px 10px;
  font: 750 12px/1 Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  cursor: pointer;
}

.jfc-active-clear {
  color: var(--jfc-accent);
}

.jfc-filter-drawer[hidden] {
  display: none;
}

.jfc-filter-drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
}

.jfc-filter-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,13,16,.46);
}

.jfc-filter-drawer-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(440px, 94vw);
  background: var(--jfc-bg);
  box-shadow: var(--jfc-shadow-panel);
  overflow: auto;
}

.jfc-filter-drawer-content {
  display: block;
  padding: 20px 20px 92px;
}

.jfc-secondary-count {
  margin: 4px 0 0;
  color: var(--jfc-muted);
  font-size: 13px;
  font-weight: 650;
}

.jfc-filter-drawer-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 22px -20px -92px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--jfc-hair);
  background: var(--jfc-bg);
}

body.jfc-filter-open,
body.jfc-shell-menu-open {
  overflow: hidden;
}

@media (max-width: 1120px) {
  .jfc-shell-inner {
    grid-template-columns: auto 1fr auto;
  }

  .jfc-shell-links {
    display: none;
  }
}

@media (max-width: 760px) {
  .jfc-shell-inner {
    min-height: 58px;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }

  .jfc-shell-brand .jfc-brand-name {
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .jfc-shell-brand {
    width: 124px;
    min-height: 44px;
  }

  .jfc-shell-logo {
    width: 124px;
  }

  .jfc-shell-tracker-mark {
    margin-top: -4px;
    font-size: 8px;
    letter-spacing: .14em;
    padding: 2px 7px;
  }

  .jfc-shell-signin,
  .jfc-shell-join,
  .jfc-shell-account {
    display: none;
  }

  .jfc-filterbar {
    top: 58px;
  }

  .jfc-toolbar-main {
    grid-template-columns: 1fr auto;
  }

  .jfc-toolbar-search {
    grid-column: 1 / -1;
  }

  .jfc-toolbar-quicks {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .jfc-result-count {
    display: none;
  }

  .jfc-sort-select {
    max-width: 132px;
  }

  .jfc-filter-drawer-panel {
    inset: auto 0 0;
    width: 100%;
    max-height: 88dvh;
    border-radius: 20px 20px 0 0;
  }
}

/* Final JFC shell override: stay aligned with the main PRR hamburger nav. */
body.jfc-page .jfc-shell-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
  box-shadow: none;
  font-family: var(--font-body);
}

body.jfc-page .jfc-shell-inner { min-height: 58px; }

body.jfc-page .jfc-shell-brand {
  width: 118px;
  min-height: 44px;
}

body.jfc-page .jfc-shell-logo {
  width: 118px;
  height: auto;
}

body.jfc-page .jfc-shell-tracker-mark {
  margin-top: -5px;
  margin-left: 2px;
  padding: 1px 7px 2px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}

body.jfc-page .jfc-shell-links a {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 500;
  color: currentColor;
  opacity: .92;
  background: transparent;
}

body.jfc-page .jfc-shell-links a:hover {
  opacity: 1;
  background: transparent;
  color: currentColor;
}

body.jfc-page .jfc-shell-menu {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: currentColor;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1;
}

body.jfc-page .jfc-shell-menu:hover {
  background: rgba(127,127,127,.10);
  color: currentColor;
}

body.jfc-page .jfc-shell-drawer { z-index: 100000; }

body.jfc-page .jfc-shell-drawer-backdrop {
  background: rgba(0,0,0,.55);
  backdrop-filter: saturate(120%) blur(6px);
}

body.jfc-page .jfc-shell-drawer-panel {
  inset: 0 0 0 auto;
  width: min(520px, 44vw);
  min-width: min(92vw, 420px);
  background: var(--accent);
  color: #fff;
  box-shadow: none;
  padding: 18px 18px 30px;
  overflow: auto;
}

body.jfc-page .jfc-shell-drawer-top { margin-bottom: 18px; }

body.jfc-page .jfc-shell-drawer-logo {
  width: auto;
  max-width: 120px;
  max-height: 34px;
}

body.jfc-page .jfc-shell-drawer-tracker {
  margin-top: 2px;
  margin-left: 1px;
  padding: 1px 7px 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}

body.jfc-page .jfc-shell-close {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 34px;
  line-height: 1;
}

body.jfc-page .jfc-shell-close:hover {
  background: transparent;
  color: #fff;
}

body.jfc-page .jfc-shell-search--drawer { margin: 16px 0 24px; }

body.jfc-page .jfc-shell-search--drawer .jfc-shell-search-input {
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: #fff;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
}

body.jfc-page .jfc-shell-search--drawer .jfc-shell-search-input:focus {
  border-color: #fff;
  background: rgba(255,255,255,.10);
  box-shadow: none;
}

body.jfc-page .jfc-shell-search--drawer .jfc-shell-search-button {
  height: 44px;
  width: 44px;
  right: 0;
  color: #fff;
}

body.jfc-page .jfc-shell-search--drawer .jfc-shell-search-results {
  background: rgba(255,255,255,.05);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  padding: 8px;
}

body.jfc-page .jfc-shell-drawer-links {
  display: block;
  border-top: 1px solid rgba(255,255,255,.25);
  padding-top: 14px;
}

body.jfc-page .jfc-shell-drawer-links a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  text-decoration: none;
}

body.jfc-page .jfc-shell-drawer-links button.jfc-shell-drawer-auth-link,
body.jfc-page .jfc-shell-drawer-links a.jfc-shell-drawer-auth-link {
  width: 100%;
  justify-content: center;
  margin: 0 0 10px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

body.jfc-page .jfc-shell-drawer-links .jfc-shell-drawer-auth-link--primary {
  background: #fff;
  color: var(--jfc-accent);
}

body.jfc-page .jfc-shell-drawer-links a::after { content: ""; }

body.jfc-page .jfc-shell-drawer-links a:hover {
  background: transparent;
  color: #fff;
}

@media (max-width: 900px) {
  body.jfc-page .jfc-shell-drawer-panel {
    width: min(92vw, 420px);
    min-width: 0;
  }
}

@media (max-width: 760px) {
  body.jfc-page .jfc-shell-brand {
    width: 104px;
    min-height: 40px;
  }

  body.jfc-page .jfc-shell-logo { width: 104px; }

  body.jfc-page .jfc-shell-tracker-mark {
    margin-top: -4px;
    font-size: 7px;
    padding: 1px 6px 2px;
  }
}
/* True final mobile nav alignment: keep the menu button on the screen edge. */
@media (max-width: 760px) {
  body.jfc-page .jfc-shell-header .jfc-wrap {
    width: 100%;
    max-width: none;
  }

  body.jfc-page .jfc-shell-inner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding-right: 58px;
  }

  body.jfc-page .jfc-shell-links {
    display: none !important;
  }

  body.jfc-page .jfc-shell-actions {
    position: absolute;
    top: 10px;
    right: 20px;
    margin-left: 0;
    justify-content: flex-end;
  }

  body.jfc-page .jfc-shell-menu {
    display: inline-flex !important;
  }
}
@media (max-width: 760px) {
  body.jfc-page .jfc-shell-actions {
    z-index: 5;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.jfc-page .jfc-shell-menu {
    color: var(--jfc-ink, #0b0d10) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.jfc-page .jfc-shell-signin,
  body.jfc-page .jfc-shell-join,
  body.jfc-page .jfc-shell-account {
    display: none !important;
  }
}
@media (max-width: 760px) {
  body.jfc-page .jfc-shell-actions {
    position: fixed !important;
    top: 10px !important;
    right: 20px !important;
  }
}
@media (max-width: 760px) {
  .jfc-shell-actions {
    position: fixed !important;
    top: 10px !important;
    right: 20px !important;
    z-index: 10000 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .jfc-shell-menu {
    display: inline-flex !important;
    color: #0b0d10 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .jfc-shell-signin,
  .jfc-shell-join,
  .jfc-shell-account {
    display: none !important;
  }
}
@media (max-width: 980px) {
  .jfc-shell-actions {
    position: fixed !important;
    top: 10px !important;
    right: 20px !important;
    z-index: 10000 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .jfc-shell-menu {
    display: inline-flex !important;
    color: #0b0d10 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .jfc-shell-signin,
  .jfc-shell-join,
  .jfc-shell-account {
    display: none !important;
  }
}
@media (max-width: 1200px) {
  .jfc-shell-header::after {
    content: "☰";
    position: fixed;
    top: 15px;
    right: 31px;
    z-index: 10001;
    color: #0b0d10;
    font: 900 22px/1 Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
    pointer-events: none;
  }
}

/* 2026-05-09: JFC nav must match the main PRR navigation controls exactly. */
body.jfc-page .jfc-shell-header::after {
  content: none !important;
  display: none !important;
}

body.jfc-page .jfc-shell-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

body.jfc-page .jfc-shell-links {
  flex: 1 1 auto;
}

body.jfc-page .jfc-shell-actions {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  margin-left: auto !important;
  padding-right: 10px;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  opacity: 1 !important;
  visibility: visible !important;
}

body.jfc-page .jfc-shell-actions .icon-btn,
body.jfc-page .jfc-shell-menu.icon-btn {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 1px solid var(--hair) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center;
  cursor: pointer;
  -webkit-appearance: none;
}

body.jfc-page .jfc-shell-actions .icon-btn:hover,
body.jfc-page .jfc-shell-menu.icon-btn:hover {
  background: transparent !important;
  border-color: color-mix(in oklab, var(--accent) 55%, var(--hair)) !important;
  color: var(--text) !important;
}

body.jfc-page .jfc-shell-actions .icon {
  font-size: 20px;
  line-height: 1;
}

body.jfc-page .jfc-shell-menu.nav-toggle .icon {
  font-size: 22px;
}

body.jfc-page .jfc-shell-theme-toggle {
  width: 34px !important;
  height: 34px !important;
}

body.jfc-page .jfc-shell-drawer-auth-ctas {
  margin: 0 0 18px;
}

body.jfc-page .jfc-shell-drawer-theme {
  border-top-color: rgba(255,255,255,.16);
  padding-left: 2px;
  padding-right: 2px;
}

body.jfc-page .jfc-shell-drawer-theme .nav-drawer-theme-toggle {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

body.jfc-page .jfc-shell-drawer-theme .nav-drawer-theme-option {
  color: rgba(255,255,255,.72);
}

body.jfc-page .jfc-shell-drawer-theme .nav-drawer-theme-option.is-active {
  color: #fff;
}

@media (max-width: 980px) {
  body.jfc-page .jfc-shell-header .jfc-wrap {
    width: 100%;
    max-width: 100%;
  }

  body.jfc-page .jfc-shell-inner {
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  body.jfc-page .jfc-shell-actions {
    position: static !important;
    inset: auto !important;
    margin-left: auto !important;
    padding-right: 0;
    flex: 0 0 auto;
  }

  body.jfc-page .jfc-shell-links {
    display: none !important;
  }
}

@media (max-width: 700px) {
  body.jfc-page .jfc-shell-signin,
  body.jfc-page .jfc-shell-join,
  body.jfc-page .jfc-shell-account {
    display: none !important;
  }
}