/* ===========================================================================
   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:#17213c; --ink2:#3b4664; --mut:#727b90;
  --line:#ece6d8; --line2:#ddd4c1;
  --paper:#f6f2e9;          /* warm cream page — white cards float on it   */
  --paper2:#ffffff;         /* cards are now white, not grey-on-grey       */
  --brand:#c9982a; --brand-d:#8a6a15; --brand-lt:#e8b84b;
  --navy:#17213c; --navy2:#243256; --navy-soft:#eef1f7;
  --up:#0f766e; --up-bg:#e9faf5; --dn:#c0362c; --dn-bg:#fdf0ee;
  /* 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:#fdf8ec; --t-blue:#f0f5fb; --t-red:#fdf3f1; --t-green:#edfbf6;
  --sh:0 1px 2px rgba(23,33,60,.05), 0 6px 20px rgba(23,33,60,.06);
  --sh-sm:0 1px 2px rgba(23,33,60,.04), 0 2px 8px rgba(23,33,60,.05);
  --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 tbody tr:last-child td{border-bottom:0}
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{max-height:260px}
.ivfig .ivc-line{max-height:210px}
.ivfig .ivc-dd{max-height:150px}
.ivfig .ivc-stack{max-height:88px}
.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 .ivc-bars{max-height:200px}
.ivfig .ivc-range{max-height:76px}
.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:last-child td{border-bottom:0}
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 tbody tr:last-child td,.cmp3 tbody tr:last-child th{border-bottom:0}
.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:last-child th,.conc tr:last-child td{border-bottom:0}
.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}