/* ============================================================
   Top Funds Landing — page styles
   ============================================================ */

/* HERO BAND */
.hero {
  border-bottom: 1px solid var(--b1);
  background:
    radial-gradient(700px 360px at 18% -40%, rgba(201,152,42,0.16), transparent 60%);
}
.hero-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 36px 22px 32px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.hero h1 {
  margin: 0 0 12px; max-width: 640px;
  font-family: var(--display); font-weight: 600; font-size: 38px;
  line-height: 1.08; letter-spacing: -0.025em; color: var(--t1);
  text-wrap: balance;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--a) 10%, var(--a2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p {
  margin: 0; max-width: 520px; font-size: 15px; color: var(--t2); line-height: 1.55;
}
.hero-stats { display: flex; gap: 30px; flex: none; padding-bottom: 4px; }
.hero-stat .v {
  font-family: var(--display); font-weight: 600; font-size: 30px; color: var(--t1);
  letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px;
}
.hero-stat .l {
  margin-top: 3px; font-size: 12px; color: var(--t2);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* LAYOUT GRID */
.layout {
  max-width: var(--maxw); margin: 0 auto; padding: 22px;
  display: grid; grid-template-columns: 220px minmax(0,1fr) 260px;
  gap: 22px; align-items: start;
}

/* SIDEBAR */
.sidebar { position: sticky; top: calc(var(--header-h) + 14px); }
.sidebar-scroll {
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto; padding-right: 4px;
}
.cat-group { margin-bottom: 18px; }
.cat-group-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; width: 100%; background: none; border: none;
  font-family: var(--display); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--t2);
}
.cat-group-head .chev { transition: transform .2s; color: var(--t3); }
.cat-group.collapsed .chev { transform: rotate(-90deg); }
.cat-group.collapsed .cat-list { display: none; }
.cat-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.cat-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: var(--r8); cursor: pointer;
  border-left: 3px solid transparent;
  font-size: 13px; color: var(--t2);
  transition: background .14s, color .14s, border-color .14s;
}
.cat-item:hover { background: var(--bg3); color: var(--t1); }
.cat-item.active {
  background: var(--b1); border-left-color: var(--a); color: var(--t1); font-weight: 500;
}
.cat-badge {
  font-family: var(--mono); font-size: 10px; color: var(--t3);
  background: rgba(201,152,42,0.07); padding: 2px 6px; border-radius: 999px;
  flex: none;
}
.cat-item.active .cat-badge { color: var(--t2); }

/* MAIN */
.main { min-width: 0; }
.cat-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  margin-bottom: 18px;
}
.cat-header h2 {
  margin: 0 0 4px; font-family: var(--display); font-weight: 600; font-size: 28px;
  letter-spacing: -0.02em; color: var(--t1);
}
.cat-header .sub { margin: 0; font-size: 13.5px; color: var(--t2); max-width: 560px; }

/* segmented period selector */
.segmented {
  display: inline-flex; background: var(--bg3); border: 1px solid var(--b1);
  border-radius: 999px; padding: 3px; flex: none; position: relative;
}
.seg-btn {
  position: relative; z-index: 1; border: none; background: none;
  padding: 7px 15px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--t2); letter-spacing: 0.03em; transition: color .2s;
  white-space: nowrap;
}
.seg-btn.active { color: var(--bg); }
.seg-thumb {
  position: absolute; top: 3px; bottom: 3px; z-index: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--a), var(--a2));
  box-shadow: 0 2px 10px rgba(201,152,42,0.4);
  transition: left .22s cubic-bezier(.4,.1,.2,1), width .22s cubic-bezier(.4,.1,.2,1);
}

/* sort/filter bar */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--b1);
}
.toolbar .label { font-size: 12px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.06em; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg3); border: 1px solid var(--b1); color: var(--t2);
  border-radius: var(--r8); padding: 6px 11px; font-size: 12.5px; font-weight: 500;
  transition: border-color .14s, color .14s, background .14s;
}
.chip:hover { border-color: var(--b2); color: var(--t1); }
.chip.active { background: var(--b1); border-color: var(--b3); color: var(--t1); }
.chip svg { width: 13px; height: 13px; opacity: .8; }
.toolbar .spacer { flex: 1; }
.view-toggle { display: inline-flex; background: var(--bg3); border: 1px solid var(--b1); border-radius: var(--r8); padding: 3px; }
.view-toggle button {
  border: none; background: none; color: var(--t2); padding: 6px 12px;
  border-radius: 6px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.view-toggle button.active { background: var(--b1); color: var(--t1); }

/* TABLE */
.fund-table-wrap { overflow-x: auto; }
.fund-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.fund-table thead th {
  text-align: right; padding: 0 10px 12px; font-size: 11px; font-weight: 600;
  color: var(--t3); text-transform: uppercase; letter-spacing: 0.07em;
  white-space: nowrap; cursor: pointer; user-select: none;
}
.fund-table thead th.l { text-align: left; }
.fund-table thead th.c { text-align: center; }
.fund-table thead th .arrow-i { opacity: 0; margin-left: 3px; }
.fund-table thead th.sorted { color: var(--t1); }
.fund-table thead th.sorted .arrow-i { opacity: 1; }

.fund-row {
  height: 76px; cursor: pointer;
  border-top: 1px solid var(--b1);
  transition: background .16s, transform .16s;
}
.fund-row:hover { background: var(--bg3); transform: scale(1.005); }
.fund-row td { padding: 0 10px; vertical-align: middle; }
.fund-row td.num { text-align: right; }

.rank-cell { width: 44px; text-align: center !important; }
.rank {
  font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--t3);
  display: inline-flex; align-items: center; justify-content: center;
}
.rank.r1 { color: var(--gold); }
.rank.r2 { color: #cbd5e1; }
.rank.r3 { color: #d08c52; }
.rank .trophy { margin-right: 2px; }

.fund-name .n1 { font-size: 14px; font-weight: 600; color: var(--t1); line-height: 1.25; }
.fund-name .n2 {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 11px; color: var(--t3);
}
.fund-name .plan-badge {
  background: rgba(201,152,42,0.08); border: 1px solid var(--b1);
  padding: 1px 6px; border-radius: 5px; font-size: 10px; color: var(--t2); font-weight: 500;
}
.fund-name .n3 { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 11px; color: var(--t2); }

.ret { font-family: var(--mono); font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ret .ar { font-size: 10px; }
.ret-cell.hot {
  background: var(--b1);
  border-left: 1px solid var(--b1); border-right: 1px solid var(--b1);
}
.ret-cell.hot .ret { font-size: 15px; font-weight: 700; }
.muted-dash { color: var(--t3); }

.aum, .ter { font-family: var(--mono); font-size: 12.5px; color: var(--t2); white-space: nowrap; font-variant-numeric: tabular-nums; }

.go-cell { width: 40px; text-align: center !important; }
.go {
  width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center;
  color: var(--t3); transition: color .16s, transform .16s, background .16s;
}
.fund-row:hover .go { color: var(--a); transform: translateX(3px); background: var(--b1); }

.compare-check { width: 34px; text-align: center !important; }
.compare-mode .compare-check { display: table-cell; }
.compare-check input { width: 16px; height: 16px; accent-color: var(--a); cursor: pointer; }

/* card view (also mobile) */
.fund-cards { display: none; flex-direction: column; gap: 12px; }
.fund-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px 14px;
  padding: 14px; border-radius: var(--r12); background: var(--card);
  border: 1px solid var(--b1); cursor: pointer; align-items: center;
  transition: border-color .16s, transform .16s;
}
.fund-card:hover { border-color: var(--b2); transform: translateY(-2px); }
.fund-card .fc-rank { font-family: var(--display); font-weight: 700; font-size: 18px; }
.fund-card .fc-body { min-width: 0; }
.fund-card .fc-name { font-size: 14px; font-weight: 600; color: var(--t1); }
.fund-card .fc-meta { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.fund-card .fc-ret { text-align: right; }
.fund-card .fc-ret .v { font-family: var(--mono); font-size: 18px; font-weight: 700; }
.fund-card .fc-ret .l { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .05em; }
.fund-card .fc-foot {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--b1); padding-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--t2);
}

/* show more */
.show-more-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--b1); flex-wrap: wrap;
}
.show-more-bar .sm-count { font-family: var(--mono); font-size: 12px; color: var(--t3); }
.show-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg3); border: 1px solid var(--b2); color: var(--t1);
  border-radius: var(--r8); padding: 9px 18px; font-size: 13px; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.show-more-btn:hover { border-color: var(--b3); background: var(--b1); }
.show-more-btn svg { transition: transform .2s; }
.show-more-btn.expanded svg { transform: rotate(180deg); }
.show-more-bar.done { display: none; }

/* rows revealing past the fold */
.fund-row.extra, .fund-card.extra { display: none; }
.fund-row.reveal, .fund-card.reveal { display: table-row; animation: revealRow .4s ease both; }
.fund-card.reveal { display: grid; }
@keyframes revealRow { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* footer note */
.foot-note {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--b1);
  font-size: 12px; color: var(--t3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* INSIGHTS PANEL */
.insights { position: sticky; top: calc(var(--header-h) + 14px); display: flex; flex-direction: column; gap: 16px; }
.ins-card { padding: 16px; }
.ins-card h3 {
  margin: 0 0 14px; font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--t1); display: flex; align-items: center; gap: 8px;
}
.ins-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--b1); }
.ins-row:last-child { border-bottom: none; }
.ins-row .k { font-size: 12.5px; color: var(--t2); }
.ins-row .v { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; }

.ins-cta {
  padding: 18px; border-radius: var(--r14); color: var(--bg); position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--a), var(--a2));
  box-shadow: var(--shadow-cta);
}
.ins-cta::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(220px 120px at 90% 0%, rgba(255,255,255,0.22), transparent 60%);
  pointer-events: none;
}
.ins-cta h3 { color: var(--bg); margin: 0 0 6px; font-family: var(--display); font-size: 15px; font-weight: 600; }
.ins-cta p { margin: 0 0 14px; font-size: 12.5px; color: rgba(5,17,31,0.80); line-height: 1.5; }
.ins-cta .cta-btn {
  width: 100%; border: none; background: var(--bg); color: #e4dfd0;
  border-radius: var(--r8); padding: 10px; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.25);
  transition: background .16s; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.ins-cta .cta-btn:hover { background: #10294a; }
.ins-cta .cta-btn:disabled { opacity: .55; cursor: not-allowed; }

.method p { margin: 0 0 10px; font-size: 12px; color: var(--t2); line-height: 1.6; }
.method a { color: var(--a); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.method a:hover { color: var(--a2); }

/* compare bar (sticky bottom) */
.compare-bar {
  position: fixed; left: 50%; bottom: -90px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 14px;
  background: rgba(8,25,41,0.92); backdrop-filter: blur(16px);
  border: 1px solid var(--b3); border-radius: 999px; padding: 10px 12px 10px 18px;
  box-shadow: var(--shadow-lift); transition: bottom .3s cubic-bezier(.2,.7,.3,1);
}
.compare-bar.show { bottom: 22px; }
.compare-bar .ct { font-size: 13px; color: var(--t2); }
.compare-bar .ct b { color: var(--t1); }
.compare-bar .pills { display: flex; gap: 6px; }
.compare-bar .pill {
  font-size: 11px; background: var(--b1); border: 1px solid var(--b2); color: var(--t1);
  padding: 4px 9px; border-radius: 999px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .sidebar-scroll {
    max-height: none; overflow-x: auto; overflow-y: hidden;
    display: flex; gap: 8px; padding-bottom: 8px;
  }
  .cat-group { margin-bottom: 0; flex: none; }
  .cat-group-head { display: none; }
  .cat-list { flex-direction: row; margin: 0; }
  .cat-item { border-left: none; border: 1px solid var(--b1); white-space: nowrap; border-radius: 999px; }
  .cat-item.active { border-color: var(--b3); }
  .insights { position: static; flex-direction: row; flex-wrap: wrap; }
  .insights > * { flex: 1 1 240px; }
}
@media (max-width: 860px) {
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero h1 { font-size: 30px; }
  .hero-stats { gap: 22px; }
  .hero-stat .v { font-size: 24px; }
}
@media (max-width: 760px) {
  .header-center { display: none; }
  .search { width: 150px; }
  .fund-table-wrap { display: none !important; }
  .fund-cards { display: flex !important; }
  .cat-header { flex-direction: column; }
  .segmented { width: 100%; overflow-x: auto; }
  .insights > * { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .wrap, .layout, .hero-inner, .header { padding-left: 14px; padding-right: 14px; }
  .hero h1 { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FUND RETURNS — colour, depth and rank medals                added 2026-09-26
   --------------------------------------------------------------------------
   The table was correct and completely flat: white rows, grey pills, returns
   as plain text with a coloured glyph. On a page whose entire job is "which
   of these numbers is bigger", nothing on screen carried that meaning.

   What changed, and why each one:

   RETURNS ARE THE DATA, so they get the colour. A tinted pill instead of
   coloured text — the eye finds a filled shape far faster than a hue on a
   glyph, and it keeps working for a red-green colour-blind reader because the
   sign, the arrow and the pill's weight all still say it.

   THE SORTED COLUMN is the one being compared, so it gets a gold band with a
   real edge. It used to be flat grey, indistinguishable from the row.

   RANK 1-3 BECOME MEDALS. Gold, silver, bronze, each with the light coming
   from the top-left, which is what makes a circle read as a physical object
   rather than a coloured dot.

   DEPTH IS KEPT SMALL ON PURPOSE. Two soft shadows and a one-pixel light edge,
   not a drop shadow you can measure. A financial table has to stay scannable;
   the moment rows look like toys, the numbers stop being believed.

   Every colour here is an existing variable, so this follows the brand and any
   later theme change rather than pinning new hexes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the rows: a card each, with the light above ─────────────────────────── */
.fund-table { border-collapse: separate; border-spacing: 0 8px; }

.fund-row {
  height: 78px;
  border-top: 0;
  background: linear-gradient(180deg, #fff 0%, #fcfdfe 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,        /* the lit top edge */
    0 1px 2px rgba(15,23,42,.05),
    0 6px 14px -8px rgba(15,23,42,.14);
  transition: transform .18s cubic-bezier(.23,1,.32,1),
              box-shadow .18s cubic-bezier(.23,1,.32,1),
              background .18s;
}
.fund-row td:first-child { border-radius: 12px 0 0 12px; }
.fund-row td:last-child  { border-radius: 0 12px 12px 0; }

.fund-row:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #fffdf7 0%, #fff 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 2px 4px rgba(15,23,42,.06),
    0 14px 28px -12px rgba(139,111,47,.32);
}
/* A gold edge that grows on the left — says "this row" without moving it. */
.fund-row td:first-child { position: relative; }
.fund-row td:first-child::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--a2), var(--a));
  opacity: 0; transition: opacity .18s;
}
.fund-row:hover td:first-child::before { opacity: 1; }

/* ── rank: medals for the top three ──────────────────────────────────────── */
.rank {
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 13px; font-weight: 700; color: var(--t2);
  background: linear-gradient(160deg, #f3f6fa, #e6ecf4);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(15,23,42,.10);
}
/* The highlight sits top-left in all three, so they read as one set lit by the
   same source rather than three unrelated coloured circles. */
.rank.r1 {
  color: #5a4206;
  background: linear-gradient(160deg, #ffe9a8 0%, #e8c877 45%, #c9982a 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset,
              0 2px 5px rgba(201,152,42,.45), 0 0 0 1px rgba(201,152,42,.30);
}
.rank.r2 {
  color: #3f4855;
  background: linear-gradient(160deg, #ffffff 0%, #dfe6ef 45%, #b4c0d0 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset,
              0 2px 5px rgba(100,116,139,.32), 0 0 0 1px rgba(148,163,184,.35);
}
.rank.r3 {
  color: #5c3312;
  background: linear-gradient(160deg, #f6d3b0 0%, #dda471 45%, #b9722f 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.60) inset,
              0 2px 5px rgba(185,114,47,.38), 0 0 0 1px rgba(185,114,47,.30);
}
.rank .trophy { display: none; }   /* the medal already says it */

/* ── the returns themselves ──────────────────────────────────────────────── */
.ret {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 9px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(15,23,42,.06);
}
.ret.up {
  color: #046b4d;
  background: linear-gradient(180deg, #e8faf1, #d6f4e6);
  border: 1px solid rgba(5,150,105,.24);
}
.ret.down {
  color: #a4161a;
  background: linear-gradient(180deg, #fdeceb, #fbdcdb);
  border: 1px solid rgba(220,38,38,.22);
}
/* A dash is not a value; it should not look like one. */
.ret.muted-dash {
  background: none; border: 1px dashed var(--b2); box-shadow: none;
  color: var(--t3); font-weight: 500;
}

/* ── the column being sorted on ──────────────────────────────────────────── */
.ret-cell.hot {
  background: linear-gradient(180deg, rgba(201,169,97,.14), rgba(201,169,97,.06));
  border-left: 1px solid rgba(201,169,97,.35);
  border-right: 1px solid rgba(201,169,97,.35);
}
.ret-cell.hot .ret {
  font-size: 14px; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 2px 6px rgba(15,23,42,.10);
}

/* ── the small print, given a little life ────────────────────────────────── */
.fund-name .plan-badge {
  background: linear-gradient(180deg, #fff8e8, #fdf0d4);
  border: 1px solid rgba(201,152,42,.28);
  color: #7a5a06; font-weight: 600;
}
.fund-row:hover .go {
  background: linear-gradient(180deg, #fff8e8, #f7e9c8);
  box-shadow: 0 1px 3px rgba(139,111,47,.30);
}

/* ── reduced motion: colour stays, movement goes ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fund-row, .fund-row:hover { transform: none; transition: background .2s, box-shadow .2s; }
}

/* ── the card view (mobile) gets the same treatment ──────────────────────── */
.fund-card {
  background: linear-gradient(180deg, #fff, #fbfcfe);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 1px 2px rgba(15,23,42,.05), 0 8px 18px -10px rgba(15,23,42,.18);
}


/* ══════════════════════════════════════════════════════════════════════════
   FUND RETURNS — warm paper, navy hero, coloured controls    added 2026-09-26
   --------------------------------------------------------------------------
   The earlier pass coloured the rows and the return pills and stopped there.
   Everything around them — the page, the hero, the sidebar, every chip and
   toggle — was white on white on white, so the coloured table floated in a
   void and the controls read as disabled.

   The palette is the home page's, borrowed wholesale from seo/fund.css: a
   warm cream page under a fixed gold wash, white cards floating on it, a navy
   hero band. The tokens are redeclared here rather than imported, because
   fund.css is not loaded on this page and pulling in 1,100 lines to get six
   colours would be a bad trade.

   The controls are the other half of the problem. Four groups of identical
   grey pills meant nothing told you that Period, Plan, Sort and View are
   four different questions. Each group now owns a colour — period gold,
   plan navy, sort gold-outline, view teal — and every pressable thing
   answers the press inside 140ms. Only transform and opacity animate, and
   the whole lot goes still under prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */

html {
  --tf-paper:  #efe9db;
  --tf-card:   #ffffff;
  --tf-line:   #ded5c2;
  --tf-line2:  #c8bda3;
  --tf-gold:   #b8871c;
  --tf-gold-d: #6f550f;
  --tf-gold-l: #dcab3c;
  --tf-navy:   #0d1526;
  --tf-navy2:  #1b2745;
  --tf-teal:   #0a5f58;
  --tf-teal-bg:#ddf5ee;
  --tf-sh:     0 1px 2px rgba(13,21,38,.08), 0 6px 20px rgba(13,21,38,.10);
  --tf-sh-sm:  0 1px 2px rgba(13,21,38,.07), 0 2px 8px rgba(13,21,38,.08);
  --tf-ease:   cubic-bezier(.23, 1, .32, 1);
}

/* ── the page itself ─────────────────────────────────────────────────────── */
/* styles.css carries a blanket `body, .wrap, main, section { background:#FFF }`
   from the light-mode conversion. This file loads after it, so an equally
   specific rule is enough — no !important needed. */
html body {
  background: var(--tf-paper);
  background-image: radial-gradient(1200px 400px at 90% -50px, rgba(201,152,42,.10), transparent 60%);
  background-attachment: fixed;
}
html body main.page { background: transparent; }

/* ── hero: a navy band, same as the home page's ──────────────────────────── */
.page > .hero {
  position: relative;
  overflow: hidden;
  border-bottom: none;
  background: linear-gradient(135deg, var(--tf-navy) 0%, var(--tf-navy2) 100%);
}
.page > .hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 380px at 16% -30%, rgba(220,171,60,.22), transparent 62%);
}
.page > .hero .hero-inner { position: relative; z-index: 1; padding-bottom: 38px; }
.page > .hero h1 { color: #fff; }
.page > .hero h1 .grad {
  background: linear-gradient(100deg, var(--tf-gold-l) 10%, #f0cd7a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page > .hero p { color: #c8cfe0; }
.page > .hero .live-pill {
  background: rgba(16,185,129,.14);
  border-color: rgba(110,231,183,.30);
  color: #6ee7b7;
}

/* the three hero numbers, as glass cards rather than bare text */
.page > .hero .hero-stats { gap: 14px; flex-wrap: wrap; }
.page > .hero .hero-stat {
  padding: 13px 18px 12px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255,255,255,.085), rgba(255,255,255,.028) 46%, rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 40px rgba(0,0,0,.22);
}
.page > .hero .hero-stat .v { color: var(--tf-gold-l); }
.page > .hero .hero-stat .l { color: #9aa4c0; }

/* ── white cards floating on the cream ───────────────────────────────────── */
.layout .main {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: 16px;
  padding: 20px 22px 22px;
  box-shadow: var(--tf-sh);
}
.layout .sidebar-scroll,
.layout .ins-card {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: 14px;
  box-shadow: var(--tf-sh-sm);
}
.layout .sidebar-scroll { padding: 12px 10px; }

/* the category heading gets the gold rule the home page's h2s wear */
.cat-header { border-bottom: 1px solid var(--tf-line); padding-bottom: 14px; }
.cat-header h2 { position: relative; padding-left: 14px; }
.cat-header h2::before {
  content: '';
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--tf-gold-l), var(--tf-gold));
}
.cat-header .sub { padding-left: 14px; }
.toolbar { border-bottom-color: var(--tf-line); }
.toolbar .label { color: var(--tf-gold-d); font-weight: 600; }

/* ── controls ────────────────────────────────────────────────────────────── */
/* Every pressable thing on this page shares one press response. 140ms is
   short enough to read as "the button heard me" rather than as an animation,
   and scale is the only property that moves. */
.seg-btn, .chip, .view-toggle button, .show-more-btn, .cat-item, .ins-cta .cta-btn {
  transition:
    transform .14s var(--tf-ease),
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}
.seg-btn:active, .chip:active, .view-toggle button:active,
.show-more-btn:active, .ins-cta .cta-btn:active { transform: scale(.96); }

/* PERIOD — gold. The thumb already was; it just had nothing to stand against. */
.segmented {
  background: #f6f1e4;
  border-color: var(--tf-line);
  box-shadow: inset 0 1px 3px rgba(13,21,38,.06);
}
.seg-btn { color: var(--tf-gold-d); }
.seg-btn:hover:not(.active) { color: var(--tf-navy); transform: translateY(-1px); }
.seg-btn.active { color: #fff; }
.seg-thumb {
  background: linear-gradient(135deg, var(--tf-gold) 0%, var(--tf-gold-l) 100%);
  box-shadow: 0 2px 10px rgba(184,135,28,.45), 0 1px 0 rgba(255,255,255,.35) inset;
}

/* base chip — warm, not grey */
.chip {
  background: #fbf8f0;
  border-color: var(--tf-line);
  color: #6b6350;
}
.chip:hover { border-color: var(--tf-line2); color: var(--tf-navy); transform: translateY(-1px); }

/* PLAN — navy, so Direct/Regular never reads as another sort key */
.plan-seg .plan-btn.active {
  background: linear-gradient(135deg, var(--tf-navy) 0%, var(--tf-navy2) 100%);
  border-color: var(--tf-navy);
  color: #fff;
  box-shadow: 0 3px 12px rgba(13,21,38,.28);
}

/* SORT — gold outline; the chip that is actually driving the table */
.chip[data-sort].active {
  background: linear-gradient(135deg, #fdf4dd, #f8e8bd);
  border-color: var(--tf-gold);
  color: var(--tf-gold-d);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(184,135,28,.20);
}

/* VIEW — teal, the same green the positive returns use */
.view-toggle {
  background: #f6f1e4;
  border-color: var(--tf-line);
}
.view-toggle button { color: #6b6350; }
.view-toggle button.active {
  background: var(--tf-teal-bg);
  color: var(--tf-teal);
  box-shadow: 0 1px 4px rgba(10,95,88,.18);
}

/* category list — a gold bar on the active one, a nudge on hover */
.cat-item:hover { background: #f8f3e6; color: var(--tf-navy); transform: translateX(2px); }
.cat-item.active {
  background: linear-gradient(90deg, #fdf4dd, #fbf8f0);
  border-color: var(--tf-gold) !important;
  color: var(--tf-gold-d);
  font-weight: 600;
}

/* show more — the one real CTA on the page, so it gets the gold fill */
.show-more-btn {
  background: linear-gradient(135deg, var(--tf-gold) 0%, var(--tf-gold-l) 100%);
  border-color: var(--tf-gold);
  color: #fff;
  box-shadow: 0 3px 14px rgba(184,135,28,.30), 0 1px 0 rgba(255,255,255,.3) inset;
}
.show-more-btn:hover {
  background: linear-gradient(135deg, var(--tf-gold-d) 0%, var(--tf-gold) 100%);
  border-color: var(--tf-gold-d);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(184,135,28,.38), 0 1px 0 rgba(255,255,255,.3) inset;
}
.show-more-bar { border-top-color: var(--tf-line); }

/* keyboard users get the same gold ring everywhere */
.seg-btn:focus-visible, .chip:focus-visible, .view-toggle button:focus-visible,
.show-more-btn:focus-visible, .cat-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,135,28,.32);
}

/* the rows already carried their own colour; they just need the warm line */
.fund-table thead th { color: var(--tf-gold-d); border-bottom-color: var(--tf-line); }

@media (prefers-reduced-motion: reduce) {
  .seg-btn, .chip, .view-toggle button, .show-more-btn, .cat-item, .ins-cta .cta-btn {
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  }
  .seg-btn:active, .chip:active, .view-toggle button:active,
  .show-more-btn:active, .ins-cta .cta-btn:active,
  .seg-btn:hover, .chip:hover, .cat-item:hover, .show-more-btn:hover { transform: none; }
}

/* styles.css carries `.seg-btn.active, .chip.on, .plan-btn.active, .ntab.active
   { background:#F5C518 !important }` from the light-mode conversion — one
   yellow for every active control on the site. That is exactly the thing that
   made Period and Plan indistinguishable, so Plan takes the !important back.
   Period keeps the house yellow (its thumb is the gold gradient underneath and
   black-on-gold reads well), and Sort/View were never in that selector list. */
.plan-seg .plan-btn.active {
  background: linear-gradient(135deg, var(--tf-navy) 0%, var(--tf-navy2) 100%) !important;
  border-color: var(--tf-navy) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(13,21,38,.28);
}

/* ── the phone/narrow view ───────────────────────────────────────────────── */
/* Below 760px the table is swapped for .fund-cards, which the earlier colour
   pass never touched — so every phone still saw the flat white page. These are
   the same greens, reds and gold the table rows wear. */
.fund-card {
  background: linear-gradient(180deg, #fff 0%, #fdfbf5 100%);
  border-color: var(--tf-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 1px 2px rgba(13,21,38,.06), 0 8px 18px -10px rgba(13,21,38,.20);
  transition: transform .16s var(--tf-ease), border-color .16s ease, box-shadow .16s ease;
}
.fund-card::before {
  content: '';
  position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--tf-gold-l), var(--tf-gold));
  opacity: 0; transition: opacity .16s ease;
}
.fund-card { position: relative; overflow: hidden; }
.fund-card:hover, .fund-card:focus-within {
  border-color: var(--tf-line2);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 2px 4px rgba(13,21,38,.07), 0 16px 30px -14px rgba(13,21,38,.30);
}
.fund-card:hover::before, .fund-card:focus-within::before { opacity: 1; }
.fund-card:active { transform: scale(.985); }

/* the return, as the same tinted pill the table uses */
.fund-card .fc-ret .v {
  display: inline-block; padding: 4px 10px; border-radius: 8px;
  font-size: 16px; letter-spacing: -.01em;
}
.fund-card .fc-ret .v.up {
  background: linear-gradient(180deg, #e8faf1, #d6f4e6);
  border: 1px solid #b6e6cf; color: #0a5f58;
}
.fund-card .fc-ret .v.down {
  background: linear-gradient(180deg, #fdeeeb, #fbe1dc);
  border: 1px solid #f2c4bb; color: #a52b22;
}
.fund-card .fc-ret .l { color: #8a8270; margin-top: 4px; }
.fund-card .fc-foot { border-top-color: var(--tf-line); color: #6b6350; }
.fund-card .fc-rank { color: var(--tf-gold-d); }

/* ── a page that was 8,643px wide on a 634px screen ──────────────────────── */
/* Below 1200px .layout collapses to one column and the category sidebar
   becomes a horizontal rail with overflow-x:auto. That scroller never worked:
   a grid item defaults to min-width:auto, so .sidebar refused to shrink below
   the full width of ~60 category pills and pushed the whole document sideways
   instead. .main already carried min-width:0; the sidebar and the insights
   column never did. */
@media (max-width: 1200px) {
  .layout > .sidebar,
  .layout > .insights { min-width: 0; max-width: 100%; }
  .layout .sidebar-scroll { scrollbar-width: thin; }
}