/* Metric-matched fallback. PageSpeed attributed 0.329 of a 0.332 desktop CLS to the web fonts:
   font-display:swap paints text in the fallback, then the real face arrives with different
   metrics and every line reflows. Hanken Grotesk measures ascent 100%, descent 30.3%,
   lineGap 0, avg char width 0.545em (read from the woff2 with fontTools). Arial is 90.53% /
   21.19% / 0.5439em, so overriding those three and nudging size-adjust to 100.2% makes the
   fallback occupy the SAME box. The swap then changes glyph shapes without moving anything.
   This keeps the brand font — unlike font-display:optional, which fixes CLS by not using it. */
@font-face{font-family:'Hanken Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');ascent-override:100%;descent-override:30.3%;line-gap-override:0%;size-adjust:100.2%}@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/hanken-grotesk-400.woff2') format('woff2')}@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/hanken-grotesk-500.woff2') format('woff2')}@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/hanken-grotesk-600.woff2') format('woff2')}@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/hanken-grotesk-700.woff2') format('woff2')}@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/hanken-grotesk-800.woff2') format('woff2')}

body{margin:0;font-family:'Hanken Grotesk','Hanken Fallback',sans-serif;background:var(--bg);color:var(--text);font-variant-numeric:tabular-nums;
--bg:#f6f7f9;--card:#ffffff;--border:#e6e8ec;--text:#16181c;--text2:#16181c;--text3:#16181c;
--accent:oklch(0.5 0.125 252);--accent2:oklch(0.44 0.12 252);--tint:oklch(0.5 0.125 252 / 0.09);
--green:oklch(0.6 0.14 152);--green-t:oklch(0.6 0.14 152 / 0.12);--red:oklch(0.58 0.18 27);--red-t:oklch(0.58 0.18 27 / 0.1);--chip:#f0f1f4}
body.dark{--bg:#020d1c;--card:#061a2f;--border:#253950;--text:#eef0f3;--text2:#eef0f3;--text3:#eef0f3;--chip:#172b42}
a{color:oklch(0.5 0.125 252)}a:hover{color:oklch(0.44 0.12 252)}
.fn-tilegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1080px){.fn-tilegrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fn-tilegrid{grid-template-columns:1fr}}
.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px}
@media(max-width:420px){.mk-grid>div{grid-template-columns:minmax(0,104px) minmax(40px,1fr) 76px !important;gap:8px !important}}
@media(max-width:1020px){.mk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.mk-grid{grid-template-columns:1fr}}
.mk-days{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.fn-toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.fn-toolgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fn-toolgrid{grid-template-columns:1fr}}
@keyframes avIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fnDash{to{stroke-dashoffset:0}}
@keyframes fnPulse{0%{box-shadow:0 0 0 0 oklch(0.6 0.14 152 / 0.55)}70%{box-shadow:0 0 0 9px oklch(0.6 0.14 152 / 0)}100%{box-shadow:0 0 0 0 oklch(0.6 0.14 152 / 0)}}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
section[data-screen-label="Hero"]{position:relative;overflow:hidden}
@keyframes fnFade{from{opacity:0}to{opacity:1}}
section[data-screen-label="Hero"]>*{position:relative;z-index:1;animation:heroUp .6s cubic-bezier(.22,1,.36,1) both}
section[data-screen-label="Hero"]>*:nth-child(2){animation-delay:.09s}
section[data-screen-label="Hero"]>*:nth-child(3){animation-delay:.18s}
section[data-screen-label="Hero"]>*:nth-child(4){animation-delay:.27s}
section[data-screen-label="Hero"]>*:nth-child(5){animation-delay:.36s}
@supports (animation-timeline: view()){
section[data-screen-label="Markets today"]>div,section[data-screen-label="Categories"]>div:first-child,section[data-screen-label="Top funds"]>div,section[data-screen-label="Tools"]>div:first-child,section[data-screen-label="Curated screens"]>h2,section[data-screen-label="NFO corner"]>div,section[data-screen-label="Trust stats"]>div>div,.fn-tilegrid>a,.fn-toolgrid>a,.fn-toolgrid>div{animation:avIn .9s cubic-bezier(.22,1,.36,1) both;animation-timeline:view();animation-range:entry 0% entry 32%}
.mk-grid polyline{stroke-dasharray:120;stroke-dashoffset:120;animation:fnDash 1s ease-out both;animation-timeline:view();animation-range:entry 0% entry 55%}
}
@media (prefers-reduced-motion:reduce){section[data-screen-label]>*,section[data-screen-label]>div>div,.fn-tilegrid>a,.fn-toolgrid>a,.fn-toolgrid>div,.mk-grid polyline{animation:none !important}}
/* Card view. auto-fill (not auto-fit) so a single result stays card-width instead of
   stretching across the whole panel. The card is a flex column with the NAV block on
   margin-top:auto, which pins the price, returns and actions to a common baseline —
   fund names run one to three lines and a ragged bottom edge reads as broken. */
.fn-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;padding:16px 20px}
.fn-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--border);border-radius:13px;background:var(--card);padding:14px;transition:border-color .15s,box-shadow .15s}
.fn-card:hover{border-color:oklch(0.5 0.125 252 / 0.5);box-shadow:0 6px 20px rgba(10,12,16,0.08)}
body.dark .fn-card:hover{box-shadow:0 6px 20px rgba(0,0,0,0.32)}
@media(max-width:560px){.fn-cards{grid-template-columns:1fr;padding:14px}}
/* Category and risk chips carry colour rather than the same grey pill for everything —
   the asset class is the fastest thing to read on a card and colour does that work for free.
   Defined as classes, not inline styles, because each needs a different value per theme:
   a tint that reads on white is nearly invisible on #061a2f. */
.chip{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;display:inline-block}
.c-equity  {background:oklch(0.55 0.19 300 / 0.13);color:oklch(0.40 0.17 300)}
.c-debt    {background:oklch(0.55 0.15 245 / 0.13);color:oklch(0.40 0.14 245)}
.c-hybrid  {background:oklch(0.60 0.14 152 / 0.15);color:oklch(0.40 0.13 152)}
.c-index   {background:oklch(0.70 0.15  70 / 0.18);color:oklch(0.43 0.12  70)}
.c-solution{background:oklch(0.62 0.12 195 / 0.15);color:oklch(0.40 0.10 195)}
.c-other   {background:oklch(0.60 0.16  20 / 0.12);color:oklch(0.44 0.15  20)}
body.dark .c-equity  {background:oklch(0.60 0.19 300 / 0.24);color:oklch(0.84 0.14 300)}
body.dark .c-debt    {background:oklch(0.60 0.15 245 / 0.24);color:oklch(0.84 0.12 245)}
body.dark .c-hybrid  {background:oklch(0.62 0.14 152 / 0.24);color:oklch(0.85 0.14 152)}
body.dark .c-index   {background:oklch(0.72 0.15  70 / 0.24);color:oklch(0.87 0.13  70)}
body.dark .c-solution{background:oklch(0.64 0.12 195 / 0.24);color:oklch(0.86 0.11 195)}
body.dark .c-other   {background:oklch(0.62 0.16  20 / 0.22);color:oklch(0.84 0.14  20)}
/* risk runs low -> very high, so it reads as a scale rather than six unrelated colours */
.r-1{background:oklch(0.60 0.14 152 / 0.15);color:oklch(0.40 0.13 152)}
.r-2{background:oklch(0.65 0.14 130 / 0.16);color:oklch(0.42 0.12 130)}
.r-3{background:oklch(0.72 0.15  85 / 0.18);color:oklch(0.44 0.12  85)}
.r-4{background:oklch(0.72 0.16  60 / 0.18);color:oklch(0.46 0.14  60)}
.r-5{background:oklch(0.65 0.18  35 / 0.15);color:oklch(0.47 0.16  35)}
.r-6{background:oklch(0.58 0.18  27 / 0.14);color:oklch(0.46 0.18  27)}
body.dark .r-1{background:oklch(0.62 0.14 152 / 0.24);color:oklch(0.85 0.14 152)}
body.dark .r-2{background:oklch(0.66 0.14 130 / 0.24);color:oklch(0.86 0.13 130)}
body.dark .r-3{background:oklch(0.74 0.15  85 / 0.24);color:oklch(0.88 0.13  85)}
body.dark .r-4{background:oklch(0.74 0.16  60 / 0.24);color:oklch(0.87 0.14  60)}
body.dark .r-5{background:oklch(0.68 0.18  35 / 0.24);color:oklch(0.85 0.15  35)}
body.dark .r-6{background:oklch(0.62 0.18  27 / 0.24);color:oklch(0.84 0.16  27)}
/* Each category row deep-links into the filtered screener. Kept visually identical to
   the old non-clickable row — only the affordances are new, so nothing shifts. */
.mk-row{text-decoration:none;color:inherit;border-radius:9px;transition:background-color .15s ease}
.mk-row:hover{background:var(--chip);color:inherit}
@media(max-width:1000px){.mk-row{min-height:52px}}
/* Scheme-breadth panel on narrow screens.
   The panel is one flex row: gauge, then the headline text, then the six category tiles
   pushed right with margin-left:auto. On a phone there is no horizontal room left by the
   time the tiles' turn comes, so flex-wrap stacked them ONE PER LINE — a tall thin column
   of percentages down the right edge, which is what looked wrong.
   Fix: below 820px stop competing for one row. The gauge and its sentence take the top
   row, and the tiles get the full width underneath as a real 3-across grid. They read
   horizontally, every tile is the same width, and nothing is pushed off-screen.
   3 columns not 6: six tiles across a 375px phone leaves ~50px each, which cannot hold
   "SOLUTION" without truncating it. */
@media(max-width:820px){
  /* SCHEMES TRACKED / SCHEMES UP TODAY side by side on a phone, not stacked. They were
     wrapping because each card is min-width:140px PLUS 18px padding each side on the
     default content-box sizing — 178px apiece, so two plus the gap needed 368px and a
     375-400px screen only offers ~352px after the section's own padding. A 2-column grid
     with border-box sizing lets them share the row and shrink instead of wrapping. */
  .br-stats{display:grid !important;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .br-stats>div{min-width:0 !important;box-sizing:border-box;padding:11px 13px !important}
  .br-panel{flex-wrap:wrap;row-gap:12px}
  .br-tiles{margin-left:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .br-tiles>div{min-width:0}
}
@media(max-width:340px){.br-tiles{grid-template-columns:repeat(2,1fr)}}
/* tap-targets */@media(max-width:1000px){button{min-height:44px}a[href]{min-height:44px;align-content:center}}