/* Global Funds Screener v2
 *
 * SOURCE OF TRUTH: the final lo-fi (global-funds-screener-final.html) and its
 * design notes. The ones that drive measurements here:
 *   - Fixed column widths, not fluid: fund 272, data 132, returns 160,
 *     Invest 118. At 1280 that shows four columns and a slice of the fifth,
 *     which is the cue that it scrolls.
 *   - Header is one structure everywhere: sort arrow, label, tooltip, over a
 *     reserved second line so the returns controls do not distort the row.
 *   - Fund name one line with an ellipsis, category beneath, hedged quieter.
 *   - Numbers right aligned, gains green, losses red.
 *   - Filter panel: no heading, group labels only. Below 960px a full screen
 *     sheet with Apply and Reset fixed at the bottom.
 *
 * Scoped entirely under .gfv2-page so v1's stylesheet is never affected.
 */

 .gfv2-page {
    /* Tokens read off the Audit Fixes desktop frame (1059:127444) and the
       board inside it (1212:190325). Where the standalone Aside component
       disagrees with the frame, the frame wins — it is the page being built,
       and its palette is the Vested navy/electric pair the rest of the site
       already uses. */
    --gfv2-ink: #010c28; /* fund name, figures */
    --gfv2-navy: #002852; /* headings, risk number */
    --gfv2-ink-2: rgba(1, 12, 40, 0.55); /* fund house */
    --gfv2-ink-3: rgba(1, 12, 40, 0.4); /* row number, facet counts */
    --gfv2-muted: #aeaeae; /* SD, domicile, Min., carets */
    --gfv2-rule: rgba(0, 0, 0, 0.12);
    --gfv2-rule-soft: rgba(0, 0, 0, 0.12);
    --gfv2-blue: #1547eb;
    --gfv2-blue-soft: #eef3fe;
    --gfv2-up: #0aa322;
    --gfv2-down: #c8372c;
    --gfv2-tag: #7a5a20; /* the category tag beside the house */
    --gfv2-bar-off: #f0f0f0; /* unlit risk bar */
    --gfv2-btn-rule: #dee1e3; /* Invest button border */
    --gfv2-sunk: #f7f9fc;
    --gfv2-warm: #fefffa;
    --gfv2-dot: rgba(0, 0, 0, 0.28); /* the · between house and tag */
    --gfv2-ico-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --gfv2-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    --gfv2-w-rownum: 36px;
    --gfv2-w-fund: 260px;
    --gfv2-w-ret: 84px;
    --gfv2-w-exp: 94px;
    --gfv2-w-aum: 96px;
    --gfv2-w-risk: 96px;
    --gfv2-w-metrics: 124px; /* "1.02 Sharpe" must not wrap */
    --gfv2-w-agedom: 104px;
    --gfv2-w-invest: 112px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    color: var(--gfv2-ink);
    background: #FEFFFA;
}
.gfv2-page *,
.gfv2-page *::before,
.gfv2-page *::after {
    box-sizing: border-box;
}

.gfv2-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
.gfv2-page h1,
.gfv2-page h2,
.gfv2-page h3,
.gfv2-page h4 {
    color: var(--gfv2-ink);
    margin: 0;
}
.gfv2-page p {
    margin: 0;
}
.gfv2-page :where(a, button, input, select, [tabindex]):focus-visible {
    outline: 2px solid var(--gfv2-blue);
    outline-offset: 2px;
    border-radius: 4px;
}
/* An author `display` rule beats the browser's own [hidden] { display: none },
   so anything below that sets display would otherwise stay visible while
   carrying the attribute — which is exactly what kept the columns popover
   open and the "Show all" lists fully expanded. One scoped rule, once. */
.gfv2-page [hidden] {
    display: none !important;
}

.gfv2-page .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-header.gfv2-sheet-open {
    display: none;
}

/* ---- hero: breadcrumb, H1, one line. No CTA, no logo strip. ---- */
/* Hero — the frame sets the breadcrumb at y121, the H1 at y161 and the lede
   at y219, all inset to x180 rather than the board's x42. Sizes are taken
   from the frame's own box heights: 24px for the crumb, 42px for a one-line
   H1 and 48px for a two-line lede. */
.gfv2-hero {
    padding: 0px 0 0;
    border-bottom: 0;
    margin-bottom: -44px;
}
.gfv2-hero h1 {
    /* margin: 22px 0 0 !important; */
}

/* Breadcrumb — 1059:128022. Inter Regular 16/23.4 in #505a64, separated by
   "/" not a chevron, with the current page in semi-bold. */
.gfv2-crumbs {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 16px;
    line-height: 23.4px;
    color: #505a64;
    margin-bottom: 16px;
}
.gfv2-crumbs a {
    color: #505a64;
    text-decoration: none;
}
.gfv2-crumbs a:hover {
    color: var(--gfv2-blue);
}
.gfv2-crumbs [aria-current="page"] {
    font-weight: 600;
}

/* H1 — 1059:128020. Sentient Light 64px, -2px tracking, on the Vested navy.
   The face is already declared in style.css at weight 300. */
.gfv2-hero h1 {
    font-family: "Sentient", Georgia, "Times New Roman", serif;
    font-size: 64px;
    font-weight: 300 !important;
    line-height: 42px;
    letter-spacing: -2px;
    color: #002852;
}

/* Lede — 1059:128021. Inter Medium 16/24 in #737373. */
.gfv2-lede {
    margin-top: 16px !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #737373;
    max-width: 430px;
}

/* ---- quick views ---- */
/* Frame spacing: lede ends at y267, the chip lede starts at y344, and the
   board opens at y437 — 77px down to the chips, 8px from the chips to the
   board. */
.gfv2-screener {
    padding: 0px 0 20px;
    position: relative;
    z-index: 1;
}
.gfv2-screener-wrap {
    max-width: 1476px;
    margin: auto;
    padding: 0 24px;
}
/* 1059:129526 — Inter Medium 13.26px, rgba(1,12,40,.78). */
.gfv2-qvlede {
    font-size: 13.26px;
    font-weight: 500;
    color: rgba(1, 12, 40, 0.78);
    margin-bottom: 2px !important;
}
.gfv2-qvlede-wrap {
    border-radius: 12px;
    background: #f0f6ff;
    padding: 14px 0px 2px 24px;
    margin-bottom: 8px;
}
.gfv2-qvrow {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 7px;
    margin-bottom: 0px;
}

.gfv2-qvrow .gfv2-chip[data-qv="all"] {
    display: none;
}

/* Chip — 1059:129527. White on a #dfe2e6 hairline, 10px radius, 40px tall,
   label Inter Semi Bold 13.5px in #2b2e33. */
.gfv2-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dfe2e6;
    border-radius: 10px;
    background: #fff;
    color: #2b2e33;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 16.5px;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}
.gfv2-chip:hover {
    border-color: #cdd5e0;
    color: var(--gfv2-ink);
}
/* Active chip — 1059:129535. Solid navy, no border, white label, the count
   plate at 16% white, and a 75%-opacity ✕ to clear it. */
.gfv2-chip.is-on {
    background: #002852;
    border-color: #002852;
    color: #fff;
}
.gfv2-chip.is-on .gfv2-chipn {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.gfv2-chip.is-on .gfv2-chipx {
    opacity: 0.75;
    color: #fff;
    font-size: 12px;
}
.gfv2-chip.is-off {
    opacity: 0.45;
    cursor: not-allowed;
}
/* The count plate — 1059:129529. #f4f4f1, 6px radius, 18px tall, the figure
   in Inter Semi Bold 11.5px on #666e77. */
.gfv2-chipn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19.45px;
    height: 18px;
    padding: 0 6px;
    border-radius: 6px;
    background: #f4f4f1;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 14px;
    color: #666e77;
    font-variant-numeric: tabular-nums;
}
.gfv2-chipx {
    margin-left: 2px;
    font-size: 15px;
    line-height: 1;
    opacity: 0.75;
}
.gfv2-chip.is-on .gfv2-chipx {
    color: #fff;
}
.gfv2-chip.is-on .gfv2-chipn {
    color: rgba(255, 255, 255, 0.7);
}

/* ---- board and the one-row controls bar ---- */
.gfv2-board {
    overflow: hidden;
    border-radius: 11px;
    background: #f0f6ff;
    padding: 16px 18px;
}
/* Control bar — the frame puts the search on the left and the returns
   control with the three icon buttons on the right (1212:190331 / 191618). */
.gfv2-cbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 8px;
    background: transparent;
    border: 0;
}
.gfv2-cbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Returns: [window] [basis] — 1212:191618. */
.gfv2-retctl {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 3.778px 5.695px 4.222px 15px;
    border-radius: 8px;
    background: #fff;
}
.gfv2-retctl-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--gfv2-ink-2);
    white-space: nowrap;
}
/* The chevron sits before the label in the frame (1212:190340 ahead of
   1212:190341), so the native select arrow comes off and the mark is drawn
   on the pill itself with the frame's 3.889px gap. */
/* The padding lives on the <select>, not on the pill, so the whole pill is the
   control. With it on the pill, a click on the padding or the chevron landed on
   the span and did nothing — only the text itself opened the menu. */
.gfv2-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #f0f6ff;
    border-radius: 6.222px;
}
/* Sits over the select and passes clicks straight through to it. */
.gfv2-pill::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 8px;
    height: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4' fill='none'%3E%3Cpath d='M0.777344 0.77832C1.52595 1.60266 2.40351 2.34101 3.38683 2.97422C3.51035 3.05376 3.68323 3.05376 3.80675 2.97422C4.79006 2.34101 5.66763 1.60266 6.41623 0.778321' stroke='%23AEAEAE' stroke-width='1.55648' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 8px 4px no-repeat;
}
.gfv2-page .gfv2-pill select {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    /* 14px pill inset + 8px chevron + the 3.889px gap it used to sit in. */
    padding: 8px 14px 8px 25.889px;
    margin: 0;
    font: inherit;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: rgba(1, 12, 40, 0.78);
    cursor: pointer;
}
.gfv2-page .gfv2-pill select:focus {
    outline: 0;
}
.gfv2-pill.is-off {
    opacity: 0.55;
}
.gfv2-pill.is-off select {
    cursor: default;
}

.gfv2-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 49.8px;
    padding: 0 16px;
    border-bottom: 1px solid var(--gfv2-rule);
    font-size: 13px;
    font-weight: 600;
    line-height: 20.8px;
    color: var(--gfv2-ink);
}
/* Reset all is always in the header — 12.6px medium, muted while there is
   nothing to reset and electric once there is (1212:190346). */
.gfv2-sumreset {
    font-size: 12.6px;
    font-weight: 500;
    color: var(--gfv2-blue);
    text-decoration: none;
}
.gfv2-sumreset.is-off {
    color: var(--gfv2-ink-3);
    cursor: default;
}
.gfv2-sumreset:hover {
    color: var(--gfv2-blue);
}
.gfv2-summary strong {
    color: var(--gfv2-ink);
}

/* Search — 315x36 in the frame, with a magnifier and the longer placeholder.
   It no longer grows on focus: at 315px it is already the widest thing in the
   bar, and the jump was fighting the fixed control-bar layout. */
.gfv2-search {
    flex: 0 0 auto;
    position: relative;
}
.gfv2-search::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    pointer-events: none;
    opacity: 0.45;
    background: currentColor;
    -webkit-mask: var(--gfv2-ico-search) center / contain no-repeat;
    mask: var(--gfv2-ico-search) center / contain no-repeat;
}
.gfv2-page .gfv2-search input {
    width: 315px;
    height: 36px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--gfv2-rule);
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    color: var(--gfv2-ink);
    background: #fff;
}
.gfv2-page .gfv2-search input:focus {
    width: 315px;
    border-color: var(--gfv2-blue);
}
.gfv2-search input::placeholder {
    color: var(--gfv2-ink-3);
}

.gfv2-page .gfv2-iconbtn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--gfv2-rule);
    border-radius: 8px;
    background: #fff;
    color: var(--gfv2-ink-2);
    cursor: pointer;
    text-decoration: none;
}
.gfv2-page .gfv2-iconbtn:hover,
.gfv2-page .gfv2-iconbtn:focus {
    border-color: #cdd5e0;
    color: var(--gfv2-ink);
}
.gfv2-page .gfv2-iconbtn.is-done {
    border-color: var(--gfv2-up);
    color: var(--gfv2-up);
}
/* 1212:191632: with a column hidden the button is a filled #dce4ff tile with
   no rule, which is how the frame says "this control is doing something". */
.gfv2-page .gfv2-iconbtn.is-set,
.gfv2-page .gfv2-iconbtn[aria-expanded="true"] {
    background: #dce4ff;
    border-color: transparent;
}
.gfv2-page .gfv2-iconbtn.is-set:hover,
.gfv2-page .gfv2-iconbtn[aria-expanded="true"]:hover {
    border-color: transparent;
}
/* .gfv2-ico-cols, .gfv2-ico-down, .gfv2-ico-share { width: 15px; height: 15px; display: block; } */

.gfv2-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: inline-grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--gfv2-blue);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
}

/* ---- the parent theme's buttons ----
   Astra paints every <button> solid blue with white text on hover and on
   focus (button:hover, button:focus in its inline block). At 0,1,1 that beats
   a bare class, so every button in the screener flipped blue under the
   pointer. Rather than a blanket reset — which would flatten the controls
   that carry their own colour — each button below is anchored on .gfv2-page,
   which outranks the theme in every state. Keep the anchor when editing:
   without it the theme takes the control back on hover.
   ---------------------------------------------------------------------- */

/* ---- scrollbars ----
   Every scrolling area in the frame carries the same thumb: a 4px pill in
   #ededed at a 13px radius, on a transparent track (sidebar 1223:1919,
   columns menu 1244:7860, table 1239:4054, chip row 1360:40172). WebKit has
   no 4px scrollbar, so the box is 12px and a 4px transparent border clips
   the thumb back to 4px — background-clip keeps the colour off that border. */
.gfv2-page ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
.gfv2-page ::-webkit-scrollbar-track,
.gfv2-page ::-webkit-scrollbar-corner {
    background: transparent;
}
.gfv2-page ::-webkit-scrollbar-thumb {
    background-color: #ededed;
    background-clip: content-box;
    border: 4px solid transparent;
    border-radius: 13px;
}
.gfv2-page ::-webkit-scrollbar-thumb:hover {
    background-color: #e0e0e0;
}
/* Firefox cannot size the thumb, so this is the nearest equivalent. */
.gfv2-page * {
    scrollbar-width: thin;
    scrollbar-color: #ededed transparent;
}

/* ---- columns popover ---- */
.gfv2-colmenu {
    position: relative;
}
/* Show Columns — 1244:7835. A 198x328 card on a #dadada hairline with a
   16px radius; title 12px medium, rows 10px medium, 18px checkboxes on a
   30px rhythm, and a full-width "Reset to default" button at the foot. */
.gfv2-colpop {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    width: 198px;
    padding: 13px 13px 12px;
    background: #fff;
    border: 1px solid #dadada;
    border-radius: 16px;
    box-shadow: 0 10px 28px -12px rgba(11, 27, 58, 0.28);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.gfv2-colpophd {
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(1, 12, 40, 0.78);
    padding: 0 0 8px;
}
.gfv2-colopt {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 30px;
    padding: 0;
    font-size: 10px;
    font-weight: 500;
    color: rgba(1, 12, 40, 0.78);
    cursor: pointer;
}
.gfv2-colopt input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--gfv2-blue);
    border-radius: 4px;
}
/* The two fixed columns are listed, ticked and greyed — the menu accounts for
   every column in the table rather than quietly omitting them. */
.gfv2-colopt.is-off {
    color: var(--gfv2-ink-3);
    cursor: default;
}
/* 1244:7863 — an outlined full-width button, not a link. */
.gfv2-colreset {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    margin-top: 10px;
    padding: 0;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 400;
    color: rgba(1, 12, 40, 0.78);
    text-decoration: none;
}
.gfv2-colreset:hover {
    border-color: var(--gfv2-blue);
    color: var(--gfv2-blue);
}
.gfv2-colpophd + .gfv2-colopt {
    margin-top: 0;
}
.gfv2-colpop .gfv2-colpophd:not(:first-child) {
    margin-top: 8px !important;
}

/* AUM is the one range that spans millions to billions, so each end carries
   its own unit beside the box. */
.gfv2-page .gfv2-unitsel {
    flex: 0 0 auto;
    width: auto;
    min-width: 44px;
    height: 30px;
    padding: 0 4px 0 6px;
    border: 1px solid var(--gfv2-rule);
    border-radius: 7px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    color: var(--gfv2-ink-2);
    line-height: 1;
}
.gfv2-rangerow.has-units {
    flex-wrap: wrap;
    gap: 5px;
}
.gfv2-rangerow.has-units .gfv2-numbox {
    min-width: 0;
}

/* ---- share popover ----
   Same shell as the columns menu, a little wider because the line naming the
   view has to sit on two lines at most. */
.gfv2-sharemenu {
    position: relative;
}
.gfv2-sharepop {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    width: 250px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--gfv2-rule);
    border-radius: 10px;
    box-shadow: 0 10px 28px -12px rgba(11, 27, 58, 0.28);
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.gfv2-sharehd {
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gfv2-ink-3);
    padding: 4px 8px 2px;
    margin: 0 !important;
}
.gfv2-shareline {
    font-size: 12px !important;
    color: var(--gfv2-ink-2);
    padding: 0 8px 8px;
    margin: 0 !important;
    line-height: 1.45;
}
.gfv2-page .gfv2-shareopt {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    font-size: 13.5px;
    color: var(--gfv2-ink);
    text-align: left;
    cursor: pointer;
}
.gfv2-page .gfv2-shareopt:hover,
.gfv2-page .gfv2-shareopt:focus-visible {
    background: var(--gfv2-sunk);
    color: var(--gfv2-ink);
}
.gfv2-shareico {
    display: inline-flex;
    color: var(--gfv2-ink-3);
}
.gfv2-page .gfv2-shareopt:hover .gfv2-shareico {
    color: var(--gfv2-blue);
}

/* ---- split: rail + table ----
   The board is a fixed frame, not a growing block: the lo-fi clamps it
   between 260 and 496px and scrolls the table and the rail inside it, which
   is what keeps the hero, the chips, the filters, the table and the notes on
   one screen. Below 760px the height is released and the page scrolls
   normally — the lo-fi's own rule. sizeBoard() in the JS sets the exact
   height; 496px here is the ceiling and the no-JS default. */
.gfv2-split {
    display: grid;
    grid-template-columns: 295px minmax(0, 1fr);
    align-items: stretch;
    height: 801px;
    gap: 8px;
}


/* Switched off from the columns menu. Desktop only — below 960px the rail is
   a full screen sheet reached from the bottom bar, so it must stay reachable. */
@media (min-width: 961px) {
    .gfv2-board[data-rail="off"] .gfv2-split {
        grid-template-columns: minmax(0, 1fr);
    }
    .gfv2-board[data-rail="off"] .gfv2-rail {
        display: none;
    }
}
.gfv2-rail {
    border-right: 1px solid var(--gfv2-rule-soft);
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.gfv2-sortsheet {
    display: none;
}
.gfv2-sheethd,
.gfv2-sheetfoot {
    display: none;
}
/* The panel is its own scroll container inside the frame, and keeps its
   position across re-renders — the JS never replaces it, only updates it. */
.gfv2-railinner {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
    border-radius: 11px;
    background: #fff;
}
/* Group heading — 967:125550 / 125666 / 125728. A 38.6px #fafafa band under
   the same hairline the table header uses, label Inter Semi Bold 11px in
   uppercase with 1.54px tracking. */
.gfv2-page .gfv2-railgroup {
    margin: 0 !important;
    height: 38.59px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    background: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 11px !important;
    font-weight: 600;
    line-height: 17.6px;
    letter-spacing: 1.54px;
    text-transform: uppercase;
    color: rgba(1, 12, 40, 0.68);
}

/* Facet header — 39.5px, label 14px semibold navy, the live count in
   electric beside it, Reset and the caret on the right (1212:190348). */
.gfv2-facet {
    border-bottom: 1.125px solid #f0f0f0;
    border-top: 0;
}
.gfv2-page .gfv2-facet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 39.5px;
    padding: 10px 16px;
    border: 0;
    background: none;
    font: inherit;
    color: var(--gfv2-navy);
    text-align: left;
    cursor: pointer;
}
.gfv2-facet-label {
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
}
.gfv2-facet-label.is-set {
    font-weight: 600;
}
.gfv2-facet-n {
    color: var(--gfv2-blue);
    font-weight: 600;
    font-size: 13px;
}
.gfv2-facet-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.gfv2-facet-reset {
    font-size: 13px;
    font-weight: 500;
    color: var(--gfv2-blue);
    text-decoration: none;
}
.gfv2-caret {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--gfv2-muted);
    border-bottom: 1.5px solid var(--gfv2-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.15s ease;
}
.gfv2-facet.is-open .gfv2-caret {
    transform: rotate(-135deg) translate(-2px, -2px);
}
.gfv2-facet-body {
    display: none;
    padding: 2px 18px 16px;
}
.gfv2-facet.is-open .gfv2-facet-body {
    display: block;
}
.gfv2-facet-note {
    margin-top: 8px !important;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--gfv2-ink-3);
}
.gfv2-facet-note.is-top {
    margin: 0 0 10px !important;
}
/* The lo-fi's .fsearch: a 31px field on a warm off-white, not the theme's
   48px box. The type selector is carried in the selector because the parent
   theme styles input[type="search"] directly (0,1,1) and a bare class loses
   to it — the field came out 48px tall with a 2px radius. */
.gfv2-page input[type="search"].gfv2-facet-search {
    width: 100%;
    margin-bottom: 8px;
    padding: 7px 10px;
    height: auto;
    border: 1px solid var(--gfv2-rule);
    border-radius: 7px;
    background: var(--gfv2-warm);
    color: var(--gfv2-ink);
    font: inherit;
    font-size: 13px;
    line-height: 1.25;
}
.gfv2-page input[type="search"].gfv2-facet-search:focus {
    border-color: #cdd5e0;
    background: #fff;
}
.gfv2-page input[type="search"].gfv2-facet-search::placeholder {
    color: var(--gfv2-ink-3);
}

@media (min-width: 961px) {
    .gfv2-facet[data-facet="aum"] {
        /* background-color: red; */
    }
    
    .gfv2-facet[data-facet="aum"] .gfv2-numbox {
        flex: unset;
        width: 100%;
    }
    
    .gfv2-facet[data-facet="aum"] .gfv2-rangerow {
        position: relative;
        gap: 2px;
    }
    
    .gfv2-facet[data-facet="aum"] .gfv2-unitsel[data-unit="min"] {
        position: absolute;
        top: 0;
        right: 0;
        height: 40.41px;
        border-radius: 0;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 4px center;
        padding-left: 9px;
    }
    
    .gfv2-facet[data-facet="aum"] .gfv2-unitsel[data-unit="max"] {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 40.41px;
        border-radius: 0;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 4px center;
        padding-left: 9px;
    }
    
    .gfv2-facet[data-facet="aum"] input {
        padding-right: 43px;
        text-align: left;
        padding-left: 24px;
    }
    
    .gfv2-facet[data-facet="aum"] .gfv2-to {
        text-align: center;
        width: 100%;
    }
}

@media (min-width: 961px) and (max-width: 1199px) {
    .gfv2-facet[data-facet="age"] .gfv2-numbox {
        flex: unset;
        width: 100%;
    }

    .gfv2-facet[data-facet="age"] .gfv2-rangerow {
        flex-wrap: wrap;
    }

    .gfv2-facet[data-facet="age"] .gfv2-to {
        width: 100%;
        text-align: center;
    }
}

/* Checkbox row — 1212:190358. 10px gap, 5.6px vertical padding, a 16.8px box
   on a #767676 hairline, label Inter Regular 14/21.8 in #333, count in
   #aeaeae at 13.4px. */
.gfv2-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5.6px 0;
    font-size: 14px;
    line-height: 21.8px;
    cursor: pointer;
}
.gfv2-opt input {
    width: 16.8px;
    height: 16.8px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--gfv2-blue);
    border-radius: 2.25px;
}
/* A value with nothing behind it greys out rather than disappearing, so the
   list does not reflow as the reader filters (frame shows PIMCO 0, Amundi 0). */
.gfv2-opt.is-zero {
    color: var(--gfv2-ink-3);
    cursor: not-allowed;
}
.gfv2-opt.is-zero .gfv2-opt-label {
    color: var(--gfv2-ink-3);
}
.gfv2-opt.is-zero .gfv2-opt-n {
    opacity: 0.6;
}
.gfv2-opt-label {
    flex: 1 1 auto;
    color: #333;
    font-weight: 400;
}
.gfv2-opt-n {
    color: var(--gfv2-muted);
    font-size: 13.4px;
    line-height: 20.9px;
    font-variant-numeric: tabular-nums;
}
/* Show all N — 1212:190405. Inter Regular 14px electric, in a 30px band. */
.gfv2-page .gfv2-showmore {
    height: 30.4px;
    margin-top: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--gfv2-blue);
    cursor: pointer;
    text-align: left;
}

/* ---- range filters: histogram, two handles, typed boxes, bands ----
   Measurements and colours from the lo-fi: 18 bins at 26px tall with a 1px
   gap, pale blue bars that turn a stronger blue inside the selected span, a
   4px track, and 17px hollow thumbs. The unit sits inside each box. */
.gfv2-slider {
    padding: 4px 0 2px;
}
.gfv2-hist {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 26px;
    margin-bottom: 5px;
}
.gfv2-hist i {
    flex: 1;
    display: block;
    min-height: 2px;
    background: #dfe1f6;
    border-radius: 1px 1px 0 0;
    transition: background 0.12s ease;
}
.gfv2-hist i.is-in {
    background: #8fa3ee;
}

.gfv2-track {
    position: relative;
    height: 22px;
}
.gfv2-track::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    height: 4px;
    background: #f0f0f0;
    border-radius: 3px;
}
.gfv2-fill {
    position: absolute;
    top: 9px;
    height: 4px;
    background: var(--gfv2-blue);
    border-radius: 3px;
}
/* The theme's main.min.css styles every range input — a 20px thumb with a
   7.9px solid border, an 8.6px runnable track with a shadow, and a 5.7px
   vertical margin — and Astra adds an inline rule filling the thumb with its
   global colour. Those selectors are input[type="range"]…, which outscores a
   plain class, so these have to carry the type selector too or the theme wins
   and the handles render as fat navy discs. */
.gfv2-page input[type="range"].gfv2-handle {
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}
.gfv2-page input[type="range"].gfv2-handle:focus {
    outline: 0;
}
.gfv2-page input[type="range"].gfv2-handle::-webkit-slider-runnable-track {
    height: 22px;
    background: none;
    box-shadow: none;
    border: 0;
}
.gfv2-page input[type="range"].gfv2-handle::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 17px;
    height: 17px;
    margin: 0;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gfv2-blue);
    box-shadow: 0 1px 3px rgba(0, 40, 82, 0.25);
    cursor: grab;
}
.gfv2-page
    input[type="range"].gfv2-handle:focus::-webkit-slider-runnable-track {
    background: none;
}
.gfv2-page input[type="range"].gfv2-handle::-webkit-slider-thumb:active {
    cursor: grabbing;
}
.gfv2-page input[type="range"].gfv2-handle::-moz-range-track {
    height: 22px;
    background: none;
    border: 0;
    box-shadow: none;
}
.gfv2-page input[type="range"].gfv2-handle::-moz-range-thumb {
    pointer-events: auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gfv2-blue);
    box-shadow: 0 1px 3px rgba(0, 40, 82, 0.25);
    cursor: grab;
}

.gfv2-rangerow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.gfv2-numbox {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.gfv2-numbox input {
    width: 100%;
    min-width: 0;
    padding: 6px;
    border: 1px solid var(--gfv2-rule);
    border-radius: 6px;
    background: #fefffa;
    font: inherit;
    font-size: 12.5px;
    color: var(--gfv2-ink);
    text-align: center;
}
/* no spinners — they crowd a box this size */
.gfv2-numbox input::-webkit-outer-spin-button,
.gfv2-numbox input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.gfv2-numbox input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.gfv2-numbox.has-suffix input {
    padding-right: 19px;
}
.gfv2-numbox.has-prefix input {
    padding-left: 17px;
}
.gfv2-unitmark {
    position: absolute;
    font-size: 11.5px;
    font-style: normal;
    color: var(--gfv2-ink-3);
    pointer-events: none;
}
.gfv2-numbox.has-suffix .gfv2-unitmark {
    right: 7px;
}
.gfv2-numbox.has-prefix .gfv2-unitmark {
    left: 7px;
}
.gfv2-to {
    font-size: 12px;
    color: var(--gfv2-ink-3);
    flex: 0 0 auto;
}

.gfv2-bands {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}
.gfv2-band {
    padding: 4px 11px;
    border: 1px solid var(--gfv2-rule);
    border-radius: 14px;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: var(--gfv2-ink-2);
    text-decoration: none;
}
.gfv2-band:hover {
    border-color: #cdd5e0;
    color: var(--gfv2-ink);
}
.gfv2-band.is-on {
    background: var(--gfv2-ink);
    border-color: var(--gfv2-ink);
    color: #fff;
}

/* ---- table ---- */
.gfv2-tablezone {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
/* Scrolls both ways inside the frame: sideways for the columns, down for the
   rows, with the heading row pinned. */
.gfv2-twrap {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 0 0 11px 11px;
}
/* With a Show more button under it the card's floor belongs to the button. */
.gfv2-tablezone:has(.gfv2-morewrap:not(:empty)) .gfv2-twrap {
    border-radius: 0;
}
/* Fixed pixel columns fit the default view and grow beyond the wrapper when
   more columns are enabled, allowing the table to scroll without overlap. */
.gfv2-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    font-size: 13.5px;
    background: #fff;
}
/* Rows are 66px in the frame (1237:3170), growing to 87px where the fund
   name takes a second line (1237:3475). Padding carries the height rather
   than a fixed row height, so a wrapped name still sits centred. */
/* Astra sets `table,td,th{border:1px solid …}` and `td,th{border-width:0 1px
   1px 0}`, which puts a rule down the right of every cell. The frame has no
   vertical dividers at all — only the row line — so every edge is cleared
   here and the bottom one put back deliberately. */
.gfv2-page .gfv2-table {
    border: 0;
}
.gfv2-page .gfv2-table th,
.gfv2-page .gfv2-table td {
    padding: 14px 12px;
    text-align: left;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid var(--gfv2-rule);
}
/* The frame's row is 66px with the Invest button at y=12 and "Min. $50" at
   y=41 (1244:6001/6026): the content is centred, not padded. Keeping the
   padding off lets `height` act as the floor and a wrapped fund name still
   grow the row the way 1237:3475 does. */
.gfv2-page .gfv2-table tbody td {
    height: 66px;
    padding-top: 0;
    padding-bottom: 0;
}
/* Content edges off the frame's grid: # at 20, the fund name at 57, the two
   stacked columns flush to 818 and 937, the Invest button ending at 1069. */
.gfv2-page .gfv2-table .gfv2-c-fund {
    padding-left: 9px;
}
.gfv2-page .gfv2-table .gfv2-c-riskmetrics,
.gfv2-page .gfv2-table .gfv2-c-agedom {
    padding-right: 9px;
}
.gfv2-page .gfv2-table .gfv2-c-invest {
    padding-right: 11px;
}
/* Header — 1237:3081. A #fafafa band under a slightly stronger rule, labels
   in Inter Semi Bold 10px with 0.345px tracking. */
.gfv2-page .gfv2-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fafafa;
    height: 42px;
    padding: 0 8px;
    vertical-align: middle;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.345px;
    color: rgba(1, 12, 40, 0.68);
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
/* The fund column's heading runs a size larger and drops the tracking. */
.gfv2-page .gfv2-table thead .gfv2-c-fund {
    font-size: 11.5px;
    letter-spacing: 0;
}
.gfv2-page .gfv2-table thead .gfv2-c-rownum {
    font-size: 11px;
    letter-spacing: 0;
    color: var(--gfv2-ink-3);
}
/* Figures: 13.5px medium, ink, tabular so columns line up. */
.gfv2-table tbody .gfv2-num {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 21.6px;
    color: var(--gfv2-ink);
}
.gfv2-table tbody .gfv2-num.is-up {
    color: var(--gfv2-up);
    font-weight: 600;
}
.gfv2-table tbody .gfv2-num.is-down {
    color: var(--gfv2-down);
    font-weight: 600;
}
/* The row number — 1237:3172. */
.gfv2-c-rownum {
    width: 36px;
    min-width: 36px;
}
.gfv2-rownum {
    font-size: 11px;
    font-weight: 600;
    line-height: 17.6px;
    color: var(--gfv2-ink-3);
    font-variant-numeric: tabular-nums;
}
/* One header structure everywhere: a reserved second line so the returns
   controls never distort the row height. */
.gfv2-hstack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gfv2-hrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.gfv2-sortbtn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.gfv2-sortbtn:hover {
    color: var(--gfv2-ink);
}
.gfv2-arr {
    color: var(--gfv2-ink-3);
    font-size: 10px;
}
.gfv2-table th.is-sorted {
    color: var(--gfv2-ink);
}
.gfv2-table th.is-sorted .gfv2-arr {
    color: var(--gfv2-blue);
}
.gfv2-hlabel {
    white-space: nowrap;
}
.gfv2-table thead th {
    white-space: nowrap;
}
.gfv2-sortbtn {
    white-space: nowrap;
}
.gfv2-retsels {
    display: flex;
    gap: 4px;
}
.gfv2-hsel {
    max-width: 74px;
    padding: 2px 4px;
    border: 1px solid var(--gfv2-rule);
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 11px;
    color: var(--gfv2-ink-2);
}
.gfv2-page .gfv2-tip {
    width: 14px;
    height: 14px;
    padding: 0;
    border: 1px solid var(--gfv2-rule);
    border-radius: 50%;
    background: #fff;
    font: inherit;
    font-size: 9.5px;
    line-height: 1;
    color: var(--gfv2-ink-3);
    cursor: help;
    flex: 0 0 auto;
}

.gfv2-table thead .gfv2-c-ret .gfv2-hstack,
.gfv2-table thead .gfv2-c-exp .gfv2-hstack,
.gfv2-table thead .gfv2-c-aum .gfv2-hstack,
.gfv2-table thead .gfv2-c-risk .gfv2-hstack {
    align-items: center;
}
.gfv2-table thead .gfv2-c-riskmetrics .gfv2-hstack,
.gfv2-table thead .gfv2-c-agedom .gfv2-hstack,
.gfv2-table thead .gfv2-c-loads .gfv2-hstack,
.gfv2-table thead .gfv2-c-invest .gfv2-hstack {
    align-items: flex-end;
}
.gfv2-num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.gfv2-num.is-up {
    color: var(--gfv2-up);
}
.gfv2-num.is-down {
    color: var(--gfv2-down);
}
.gfv2-dash {
    color: #aab3bf;
    cursor: help;
}

/* Pixel widths keep headings readable when optional columns are enabled. */
.gfv2-c-rownum {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
}
.gfv2-c-fund {
    position: sticky;
    left: var(--gfv2-w-rownum);
    background: #fff;
    z-index: 1;
}
.gfv2-page .gfv2-table thead .gfv2-c-fund,
.gfv2-page .gfv2-table thead .gfv2-c-rownum {
    background: #fafafa;
}
.gfv2-table thead .gfv2-c-rownum {
    z-index: 3;
}
.gfv2-table thead .gfv2-c-fund {
    z-index: 3;
}
.gfv2-page .gfv2-table .gfv2-c-rownum {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
}
.gfv2-page .gfv2-table .gfv2-c-fund {
    width: 245px;
    min-width: 245px;
    max-width: 245px;
}
.gfv2-page .gfv2-table .gfv2-c-ret {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}
.gfv2-page .gfv2-table .gfv2-c-exp {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
}
.gfv2-page .gfv2-table .gfv2-c-aum {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    padding-left: 4px;
    padding-right: 4px;
}
.gfv2-page .gfv2-table .gfv2-c-risk {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}
.gfv2-page .gfv2-table .gfv2-c-riskmetrics {
    width: 122px;
    min-width: 122px;
    max-width: 122px;
}
.gfv2-page .gfv2-table .gfv2-c-loads {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
}
.gfv2-page .gfv2-table .gfv2-c-agedom {
    width: 125px;
    min-width: 125px;
    max-width: 125px;
}
.gfv2-page .gfv2-table .gfv2-c-invest {
    width: 106px;
    min-width: 106px;
    max-width: 106px;
}
/* Returns, expense and AUM sit centred under their headings in the frame;
   the two stacked columns and the Invest cell hang off the right. The base
   `th, td` rule above is (0,3,2), so these have to carry .gfv2-page to win. */
.gfv2-page .gfv2-table .gfv2-c-ret,
.gfv2-page .gfv2-table .gfv2-c-exp,
.gfv2-page .gfv2-table .gfv2-c-aum,
.gfv2-page .gfv2-table .gfv2-c-risk {
    text-align: center;
}
.gfv2-page .gfv2-table .gfv2-c-riskmetrics,
.gfv2-page .gfv2-table .gfv2-c-agedom,
.gfv2-page .gfv2-table .gfv2-c-loads,
.gfv2-page .gfv2-table .gfv2-c-invest {
    text-align: right;
}

/* Fund cell — 1237:3171-3175. The name no longer truncates to one line:
   the frame lets it run to two and grows the row from 66px to 87px, which is
   the fund-name-not-visible row on the sheet. */
.gfv2-fcell {
    display: flex;
    align-items: center;
    min-width: 0;
}
.gfv2-fbody {
    min-width: 0;
}
.gfv2-fn {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 17.55px;
}
.gfv2-fn a {
    color: var(--gfv2-ink);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}
/* The share class, beside the name — quiet enough not to read as part of it,
   but there where two funds are otherwise identical (#20). */
.gfv2-fclass {
    margin-left: 6px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    color: var(--gfv2-ink-3);
    white-space: nowrap;
}
.gfv2-fn a:hover {
    color: var(--gfv2-blue);
}
.gfv2-fmeta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 12px;
    line-height: 14.4px;
    white-space: nowrap;
    overflow: hidden;
}
.gfv2-ptag {
    color: var(--gfv2-ink-2);
    font-weight: 400;
}
/* The category reads as a tag in the frame — same size as the house, amber,
   medium weight, with a dot between the two. */
.gfv2-ptag.is-cat {
    color: var(--gfv2-tag);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gfv2-ptag.is-quiet {
    color: var(--gfv2-ink-2);
}
.gfv2-fmeta .gfv2-dot-sep {
    color: var(--gfv2-dot);
}

/* Key risk measures — 1237:3189-3190. */
.gfv2-rmwrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
}
.gfv2-rmwrap b {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 21.6px;
    color: var(--gfv2-ink);
    font-variant-numeric: tabular-nums;
}
.gfv2-rmsub {
    font-size: 10px;
    line-height: 15.5px;
    color: var(--gfv2-ink-3);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.gfv2-freepill {
    font-size: 12px;
    font-weight: 600;
    color: var(--gfv2-up);
    background: #eaf6f0;
    border-radius: 6px;
    padding: 3px 7px;
    white-space: nowrap;
}

/* Risk level — 1237:3178-3188. A rising staircase of seven 5px bars, only
   the fund's own level lit. The standalone component (1192:185603) colours
   each level differently; the desktop frame lights every one in electric
   blue, and the frame is what this page is being built to. */
.gfv2-riskmeter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: help;
}
.gfv2-rmbars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
}
.gfv2-rmbars i {
    width: 5px;
    border-radius: 1px;
    background: var(--gfv2-bar-off);
}
.gfv2-rmbars i:nth-child(1) {
    height: 6px;
}
.gfv2-rmbars i:nth-child(2) {
    height: 8px;
}
.gfv2-rmbars i:nth-child(3) {
    height: 10px;
}
.gfv2-rmbars i:nth-child(4) {
    height: 12px;
}
.gfv2-rmbars i:nth-child(5) {
    height: 14px;
}
.gfv2-rmbars i:nth-child(6) {
    height: 16px;
}
.gfv2-rmbars i:nth-child(7) {
    height: 18px;
}
/* #36: the lit bar carried one flat blue at every level, so a 1 and a 7 looked
   the same at a glance. Seven colours from the frame (1192:185603), keyed off
   the s1-s7 class gfv2_risk_meter() already writes onto the active bar. */
.gfv2-rmbars i.is-on {
    background: var(--gfv2-blue);
}
.gfv2-rmbars i.is-on.s1 { background: #0AA322; }
.gfv2-rmbars i.is-on.s2 { background: #CEDA92; }
.gfv2-rmbars i.is-on.s3 { background: #5F80B0; }
.gfv2-rmbars i.is-on.s4 { background: #B5E4FE; }
.gfv2-rmbars i.is-on.s5 { background: #99C1F6; }
.gfv2-rmbars i.is-on.s6 { background: #D0B380; }
.gfv2-rmbars i.is-on.s7 { background: #B52424; }
.gfv2-rmnum {
    min-width: 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 17.05px;
    color: var(--gfv2-navy);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Invest — 1244:6001. An outlined button, not a filled circle. */
.gfv2-investcell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
/* "Min. $50" centres under the button rather than hanging off the row edge —
   1244:6026 ends at 1051 against the button's 1069. */
.gfv2-investmeta {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 77px;
}
/* "Min. $50" is plain right-aligned grey text under the button (1244:6026),
   not a chip. */
.gfv2-page .gfv2-itag {
    padding: 0;
    background: none;
    border-radius: 0;
    flex: 0 0 auto;
    font-size: 10px;
    line-height: 15.5px;
    color: var(--gfv2-muted);
    white-space: nowrap;
}
.gfv2-rmwrap b {
    white-space: nowrap;
}
.gfv2-invest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 77px;
    height: 26px;
    flex: 0 0 auto;
    border: 1px solid var(--gfv2-btn-rule);
    border-radius: 4px;
    background: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.345px;
    color: var(--gfv2-blue);
    text-decoration: none;
}
.gfv2-invest:hover {
    border-color: var(--gfv2-blue);
    color: var(--gfv2-blue);
    background: #fff;
}

/* the fade and More cue while columns remain */
.gfv2-morecue {
    position: absolute;
    /* top: 0; */
    right: 0;
    /* Was offset by the 52px pagefoot band and a 151px allowance for it; with
       the band gone the cue covers the scroll area itself. */
    bottom: 0;
    width: 56px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 60%);
    opacity: 0;
    transition: opacity 0.15s ease;
    height: calc(100% - 99px);
}
.gfv2-morecue.is-on {
    opacity: 1;
}
.gfv2-morecue span {
    position: absolute;
    right: 6px;
    /* top: 14px; */
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gfv2-ink-3);
    top: 50%;
    transform: translateY(-50%);
}

/* ---- the line above the table (1237:3077) ---- */
/* The frame carries the count, the freshness stamp and the current sort in a
   56px band at the top of the table. The Show more control stays at the foot. */
.gfv2-page .gfv2-tmeta {
    flex: 0 0 auto;
    border-radius: 11px 11px 0 0;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 56px;
    padding: 8px 16px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.gfv2-page .gfv2-tmeta-count {
    font-size: 13px;
    font-weight: 600;
    line-height: 20.8px;
    color: #010c28;
    font-variant-numeric: tabular-nums;
}
.gfv2-page .gfv2-tmeta-stamp {
    font-size: 12px;
    font-weight: 400;
    line-height: 19.2px;
    color: rgba(1, 12, 40, 0.66);
}
.gfv2-page .gfv2-tmeta:empty {
    display: none;
}
.gfv2-page .gfv2-tmeta-sort {
    margin-left: auto;
    padding-left: 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 19.2px;
    color: rgba(1, 12, 40, 0.68);
    white-space: nowrap;
}

/* ---- the line under the board — 1088:133576 / 1088:133574 ----
   Outside the card, 10px below it: caveat left, count right, both Inter
   Regular 12px/17.4 in #676767. The caveat wraps to two lines at the frame's
   743px, so the column is capped there. */
.gfv2-page .gfv2-tnote {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 10px 0 0;
    padding: 0 15px 0 12px;
}
.gfv2-page .gfv2-tnote-text,
.gfv2-page .gfv2-tnote-count {
    margin: 0 !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 17.4px;
    color: #676767;
}
.gfv2-page .gfv2-tnote-text { max-width: 743px; }
.gfv2-page .gfv2-tnote-count {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Paging sits under the table, the full width of the card — inside the rows
   it read as data, and in a band beside the count it read as a footer. */
.gfv2-morewrap {
    flex: 0 0 auto;
}
.gfv2-morewrap:empty {
    display: none;
}
/* Desktop pages itself: .gfv2-twrap scrolls internally there, so maybeAutoLoad()
   fires on its scroll event and the button would be redundant. On mobile the
   wrapper is overflow-y:visible and the page scrolls instead, so that event
   never fires — the button is the only way to reach funds 26 and beyond. This
   used to be an unconditional display:none, which hid it on both. */
@media (min-width: 961px) {
    .gfv2-morewrap {
        display: none;
    }
}
.gfv2-page .gfv2-loadmore {
    display: block;
    width: 100%;
    padding: 14px 12px;
    border: 0;
    border-top: 1px solid var(--gfv2-rule);
    border-radius: 0 0 11px 11px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gfv2-blue);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.gfv2-page .gfv2-loadmore:hover,
.gfv2-page .gfv2-loadmore:focus {
    background: #f0f6ff;
    color: var(--gfv2-blue);
}

/* ---- empty state, notes, disclosure ---- */
.gfv2-empty {
    padding: 85px 20px 44px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.gfv2-empty h3 {
    font-size: 16px;
}
.gfv2-empty p {
    font-size: 13.5px;
    color: var(--gfv2-ink-2);
}
.gfv2-page .gfv2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--gfv2-rule);
    border-radius: 8px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gfv2-ink);
    text-decoration: none;
    cursor: pointer;
}
.gfv2-page .gfv2-btn.is-primary {
    background: var(--gfv2-blue);
    border-color: var(--gfv2-blue);
    color: #fff;
}
.gfv2-page .gfv2-btn.is-primary:hover,
.gfv2-page .gfv2-btn.is-primary:focus {
    background: #2560cf;
    border-color: #2560cf;
    color: #fff;
}

.gfv2-disclosure {
    padding: 10px 0 20px;
}
.gfv2-disclosure p {
    font-size: 12px;
    line-height: 1.6;
    color: var(--gfv2-ink-3);
}

/* ---- tooltips ----
   One floating element, positioned by JS, instead of the browser's own title
   box: instant, centred under the control, flipped above when it would fall
   off the fold, and in the page's own voice. */
#gfv2-tip {
    position: fixed;
    z-index: 400;
    max-width: 250px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--gfv2-ink);
    color: #fff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0, 40, 82, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    transform: translateY(-2px);
}
#gfv2-tip.is-on {
    opacity: 1;
}
.gfv2-page [data-tip] {
    cursor: help;
}
.gfv2-page a[data-tip],
.gfv2-page button[data-tip],
.gfv2-page select[data-tip] {
    cursor: pointer;
}

/* ---- toast: confirmations, bottom centre ---- */
#gfv2-toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    z-index: 500;
    max-width: 92vw;
    padding: 13px 20px;
    border-radius: 10px;
    background: var(--gfv2-ink);
    color: #fff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    font-size: 13.5px;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    transform: translateX(-50%) translateY(20px);
}
#gfv2-toast.is-on {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.gfv2-bottombar {
    display: none;
}

/* ---- tablet ---- */
@media (max-width: 1180px) {
    .gfv2-split {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

/* ---- below 960: the rail becomes a full screen sheet ---- */
@media (max-width: 960px) {
    .gfv2-split {
        grid-template-columns: minmax(0, 1fr);
    }
    /* "No board height is forced below 760px; the table takes its natural
       height and the page scrolls." Released a little earlier, where the rail
       stops sharing the frame. */
    .gfv2-split {
        height: auto;
    }
    .gfv2-tablezone {
        height: auto;
    }
    .gfv2-page .gfv2-tmeta {
        flex-wrap: wrap;
        gap: 2px 11px;
        padding: 10px 14px;
    }
    .gfv2-page .gfv2-tmeta-sort {
        margin-left: 0;
        padding-left: 0;
        flex-basis: 100%;
    }
    /* No inner scroll on mobile or tablet: the table takes its natural height
       and the page scrolls, so Show more is the only way rows arrive. Sideways
       scroll stays, because the columns still do not fit. */
    .gfv2-twrap {
        flex: none;
        max-height: none;
        overflow-x: auto;
        overflow-y: visible;
    }
    .gfv2-board,
    .gfv2-split,
    .gfv2-tablezone {
        height: auto;
        max-height: none;
    }
    /* The fade lives on the desktop scroll area only. */
    .gfv2-morecue {
        display: none;
    }
    .gfv2-rail {
        position: fixed;
        inset: 0;
        z-index: 999;
        display: none;
        background: #fff;
        border-right: 0;
        flex-direction: column;
    }
    .gfv2-rail.is-open {
        display: flex;
    }
    /* Sheet header — 1490:78506. */
    .gfv2-sheethd {
        flex: 0 0 auto;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        min-height: 53px;
        padding: 14px 21px;
        border-bottom: 1px solid #d8d8d8;
    }
    .gfv2-sheettitle {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }
    .gfv2-sheettitle-ico {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
    }
    .gfv2-sheettitle-ico svg {
        display: block;
    }
    .gfv2-page .gfv2-sheethd strong {
        font-size: 14px;
        font-weight: 600;
        line-height: 20.941px;
        color: #010c28;
    }
    .gfv2-page .gfv2-sheetclose {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .gfv2-page .gfv2-sheetclose:hover,
    .gfv2-page .gfv2-sheetclose:focus {
        background: none;
    }
    .gfv2-railinner {
        max-height: none;
        flex: 1 1 auto;
        overflow-y: auto;
    }
    /* Sheet footer — 1490:78516. It rides above the list on a shadow rather
       than a rule, and stays put while the list scrolls under it. */
    .gfv2-sheetfoot {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 37px;
        min-height: 60px;
        padding: 8px 24px;
        border-top: 0;
        background: #fff;
        box-shadow: 0 -1px 10px 0 rgba(0, 0, 0, 0.1);
    }
    .gfv2-page .gfv2-sheetclear {
        flex: 0 0 auto;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        color: #010c28;
        text-decoration: none;
    }
    .gfv2-page .gfv2-sheetapply {
        flex: 1 1 auto;
        height: 40px;
        padding: 0 16px;
        border: 0;
        border-radius: 16px;
        background: #1547eb;
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        color: #fff;
        cursor: pointer;
        max-width: 140px;
    }
    .gfv2-page .gfv2-sheetapply:hover,
    .gfv2-page .gfv2-sheetapply:focus {
        background: #1240d2;
        color: #fff;
    }

    /* ---- the sort sheet ----
       The filter sheet's shell over gfv2_sort_menu(). No Apply step: a sort is
       one choice, so picking it applies and shuts. */
    .gfv2-sortsheet {
        position: fixed;
        inset: 0;
        z-index: 999;
        display: none;
        flex-direction: column;
        background: #fff;
    }
    .gfv2-sortsheet.is-open {
        display: flex;
    }
    .gfv2-sortinner {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
    .gfv2-sortfield {
        padding: 8px 21.08px 8px;
        border-bottom: 1.318px solid rgba(0, 0, 0, 0.12);
    }
    .gfv2-page .gfv2-sortfield-label {
        margin: 0 0 4px !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 17.13px;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: rgba(1, 12, 40, 0.68);
    }
    .gfv2-page .gfv2-sortopt {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        font-size: 14px;
        line-height: 20px;
        color: rgba(1, 12, 40, 0.78);
        text-decoration: none;
    }
    .gfv2-page .gfv2-sortopt.is-on {
        font-weight: 600;
        color: var(--gfv2-blue);
    }
    .gfv2-page .gfv2-sortopt-text {
        flex: 1 1 auto;
    }
    /* With more than one sort on, the order is what decides the table, so the
       place in the chain is shown beside each pick. */
    .gfv2-sortrank {
        flex: 0 0 auto;
        min-width: 20px;
        height: 20px;
        display: inline-grid;
        place-items: center;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        color: #fff;
    }
    .gfv2-sortrank:empty {
        display: none;
    }
    .gfv2-page .gfv2-sortopt.is-on .gfv2-sortrank {
        border-radius: 50%;
        background: var(--gfv2-blue);
    }
    .gfv2-sortarrow {
        flex: 0 0 auto;
        width: 16px;
        font-size: 15.811px;
        line-height: 1;
        color: rgba(1, 12, 40, 0.66);
        text-align: center;
    }
    .gfv2-page .gfv2-sortopt.is-on .gfv2-sortarrow {
        color: var(--gfv2-blue);
    }
    .gfv2-page .gfv2-sortclose {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .gfv2-page .gfv2-sortclose:hover,
    .gfv2-page .gfv2-sortclose:focus {
        background: none;
    }

    /* ---- the sheet's list, scaled up from the Aside (967:125545) ----
       The sheet opens straight onto "What it invests in": the summary row is
       not in 1478:77489, because the header already says Filters and the
       footer carries Clear Filters. */
    .gfv2-rail .gfv2-summary {
        display: none;
    }
    .gfv2-page .gfv2-railgroup {
        height: 30px;
        padding: 0 21.08px;
        font-size: 12px !important;
        line-height: 17.13px;
        letter-spacing: 1.03px;
    }
    .gfv2-facet {
        border-bottom-width: 1.318px;
        border-bottom-color: rgba(0, 0, 0, 0.12);
    }
    /* The Aside puts the caret before the label, not out on the right. */
    .gfv2-page .gfv2-facet-head {
        min-height: 44px;
        padding: 0 21.08px;
        gap: 10px;
    }
    .gfv2-facet-label {
        order: 2;
        flex: 1 1 auto;
        font-size: 14px;
        font-weight: 500;
    }
    .gfv2-facet-right {
        order: 3;
    }
    .gfv2-facet-head .gfv2-caret {
        order: 1;
        width: 9px;
        height: 9px;
        border-width: 1.6px;
    }
    .gfv2-facet-body {
        padding: 0 21.08px 12px;
    }
    .gfv2-opt {
        gap: 12px;
        padding: 4px 0;
        font-size: 14px;
        line-height: 20px;
    }
    .gfv2-opt input {
        width: 14px;
        height: 14px;
        border-radius: 3.294px;
    }
    .gfv2-opt-label {
        color: rgba(1, 12, 40, 0.78);
    }
    .gfv2-opt-n {
        font-size: 12px;
        line-height: 25.297px;
        color: rgba(1, 12, 40, 0.66);
    }
    .gfv2-page .gfv2-showmore {
        height: 20px;
        font-size: 14px;
    }

    /* The phone bar — 1315:34436. Pinned to the foot of the screen, white on
       an #e0e0e0 hairline, and only while the table is in view: it slides up
       from below the fold and drops back once the table has gone. */
    .gfv2-bottombar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 67px;
        /* 30px on the left is where the frame starts the sorted line, 14px on
           the right is where the Filters button ends. */
        padding: 13px 16px 14px;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: transform;
    }
    .gfv2-bottombar.is-on {
        transform: translateY(0);
    }
    /* While the sheet is up its own footer is the sticky one. */
    .gfv2-sheet-open .gfv2-bottombar,
    .gfv2-sheet-open .gfv2-bottombar.is-on {
        transform: translateY(100%);
    }
    @media (prefers-reduced-motion: reduce) {
        .gfv2-bottombar {
            transition: none;
        }
    }
    /* "Sorted by fund size, high to low" — 1368:49019, two short lines. */
    .gfv2-page .gfv2-bb-sorted {
        /* The frame draws this box 71px wide, but its own text overflows it —
           the node is 22px tall against two 14px lines. Letting it run into
           the slack the buttons leave keeps every sort sentence on two lines,
           and the clamp stops a long one from making the bar taller. */
        flex: 0 1 auto;
        min-width: 0;
        max-width: 118px;
        margin: 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 10px;
        font-weight: 400;
        line-height: 14.039px;
        color: rgba(1, 12, 40, 0.68);
    }
    .gfv2-page .gfv2-bb-sorted:empty {
        visibility: hidden;
    }
    /* Sort by / Filters — 1368:48998 and 1315:34437. */
    /* The pair hugs the right edge; the sorted line keeps the left. */
    .gfv2-page .gfv2-bbtn {
        position: relative;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 40px;
        padding: 0 23px;
        border: 1px solid #e5e5e5;
        border-radius: 13px;
        background: #fff;
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        line-height: 20.941px;
        color: #010c28;
        white-space: nowrap;
        cursor: pointer;
    }
    .gfv2-page .gfv2-bbtn:hover,
    .gfv2-page .gfv2-bbtn:focus {
        background: #fff;
        border-color: #cdd5e0;
        color: #010c28;
    }
    .gfv2-page .gfv2-bbtn:first-of-type {
        margin-left: auto;
    }
    .gfv2-bbtn-ico {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
    }
    .gfv2-bbtn-ico svg {
        display: block;
    }
    .gfv2-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: 5px;
        border-radius: 50%;
        background: var(--gfv2-blue);
        vertical-align: middle;
    }
    .gfv2-disclosure {
        padding-bottom: 88px;
    }
}

/* ---- phone: only the fund column stays frozen ---- */
@media (max-width: 640px) {
    .gfv2-page {
        --gfv2-w-fund: 148px;
        --gfv2-w-ret: 142px;
        --gfv2-w-data: 112px;
        --gfv2-w-invest: 104px;
    }
    .gfv2-hero {
        padding: 20px 0 14px;
    }
    .gfv2-hero h1 {
        font-size: 22px;
    }
    .gfv2-search input,
    .gfv2-search input:focus {
        width: 100%;
    }
    /* Fund name runs to two lines in place of the category line, clamped so
       the row height matches the laptop view rather than growing. */
    .gfv2-fn {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .gfv2-hsel {
        font-size: 8.5px;
        max-width: 62px;
    }
    .gfv2-investcell {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* =========================================================================
   Content sections below the board — Audit Fixes desktop frame.
   Guide 1059:132303 · FAQs 1090:134459 · Reading 1090:134704.
   ========================================================================= */

/* Hero illustration sits right of the text — the file is 410x205. */
.gfv2-herorow {
    display: flex;
    align-items: center;
    justify-content: space-between; /* gap: 40px; */
}
.gfv2-herotext {
    min-width: 0;
    margin-top: -53px;
}
.gfv2-heroart {
    flex: 0 0 auto;
    width: 529px;
    height: auto;
    margin-top: -8px;
}

/* Section headings — Sentient Regular 36/42, -1px, on the navy. */
.gfv2-h2 {
    font-family: "Sentient", Georgia, "Times New Roman", serif;
    font-size: 36px;
    font-weight: 400 !important;
    line-height: 42px;
    letter-spacing: -1px;
    color: #002852;
}
.gfv2-h2.is-centre {
    text-align: center;
}
.gfv2-h2sub {
    margin-top: 6px !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #737373;
}

/* ---- Guide ---- */
.gfv2-guide {
    padding: 30px 0 0;
}
.gfv2-guidegrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}
/* 1089:133693 — white on a #eaeaea hairline, 11px radius. */
.gfv2-guidecard {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 11px;
    padding: 16px 24px;
    color: #737373;
}
.gfv2-guidecard.is-wide {
    margin-top: 16px;
}
.gfv2-guidecard h3 {
    font-size: 16px;
    font-weight: 400 !important;
    line-height: 24px;
    letter-spacing: -0.2px;
    color: #737373;
    margin: 0 0 24px !important;
    font-family: "Inter";
}
/* #4: the two cards collapse. The grid stops stretching them to a common
   height, so a shut card is just its heading. */
.gfv2-guidegrid {
    align-items: start;
}
details.gfv2-guidecard > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
}
details.gfv2-guidecard > summary::-webkit-details-marker { display: none; }
details.gfv2-guidecard > summary::marker { content: ""; }
details.gfv2-guidecard > summary h3 {
    margin: 0 !important;
}
details.gfv2-guidecard > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid #aeaeae;
    border-bottom: 2px solid #aeaeae;
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform 0.15s ease;
}
details.gfv2-guidecard[open] > summary::after {
    transform: rotate(-135deg) translate(-3px, -3px);
}
details.gfv2-guidecard[open] > summary {
    margin-bottom: 16px;
}
.gfv2-guidecard p {
    font-size: 14px;
    line-height: 24px;
    color: #737373;
}
.gfv2-guidecard p + p {
    margin-top: 18px !important;
}

/* 1089:134397 — numbered steps, the lead sentence in navy semi-bold. */
.gfv2-steps {
    margin: 0;
    padding-left: 20px;
    list-style: decimal;
}
.gfv2-steps li {
    font-size: 14px;
    line-height: 22.4px;
    color: #676767;
    padding-left: 5px;
}
.gfv2-steps li + li {
    margin-top: 18px;
}
.gfv2-steps b {
    font-weight: 600;
    color: #002852;
}

/* ---- FAQs — 1090:134460 ---- */
.gfv2-faqs {
    padding: 60px 0 40px;
}
.gfv2-faqlist {
    max-width: 878px;
    margin: auto;
}
.gfv2-faq {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.gfv2-page .gfv2-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 24px 28px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.33px;
    color: #212529;
}
.gfv2-faq summary::-webkit-details-marker {
    display: none;
}
.gfv2-faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: currentColor;
    opacity: 0.6;
    -webkit-mask: var(--gfv2-ico-chev) center / contain no-repeat;
    mask: var(--gfv2-ico-chev) center / contain no-repeat;
    transition: transform 0.15s ease;
}
.gfv2-faq[open] summary::after {
    transform: rotate(180deg);
}
.gfv2-faq > p {
    padding: 0 77px 28px 16px;
    font-size: 16px;
    line-height: 24px;
    color: #262626;
    opacity: 0.8;
}
.gfv2-helpline {
    margin-top: 28px !important;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    color: #737373;
}
.gfv2-helpline a {
    color: var(--gfv2-blue);
    text-decoration: none;
}

/* ---- Reading cards — 1090:134668 ---- */
.gfv2-reading {
    padding: 40px 0 60px;
}
.gfv2-readgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
}
.gfv2-readcard {
    display: block;
    background: #fff;
    border: 1px solid #dee1e3;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
}
.gfv2-readcard:hover {
    border-color: var(--gfv2-blue);
}
.gfv2-readimg {
    display: block;
    height: 132px;
    overflow: hidden;
}
.gfv2-readimg img {
    width: 100%;
    height: 132px;
    object-fit: cover;
    display: block;
}
.gfv2-readkicker {
    display: block;
    margin: 18px 18px 0;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 17.8px;
    color: var(--gfv2-blue);
}
/* The frame holds the title to ~185px so it breaks onto two lines. */
.gfv2-readtitle {
    display: block;
    margin: 8px 18px 0;
    max-width: 200px;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    color: #002852;
}
.gfv2-readblurb {
    display: block;
    margin: 12px 18px 0;
    font-size: 12.5px;
    line-height: 19.4px;
    color: #676767;
}
.gfv2-readcta {
    display: block;
    margin: 18px 18px 20px;
    font-size: 13px;
    font-weight: 500;
    line-height: 20.15px;
    color: var(--gfv2-blue);
}



@media (max-width: 1239px) {
    .gfv2-heroart {
        width: 490px;
    }
}

@media (min-width: 960px) and (max-width: 1199px) {
    .gfv2-hero h1 {
        line-height: 54px;
    }
}

@media (max-width: 960px) {
    /* The hero's 180px gutters are a desktop measurement; below the fold they
       squeezed the column to a few words wide. */
    .gfv2-herorow {
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
    }
    .gfv2-herotext {
        margin-top: 0;
    }
    .gfv2-heroart {
        max-width: 100%;
        width: 320px;
        margin-top: 0;
    }
    .gfv2-guidegrid,
    .gfv2-readgrid {
        grid-template-columns: 1fr;
    }
    .gfv2-h2 {
        font-size: 28px;
        line-height: 34px;
    }
    .gfv2-page .gfv2-faq summary {
        font-size: 17px;
        padding: 20px 8px 20px 0;
    }
    .gfv2-faq > p {
        padding: 0 8px 20px 0;
    }
}


@media (max-width: 767px) {
    .gfv2-wrap {
        padding: 0 7px;
    }
    
    .gfv2-crumbs {
        font-size: 12px;
        line-height: 23.4px;
        margin-bottom: 0;
    }
    
    .gfv2-hero h1 {
        font-size: 36px !important;
        line-height: 40px; /* 111.111% */
        max-width: 241px;
    }
    
    .gfv2-heroart {
        position: absolute;
        width: 143px;
        height: 93px;
        aspect-ratio: 143/93;
        right: 0;
        top: 6px;
    }
    
    .gfv2-hero {
        margin: 0;
        position: relative;
        padding: 6px 0 8px;
    }
    
    .gfv2-lede {
        color: #505A64;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px; /* 166.667% */
        margin-top: 12px !important;
    }
    
    .gfv2-screener-wrap {
        padding: 0 7px;
    }
    
    .gfv2-qvlede-wrap {
        padding: 14px 0px 10px 17px;
        border-radius: 8.919px;
    }
    
    .gfv2-qvlede {
        font-size: 9.923px;
        line-height: normal;
        margin-bottom: 5px !important;
    }
    
    .gfv2-chip {
        font-size: 9.923px;
        line-height: normal;
        display: flex;
        height: 29.729px;
        padding: 8.175px 11.147px 8.176px 11.147px;
        gap: 5.669px;
        border-radius: 7.432px;
        border: 0.743px solid #DFE2E6;
    }
    
    .gfv2-chipn {
        font-size: 7.442px;
        font-weight: 600;
        line-height: normal;
        height: 10.405px;
    }
    
    .gfv2-qvrow {
        gap: 6px;
    }
    .gfv2-board {
        padding: 8px;
    }
    
    .gfv2-search {
        width: 205px;
    }
    
    .gfv2-page .gfv2-search input {
        width: 100%;
    }
    
    .gfv2-cbar-right {
        width: calc(100% - 217px);
    }
    
    .gfv2-cbar {
        flex-wrap: wrap;
        gap: 7px;
        position: relative;
        /* reserves the row the Returns control is positioned into */
        padding-bottom: 45px;
        margin-bottom: 7px;
    }
    
    /* Stays absolutely positioned — it sits inside .gfv2-cbar-right, which is
       only ~128px wide, and this is how it escapes to the full bar width.
       What changes is the distribution inside it: the label used to be pinned
       hard left while the pills sat flex-end, so the space between them was
       not spacing, it was leftover width, and it grew with the screen. The
       label is back in the flow and the two pills share what is left, which
       also roughly doubles their tap targets. */
    .gfv2-retctl {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
    }
    
    .gfv2-page .gfv2-pill select {
        font-size: 11.692px;
        line-height: normal;
    }
    
    .gfv2-retctl-label {
        font-size: 11.692px;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.351px;
        flex: 0 0 auto;
        margin-right: 20px;
    }
    /* The two pills take the rest of the bar between them. */
    .gfv2-page .gfv2-retctl .gfv2-pill {
        flex: 1;
        min-width: 0;
    }
    /* Wide pills: the chevron rejoins the flow so it and the label centre as
       one pair, rather than the chevron staying pinned left while the text
       drifts. The select is content-sized here, so the pill's own padding is
       no longer part of it — bindPillTaps() in the JS keeps the whole pill
       clickable. */
    .gfv2-page .gfv2-retctl .gfv2-pill {
        justify-content: center;
        gap: 4px;
        padding: 0 9px;
    }
    .gfv2-page .gfv2-retctl .gfv2-pill::before {
        position: static;
        transform: none;
    }
    .gfv2-page .gfv2-retctl .gfv2-pill select {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        padding: 8px 0;
    }
    .gfv2-page .gfv2-tmeta {
        padding: 9.065px 4.56px 8.935px 11.43px;
    }
    
    .gfv2-page .gfv2-tmeta-count {
        font-size: 10px;
        line-height: 15.209px; /* 152.088% */
    }
    
    .gfv2-page .gfv2-tmeta-stamp {
        font-size: 10px;
        line-height: 14.039px; /* 140.389% */
    }
    
    .gfv2-page .gfv2-tmeta-sort {
        display: none;
    }
    .gfv2-fn a {
        font-size: 12px;
        line-height: 12.832px; /* 106.937% */
    }
    
    .gfv2-fmeta {
        font-size: 8px;
        font-weight: 500;
        line-height: 10.529px; /* 131.615% */
    }
    
    .gfv2-rownum {
        font-size: 8.043px;
        line-height: 12.869px;
    }
    
    .gfv2-page .gfv2-table .gfv2-c-rownum {
        padding: 0px 6px;
    }
    
    .gfv2-page .gfv2-table .gfv2-c-rownum {
        width: 26px;
        min-width: 26px;
        max-width: 26px;
        z-index: 3;
    }
    .gfv2-page {
        --gfv2-w-rownum: 26px;
    }
    
    .gfv2-page .gfv2-table .gfv2-c-fund {
        width: 182px;
        min-width: 182px;
        max-width: 182px;
        z-index: 3;
    }
    
    .gfv2-table tbody .gfv2-num {
        font-size: 9.871px;
        line-height: 15.794px;
    }
    .gfv2-morecue {
        height: calc(100% - 196px);
    }
    .gfv2-rmwrap b {
        font-size: 9.871px;
        line-height: 15.794px;
    }
    
    .gfv2-page .gfv2-itag {
        font-size: 9.871px;
    }
    .gfv2-page .gfv2-tnote {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .gfv2-page .gfv2-tnote-count {
        order: 1;
        font-size: 10px;
    }
    
    .gfv2-page .gfv2-tnote-text {
        order: 2;
        font-size: 10px;
         /* 174% */
    }
    
.gfv2-h2 {
        text-align: center;
        font-size: 24px !important;
        line-height: 30px; /* 125% */
        max-width: 250px;
        margin: auto !important;
    }
    
    .gfv2-h2sub {
        color: #505A64;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px; /* 166.667% */
        max-width: 246px;
        margin: 8px auto 0 !important;
    }
    
    .gfv2-guidegrid {
        margin-top: 12px;
        gap: 8px;
    }
    
    .gfv2-guidecard {
        padding: 14px;
    }
    
    .gfv2-guidecard h3 {
        font-size: 16px;
        line-height: 24px; /* 150% */
        letter-spacing: -0.16px;
        margin-bottom: 12px !important;
    }
    
    .gfv2-guidecard p, .gfv2-steps li {
        font-size: 12px !important;
        font-weight: 400;
        line-height: 20px;
    }
    
    .gfv2-guidecard p + p {
        margin-top: 12px !important;
    }
    
    .gfv2-faqlist {
        margin-top: 12px;
    }
    
    .gfv2-page .gfv2-faq summary {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
        letter-spacing: -0.21px;
        padding: 14px 0px 14px 0;
    }
    
    .gfv2-faq > p {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px; /* 166.667% */
        letter-spacing: -0.24px;
        padding: 0 0 14px;
    }
    
    .gfv2-helpline {
        font-size: 12px;
        font-weight: 400;
        margin-top: 20px !important;
    }
}


/* ---------------------------------------------------------------------------
 * #27 — tappable areas.
 *
 * The icons themselves stay the size the frame draws them; an invisible box is
 * centred on each one instead, so a thumb has 44x44 to aim at without anything
 * moving. The "i" icons were 14x14 and the export icon 16x36, the two the
 * report singled out as genuinely hard to hit.
 * ------------------------------------------------------------------------- */
.gfv2-page .gfv2-tip,
.gfv2-page .gfv2-iconbtn,
.gfv2-page .gfv2-sortbtn {
    position: relative;
}
.gfv2-page .gfv2-tip::after,
.gfv2-page .gfv2-iconbtn::after,
.gfv2-page .gfv2-sortbtn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* Nothing to see — this exists only to be hit. */
    background: transparent;
}

/* ---------------------------------------------------------------------------
 * #29 — a quick view with nothing behind it.
 *
 * The server renders it as a <span> and the client toggles .is-off on whatever
 * element is already there, which on the client path is an <a> that kept its
 * pointer cursor and looked clickable. Anchored on .gfv2-page so the anchor
 * styling cannot win.
 * ------------------------------------------------------------------------- */
.gfv2-page .gfv2-chip.is-off {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * #18 — the quick view strip scrolls sideways on a phone with 562px of chips
 * off screen and nothing saying so. The right edge fades, which is the same
 * cue the table already uses for its own horizontal scroll.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .gfv2-qvrow {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    }
}


/* ---------------------------------------------------------------------------
 * Column headings on a phone.
 *
 * Below 960px the Sort by button and its sheet are the sort control, so the
 * heading's own sort link is duplicate machinery — and the arrow beside every
 * label reads as an affordance that now does the same thing twice. The arrow
 * goes, the link stops being a link, and a tap on the heading raises that
 * column's tooltip instead (see the click handler in js-gf-screener-v2.js).
 * The "i" button keeps working as it always did.
 * ------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .gfv2-page .gfv2-table thead .gfv2-arr {
        display: none;
    }
    .gfv2-page .gfv2-table thead .gfv2-sortbtn {
        pointer-events: none;
        cursor: default;
        color: inherit;
        text-decoration: none;
    }
    /* The whole heading is the tap target for the tooltip. */
    .gfv2-page .gfv2-table thead th[data-coltip] {
        cursor: help;
    }
}