/* ===========================================================================
   Mutual fund pages — the look
   ---------------------------------------------------------------------------
   These pages are read by somebody who arrived from a search with one
   question: what is this fund's NAV, what has it returned, and am I in the
   right plan. So the answer sits at the top at a size you cannot miss, the
   comparison that nobody else shows them comes next, and the explanation
   follows for the reader who wants it. Nothing decorative competes with a
   number.
   =========================================================================== */
:root{
  --ink:#0d1526; --ink2:#2b3452; --mut:#5a637a;
  --line:#ded5c2; --line2:#c8bda3;
  --paper:#efe9db;          /* warm cream page — white cards float on it   */
  --paper2:#ffffff;         /* cards are now white, not grey-on-grey       */
  --brand:#b8871c; --brand-d:#6f550f; --brand-lt:#dcab3c;
  --navy:#0d1526; --navy2:#1b2745; --navy-soft:#e3e9f3;
  --up:#0a5f58; --up-bg:#ddf5ee; --dn:#a52b22; --dn-bg:#fbe6e2;
  /* section tints — each block of the page gets its own faint colour so the
     eye can tell "returns" from "risk" from "the worst it has been" without
     reading a heading. Kept pale enough that the numbers, not the tint, lead. */
  --t-gold:#faf1dc; --t-blue:#e6eef8; --t-red:#faeae6; --t-green:#e2f6ef;
  --sh:0 1px 2px rgba(13,21,38,.08), 0 6px 20px rgba(13,21,38,.10);
  --sh-sm:0 1px 2px rgba(13,21,38,.07), 0 2px 8px rgba(13,21,38,.08);
  --mf-max:1280px;   /* wide content column, side padding — not edge-to-edge */
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.65 'DM Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 400px at 90% -50px, rgba(201,152,42,.10), transparent 60%);
  background-attachment:fixed}

/* The old .mfh header lived here. Every page now wears the shared app
   `chrome` bar, whose ONE definition is seo/mf-header.css — keeping a
   second copy here is what let the two drift apart and made the header
   look different on every page. Page content only, below. */
.mfm{max-width:var(--mf-max);margin:0 auto;padding:26px 30px 64px}
.crumbs{font-size:12.5px;color:var(--mut);margin-bottom:18px}
.crumbs a{color:var(--mut);text-decoration:none}
.crumbs a:hover{color:var(--brand-d);text-decoration:underline}
.crumbs .sep{margin:0 7px;opacity:.5}

h1{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(30px,5vw,46px);
  line-height:1.05;letter-spacing:.5px;margin:0 0 12px;text-wrap:balance}
h2{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:27px;letter-spacing:.6px;
  margin:40px 0 12px;color:var(--navy);position:relative;padding-bottom:9px}
h2::after{content:'';position:absolute;left:0;bottom:0;width:52px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-lt))}
p{margin:0 0 14px}
.note{font-size:13px;color:var(--mut);line-height:1.6}
.rule{background:linear-gradient(120deg,var(--t-gold),#fff);border-left:3px solid var(--brand);
  padding:12px 16px;border-radius:0 10px 10px 0;font-size:14.5px;color:var(--ink2);box-shadow:var(--sh-sm)}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.tag{font-size:12px;padding:5px 13px;border-radius:99px;background:var(--paper2);
  border:1px solid var(--line);color:var(--ink2);text-decoration:none;box-shadow:var(--sh-sm)}
a.tag:hover{border-color:var(--brand);color:var(--brand-d)}
.tag.muted{color:var(--mut)}
.tag.plan-direct{background:linear-gradient(120deg,#eaf2ff,#f7faff);border-color:#bfdbfe;color:#1d4ed8;font-weight:600}
.tag.plan-regular{background:linear-gradient(120deg,#fff3e6,#fffaf4);border-color:#fed7aa;color:#c2410c;font-weight:600}

/* the answer, first — a navy hero card so the NAV is the first thing the eye
   lands on, the number itself in gold. Everything else on the page is quieter
   than this by design. */
.navbox{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 10px}
.navmain{flex:0 1 360px;border-radius:14px;padding:20px 24px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);
  box-shadow:0 10px 30px rgba(23,33,60,.22);color:#fff}
.navmain::after{content:'';position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  border-radius:50%;background:radial-gradient(circle,rgba(201,152,42,.28),transparent 70%)}
.navmain .lbl{display:block;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:#aeb7cf;margin-bottom:5px;position:relative}
.navmain b{display:block;font-size:38px;line-height:1.05;font-variant-numeric:tabular-nums;
  color:var(--brand-lt);position:relative;text-shadow:0 1px 12px rgba(201,152,42,.25)}
.chg{display:inline-block;font-size:13px;font-weight:600;padding:2px 9px;border-radius:6px;margin-top:7px}
.chg.up{color:var(--up);background:var(--up-bg)}
.chg.dn{color:var(--dn);background:var(--dn-bg)}
.asof{display:block;font-size:12px;color:#9aa4c0;margin-top:8px;position:relative}

table.rt{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;margin:6px 0 10px;
  background:var(--paper2);border-radius:12px;overflow:hidden;box-shadow:var(--sh)}
table.rt th,table.rt td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}

table.rt thead th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#c8cfe0;
  background:linear-gradient(120deg,var(--navy),var(--navy2));border-bottom:0}
table.rt .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;color:var(--navy)}
table.rt .mean{font-size:12.5px;color:var(--mut);line-height:1.55}
table.rt tbody tr:hover td{background:var(--t-gold)}
table.rt.cmp tr.me td{background:var(--t-gold)}
.gap{background:linear-gradient(120deg,var(--t-gold),#fff);border:1px solid var(--line);
  border-radius:12px;padding:15px 18px;font-size:14.5px;box-shadow:var(--sh-sm)}

/* .cta is one of the shared 3D buttons — defined once in mf-header.css. */

.faq{margin-top:40px}
.faq details{border:1px solid var(--line);border-radius:12px;padding:0;margin-bottom:10px;
  background:var(--paper2);box-shadow:var(--sh-sm);overflow:hidden}
.faq details[open]{box-shadow:var(--sh);border-color:#e5d9b8}
.faq summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:14.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--brand-d);font-weight:700;margin-right:10px}
.faq details[open] summary{background:var(--t-gold)}
.faq details[open] summary::before{content:'–'}
.faq p{padding:13px 18px 16px;margin:0;font-size:14px;color:var(--ink2);line-height:1.7}

/* listings, used by the category and AMC pages */
.flist{list-style:none;margin:14px 0 0;padding:0}
.flist li{border-bottom:1px solid var(--line)}
.flist a{display:grid;grid-template-columns:1fr repeat(3,minmax(58px,auto));gap:12px;
  align-items:baseline;padding:13px 8px;text-decoration:none;color:inherit;transition:background .1s}
.flist a:hover{background:var(--t-gold);border-radius:8px}
.flist .rk{color:var(--mut);font-size:12.5px;font-variant-numeric:tabular-nums}
.flist .nm{font-weight:600;font-size:14.5px;line-height:1.4;color:var(--navy)}
.flist .sub{display:block;font-weight:400;font-size:12px;color:var(--mut);margin-top:2px}
.flist .v{text-align:right;font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:700;white-space:nowrap;color:var(--ink2)}
.flist .vh{text-align:right;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.lhead{display:grid;grid-template-columns:1fr repeat(3,minmax(58px,auto));gap:12px;
  padding:0 8px 8px;border-bottom:2px solid var(--line2)}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:13px;margin-top:16px}
.gcard{border:1px solid var(--line);border-radius:13px;padding:16px 18px;text-decoration:none;
  color:inherit;background:var(--paper2);box-shadow:var(--sh-sm);
  transition:transform .12s,box-shadow .12s,border-color .12s;position:relative;overflow:hidden}
.gcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--brand),var(--brand-lt));opacity:0;transition:opacity .12s}
.gcard:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:#e5d9b8}
.gcard:hover::before{opacity:1}
.gcard b{display:block;font-size:15px;margin-bottom:4px;color:var(--navy)}
.gcard span{font-size:12.5px;color:var(--mut);line-height:1.55}

.mff{padding:30px 26px;max-width:860px;margin:26px auto 0;
  font-size:12.5px;color:var(--mut);line-height:1.65;
  border-top:3px solid var(--brand);background:linear-gradient(180deg,rgba(23,33,60,.03),transparent)}
.mff a{color:var(--brand-d)}
.mff .dis{font-size:11.5px;opacity:.85}
.muted{color:var(--mut);font-weight:400}

@media (max-width:640px){
  .mfm{padding:20px 18px 48px}
  .flist a,.lhead{grid-template-columns:1fr repeat(2,minmax(52px,auto))}
  .flist .v:nth-child(5),.lhead .vh:nth-child(5){display:none}
}

/* ── the metric grid ──────────────────────────────────────────────────────
   Every figure here is arithmetic on a published NAV, so each one carries its
   own caption saying what it is. A number without its unit and its window is
   a number somebody will quote back at you wrongly. */
h3.mh{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:20px;letter-spacing:.6px;
  margin:28px 0 12px;color:var(--navy);padding:0 0 7px 12px;position:relative}
h3.mh::before{content:'';position:absolute;left:0;top:2px;bottom:9px;width:4px;border-radius:3px;
  background:linear-gradient(var(--brand),var(--brand-lt))}
h3.mh::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:6px}
.mc{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--paper2);
  box-shadow:var(--sh-sm);transition:transform .12s,box-shadow .12s;position:relative;overflow:hidden}
.mc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand);opacity:.55}
.mc:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.mc.wide{grid-column:span 2}
.mc span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.mc b{display:block;font-size:23px;line-height:1.2;margin:5px 0 3px;font-variant-numeric:tabular-nums;color:var(--navy)}
.mc i{display:block;font-size:11.5px;color:var(--mut);font-style:normal;line-height:1.45}
.mc.bad{background:linear-gradient(120deg,var(--t-red),#fff)}
.mc.bad::before{background:var(--dn);opacity:1}
.mc.bad b{color:var(--dn)}
.mgrid.cal{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.mgrid.cal .mc b{font-size:19px}
.flist li.me a{background:var(--t-gold)}
@media (max-width:640px){ .mc.wide{grid-column:span 1} }

/* ── charts ────────────────────────────────────────────────────────────────
   The SVGs come out of _charts.php with a viewBox and no width, so they take
   the width of this figure and keep their aspect. Everything here is colour
   and type; no geometry, which lives in the PHP that knows the data. */
.ivfig{margin:16px 0 6px;padding:0}
.ivfig .ivc{display:block;width:100%;height:auto;overflow:visible}
.ivfig figcaption{font-size:12.5px;line-height:1.65;color:var(--mut);margin-top:10px;
  padding-left:12px;border-left:2px solid var(--line)}

.ivc-grid{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.ivc-zero{stroke:var(--mut);stroke-width:1;shape-rendering:crispEdges}
.ivc-ax{font:500 10px/1 'DM Sans',system-ui,sans-serif;fill:var(--mut);letter-spacing:.04em}
.ivc-val{font:600 10.5px/1 'JetBrains Mono','SF Mono',monospace;fill:var(--ink)}

.ivc-stroke{fill:none;stroke:var(--brand);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ivc-ddfill{fill:rgba(200,60,60,.16);stroke:var(--dn);stroke-width:1.4;
  vector-effect:non-scaling-stroke}

.ivc-bp{fill:var(--brand);opacity:.45}
.ivc-bn{fill:var(--dn);opacity:.5}
.ivc-bme{opacity:1}
.ivc-band{fill:var(--paper2);stroke:var(--line);stroke-width:1}
.ivc-tick{stroke:var(--mut);stroke-width:1.4}
.ivc-mark{fill:var(--brand);stroke:#fff;stroke-width:2}
.ivc-markt{fill:var(--brand)}

/* A phone is 360px wide; the axis labels have to shrink or they collide. */
@media (max-width:560px){
  .ivc-ax{font-size:13px}
  .ivc-val{font-size:13px}
  .ivfig figcaption{font-size:12px}
}

/* ── AMC page ────────────────────────────────────────────────────────────── */
.amc-cats{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.amc-cat{display:flex;flex-direction:column;gap:2px;padding:11px 15px;text-decoration:none;
  border:1px solid var(--line);border-radius:12px;background:var(--paper2);min-width:122px;
  box-shadow:var(--sh-sm);transition:transform .12s,box-shadow .12s,border-color .12s;
  position:relative;overflow:hidden}
.amc-cat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--brand),var(--brand-lt))}
.amc-cat:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:#e5d9b8}
.amc-cat .cc-n{font-size:13.5px;font-weight:600;color:var(--navy)}
.amc-cat .cc-c{font-size:12px;color:var(--brand-d);font-weight:600}

.amc-fund{margin:22px 0 6px;background:var(--paper2);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;box-shadow:var(--sh-sm)}
.af-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px;
  padding-bottom:10px;border-bottom:2px solid var(--line)}
.af-head h3{margin:0;font-size:17px;color:var(--navy)}
.af-cat{font-size:12px;font-weight:600;color:var(--brand-d);text-decoration:none;
  padding:3px 11px;border-radius:20px;white-space:nowrap;
  background:linear-gradient(120deg,var(--t-gold),#fff);border:1px solid #e5d9b8}
.af-cat:hover{border-color:var(--brand);box-shadow:var(--sh-sm)}
.amc-fund .flist a:hover{background:var(--t-gold);border-radius:8px}

/* Five columns here — plan/option, NAV, then three return periods. Overrides
   the four-column grid the peer/category lists use, scoped to .af-lh so those
   are untouched. */
.af-lh{grid-template-columns:1fr repeat(4,minmax(56px,auto)) !important;margin-top:6px}
.amc-fund .flist a{grid-template-columns:1fr repeat(4,minmax(56px,auto))}
@media (max-width:560px){
  .af-lh,.amc-fund .flist a{grid-template-columns:1fr repeat(3,minmax(46px,auto)) !important}
  .af-lh .vh:nth-child(3),.amc-fund .flist a .v:nth-child(2){display:none} /* drop 1y on phones */
}

/* ── portfolio: holdings list + chart bits ─────────────────────────────────── */
.holdlist{margin:12px 0 6px;display:flex;flex-direction:column;gap:1px}
.hrow{display:grid;grid-template-columns:1fr 120px 62px;align-items:center;gap:14px;padding:9px 4px;
  border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:0}
.hnm{font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar{height:9px;border-radius:5px;background:var(--navy-soft);overflow:hidden}
.hbar span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--brand),var(--brand-lt))}
.hpct{text-align:right;font:700 13px/1 'JetBrains Mono',monospace;color:var(--ink2)}
@media (max-width:560px){ .hrow{grid-template-columns:1fr 70px 54px;gap:9px} }

.ivc-donut .ivc-dc{font:700 30px/1 'Bebas Neue',sans-serif;fill:var(--navy)}
.ivc-donut .ivc-dl{font:500 11px/1 'DM Sans',sans-serif;fill:var(--mut);letter-spacing:.06em;text-transform:uppercase}
.ivc-lgl{font:500 13px/1 'DM Sans',sans-serif;fill:var(--ink2)}
.ivc-lgv{font:700 13px/1 'JetBrains Mono',monospace;fill:var(--navy)}
.ivc-stv{font:700 13px/1 'JetBrains Mono',monospace;fill:#fff}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME landing + screener + about — the content-rich, full-width pages
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-lp{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;
  border-radius:0;margin:0 0 0;padding:0}
.hero-lp .wrap{max-width:var(--mf-max);margin:0 auto;padding:40px 30px 46px}
.hero-lp .eye{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-lt);font-weight:600}
.hero-lp h1{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(34px,5vw,54px);
  line-height:1.02;letter-spacing:.5px;margin:10px 0 8px;color:#fff}
.hero-lp h1 .g{color:var(--brand-lt)}
.hero-lp .sub{font-size:16px;color:#c8cfe0;max-width:680px;line-height:1.6;margin:0 0 22px}
.hero-lp .stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:6px}
.hero-lp .stats b{display:block;font-family:'Bebas Neue',sans-serif;font-size:30px;color:var(--brand-lt);line-height:1}
.hero-lp .stats span{font-size:12.5px;color:#9aa4c0}

/* the advanced search panel that sits over the hero base */
.lp-search{max-width:var(--mf-max);margin:-30px auto 0;padding:0 30px;position:relative;z-index:5}
.lp-search .card{background:var(--paper2);border-radius:16px;box-shadow:0 18px 48px rgba(23,33,60,.20);
  border:1px solid var(--line);padding:20px 22px}
.lp-search h2{margin:0 0 14px;font-size:22px;padding:0}
.lp-search h2::after{display:none}
.lp-bigsearch{position:relative;margin-bottom:14px}
.lp-bigsearch svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--mut)}
.lp-bigsearch input{width:100%;height:52px;padding:0 18px 0 46px;border-radius:12px;border:1px solid var(--line2);
  background:var(--paper);font:16px/1 'DM Sans',sans-serif;color:var(--ink)}
.lp-bigsearch input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--iv-edit-ring,rgba(201,152,42,.2));background:#fff}
.lp-bigres{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 18px 48px rgba(23,33,60,.24);z-index:30;overflow:hidden;max-height:420px;overflow-y:auto}
.lp-bigres:empty,.lp-bigres[hidden]{display:none}
.lp-filters{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end}
.lp-f label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:5px;font-weight:600}
.lp-f select{width:100%;height:44px;border-radius:10px;border:1px solid var(--line2);background:var(--paper);
  padding:0 12px;font:14px/1 'DM Sans',sans-serif;color:var(--ink);cursor:pointer}
.lp-f select:focus{outline:none;border-color:var(--brand)}
/* .lp-go is one of the shared 3D buttons (mf-header.css). Only the height it
   needs to line up with the filter selects beside it belongs here. */
.lp-go{height:44px}
@media (max-width:820px){.lp-filters{grid-template-columns:1fr 1fr}.lp-go{grid-column:1/-1}}

/* collapsible "search by fund house" */
.lp-collapse{max-width:var(--mf-max);margin:22px auto 0;padding:0 30px}
.lp-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(180deg,var(--sun) 0%,var(--brand) 100%);border:0;border-radius:12px;padding:16px 20px;cursor:pointer;
  font:700 15.5px/1 'DM Sans',sans-serif;color:var(--navy);
  box-shadow:0 4px 0 var(--sun-d),0 8px 18px rgba(201,152,42,.28),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .08s,box-shadow .08s}
.lp-toggle:hover{transform:translateY(-1px)}
.lp-toggle:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sun-d),0 3px 8px rgba(201,152,42,.3)}
.lp-toggle .chev{transition:transform .2s;color:var(--navy)}
.lp-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lp-amcwrap{max-height:0;overflow:hidden;transition:max-height .3s ease}
.lp-amcwrap.open{max-height:2400px}
.lp-amcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;padding:16px 2px 4px}
.lp-amc{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;text-decoration:none;
  background:var(--paper2);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-sm);transition:transform .1s}
.lp-amc:hover{transform:translateY(-2px);border-color:#e5d9b8}
.lp-amc .an{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.3}
.lp-amc .ac{font-size:12px;color:var(--brand-d);font-weight:600;white-space:nowrap}

/* generic wide section wrapper for landing prose/lists */
.lp-sec{max-width:var(--mf-max);margin:0 auto;padding:8px 30px}
.lp-sec.pad{padding-top:20px;padding-bottom:20px}
.catgroup{margin:14px 0 4px}
.catgroup h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:19px;letter-spacing:.5px;
  color:var(--brand-d);margin:18px 0 10px}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}

/* SEO prose blocks */
.lp-prose{max-width:var(--mf-max);margin:0 auto;padding:8px 30px 10px}
.lp-prose h2{font-size:27px}
.lp-prose h3{font-family:'DM Sans',sans-serif;font-weight:700;font-size:17px;color:var(--navy);margin:20px 0 6px}
.lp-prose p{font-size:15px;color:var(--ink2);line-height:1.75;max-width:900px}
.lp-cols{columns:2;column-gap:34px}
.lp-cols a{display:block;padding:6px 0;text-decoration:none;color:var(--ink2);font-size:14px;border-bottom:1px solid var(--line);break-inside:avoid}
.lp-cols a:hover{color:var(--brand-d)}
@media (max-width:720px){.lp-cols{columns:1}}
.lp-band{background:linear-gradient(120deg,var(--t-gold),#fff);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:24px}

/* ═══════════════════════════════════════════════════════════════════════════
   3D buttons, brighter accents, screener, curated cards, the 15-min gate
   ═══════════════════════════════════════════════════════════════════════════ */

/* 3D buttons live in mf-header.css — one definition, shared by every page. */

/* screener */
.scr-filters{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end;
  background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--sh-sm);margin:14px 0}
@media(max-width:820px){.scr-filters{grid-template-columns:1fr 1fr}.scr-filters button{grid-column:1/-1}}
.scr-count{font-size:14px;color:var(--ink2);margin:10px 0 6px}
.scr-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-sm);background:var(--paper2)}
table.scr{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;min-width:560px}
table.scr th{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#c8cfe0;text-align:left;
  padding:12px 14px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;position:sticky;top:0}
table.scr th.n{text-align:right}
table.scr th:hover{color:#fff}
table.scr th.asc::after{content:' ▲';font-size:9px} table.scr th.desc::after{content:' ▼';font-size:9px}
table.scr td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.scr td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy)}
table.scr tbody tr:hover{background:var(--t-gold)}
table.scr td a{color:var(--navy);font-weight:600;text-decoration:none}
table.scr td a:hover{color:var(--brand-d)}
table.scr .sub{display:block;font-size:12px;color:var(--mut);font-weight:400}

/* curated "what are you here for" cards on home */
.lp-curated{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:14px}
.curcard{display:block;text-decoration:none;color:inherit;border-radius:14px;padding:20px;position:relative;overflow:hidden;
  background:var(--paper2);border:1px solid var(--line);box-shadow:var(--sh);transition:transform .12s}
.curcard:hover{transform:translateY(-3px)}
.curcard .ic{font-size:26px;margin-bottom:10px;display:block}
.curcard b{display:block;font-size:16px;color:var(--navy);margin-bottom:4px}
.curcard span{font-size:13px;color:var(--mut);line-height:1.5}
.curcard.c1{background:linear-gradient(150deg,#fff8e6,#fff)}
.curcard.c2{background:linear-gradient(150deg,#eaf1ff,#fff)}
.curcard.c3{background:linear-gradient(150deg,#eafaf3,#fff)}
.curcard.c4{background:linear-gradient(150deg,#fdeef0,#fff)}

/* The free-preview timer and the sign-up gate live in mf-gate.css — one
   definition, loaded on every page that can show them. */


/* ═══════════════════════════════════════════════════════════════════════════
   READABILITY PASS — bigger type, darker labels, tighter charts
   ---------------------------------------------------------------------------
   Reverting the earlier shrink. On a page of numbers the labels have to carry
   as much weight as the figures: a metric whose caption is pale grey reads as
   decoration, and the eye skips it. So every label that names a number is now
   near-black rather than muted, and the type is back at the larger scale.
   The charts move the other way — they were taking a whole screen each and
   pushing the numbers below the fold, so their heights and legends come down.
   ═══════════════════════════════════════════════════════════════════════════ */
body{font-size:16px;line-height:1.65}
.mfm{max-width:1240px;padding:24px 28px 60px}

h1{font-size:clamp(30px,4.6vw,44px)}
h2{font-size:26px;margin:38px 0 12px;padding-bottom:9px;color:#0d1424}
h2::after{width:50px;height:3px}
h3.mh{font-size:19px;margin:26px 0 10px;padding:0 0 7px 12px;color:#0d1424}
h3.mh::before{width:4px}
p{max-width:none}

/* labels that name a number: dark, not decorative */
.mc span{font-size:11.5px;color:#1b2436;font-weight:700;letter-spacing:.05em}
.mc b{font-size:23px;color:#0d1424;margin:6px 0 3px}
.mc i{font-size:12px;color:#4a5568;line-height:1.45}
.fx-i span{font-size:11.5px;color:#1b2436;font-weight:700}
.fx-i b{font-size:17px;color:#0d1424}
.fx-i i{font-size:12px;color:#4a5568}
table.rt{font-size:15px}
table.rt th,table.rt td{padding:13px 15px}
table.rt thead th{font-size:11.5px;color:#e8eef6}
table.rt .mean{font-size:13.5px;color:#3d4759}
.note{font-size:13.5px;color:#3d4759}
.flist .nm{font-size:15px} .flist .v{font-size:14px;color:#0d1424}
.flist .vh{font-size:11px;color:#1b2436;font-weight:700}
.faq summary{font-size:15.5px} .faq p{font-size:14.5px}
.tag{font-size:12.5px}
.navmain b{font-size:38px}

/* charts: smaller, so the numbers around them stay on screen */
.ivfig{margin:12px 0 4px}




.ivfig .ivc-donut{max-height:250px;width:100%}
/* the legend column is part of the same SVG, so the whole thing keeps a wide
   box — the ring inside it is now circular because of xMidYMid meet */


.ivfig figcaption{font-size:12.5px;color:#3d4759;max-width:none;margin-top:8px}
/* chart type down a notch so a smaller chart is not crowded */
.ivc-ax{font-size:9.5px} .ivc-val{font-size:10px}
.ivc-lgl{font-size:11.5px} .ivc-lgv{font-size:11.5px}
.ivc-donut .ivc-dc{font-size:26px} .ivc-donut .ivc-dl{font-size:9.5px}
.ivc-stv{font-size:11.5px}

/* fill the width: no half-empty rows of cards */
.mgrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.fx{grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px}
.mgrid.cal{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}

/* Fund basics cards. These lived inside the typography block that was reverted,
   so the strip lost its grid and collapsed into a list of run-on lines. */
.fx{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:11px;margin:10px 0 6px}
.fx-i{background:var(--paper2);border:1px solid var(--line);border-radius:11px;padding:13px 15px;
  box-shadow:var(--sh-sm)}
.fx-i span{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:#1b2436;font-weight:700}
.fx-i b{display:block;font-size:17px;font-weight:700;color:#0d1424;margin:5px 0 3px;line-height:1.25}
.fx-i i{display:block;font-size:12px;font-style:normal;color:#4a5568;line-height:1.4}

/* ── metric tables: horizontal ────────────────────────────────────────────
   Labels across the top, figures in one row beneath. The explanation lives in
   an ⓘ so the table stays scannable; the tip is a plain popover, no library. */
.mtwrap{overflow-x:auto;margin:10px 0 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper2);box-shadow:var(--sh-sm);-webkit-overflow-scrolling:touch}
table.mt{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;min-width:max-content}
table.mt th{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#e8eef6;
  padding:10px 16px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  text-align:right;white-space:nowrap;position:relative}
table.mt th:first-child,table.mt td:first-child{text-align:left;padding-left:18px}
table.mt th:last-child,table.mt td:last-child{padding-right:18px}
table.mt td{padding:15px 16px;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-weight:700;font-size:19px;color:#0d1424;
  font-family:'JetBrains Mono',ui-monospace,monospace}
table.mt td.up{color:var(--up)} table.mt td.dn{color:var(--dn)}

/* the ⓘ — a real button, so it works by keyboard too */
.mi{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:6px;padding:0;
  border:0;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;
  font:700 10px/1 'DM Sans',sans-serif;cursor:help;vertical-align:1px;position:relative}
.mi:hover,.mi:focus-visible,.mi.open{background:var(--brand);color:#17213c;outline:none}
/* The tip is a real element on <body>, not a ::after on the button.
   .mtwrap needs overflow-x:auto to scroll a wide table, and any overflow value
   other than visible clips BOTH axes — so a tooltip drawn above the header row
   was cut off by its own scroller and never appeared. Positioned by JS. */
.mitip{position:absolute;z-index:9999;max-width:280px;background:#0d1424;color:#f2f4f8;
  font:400 12.5px/1.5 'DM Sans',system-ui,sans-serif;padding:10px 13px;border-radius:9px;
  box-shadow:0 12px 32px rgba(0,0,0,.38);pointer-events:none;opacity:0;
  transform:translateY(4px);transition:opacity .14s,transform .14s}
.mitip.show{opacity:1;transform:none}
.mitip::before{content:'';position:absolute;bottom:-5px;left:var(--ax,50%);margin-left:-5px;
  border:5px solid transparent;border-top-color:#0d1424;border-bottom:0}

/* ── peer comparison table ────────────────────────────────────────────────
   Return next to the risk that produced it. The window switch re-labels one
   column rather than reloading, because comparing 1y and 3y should cost a
   click, not a page load. */
.pcmp{margin:14px 0 8px}
.pcmp-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.pcmp-lbl{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#1b2436;font-weight:700}
.pcmp-seg{display:inline-flex;background:var(--paper2);border:1px solid var(--line2);border-radius:9px;padding:3px;gap:2px}
.pseg{border:0;background:none;cursor:pointer;padding:7px 15px;border-radius:7px;
  font:600 13px/1 'DM Sans',sans-serif;color:#4a5568;transition:.14s}
.pseg:hover{color:#0d1424}
.pseg.on{background:linear-gradient(180deg,var(--brand-lt),var(--brand));color:#17213c;
  box-shadow:0 2px 0 #d9a520,inset 0 1px 0 rgba(255,255,255,.5)}
.pcmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-sm);background:var(--paper2)}
table.pcmp-t{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;min-width:720px}
table.pcmp-t th{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#e8eef6;
  padding:11px 13px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;text-align:left;white-space:nowrap}
table.pcmp-t th.n{text-align:right}
table.pcmp-t th.sortable{cursor:pointer;user-select:none}
table.pcmp-t th.sortable:hover{color:#fff}
table.pcmp-t th.asc i::after{content:' ▲';font-size:8px} table.pcmp-t th.desc i::after{content:' ▼';font-size:8px}
table.pcmp-t td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:middle}

table.pcmp-t tbody tr:hover td{background:var(--t-gold)}
table.pcmp-t tr.me td{background:var(--t-gold);box-shadow:inset 3px 0 0 var(--brand)}
table.pcmp-t td.s a{color:#0d1424;font-weight:600;text-decoration:none;font-size:14px}
table.pcmp-t td.s a:hover{color:var(--brand-d)}
table.pcmp-t td.s span{display:block;font-size:11.5px;color:#4a5568;margin-top:2px}
table.pcmp-t td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:#0d1424;
  font-family:'JetBrains Mono',ui-monospace,monospace;white-space:nowrap}
table.pcmp-t td.n.up{color:var(--up)} table.pcmp-t td.n.dn{color:var(--dn)}

/* ── charts: entrance animation + hover ───────────────────────────────────
   The bars grow and the lines draw once, on first paint. Motion here is not
   decoration: a bar that grows from zero tells you which direction the scale
   runs before you have read the axis. Respects prefers-reduced-motion. */
@keyframes ivcGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ivcWide{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ivcDraw{from{stroke-dashoffset:var(--len,2000)}to{stroke-dashoffset:0}}
@keyframes ivcFade{from{opacity:0}to{opacity:1}}
.ivc-bars rect{transform-origin:center bottom;animation:ivcGrow .55s cubic-bezier(.2,.8,.3,1) both}
.ivc-stack rect{transform-origin:left center;animation:ivcWide .6s cubic-bezier(.2,.8,.3,1) both}
.ivc-donut path{animation:ivcFade .5s ease both}
.ivc-line .ivc-stroke{stroke-dasharray:3000;animation:ivcDraw 1.1s cubic-bezier(.6,0,.35,1) both}
.ivc-dd .ivc-ddfill{animation:ivcFade .7s .15s ease both}
/* stagger so the eye follows the series rather than seeing it appear at once */
.ivc-bars rect:nth-child(2){animation-delay:.04s} .ivc-bars rect:nth-child(3){animation-delay:.08s}
.ivc-bars rect:nth-child(4){animation-delay:.12s} .ivc-bars rect:nth-child(5){animation-delay:.16s}
.ivc-bars rect:nth-child(6){animation-delay:.20s} .ivc-bars rect:nth-child(7){animation-delay:.24s}
.ivc-bars rect:nth-child(8){animation-delay:.28s} .ivc-bars rect:nth-child(9){animation-delay:.32s}
/* hover: the segment you are pointing at lifts out of the rest */
.ivc-donut path,.ivc-stack rect,.ivc-bars rect{transition:opacity .15s,filter .15s;cursor:pointer}
.ivc-donut:hover path,.ivc-stack:hover rect,.ivc-bars:hover rect{opacity:.45}
.ivc-donut path:hover,.ivc-stack rect:hover,.ivc-bars rect:hover{opacity:1;filter:brightness(1.12)}
@media (prefers-reduced-motion:reduce){
  .ivc-bars rect,.ivc-stack rect,.ivc-donut path,.ivc-line .ivc-stroke,.ivc-dd .ivc-ddfill{animation:none}
}

/* ══ comparison tables — fund vs benchmark vs category ═══════════════════
   The reference layout puts the three rows in one table so the eye compares
   down a column instead of across two blocks. Wide, so it scrolls in its own
   box; the fund's own row is pinned visually because it is the one being read. */
.cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0 6px;
  border:1px solid #dbe3ee;border-radius:12px;background:#fff}
.cmp3{width:100%;border-collapse:collapse;font-size:15.5px;min-width:760px}
.cmp3 thead th{background:#f4f7fc;color:#0f172a;font-weight:700;font-size:14px;
  padding:13px 12px;text-align:right;border-bottom:2px solid #dbe3ee;white-space:nowrap;
  position:relative}
.cmp3 thead th.s{text-align:left;min-width:230px}
.cmp3 tbody th.s{text-align:left;font-weight:700;color:#0f172a;padding:14px 12px;
  font-size:15px;line-height:1.35;border-bottom:1px solid #eef2f7}
.cmp3 tbody th.s span{display:block;font-weight:500;color:#64748b;font-size:12.5px;margin-top:2px}
.cmp3 td{text-align:right;padding:14px 12px;font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:650;color:#0f172a;border-bottom:1px solid #eef2f7;white-space:nowrap}

.cmp3 tr.me{background:#fbfcfe}
.cmp3 tr.me td{font-weight:750}
.cmp3 .up{color:#15803d}
.cmp3 .dn{color:#b91c1c}
.cmp3 .z{color:#94a3b8;font-weight:500}

/* ══ interactive chart ═══════════════════════════════════════════════════ */
.ivchart{margin:16px 0 8px;border:1px solid #dbe3ee;border-radius:14px;background:#fff;padding:14px}
.ivc-modes{display:flex;flex-wrap:wrap;gap:0;border:1px solid #c8d4e6;border-radius:9px;
  overflow:hidden;width:max-content;max-width:100%;margin-bottom:12px}
.ivc-modes button{appearance:none;border:0;border-right:1px solid #c8d4e6;background:#fff;
  color:#1e3a8a;font:600 14px/1 inherit;padding:11px 16px;cursor:pointer;white-space:nowrap}
.ivc-modes button:last-child{border-right:0}
.ivc-modes button:hover{background:#eff4fb}
.ivc-modes button.on{background:#1e3a8a;color:#fff}
.ivc-periods{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ivc-periods button{appearance:none;border:1px solid #c8d4e6;border-radius:7px;background:#fff;
  color:#1e3a8a;font:600 13px/1 inherit;padding:8px 13px;cursor:pointer}
.ivc-periods button:hover{background:#eff4fb}
.ivc-periods button.on{background:#1e3a8a;color:#fff;border-color:#1e3a8a}
.ivc-rollsel{margin-bottom:10px;font-size:14px;color:#0f172a;font-weight:600}
.ivc-rollsel select{margin-left:8px;padding:7px 10px;border:1px solid #c8d4e6;border-radius:7px;
  font:600 14px/1 inherit;color:#0f172a;background:#fff}
.ivc-legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.ivc-lg{appearance:none;border:1px solid #e2e8f0;background:#fff;border-radius:20px;
  padding:6px 13px 6px 9px;font:600 13.5px/1 inherit;color:#0f172a;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;max-width:100%}
.ivc-lg i{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.ivc-lg.off{opacity:.4;text-decoration:line-through}
.ivc-plot{position:relative}
.ivc-plot svg{width:100%;display:block;overflow:visible}
.ivc-ax{font-size:12px;fill:#475569;font-weight:600}
.ivc-bar{transition:opacity .15s}
.ivc-bar:hover{opacity:1}
.ivc-tip{position:absolute;z-index:20;background:#0f172a;color:#fff;border-radius:9px;
  padding:9px 12px;font-size:13px;line-height:1.5;pointer-events:none;
  box-shadow:0 8px 22px rgba(15,23,42,.28);max-width:280px}
.ivc-tip b{margin-left:8px;font-variant-numeric:tabular-nums}
.ivc-tip em{display:block;font-style:normal;color:#94a3b8;font-size:12px;margin-bottom:5px}
.ivc-tip span{display:flex;align-items:center;gap:6px;justify-content:space-between;margin-top:3px}
.ivc-tip span i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.ivc-cap{margin:10px 2px 0;font-size:13.5px;line-height:1.6;color:#475569}
@media(max-width:640px){
  .ivc-modes{width:100%}
  .ivc-modes button{flex:1;padding:11px 8px;font-size:13px}
  .cmp3{font-size:14.5px}
}

/* ══ portfolio: big numbers + two-column aggregates|concentration ════════ */
.bigrow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 10px}
.bigrow .bigstat{flex:1 1 120px;min-width:118px;background:#f8fafd;border:1px solid #e5ebf4;
  border-radius:12px;padding:16px 14px;text-align:center}
.bigrow.tight .bigstat{padding:13px 10px}
.bigstat b{display:block;font-size:27px;font-weight:750;color:#0f172a;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.bigstat span{display:block;margin-top:5px;font-size:13.5px;font-weight:600;color:#475569}
@media(max-width:640px){ .bigstat b{font-size:22px} .bigrow .bigstat{min-width:96px;flex:1 1 96px} }

.pf2{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start;margin-top:6px}
@media(max-width:900px){ .pf2{grid-template-columns:1fr;gap:8px} }
.pfcol{min-width:0}
.pfcol .mh{margin-top:18px}
.ivfig.sm svg{max-height:230px}

.conc{width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:15px;
  border:1px solid #dbe3ee;border-radius:12px;overflow:hidden;background:#fff}
.conc th{text-align:left;font-weight:600;color:#334155;padding:11px 13px;font-size:14.5px;
  border-bottom:1px solid #eef2f7;position:relative}
.conc td{text-align:right;padding:11px 13px;font-weight:700;color:#0f172a;font-size:15.5px;
  font-variant-numeric:tabular-nums;border-bottom:1px solid #eef2f7;white-space:nowrap}

.conc tr:nth-child(even){background:#fafbfd}

/* Scrolling a wide comparison table away from its own row labels leaves columns
   of numbers belonging to nobody. The name column stays put. */
.cmp3 thead th.s,.cmp3 tbody th.s{position:sticky;left:0;z-index:2;background:#fff}
.cmp3 thead th.s{background:#f4f7fc;z-index:3}
.cmp3 tr.me th.s{background:#fbfcfe}
.cmp3 th.s::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:#dbe3ee}

/* A scheme that stopped publishing years ago must say so above everything else;
   the numbers below it are history, not a price anyone can act on. */
.dormant{margin:14px 0 18px;padding:14px 16px;border-radius:12px;font-size:15.5px;line-height:1.6;
  background:#fff7ed;border:1px solid #fdba74;color:#7c2d12}
.dormant b{color:#7c2d12}

/* ══ section bar — jump anywhere without scrolling past four screens ══════ */
.secbar{position:sticky;top:0;z-index:40;margin:6px 0 18px;
  background:var(--paper2);border:1px solid var(--line2);border-radius:12px;
  box-shadow:var(--sh-sm)}
.secbar-in{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:4px}
.secbar-in::-webkit-scrollbar{display:none}
.secbar a{flex:0 0 auto;padding:11px 17px;border-radius:9px;text-decoration:none;
  font-weight:650;font-size:14.5px;color:var(--ink2);white-space:nowrap;
  transition:background .15s,color .15s}
.secbar a:hover{background:var(--navy-soft);color:var(--navy)}
.secbar a.on{background:var(--navy);color:#fff}
@media(max-width:640px){ .secbar a{padding:10px 13px;font-size:13.5px} }

/* ══ plan / option switcher — one fund, its four filings ═════════════════ */
.vswitch{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;
  margin:4px 0 14px;padding:14px 16px;background:var(--paper2);
  border:1px solid var(--line2);border-radius:12px}
.vsgrp{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.vsl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);margin-right:2px}
.vsb{padding:8px 15px;border:1px solid var(--line2);border-radius:8px;
  text-decoration:none;font-weight:650;font-size:14.5px;color:var(--ink2);
  background:#fff;transition:all .15s}
.vsb:hover{border-color:var(--navy);color:var(--navy)}
.vsb.on{background:var(--navy);border-color:var(--navy);color:#fff}
.vsb.ghost{background:var(--t-gold);border-color:var(--brand);color:var(--brand-d)}
.vsb.ghost:hover{background:var(--brand);color:#fff}
.vsnote{margin:-6px 2px 16px;font-size:13.5px;color:var(--mut);line-height:1.6}

/* the new tables/charts inherit the deeper palette rather than their own greys */
.cmpwrap,.ivchart,.conc{border-color:var(--line2)}
.cmp3 thead th{background:var(--navy-soft);color:var(--ink);border-bottom-color:var(--line2)}
.cmp3 tbody th.s,.cmp3 td{border-bottom-color:var(--line)}
.cmp3 th.s::after{background:var(--line2)}
.cmp3 tr.me{background:var(--t-gold)}
.cmp3 tr.me th.s{background:var(--t-gold)}
.cmp3 .up{color:var(--up)} .cmp3 .dn{color:var(--dn)}
.bigrow .bigstat{background:var(--t-blue);border-color:var(--line2)}
.bigstat b{color:var(--ink)} .bigstat span{color:var(--ink2)}
.conc th{color:var(--ink2);border-bottom-color:var(--line)}
.conc td{color:var(--ink);border-bottom-color:var(--line)}
.conc tr:nth-child(even){background:var(--navy-soft)}
.ivc-modes button,.ivc-periods button{border-color:var(--line2);color:var(--navy)}
.ivc-modes button.on,.ivc-periods button.on{background:var(--navy);border-color:var(--navy)}
.ivc-ax{fill:var(--ink2)}

/* The category explainer earns its keep with search engines, not with a reader
   who came for one fund. Folded away, still in the DOM, still crawlable. */
.seoblock{margin:26px 0 8px;border-top:1px solid var(--line2);padding-top:6px}
.seoblock>summary{cursor:pointer;list-style:none;padding:8px 0}
.seoblock>summary::-webkit-details-marker{display:none}
.seoblock>summary h2{display:inline;border:0;padding:0;margin:0}
.seoblock>summary::after{content:'  ▾';color:var(--mut);font-weight:700}
.seoblock[open]>summary::after{content:'  ▴'}
.vsend{margin-left:auto}
.vsb.card{background:var(--navy);border-color:var(--navy);color:#fff}
.vsb.card:hover{background:var(--brand);border-color:var(--brand);color:var(--navy)}

/* ══ hero row — the price and what the fund IS, side by side ══════════════
   The NAV card used to own a full-width row with two thirds of it empty while
   the basics grid began a screen lower. Together they cost one fold instead of
   two, and the two things a reader checks first are checked in one glance. */
.herorow{display:grid;grid-template-columns:minmax(230px,.9fr) 2.6fr;gap:16px;
  align-items:start;margin:14px 0 8px}
.herorow .navbox{margin:0;height:100%}
.herorow .fx{margin:0}
@media(max-width:860px){ .herorow{grid-template-columns:1fr} }

/* ══ every table gets a rule between its rows ════════════════════════════
   Rows without a separator run together when the eye tracks sideways across
   nine columns of numbers — the exact motion these tables are built for. */
.rt,.mt,.cmp3,.conc,.flist{border-collapse:collapse}
.rt tbody tr td,.rt tbody tr th,
.mt tbody tr td,.mt tbody tr th{border-bottom:1px solid var(--line)}
.rt tbody tr:last-child td,.rt tbody tr:last-child th,

.rt thead th,.mt thead th{border-bottom:2px solid var(--line2)}
.cmp3 tbody tr td,.cmp3 tbody tr th{border-bottom:1px solid var(--line)}
.cmp3 tbody tr:hover td,.cmp3 tbody tr:hover th.s{background:var(--navy-soft)}
.conc tr th,.conc tr td{border-bottom:1px solid var(--line)}
.peert tbody tr td,.peert tbody tr th{border-bottom:1px solid var(--line)}

/* ══ compact the controls ════════════════════════════════════════════════
   The switcher, section bar and chart controls were sized like content. They
   are furniture: they should be legible and reachable, and then get out of the
   way of the numbers people came for. Roughly a third of their height back. */
.vswitch{gap:10px 18px;padding:8px 11px;margin:2px 0 10px}
.vsl{font-size:10.5px}
.vsb{padding:5px 11px;font-size:13.5px;border-radius:7px}
.vsnote{margin:-4px 2px 12px;font-size:12.5px}

.secbar{margin:4px 0 14px}
.secbar-in{padding:3px}
.secbar a{padding:7px 13px;font-size:13.5px;border-radius:7px}

.ivchart{padding:10px;margin:12px 0 6px}
.ivc-modes{margin-bottom:8px;border-radius:8px}
.ivc-modes button{padding:7px 13px;font-size:13.5px}
.ivc-periods{gap:5px;margin-bottom:8px}
.ivc-periods button{padding:5px 10px;font-size:12.5px;border-radius:6px}
.ivc-rollsel{margin-bottom:8px;font-size:13px}
.ivc-rollsel select{padding:5px 8px;font-size:13px}
.ivc-legend{gap:6px;margin-bottom:4px}
.ivc-lg{padding:4px 11px 4px 8px;font-size:12.5px}
.ivc-cap{margin-top:7px;font-size:12.5px}

.bigrow{gap:8px;margin:10px 0 8px}
.bigrow .bigstat{padding:11px 10px;min-width:104px;flex:1 1 104px}
.bigstat b{font-size:22px}
.bigstat span{font-size:12.5px;margin-top:3px}
.herorow{gap:12px;margin:10px 0 6px}

.cmp3{font-size:15px}
.cmp3 thead th{padding:9px 11px;font-size:13px}
.cmp3 tbody th.s{padding:10px 11px;font-size:14.5px}
.cmp3 td{padding:10px 11px;font-size:15px}
.conc th,.conc td{padding:8px 11px}

/* ══ anything you can change looks changeable ════════════════════════════
   A control that is styled like a label gets read like a label. Everything the
   reader can actually operate — plan, option, period, chart mode, series
   toggle, rolling window — carries the same warm tint and the same border, so
   "this responds to a click" is one visual rule rather than six. */
.vsb,
.ivc-modes button,
.ivc-periods button,
.ivc-lg,
.ivc-rollsel select,
.secbar a{background:var(--t-gold);border-color:var(--brand-lt)}
.vsb:hover,
.ivc-modes button:hover,
.ivc-periods button:hover,
.ivc-lg:hover,
.secbar a:hover{background:#f5e6c0;border-color:var(--brand);color:var(--brand-d)}
/* the active one drops the tint and goes solid, so state stays unmistakable */
.vsb.on,.ivc-modes button.on,.ivc-periods button.on,.secbar a.on{
  background:var(--navy);border-color:var(--navy);color:#fff}
.vsb.card{background:var(--navy);border-color:var(--navy);color:#fff}
.vsb.card:hover{background:var(--brand);border-color:var(--brand);color:var(--navy)}
.secbar a{border:1px solid var(--brand-lt)}

/* ══ tighten the vertical rhythm ═════════════════════════════════════════
   Section gaps were set for a page of prose. This is a page of tables, and the
   whitespace between them had grown to where a reader scrolls past emptiness
   between every two facts. Roughly a third off the gaps, nothing off the text. */
h2{margin:22px 0 9px !important;padding-bottom:6px !important}
h2:first-of-type{margin-top:10px !important}
h3.mh{margin:16px 0 7px !important;padding-bottom:5px !important}
p{margin:0 0 9px}
.note{margin:6px 0 8px;line-height:1.55}
.rule{margin:8px 0 10px}
table.rt{margin:5px 0 8px}
.ivfig{margin:8px 0 4px}
.ivfig figcaption{margin-top:5px}
.cmpwrap{margin:9px 0 5px}
.mtwrap{margin:8px 0 5px}
.holdlist{margin:8px 0}
.fx{gap:8px}
.fx-i{padding:9px 11px}
.pf2{gap:16px;margin-top:2px}
.pfcol .mh{margin-top:12px !important}
.seoblock{margin:18px 0 6px;padding-top:2px}
.dormant{margin:10px 0 12px;padding:11px 13px}
details.seoblock p{margin-bottom:8px}
/* the first thing under a heading should sit right under it */
h2 + p,h3.mh + p,h2 + .note,h3.mh + .note{margin-top:0}

/* ── chart sizing ────────────────────────────────────────────────────────
   No max-height anywhere: each chart's viewBox is now cut to the shape it
   should be on the page, and preserveAspectRatio keeps it that shape. Height
   follows from width, which is what "responsive" means for a drawing. */
.ivfig .ivc{width:100%;height:auto;display:block}
.ivfig .ivc-donut{max-height:none}
.ivfig.sm svg{max-height:none}

/* ══ density pass ════════════════════════════════════════════════════════
   Measured before writing any of this. The page ran 8,264px, of which the
   Risk/NAV section was 2,919 and Portfolio 2,206. The height was never in the
   gaps between sections — those totalled 372px across the whole document — it
   was inside the blocks: a 9-row table standing 384px tall is 42px a row for a
   line of 15px text, and three charts were 354px each.

   So this trims rows, cells and figures, not the rhythm. */

/* tables — the single biggest win, they repeat 40+ times down the page */
.cmp3{font-size:14.5px}
.cmp3 thead th{padding:7px 10px;font-size:12px}
.cmp3 tbody th.s{padding:7px 10px;font-size:14px;line-height:1.25}
.cmp3 tbody th.s span{font-size:11.5px;margin-top:1px}
.cmp3 td{padding:7px 10px;font-size:14.5px}
.conc th,.conc td{padding:5px 10px;font-size:14px;line-height:1.3}
.conc th{font-size:13.5px}
table.rt{font-size:14px}
table.rt th,table.rt td{padding:6px 9px !important;line-height:1.3}
.pcmp-t{font-size:13.5px}
.pcmp-t th,.pcmp-t td{padding:6px 8px !important;line-height:1.25}
.mt th,.mt td{padding:6px 9px}

/* figures — a caption should sit under its chart, not float below it */
.ivfig{margin:6px 0 2px}
.ivfig figcaption{margin-top:3px;font-size:12.5px;line-height:1.45}
.ivchart{padding:8px;margin:8px 0 4px}
.ivc-cap{margin-top:5px;font-size:12px;line-height:1.45}

/* the fact tiles and stat cards */
.fx{gap:6px}
.fx-i{padding:7px 9px}
.fx-i span{font-size:10px}
.fx-i b{font-size:13.5px;line-height:1.25}
.fx-i i{font-size:10.5px}
.herorow{gap:10px;margin:8px 0 4px}
.navbox{padding:12px 14px}
.navbox .navmain b{font-size:30px;line-height:1.1}
.bigrow{gap:6px;margin:8px 0 6px}
.bigrow .bigstat{padding:9px 8px}
.bigstat b{font-size:20px}
.bigstat span{font-size:12px;margin-top:2px}

/* holdings list and peer block */
.holdlist{margin:6px 0}
.holdlist li{padding:6px 9px !important}
.pcmp{margin:8px 0 6px !important}
.pf2{gap:14px}

/* section rhythm, one more notch */
h2{margin:16px 0 7px !important;padding-bottom:5px !important}
h3.mh{margin:12px 0 5px !important;padding-bottom:4px !important}
p{margin-bottom:7px}
.note{margin:4px 0 6px;font-size:12.5px;line-height:1.5}
section.faq{margin-top:16px !important}
.seoblock{margin:14px 0 4px}

/* ── the donut was the last big offender ─────────────────────────────────
   Its viewBox is 640×300 — a circle on the left, its legend on the right. Let
   it fill a 1180px column and it scales 1.84×, standing 576px tall for a chart
   whose content is 300. Capped at its natural width it costs 300, and the
   circle is exactly as readable. */
.ivfig .ivc-donut{max-width:660px;margin:0 auto}

/* Chart mode and period buttons sat on two rows for no reason but being two
   divs. Side by side they cost one row instead of two. */
.ivc-modes,.ivc-periods{display:inline-flex;vertical-align:middle}
.ivc-modes{margin-right:12px;margin-bottom:6px}
.ivc-periods{margin-bottom:6px}

/* ── the name leads ──────────────────────────────────────────────────────
   The fund name is what a reader arrives to confirm, so it sits above
   everything; the breadcrumb is context for it and reads second, quieter. */
h1.fundh1{margin:10px 0 4px}
h1.fundh1 + .crumbs,
h1.fundh1 + nav.crumbs{margin:0 0 10px;font-size:12.5px;opacity:.85}

/* ══ a rule under every row, in every table ══════════════════════════════
   The earlier attempt stripped the border from `tr:last-child` — tidy in
   principle, wrong here: the .mt metric tables carry a SINGLE body row, so that
   row was both first and last and ended up with no line at all. Four tables on
   this page had none. Every row keeps its rule now, including the last, which
   also closes each table off as a block. */
table th,table td{border-bottom:1px solid var(--line)}
table thead th{border-bottom:2px solid var(--line2)}
table tbody tr:last-child > td,
table tbody tr:last-child > th{border-bottom:1px solid var(--line)}
.mt th,.mt td{border-bottom:1px solid var(--line)}
.mt thead th{border-bottom:2px solid var(--line2)}
/* the sticky first column draws its own edge; keep its rule too */
.cmp3 th.s{border-bottom:1px solid var(--line)}

/* the two forces on one holding: what the manager did, what the market did */
.holdlist .hsub{display:block;font-style:normal;font-size:11.5px;color:var(--mut);
  letter-spacing:.01em;margin-top:2px;font-weight:500}
h3.mh .hsub{display:inline;font-size:12px;font-weight:500;margin-left:6px}
.holdlist .hpct{text-align:right;line-height:1.5}

/* ── what the manager did: headline cards + the activity ledger ─────────────
   The month used to be four loose lists of names. A reader trying to answer
   "did the manager add, or did the price just rise" had to hold two figures in
   their head from different lines. As a table the two live in adjacent columns
   and the comparison costs nothing. Excel-ish on purpose — ruled cells, a hard
   header, right-aligned tabular figures — because that is the grammar people
   already read portfolio activity in. */
.actsum{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin:16px 0 14px}
.acard{background:var(--paper2);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px 10px;box-shadow:var(--sh-sm);border-left:4px solid var(--line2)}
.acard.up{border-left-color:var(--up);background:linear-gradient(180deg,#f7fdfb,var(--paper2) 70%)}
.acard.dn{border-left-color:var(--dn);background:linear-gradient(180deg,#fefaf9,var(--paper2) 70%)}
.acard .k{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut);font-weight:700;line-height:1.3}
.acard b{display:block;font-size:22px;line-height:1.15;margin:4px 0 2px;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.acard.up b{color:var(--up)} .acard.dn b{color:var(--dn)}
.acard i{display:block;font-style:normal;font-size:11px;color:var(--mut);line-height:1.35}

.actcash{margin:0 0 16px;font-size:13.5px;color:var(--ink2);background:var(--t-blue);
  border:1px solid var(--navy-soft);border-radius:8px;padding:9px 13px}
.actcash b{font-variant-numeric:tabular-nums;color:var(--ink)}
.actcash span{color:var(--mut);font-size:12.5px}

.acttab-wrap{overflow-x:auto;border:1px solid var(--line2);border-radius:10px;
  box-shadow:var(--sh-sm);background:var(--paper2);margin:0 0 12px}
table.acttab{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;min-width:820px}
table.acttab thead th{position:sticky;top:0;z-index:2;
  background:linear-gradient(120deg,var(--navy),var(--navy2));color:#eef3fa;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  text-align:left;padding:10px 12px;line-height:1.3;border-right:1px solid rgba(255,255,255,.12)}
table.acttab thead th.n{text-align:right}
table.acttab thead th:last-child{border-right:none}
table.acttab td{padding:8px 12px;border-bottom:1px solid var(--line);
  border-right:1px solid #efe9dd;vertical-align:middle}
table.acttab td:last-child{border-right:none}
table.acttab tbody tr:nth-child(even) td{background:#fbf8f1}
table.acttab tbody tr:hover td{background:var(--t-gold)}
table.acttab td.s{font-weight:600;color:var(--ink);white-space:nowrap;max-width:320px;
  overflow:hidden;text-overflow:ellipsis}
table.acttab td.a{font-size:12px;color:var(--mut);white-space:nowrap}
table.acttab td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
table.acttab td.n.v{font-weight:700}
table.acttab .up{color:var(--up);font-weight:700}
table.acttab .dn{color:var(--dn);font-weight:700}
table.acttab .z{color:#9aa2b1}

/* group bands — the four kinds of decision, each its own colour rail */
/* A solid bar, the way a spreadsheet marks a section. White type needs a ground
   dark enough to carry it, so the colour lives in one 32px strip instead of
   washing over every row beneath it — which is what made the earlier tinted
   versions read as heavy. */
table.acttab tr.band th{text-align:left;padding:9px 12px;font-weight:600;font-size:12.5px;
  color:#fff;background:var(--navy2);border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2)}
table.acttab tbody.g-new tr.band th,table.acttab tbody.g-buy tr.band th{
  background:#0a5f58;border-color:#0a5f58}
table.acttab tbody.g-sell tr.band th,table.acttab tbody.g-exit tr.band th{
  background:#a52b22;border-color:#a52b22}
table.acttab tr.band em{font-style:normal;color:rgba(255,255,255,.85);font-size:12px;margin-left:8px}
table.acttab tr.band .cnt{float:right;font-variant-numeric:tabular-nums;color:#fff;
  font-size:11.5px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:1px 9px}
/* No chip inside the band. Once the band itself went solid, a rounded pill in a
   lighter shade of the same colour read as a smudge — and it was saying what the
   band already said. The label is simply the band's own text now. */
table.acttab tr.band .bl{font-weight:800;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:#fff}
table.acttab tbody.g-new td,table.acttab tbody.g-buy td{box-shadow:inset 3px 0 0 -1px rgba(10,95,88,.14)}
table.acttab tbody.g-sell td,table.acttab tbody.g-exit td{box-shadow:inset 3px 0 0 -1px rgba(165,43,34,.14)}
table.acttab tbody td:not(:first-child){box-shadow:none}

@media(max-width:640px){
  .actsum{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px}
  .acard b{font-size:18px}
  table.acttab{font-size:12.5px;min-width:740px}
  table.acttab td,table.acttab thead th{padding:7px 9px}
}
table.acttab thead th em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.04em;
  color:#a9bad6;font-weight:600;text-transform:none;margin-top:1px}
table.acttab td.s{max-width:none}

/* On a phone the numbers live off the right edge. Pinning the stock name means
   a reader scrolling to "change in price" can still see which stock it belongs
   to — without that the columns are just figures with no subject. */
.acthint{display:none;margin:0 0 6px;font-size:12px;color:var(--mut)}
table.acttab td.s,table.acttab thead th.s{position:sticky;left:0;z-index:1;background:var(--paper2)}
table.acttab thead th.s{z-index:3;background:var(--navy)}
table.acttab tbody tr:nth-child(even) td.s{background:#fbf8f1}
table.acttab tbody tr:hover td.s{background:var(--t-gold)}
table.acttab td.s{box-shadow:2px 0 4px -2px rgba(13,21,38,.16)}
@media(max-width:720px){
  .acthint{display:block}
  table.acttab td.s,table.acttab thead th.s{max-width:168px;min-width:150px}
}

/* ── the hero, two columns ─────────────────────────────────────────────────
   The right half was empty navy. What fills it is a thin panel, not a card of
   copy: the mark set in the header's own classes, who builds it, and the way
   into every tool. Softened at the edges and lit from the top-left so it sits
   on the navy instead of being cut out of it — a flat rectangle read as a
   placeholder. */
.hero-lp .wrap.hero-two{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(290px,.72fr);
  gap:36px;align-items:center;padding:40px 30px 46px}
.hero-card{border-radius:18px;padding:16px 18px 17px;
  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,.24)}
/* the brand, borrowed wholesale from the header */
.hero-card .hc-brand{display:inline-flex;text-decoration:none}
.hero-card .hc-brand .ivwm{height:30px}
.hero-card .hc-pow{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8ea0ba;
  font-family:'JetBrains Mono',ui-monospace,monospace;margin:7px 0 14px;
  padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.10)}
.hero-card .hc-pow b{color:#c8cfe0;font-weight:600;letter-spacing:.06em}
.hero-card .ivnd-row{gap:6px}
.hero-card .ivnd-top{padding:7px 11px;font-size:11.5px;border-radius:9px}
@media(max-width:1000px){
  .hero-lp .wrap.hero-two{grid-template-columns:1fr;gap:28px}
}


/* ── why every fund page was 1,179px wide on a phone ──────────────────────
   mf-header.css makes <body> a flex column for the sticky footer. A flex item
   defaults to min-width:auto, which means it refuses to shrink below the
   widest thing inside it — and inside .mfm are comparison tables carrying
   min-width:760px and holdings tables at max-content.

   Those tables are not the bug: each already sits in its own scrolling
   wrapper (.cmpwrap, .mtwrap, .pcmp-scroll), which is exactly right. The bug
   is that the wrappers could not shrink either, so instead of the tables
   scrolling inside a 375px page, the page itself grew to fit the tables and
   every heading and paragraph on it was dragged off-screen with them.

   min-width:0 on the chain is the whole fix. The wrappers can now be narrow,
   and the tables scroll inside them the way they were always meant to. */
/* min-width:0 alone was not enough. As a flex item with width:auto, <main>
   was still being sized to its own fit-content width — 1,179px — rather than
   to the 375px container, and every heading inside it was dragged along.
   Forcing width:100% settles it: the max-width above still caps the column at
   1240px on a desktop, and margin:0 auto still centres it.

   Proof it was never the content: pinning main to 375px and re-measuring every
   descendant found zero elements overflowing. The tables shrink and scroll
   inside their wrappers exactly as they were built to. */
main.mfm{ width:100%; min-width:0 }
.mfm > *{ min-width:0 }
.cmpwrap, .mtwrap, .pcmp-scroll, .scrollx, .tblwrap{ min-width:0; max-width:100% }

/* the same trap one level down: a grid or flex child holding a wide table */
.herorow > *, .pfcol, .fx, .navbox{ min-width:0 }

/* long scheme names and slugs should wrap rather than push the page wide */
.fundh1, .crumbs{ overflow-wrap:anywhere }