/* ============================================================
   GFS component kit — harvested from gayatrifin.com (2026-09-10)
   All values read from the rendered DOM (getComputedStyle /
   live inline styles), not from source.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
.gfs {
  --bg:#f6f7f9; --card:#fff; --border:#e6e8ec;
  --text:#16181c; --text2:#16181c; --text3:#16181c;   /* SITE TRUTH: all identical */
  --muted:#6b7280;                                    /* site uses this ONLY for ::placeholder */
  --chip:#f0f1f4;
  --accent:oklch(0.5 0.125 252);
  --accent2:oklch(0.44 0.12 252);
  --accent-ink:oklch(0.46 0.12 252);                  /* accent text on light: links, active sort, tabs */
  --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);
  --navy:#061a2f;               --navy-hi:#0b2748;    /* dark surfaces + their hover */
  --ink-on-navy:#dfe4ea;                              /* rgb(223,228,234) */
  --gold:#f4a300;
  font-family:"Hanken Grotesk","Hanken Fallback",sans-serif;
  font-variant-numeric:tabular-nums;
  background:var(--bg); color:var(--text);
}
.gfs-dark { --bg:#020d1c; --card:#061a2f; --border:#253950;
  --text:#eef0f3; --text2:#eef0f3; --text3:#eef0f3; --chip:#172b42; }

/* ---------- 2. SHELLS ---------- */
/* Standard content panel. Radius 14 everywhere EXCEPT the 16px panel you already have. */
.gfs-panel        { background:var(--card); border:1px solid var(--border); border-radius:14px; }
.gfs-panel--pad   { padding:20px 22px; }        /* fund-detail sections */
.gfs-panel--clip  { overflow:hidden; }          /* whenever a table or header band is inside */
.gfs-panel--tight { padding:18px 20px; }        /* sidebar cards */
.gfs-panel--wide  { padding:24px 28px; }        /* category hero */

/* Panel header band (sits inside .gfs-panel--clip, above a table) */
.gfs-panel-bar { padding:14px 20px; display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; border-bottom:1px solid var(--border); }
.gfs-panel-bar__title { font-size:15.5px; font-weight:800; }
.gfs-panel-bar__sub   { font-size:12px; color:var(--text3); }

/* Baseline header row used inside padded sections */
.gfs-sec-head { display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.gfs-sec-head h2 { font-size:16px; font-weight:800; margin:0; }
.gfs-sec-head__meta { font-size:11.5px; color:var(--text3); }

/* Standalone section titles (outside a panel) */
.gfs-h2        { font-size:19px; font-weight:800; letter-spacing:-0.01em; margin:0 0 14px; }
.gfs-h2--lg    { font-size:22px; font-weight:800; letter-spacing:-0.02em; margin:0; }
.gfs-h2--hero  { font-size:26px; font-weight:800; letter-spacing:-0.02em; text-align:center; }
.gfs-h1        { font-size:28px; font-weight:800; letter-spacing:-0.02em; margin:0; }
.gfs-h1--side  { font-size:18px; font-weight:800; letter-spacing:-0.015em;
                 line-height:1.28; margin:0; overflow-wrap:break-word; }
/* Small caps eyebrow / column-group label. THE most reused text style on the site. */
.gfs-eyebrow { font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text3); }
.gfs-eyebrow--wide { letter-spacing:.06em; }       /* card metric labels, sidebar plan label */
.gfs-eyebrow--accent { color:var(--accent-ink); letter-spacing:.06em; }  /* compare-page group rows */

/* Breadcrumb */
.gfs-crumb { font-size:12.5px; color:var(--text3); margin-bottom:14px; }
.gfs-crumb a { color:var(--text3); text-decoration:none; }
.gfs-crumb a:hover { color:var(--accent-ink); }
.gfs-crumb__cur { color:var(--text2); }
@media (max-width:1000px){ .gfs-crumb a{ display:inline-block; padding:12px 2px;
  min-height:44px; box-sizing:border-box; } }

/* ---------- 3. DATA TABLES ---------- */
/* 3a. PRIMARY table (screener, category). Horizontal scroll + sticky FIRST COLUMN.
       Header is NOT vertically sticky anywhere on the site. */
.gfs-tblwrap { overflow-x:auto; }
.gfs-tbl { width:100%; border-collapse:collapse; min-width:960px; }   /* category uses 900px */

.gfs-tbl th { text-align:right; padding:0; white-space:nowrap; }
.gfs-tbl th:first-child {                        /* the sticky name column */
  text-align:left; padding:10px 14px 10px 20px; min-width:280px;      /* 320px on category */
  position:sticky; left:0; background:var(--card); z-index:2;
  font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text3);
}
/* Sortable column = a full-width button inside a zero-padding th */
.gfs-sort { width:100%; text-align:right; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text3); padding:10px 14px; }
.gfs-sort:hover      { color:var(--text); }       /* no-op on this palette; kept for fidelity */
.gfs-sort[aria-sort]:not([aria-sort="none"]) { color:var(--accent-ink); }
/* Affordance is a glyph in a 2nd span: "\u2195" idle, "\u2193" desc, "\u2191" asc. */

.gfs-tbl tbody tr { border-top:1px solid var(--border); }
.gfs-tbl tbody tr:hover { background:var(--chip); }        /* the ONLY row-hover on the site */
.gfs-tbl td:first-child { padding:12px 12px 12px 18px;
  position:sticky; left:0; background:var(--card); z-index:1; }
.gfs-num { padding:12px; text-align:right; font-size:13px; font-weight:600;
  white-space:nowrap; color:var(--text2); }
.gfs-num--strong { color:var(--text); }
.gfs-num--up   { color:var(--green); }
.gfs-num--down { color:var(--red); }
.gfs-num--na   { color:var(--text3); }            /* renders the em dash "—" */
.gfs-tbl__star { padding:12px; text-align:center; }
.gfs-tbl th:last-child { width:44px; }

/* Name cell: checkbox + AMC logo plate + two-line identity */
.gfs-namecell { display:flex; align-items:center; gap:10px; }
.gfs-namecell__id { min-width:0; max-width:280px; }        /* 330px on category */
.gfs-namecell__link { font-size:13px; font-weight:700; color:var(--text);
  text-decoration:none; display:block; line-height:1.35; }
.gfs-namecell__link:hover { color:var(--accent-ink); }
.gfs-namecell__sub { font-size:11.5px; color:var(--text3); margin-top:2px; }

/* 3b. SECONDARY table (fund-detail Peers). Chip-filled header, NO sticky, NO sort. */
.gfs-tbl--plain { min-width:760px; }
.gfs-tbl--plain thead tr { background:var(--chip); }
.gfs-tbl--plain th { text-align:right; padding:10px 14px; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text3); }
.gfs-tbl--plain th:first-child { text-align:left; padding:10px 20px;
  position:static; min-width:0; background:transparent; }
.gfs-tbl--plain td { padding:12px 14px; text-align:right; font-size:13px; color:var(--text2); }
.gfs-tbl--plain td:first-child { padding:12px 20px; text-align:left; position:static; }
.gfs-tbl--plain tbody tr { background:transparent; }
.gfs-row--self { background:var(--tint); }        /* "this fund" highlight row */

/* 3c. GRID pseudo-table (compare page, overlap tool) */
.gfs-gwrap  { overflow-x:auto; }
.gfs-ginner { min-width:680px; }
.gfs-grow { display:grid; grid-template-columns:190px repeat(3,1fr);
  border-top:1px solid var(--border); }
.gfs-grow--head { border-top:0; border-bottom:1px solid var(--border); background:var(--chip); }
.gfs-grow__key { padding:11px 16px; font-size:13px; color:var(--text2); }
.gfs-grow__val { padding:11px 14px; font-size:13.5px; font-weight:600;
  color:var(--text); background:transparent; }
.gfs-grow__val--best { color:var(--green); background:var(--green-t); }
.gfs-grow__group { padding:12px 16px 8px; border-top:1px solid var(--border);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); }

/* Overlap-tool grids */
.gfs-fo-hrow { display:grid; grid-template-columns:minmax(0,1fr) 74px 74px 74px;
  gap:10px; align-items:center; padding:10px 20px;
  border-top:1px solid var(--border); font-size:12.5px; }
.gfs-fo-row  { display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) 132px;
  gap:10px; align-items:center; padding:11px 20px;
  border-top:1px solid var(--border); font-size:12.5px; }
.gfs-fo-hrow--head, .gfs-fo-row--head { padding:9px 20px; background:var(--chip);
  border-top:0; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text3); }
@media (max-width:620px){
  .gfs-fo-row  { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 86px; gap:2px 8px; }
  .gfs-fo-hrow { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 6px; }
  .gfs-fo-row > :nth-child(1), .gfs-fo-hrow > :nth-child(1) {
    grid-column:1 / -1; font-size:11.5px; line-height:1.35; overflow-wrap:anywhere; }
}

/* Table footnote strip (always the last child of the panel) */
.gfs-tblnote { border-top:1px solid var(--border); padding:11px 20px;
  font-size:12px; color:var(--text3); }
/* Note band ABOVE a table (chip-filled) */
.gfs-tblnote--above { border-top:0; padding:10px 20px; background:var(--chip); }
/* Footer with a "view all" link on the left, disclaimer right */
.gfs-tblfoot { border-top:1px solid var(--border); padding:12px 20px; display:flex;
  justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.gfs-viewall { font-size:13px; font-weight:700; text-decoration:none; color:var(--accent); }
.gfs-viewall:hover { color:var(--accent2); }

/* Load-more footer */
.gfs-more { border-top:1px solid var(--border); padding:14px 20px; text-align:center; }
.gfs-more__count { margin-left:10px; font-size:12px; color:var(--text3); }

/* ---------- 4. INLINE CHART PRIMITIVES ---------- */
/* 4a. BREADTH / share bar (homepage market rows). Track is RED-tinted, fill is GREEN.
       Width % = share advancing. */
.gfs-bar       { display:block; height:8px; border-radius:5px;
                 background:var(--red-t); overflow:hidden; }
.gfs-bar__fill { display:block; height:100%; border-radius:5px; background:var(--green); }

/* 4b. COMPARISON bar (fund vs category). Track is neutral chip; fill colour = sign.
       Longest value in the group gets width:100%, others scale against it. */
.gfs-cbar       { height:9px; border-radius:5px; background:var(--chip); overflow:hidden; }
.gfs-cbar__fill { height:100%; border-radius:5px; }
.gfs-cbar__fill--self  { background:var(--accent); }
.gfs-cbar__fill--peer  { background:oklch(0.5 0.125 252 / 0.4); }
.gfs-cbar__fill--neg   { background:var(--red); }            /* used for BOTH self and peer */
.gfs-cbar-row { display:grid; grid-template-columns:92px 1fr 56px; gap:10px; align-items:center; }
.gfs-cbar-row__lbl { font-size:11.5px; color:var(--text3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gfs-cbar-row__val { font-size:12px; font-weight:700; text-align:right; color:var(--text); }
.gfs-cbar-group { display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:start; }
.gfs-cbar-group__period { font-size:12.5px; font-weight:800; color:var(--text2); padding-top:2px; }

/* 4c. SPARKLINE (ticker hover-card). No library — one path + 2 dots.
       SVG: viewBox="0 0 320 46" width="100%" height="46" preserveAspectRatio="none"
       <path fill="none" stroke=<green|red> stroke-width="1.6" stroke-linejoin="round">
       <circle r="2.6" fill=<same>>              last point, full opacity
       <circle r="2.6" fill=<same> opacity=".5">  trough/low marker      */
.gfs-spark { padding:0 16px 10px; }
.gfs-spark svg { display:block; }

/* 4d. FULL NAV LINE CHART (fund detail). viewBox="0 0 900 300".
       Plot box x 62\u2192886, y 14\u2192272. 4 gridlines stroke=var(--border) at
       y=14/100/186/272, right-anchored labels at x=54, font-size 11.
       Two identical <path>: fill=<sign colour> opacity=".08" (area),
       then fill="none" stroke=<sign colour> stroke-width="1.8".
       Date labels y=294, left x=62, right x=886 text-anchor=end.
       Stroke/area colour = sign of the change over the selected window. */
.gfs-chart      { background:var(--card); border:1px solid var(--border);
                  border-radius:14px; overflow:hidden; }
.gfs-chart__head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
                  padding:16px 18px 0; }
.gfs-chart__title { font-size:15px; font-weight:800; color:var(--text); }
.gfs-chart__note  { font-size:11.5px; color:var(--text3); }
.gfs-chart__live  { position:relative; padding:4px 6px 0; }
.gfs-chart svg    { width:100%; height:auto; display:block; touch-action:none; }
.gfs-chart__cross { stroke:var(--accent); stroke-width:1; stroke-dasharray:3 3; display:none; }
.gfs-chart__dot   { fill:var(--accent); r:3.5; display:none; }   /* set r as attribute */
/* Crosshair tooltip */
.gfs-tip { position:absolute; pointer-events:none; background:var(--navy); color:#f2f4f7;
  font-family:inherit; font-size:11.5px; line-height:1.5; padding:7px 10px;
  border-radius:8px; transform:translate(-50%,-130%); white-space:nowrap;
  display:none; z-index:5; font-variant-numeric:tabular-nums; }

/* Chart period pills (the only aria-pressed control on the site) */
.gfs-pills { display:flex; gap:6px; flex-wrap:wrap; padding:12px 18px 4px; }
.gfs-pills button { font-family:inherit; font-size:12px; font-weight:700; padding:6px 13px;
  border-radius:999px; border:1px solid var(--border); background:transparent;
  color:var(--text2); cursor:pointer; transition:.15s; }
.gfs-pills button:not([disabled]):hover { border-color:var(--accent); color:var(--accent); }
.gfs-pills button[aria-pressed="true"] { background:var(--accent);
  border-color:var(--accent); color:#fff; }
.gfs-pills button[aria-pressed="true"]:hover { color:#fff; }
.gfs-pills button[disabled] { opacity:.38; cursor:not-allowed; }

/* Chart footer stat strip — vertical rules, no top/bottom borders between cells */
.gfs-chart-stats { display:flex; flex-wrap:wrap; border-top:1px solid var(--border); }
.gfs-chart-stat  { flex:1 1 150px; padding:13px 18px; border-right:1px solid var(--border); }
.gfs-chart-stat:last-child { border-right:0; }
.gfs-chart-stat .k { display:block; font-size:11.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text3); margin-bottom:4px; }
.gfs-chart-stat .v { display:block; font-size:16px; font-weight:800; color:var(--text);
  font-variant-numeric:tabular-nums; }
.gfs-chart-stat .a { display:block; margin-top:3px; font-size:11px; color:var(--text3); }

/* 4e. DONUT / PROGRESS RING (calculators). 150\u00d7150 rendered, viewBox 0 0 120 120.
       C = 2\u03c0r = 314.16 for r=50. dasharray = "<C*fraction> 314.16".
       Two <text> at y=56 (label 11px/600, fill text3) and y=70 (value 12px/800). */
.gfs-donut { display:flex; justify-content:center; }
/* track:   <circle cx=60 cy=60 r=50 fill=none stroke=var(--border) stroke-width=13>
   value:   <circle cx=60 cy=60 r=50 fill=none stroke=var(--accent) stroke-width=13
              stroke-linecap="round" stroke-dasharray="X 314.16" transform="rotate(-90 60 60)"> */

/* 4f. ARC GAUGE needle angle (you have the arcs): rotate(calc(-180deg + var(--pct)*1.8deg))
       verified: 29.3% advancing \u2192 rotate(-127.3deg), origin 32px 34px. */

/* ---------- 5. CHIPS, BADGES, PILLS ---------- */
/* 5a. Category + risk chips (site's own .chip — reproduce verbatim) */
.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 / .13); color:oklch(0.4  0.17 300); }
.c-debt     { background:oklch(0.55 0.15 245 / .13); color:oklch(0.4  0.14 245); }
.c-hybrid   { background:oklch(0.6  0.14 152 / .15); color:oklch(0.4  0.13 152); }
.c-index    { background:oklch(0.7  0.15 70  / .18); color:oklch(0.43 0.12 70 ); }
.c-solution { background:oklch(0.62 0.12 195 / .15); color:oklch(0.4  0.1  195); }
.c-other    { background:oklch(0.6  0.16 20  / .12); color:oklch(0.44 0.15 20 ); }
.r-1 { background:oklch(0.6  0.14 152 / .15); color:oklch(0.4  0.13 152); } /* Low */
.r-2 { background:oklch(0.65 0.14 130 / .16); color:oklch(0.42 0.12 130); } /* Moderately Low */
.r-3 { background:oklch(0.72 0.15 85  / .18); color:oklch(0.44 0.12 85 ); } /* Moderate */
.r-4 { background:oklch(0.72 0.16 60  / .18); color:oklch(0.46 0.14 60 ); } /* Moderately High */
.r-5 { background:oklch(0.65 0.18 35  / .15); color:oklch(0.47 0.16 35 ); } /* High */
.r-6 { background:oklch(0.58 0.18 27  / .14); color:oklch(0.46 0.18 27 ); } /* Very High */
.gfs-dark .c-equity{background:oklch(0.6 0.19 300/.24);color:oklch(0.84 0.14 300)}
.gfs-dark .c-debt{background:oklch(0.6 0.15 245/.24);color:oklch(0.84 0.12 245)}
.gfs-dark .c-hybrid{background:oklch(0.62 0.14 152/.24);color:oklch(0.85 0.14 152)}
.gfs-dark .c-index{background:oklch(0.72 0.15 70/.24);color:oklch(0.87 0.13 70)}
.gfs-dark .c-solution{background:oklch(0.64 0.12 195/.24);color:oklch(0.86 0.11 195)}
.gfs-dark .c-other{background:oklch(0.62 0.16 20/.22);color:oklch(0.84 0.14 20)}
.gfs-dark .r-1{background:oklch(0.62 0.14 152/.24);color:oklch(0.85 0.14 152)}
.gfs-dark .r-2{background:oklch(0.66 0.14 130/.24);color:oklch(0.86 0.13 130)}
.gfs-dark .r-3{background:oklch(0.74 0.15 85/.24);color:oklch(0.88 0.13 85)}
.gfs-dark .r-4{background:oklch(0.74 0.16 60/.24);color:oklch(0.87 0.14 60)}
.gfs-dark .r-5{background:oklch(0.68 0.18 35/.24);color:oklch(0.85 0.15 35)}
.gfs-dark .r-6{background:oklch(0.62 0.18 27/.24);color:oklch(0.84 0.16 27)}

/* 5b. Neutral square tag — "Top 10 46.96%", "Large Cap", "10.0y of NAV history" */
.gfs-tag { font-size:11.5px; font-weight:600; color:var(--text2); background:var(--chip);
  border-radius:6px; padding:3px 8px; }
.gfs-tag__num { font-weight:800; color:var(--text); }

/* 5c. Verdict / rank badge (scorecard rows, "BEST", "same") */
.gfs-badge { font-size:11.5px; font-weight:800; letter-spacing:.03em; border-radius:5px;
  padding:2px 7px; color:var(--text2); background:var(--chip); }
.gfs-badge--up   { color:var(--green); background:var(--green-t); }
.gfs-badge--down { color:var(--red);   background:var(--red-t); }
.gfs-badge--best { letter-spacing:.04em; padding:2px 6px; border-radius:5px;
  margin-left:7px; vertical-align:1px; color:var(--green); background:var(--green-t); }
.gfs-badge--pill { border-radius:6px; padding:3px 8px; font-size:11px; }  /* overlap "same" */

/* 5d. Delta badge next to a big NAV number */
.gfs-delta { font-size:12.5px; font-weight:700; border-radius:7px; padding:3px 8px; }
.gfs-delta--up   { color:var(--green); background:var(--green-t); }
.gfs-delta--down { color:var(--red);   background:var(--red-t); }

/* 5e. Nav-pill link row (category explorer, calculator switcher) */
.gfs-navpill { font-size:13px; font-weight:600; color:var(--text2); text-decoration:none;
  background:var(--card); border:1px solid var(--border); border-radius:99px; padding:9px 16px; }
.gfs-navpill:hover { border-color:oklch(0.5 0.125 252 / .55); }
.gfs-navpill[aria-current] { color:var(--accent-ink); background:var(--tint);
  border-color:transparent; }
.gfs-navpill--sm { font-size:12.5px; font-weight:700; padding:7px 14px; }  /* calculators */

/* 5f. "VS" divider pill */
.gfs-vs { flex-shrink:0; font-size:11px; font-weight:800; color:var(--text3);
  background:var(--chip); border-radius:99px; padding:6px 10px; }

/* ---------- 6. SEGMENTED CONTROLS, TABS, FILTERS, INPUTS, DROPDOWN ---------- */
/* 6a. Segmented — DOMINANT variant (3 of 6 instances): Cards|Table toggles */
.gfs-seg { display:flex; background:var(--bg); border:1px solid var(--border);
  border-radius:9px; padding:3px; gap:2px; }
.gfs-seg button { background:transparent; color:var(--text3); box-shadow:none; border:none;
  border-radius:7px; padding:6px 14px; font-family:inherit; font-size:12.5px;
  font-weight:700; cursor:pointer; }
.gfs-seg button[aria-selected="true"] { background:var(--card); color:var(--text);
  box-shadow:rgba(10,12,16,.14) 0 1px 3px; }
.gfs-seg button:hover { color:var(--text); }

/* 6b. Segmented — SECONDARY variant (2 instances): borderless, chip trough, larger radii */
.gfs-seg--chip { background:var(--chip); border:0; border-radius:11px; padding:4px;
  display:inline-flex; }
.gfs-seg--chip button { border-radius:8px; padding:8px 15px; font-size:13px;
  color:var(--text2); }
.gfs-seg--chip button[aria-selected="true"] { background:var(--card); color:var(--text);
  box-shadow:rgba(6,26,47,.14) 0 1px 4px; }
.gfs-seg__count { font-weight:600; opacity:.72; }        /* "12 months 130" */
/* Scrollable form used on /research */
.gfs-seg--scroll { overflow-x:auto; scrollbar-width:none; max-width:100%; }
.gfs-seg--scroll button { white-space:nowrap; flex-shrink:0; min-height:44px;
  padding:8px 14px; font-size:12.5px; }

/* 6c. Underline tabs */
.gfs-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); overflow-x:auto; }
.gfs-tabs button { padding:11px 14px; background:none; border:none;
  border-bottom:2px solid transparent; color:var(--text2); font-size:14px;
  font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.gfs-tabs button[aria-selected="true"] { border-bottom-color:var(--accent);
  color:var(--accent-ink); }
.gfs-tabs--tall button { padding:14px 14px 12px; }   /* category page variant */

/* 6d. Search input with inset SVG magnifier
       <svg width=13 height=13 viewBox="0 0 15 15"><circle cx=6.5 cy=6.5 r=4.8
        stroke=var(--text3) stroke-width=1.5><line x1=10.2 y1=10.2 x2=13.6 y2=13.6 \u2026> */
.gfs-search { position:relative; }
.gfs-search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); }
.gfs-search input { width:200px; box-sizing:border-box; background:var(--bg);
  border:1px solid var(--border); border-radius:9px; color:var(--text);
  padding:8px 10px 8px 32px; font-family:inherit; font-size:12.5px; outline:none; }
.gfs-search input:focus { border-color:var(--accent); }
.gfs-search input::placeholder { color:#6b7280; opacity:1; }
@media (max-width:1000px){ .gfs-search input { font-size:16px !important; } }

/* 6e. Toolbar (right-aligned cluster in a panel header) */
.gfs-toolbar { margin-left:auto; display:flex; align-items:center; gap:10px; }
@media (max-width:760px){
  .gfs-toolbar { width:100%; flex-wrap:wrap; row-gap:10px; margin-left:0 !important; }
  .gfs-toolbar .gfs-search { order:3; flex:1 1 100%; }
  .gfs-toolbar .gfs-search input { width:100% !important; }
  .gfs-toolbar .gfs-filterbtn { margin-left:auto; }
}
/* Filters button (icon = 3 stacked lines, viewBox 0 0 18 18, widths 2\u219216, 4.5\u219213.5, 7\u219211) */
.gfs-filterbtn { position:relative; display:flex; align-items:center; gap:7px;
  background:var(--bg); border:1px solid var(--border); border-radius:9px;
  color:var(--text2); padding:8px 13px; font-family:inherit; font-size:12.5px;
  font-weight:700; cursor:pointer; }
.gfs-filterbtn:hover { border-color:oklch(0.5 0.125 252 / .55); }

/* 6f. Filter rail (desktop sticky sidebar \u2192 mobile bottom sheet) */
.gfs-shell { display:grid; grid-template-columns:230px minmax(0,1fr); gap:18px;
  align-items:start; }                  /* fund detail uses 320px; overlap tool 340px */
.gfs-rail { position:sticky; top:80px; display:flex; flex-direction:column; gap:12px; }
@media (min-width:1001px){ .gfs-rail { max-height:calc(100vh - 96px); overflow-y:auto;
  overscroll-behavior:contain; padding-right:6px; } }
@media (max-width:1000px){
  .gfs-shell { grid-template-columns:1fr; }
  .gfs-rail  { display:none !important; }
  .gfs-rail.open { display:flex !important; position:fixed !important;
    inset:auto 0 0 !important; z-index:75; max-height:82vh; overflow-y:auto;
    overscroll-behavior:contain; background:var(--bg); border-radius:18px 18px 0 0;
    padding:0 12px calc(84px + env(safe-area-inset-bottom)); gap:12px;
    box-shadow:rgba(10,12,16,.38) 0 -18px 48px; }
  .gfs-rail.open > * { flex-shrink:0; }
  .gfs-rail.open .gfs-sheetbar { display:flex !important; }
  .gfs-backdrop.open { display:block !important; }
}
.gfs-backdrop { display:none; position:fixed; inset:0; background:rgba(2,8,20,.5); z-index:74; }
.gfs-sheetbar { display:none; position:sticky; top:0; z-index:2; align-items:center;
  justify-content:space-between; gap:12px; padding:12px 4px 10px; background:var(--bg);
  border-bottom:1px solid var(--border); margin-bottom:2px; }
/* Rail contents */
.gfs-railcard { background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:16px 16px 12px; }
.gfs-railcard__head { display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px; }
.gfs-railcard__head span { font-size:13.5px; font-weight:800; }
.gfs-linkbtn { background:none; border:none; color:var(--accent); font-size:12px;
  font-weight:700; cursor:pointer; font-family:inherit; padding:0; }
.gfs-railgroup { font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text3); margin:12px 0 6px;
  border-top:1px solid var(--border); padding-top:12px; }
.gfs-railgroup:first-of-type { margin:10px 0 6px; border-top:0; padding-top:0; }
.gfs-checks { display:flex; flex-direction:column; gap:2px; }
.gfs-checks--scroll { max-height:180px; overflow-y:auto; padding-bottom:4px; }
.gfs-check { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text2);
  padding:4px; border-radius:7px; cursor:pointer; }
.gfs-check:hover { background:var(--chip); }
.gfs-check input { accent-color:var(--accent); width:15px; height:15px; margin:0; }
.gfs-check__name { flex:1 1 0%; }
.gfs-check__count { font-size:11.5px; color:var(--text3); }
.gfs-range { width:100%; accent-color:var(--accent); }

/* 6g. Combobox / dropdown — the site's ONLY real dropdown (overlap tool) */
.gfs-combo { position:relative; }
.gfs-combo__inp { width:100%; box-sizing:border-box; padding:11px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg); color:var(--text);
  font-family:inherit; font-size:14.5px; font-weight:600; outline:none; }
.gfs-combo__inp::placeholder { color:var(--text2); opacity:.72; font-weight:500; }
.gfs-combo__inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--tint); }
.gfs-combo__menu { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:rgba(2,13,28,.18) 0 16px 38px; max-height:352px; overflow-y:auto;
  overscroll-behavior:contain; }
.gfs-combo__opt { display:flex; align-items:center; gap:10px; padding:9px 11px;
  min-height:44px; box-sizing:border-box; cursor:pointer;
  border-top:1px solid var(--border); }
.gfs-combo__opt:first-child { border-top:0; }
.gfs-combo__opt:hover { background:var(--chip); }
/* Selected-state display (replaces the input once chosen) */
.gfs-combo__sel { display:flex; align-items:center; gap:10px; border:1px solid var(--border);
  border-radius:11px; padding:9px 11px; min-height:44px; box-sizing:border-box;
  background:var(--bg); }
.gfs-combo__chg { flex:0 0 auto; background:var(--card); border:1px solid var(--border);
  border-radius:9px; padding:8px 11px; min-height:36px; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:800; color:var(--text2); }
.gfs-combo__chg:hover { border-color:oklch(0.5 0.125 252 / .55); color:var(--text); }
@media (max-width:1000px){
  .gfs-combo__chg { min-height:44px; }
  .gfs-combo__inp { font-size:16px; min-height:44px; }
}

/* 6h. Month strip (NFO) */
.gfs-months { display:flex; gap:7px; overflow-x:auto; padding:2px 2px 8px;
  scrollbar-width:thin; }
.gfs-months > button { flex:0 0 auto; display:flex; flex-direction:column;
  align-items:center; gap:2px; min-width:58px; padding:8px 9px; border-radius:10px;
  border:1px solid var(--border); background:var(--card); color:var(--text2);
  font-family:inherit; cursor:pointer; }
.gfs-months__m { font-size:11px; font-weight:700; letter-spacing:.04em; }
.gfs-months__n { font-size:16px; font-weight:800; line-height:1.1; }
.gfs-months__y { font-size:11px; opacity:.75; }

/* ---------- 7. CARDS, KEY-VALUE, SCORECARDS ---------- */
/* 7a. Fund card grid (screener + NFO share this exactly) */
.gfs-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:14px; padding:16px 20px; }
@media (max-width:560px){ .gfs-cards { grid-template-columns:1fr; padding:14px; } }
.gfs-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; }
.gfs-card:hover { border-color:oklch(0.5 0.125 252 / .5);
  box-shadow:rgba(10,12,16,.08) 0 6px 20px; }
.gfs-dark .gfs-card:hover { box-shadow:rgba(0,0,0,.32) 0 6px 20px; }
.gfs-card__top { display:flex; align-items:center; gap:9px; min-height:32px; }
.gfs-card__name { font-size:14px; font-weight:800; color:var(--text);
  text-decoration:none; line-height:1.32; }
.gfs-card__name:hover { color:var(--accent-ink); }
.gfs-card__chips { display:flex; flex-wrap:wrap; gap:6px; }
.gfs-card__big { font-size:21px; font-weight:800; letter-spacing:-0.015em; line-height:1.15; }
.gfs-card__cap { font-size:11px; color:var(--text3); margin-top:2px; }
.gfs-card__mid { margin-top:auto; }
.gfs-card__actions { display:flex; gap:7px; }

/* 7b. AMC logo plate — text name behind, logo absolutely on top (graceful degrade) */
.gfs-logo { position:relative; flex:0 0 auto; display:flex; align-items:center;
  overflow:hidden; }
.gfs-logo > span { font-size:11.5px; font-weight:700; color:var(--text2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.gfs-logo > img { position:absolute; left:0; top:0; width:100%; height:100%;
  box-sizing:border-box; padding:2px 5px; border-radius:7px; background:#fff;
  object-fit:contain; object-position:left center; }
/* sizes actually used: 138\u00d732 card \u00b7 76\u00d726 table row \u00b7 168\u00d744 (pad 3px 7px, radius 11px)
   fund-detail sidebar \u00b7 110\u00d730 compare header \u00b7 96\u00d724 compare picker */

/* 7c. 4-up metric footer inside a card */
.gfs-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
  border-top:1px solid var(--border); padding-top:10px; }
.gfs-metrics__k { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text3); }
.gfs-metrics__v { font-size:12.5px; font-weight:700; margin-top:1px; color:var(--text); }

/* 7d. Key\u2013value fact row (scheme facts, cost, top holdings — one shape, 3 uses) */
.gfs-kv { display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:9px 0; border-top:1px solid var(--border); }
.gfs-kv__k { font-size:12.5px; color:var(--text3); flex-shrink:0; }
.gfs-kv__v { font-size:13px; font-weight:700; text-align:right; }
/* Ladder variant (returns table) */
.gfs-kv--ladder { gap:10px; padding:8px 0; }
.gfs-kv--ladder .gfs-kv__k { font-size:12.5px; color:var(--text2); }
.gfs-kv--ladder .gfs-kv__v { font-size:13.5px; font-weight:700; }
/* Holding variant: name + sector stacked on the left, weight right */
.gfs-kv__name { font-size:13px; font-weight:600; color:var(--text2); display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gfs-kv__sub  { font-size:11.5px; color:var(--text3); }
.gfs-kv__wt   { font-size:13.5px; font-weight:700; flex-shrink:0; }
/* Compact borderless variant (cost panel) */
.gfs-kvlist { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.gfs-kvlist > div { display:flex; justify-content:space-between; gap:10px; }
.gfs-kvlist span:first-child { color:var(--text3); }
.gfs-kvlist span:last-child  { font-weight:700; }

/* 7e. "At a glance" stat tile row (category hero, risk grid, overlap trio) */
.gfs-stattiles { display:flex; gap:10px; flex-wrap:wrap; }
.gfs-stattile { border:1px solid var(--border); border-radius:12px; padding:12px 16px;
  min-width:104px; }
.gfs-stattile__k { font-size:11.5px; color:var(--text3); }
.gfs-stattile__v { font-size:19px; font-weight:800; margin-top:2px; }
.gfs-stattile__a { font-size:11px; color:var(--text3); margin-top:2px; }
/* Text-valued variant drops a point and gains 1px of top margin */
.gfs-stattile__v--text { font-size:18px; margin-top:3px; }
/* Tighter grid variant (Risk 2\u00d72, overlap 3-up) */
.gfs-stattile--sm { border-radius:11px; padding:12px 14px; min-width:0; }
.gfs-stattile--sm .gfs-stattile__k { font-size:11px; }
.gfs-stattile--sm .gfs-stattile__v { font-size:17px; }
.gfs-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gfs-two   { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gfs-three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width:1000px){ .gfs-two { grid-template-columns:1fr; } }
@media (max-width:720px){ .gfs-three { grid-template-columns:1fr; } }

/* 7f. SCORECARD row (expandable, icon + title + verdict badge + one-line reason) */
.gfs-score { cursor:pointer; display:flex; gap:12px; align-items:flex-start;
  padding:11px 4px; margin:0 -4px; border-bottom:1px solid var(--border);
  border-radius:8px; }
.gfs-score:hover { background:var(--chip); }
.gfs-score__icon { width:34px; height:34px; flex-shrink:0; border-radius:9px;
  background:var(--chip); display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:var(--text2); }
.gfs-score__icon--up   { background:var(--green-t); color:var(--green); }
.gfs-score__icon--down { background:var(--red-t);   color:var(--red); }
.gfs-score__body { min-width:0; flex:1 1 0%; }
.gfs-score__head { display:flex; align-items:center; gap:8px; }
.gfs-score__title { font-size:13.5px; font-weight:700; }
.gfs-score__why { font-size:12px; color:var(--text3); margin-top:2px; line-height:1.45; }
/* Chevron: <svg width=10 height=6 viewBox="0 0 10 6"><polyline points="1,1 5,5 9,1"
   stroke=var(--text3) stroke-width=1.5 stroke-linecap=round stroke-linejoin=round>
   style="margin-top:6px;flex-shrink:0;transform:rotate(0deg);transition:transform .15s"
   \u2192 rotate(180deg) when open. Glyphs used: \u2197 \u26a0 \u20b9 \u23f1 \u21bb \u2193 \u25a6 \u25cb  */

/* 7g. Head-to-head compare card */
.gfs-h2h { background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:16px 18px; text-decoration:none; display:flex; align-items:center; gap:12px; }
.gfs-h2h:hover { border-color:oklch(0.5 0.125 252 / .55); }
.gfs-h2h__side { flex:1 1 0%; min-width:0; }
.gfs-h2h__side--r { text-align:right; }
.gfs-h2h__name { font-size:13.5px; font-weight:700; color:var(--text); line-height:1.35; }
.gfs-h2h__meta { font-size:12px; color:var(--text3); margin-top:2px; }
.gfs-h2h__val  { font-weight:700; }   /* + --up / --down colour */

/* 7h. Article card (research) */
.gfs-artcard { background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:18px; text-decoration:none; display:flex; flex-direction:column; gap:10px; }
.gfs-artcard:hover { border-color:oklch(0.5 0.125 252 / .55);
  transform:translateY(-4px); box-shadow:rgba(10,12,16,.1) 0 18px 36px; }
.gfs-artcard__img { height:132px; margin:-18px -18px 2px; border-radius:14px 14px 0 0;
  background-color:var(--chip); background-size:cover; background-position:center; }
.gfs-artcard__kicker { font-size:11.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text2); background:var(--chip);
  border-radius:5px; padding:3px 8px; }
.gfs-artcard__title { font-size:15px; font-weight:700; color:var(--text); line-height:1.4; }
.gfs-artcard__dek { font-size:12.5px; color:var(--text3); line-height:1.5; }
.gfs-artcard__foot { display:flex; justify-content:space-between; align-items:center;
  margin-top:auto; padding-top:8px; border-top:1px solid var(--border); }
.gfs-artcard__cta { font-size:12.5px; font-weight:700; color:var(--accent-ink); }
.gfs-cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

/* ---------- 8. NOTICES, EMPTY STATES, DISCLOSURE, CTA ---------- */
/* 8a. Footnote — the site's universal disclaimer treatment */
.gfs-foot { font-size:11.5px; color:var(--text3); margin-top:12px; line-height:1.55; }
.gfs-foot--lg   { line-height:1.6; margin-top:14px; }
.gfs-foot--info { padding:0 4px; line-height:1.5; }   /* prefix a literal "\u24d8" */

/* 8b. Inline explainer / "not disclosed" band */
.gfs-note { background:var(--chip); border-radius:10px; padding:10px 13px;
  font-size:12.5px; font-weight:600; color:var(--text2); line-height:1.5; margin-top:12px; }
/* Accent variant: promotes the note to a page-level caveat */
.gfs-note--accent { background:var(--card); border-left:4px solid var(--accent);
  border-radius:14px; padding:13px 16px; margin:0 0 18px; font-weight:400;
  font-size:13.5px; line-height:1.55; }
/* Tinted CTA note */
.gfs-note--cta { background:var(--tint); display:flex; justify-content:space-between;
  align-items:center; gap:10px; font-size:12px; font-weight:400; }
.gfs-note__arrow { width:18px; height:18px; border-radius:99px; background:var(--accent);
  color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; }

/* 8c. Disclosure accordion (details/summary, "+" not a chevron) */
.gfs-acc { border-top:1px solid var(--border); padding:13px 2px; }
.gfs-acc > summary { display:flex; gap:12px; align-items:center; list-style:none;
  cursor:pointer; }
.gfs-acc > summary::-webkit-details-marker { display:none; }
.gfs-acc__plus { color:var(--accent); font-size:17px; font-weight:600; line-height:1;
  flex-shrink:0; }
.gfs-acc__q { font-size:14px; font-weight:700; }
.gfs-acc > p { font-size:13.5px; color:var(--text2); line-height:1.6;
  margin:10px 0 0 29px; max-width:680px; }
details[open] > :not(summary) { animation:.18s ease-out both gfsRevealIn; }
@keyframes gfsRevealIn { from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:none} }

/* 8d. Empty state (only one on the site — /watchlist). Note the DASHED border. */
.gfs-empty { background:var(--card); border:1px dashed var(--border); border-radius:14px;
  padding:48px 24px; text-align:center; }
.gfs-empty__icon { width:48px; height:48px; border-radius:14px; background:var(--tint);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.gfs-empty__title { font-size:16px; font-weight:800; margin-bottom:6px; }
.gfs-empty__body  { font-size:13.5px; color:var(--text2); margin-bottom:20px; }
.gfs-empty__acts  { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
/* In-table empty state: a single full-span cell, NOT the block above */
.gfs-empty-cell { padding:28px 20px; font-size:13.5px; color:var(--text2); }

/* 8e. Loading skeleton — the site ships NO app-level skeleton. Only the
       Claude Design runtime placeholder. Faithful reproduction: */
.gfs-skel { background:color-mix(in srgb, currentcolor 8%, transparent);
  border:1px solid color-mix(in srgb, currentcolor, transparent);
  border-radius:2px; box-sizing:border-box; overflow:hidden; }
.gfs-skel--shine { position:relative;
  background:color-mix(in srgb, currentcolor 5%, transparent); border-color:transparent; }
.gfs-skel--shine::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,
    rgba(217,119,87,0) 63%) 0 0 / 400% 100%;
  animation:1.4s ease infinite gfsShine; }
@keyframes gfsShine { from{background-position:100% 50%} to{background-position:0 50%} }

/* 8f. Dark CTA band (suitability strip, newsletter) */
.gfs-cta { background:radial-gradient(520px 260px at 15% -20%,
    oklch(0.5 0.125 252 / .25), transparent 70%) var(--navy);
  border-radius:14px; padding:22px 28px; display:flex; justify-content:space-between;
  align-items:center; gap:16px; flex-wrap:wrap; }
.gfs-cta--right { background:radial-gradient(420px 220px at 85% -20%,
    oklch(0.5 0.125 252 / .25), transparent 70%) var(--navy); padding:22px 26px; }
.gfs-cta__eyebrow { font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:oklch(0.74 0.09 252); margin-bottom:6px; }
.gfs-cta__title { font-size:20px; font-weight:800; color:#fff; letter-spacing:-0.01em; }
.gfs-cta__sub   { font-size:13px; color:#d3dae3; margin-top:3px; }
.gfs-btn--onnavy { background:#fff; color:var(--text); font-weight:700; font-size:13.5px;
  padding:11px 20px; border-radius:10px; text-decoration:none; white-space:nowrap; }
.gfs-btn--onnavy:hover { background:#e9ebef; color:var(--text); }

/* 8g. Buttons / links used with data */
.gfs-btn { text-align:center; font-weight:700; font-size:13.5px; padding:11px 20px;
  border-radius:10px; text-decoration:none; border:none; cursor:pointer;
  font-family:inherit; }
.gfs-btn--primary { background:var(--accent); color:#fff; }
.gfs-btn--primary:hover { background:var(--accent2); color:#fff; }
.gfs-btn--buy     { background:var(--green); color:#fff; }        /* Start SIP */
.gfs-btn--buy:hover { background:oklch(0.53 0.14 152); color:#fff; }
.gfs-btn--ghost   { border:1px solid var(--border); color:var(--text); background:none; }
.gfs-btn--ghost:hover { border-color:oklch(0.5 0.125 252 / .55); }
.gfs-btn--sell    { border:1.5px solid var(--red); color:var(--red); background:none;
  font-weight:800; font-size:14.5px; padding:12px 0; border-radius:11px; }
.gfs-btn--quiet { flex:1 1 0%; text-align:center; border:1px solid var(--border);
  border-radius:9px; padding:8px 6px; font-size:12.5px; font-weight:700;
  color:var(--text2); text-decoration:none; }
.gfs-btn--quiet:hover { border-color:oklch(0.5 0.125 252 / .55); color:var(--text); }
.gfs-star { background:none; border:none; cursor:pointer; font-size:16px; line-height:1;
  color:var(--border); padding:2px; font-family:inherit; flex-shrink:0; }
.gfs-star[aria-pressed="true"] { color:var(--gold); }   /* inferred; idle state verified */

/* 8h. Floating selection bar (compare tray) */
.gfs-tray { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:70;
  background:var(--navy); border-radius:14px; box-shadow:rgba(10,12,16,.35) 0 16px 48px;
  padding:10px 12px; display:flex; align-items:center; gap:10px;
  max-width:calc(100vw - 32px); }
.gfs-tray__n { font-size:12.5px; font-weight:700; color:#fff; padding-left:6px;
  white-space:nowrap; }
.gfs-tray__names { font-size:12px; color:var(--ink-on-navy); max-width:380px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gfs-tray__go { background:var(--accent); color:#fff; font-weight:700; font-size:13px;
  padding:8px 16px; border-radius:9px; text-decoration:none; white-space:nowrap; }
.gfs-tray__clear { background:none; border:none; color:var(--ink-on-navy); font-size:12.5px;
  font-weight:600; cursor:pointer; font-family:inherit; padding:6px; }
.gfs-tray__clear:hover { color:#fff; }
@media (max-width:920px){ .gfs-tray { bottom:78px; } }

/* 8i. Hover detail card (ticker popover) */
.gfs-pop { position:fixed; z-index:200; width:min(360px, 100vw - 24px);
  background:var(--card); color:var(--text); border:1px solid var(--border);
  border-radius:16px; box-shadow:rgba(10,12,16,.28) 0 22px 60px; overflow:hidden;
  animation:.17s ease-out both gfsPop; }
@keyframes gfsPop { from{opacity:0;transform:translateY(-7px) scale(.985)}
                    to{opacity:1;transform:none} }
.gfs-pop__close { position:absolute; top:10px; right:10px; width:30px; height:30px;
  border:0; background:var(--chip); color:var(--text2); border-radius:9px; cursor:pointer;
  font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; }
.gfs-pop__close:hover { background:var(--border); }
/* 3-col mini stat grid drawn with 1px gaps over a border-coloured background */
.gfs-popgrid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px;
  background:var(--border); }
.gfs-popgrid > div { background:var(--card); padding:9px 12px; }
.gfs-popgrid__k { font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text3); }
.gfs-popgrid__v { font-size:13.5px; font-weight:700; margin-top:2px; }
.gfs-pop__cta { display:block; margin:12px; padding:12px; border-radius:11px;
  background:var(--navy); color:#fff; text-align:center; text-decoration:none;
  font-weight:700; font-size:14.5px; }
.gfs-pop__cta:hover { background:var(--navy-hi); }

/* ---------- 9. MOTION + MOBILE HYGIENE (site-wide, worth keeping) ---------- */
button,a,summary,input,select,textarea,[role="option"],[role="tab"]{
  transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s,
             opacity .18s,transform .18s; }
.gfs-panel-in { animation:.22s cubic-bezier(.4,0,.2,1) both gfsPanelIn; }
@keyframes gfsPanelIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@media (max-width:1000px){
  button { min-height:44px; }
  a[href] { min-height:44px; align-content:center; }
  input[type=text],input[type=email],input[type=search],input[type=number],
  input[type=tel],input[type=date],input:not([type]),textarea,select { font-size:16px !important; }
}
@media (prefers-reduced-motion:reduce){
  button,a,summary,input,select,textarea,[role="option"],[role="tab"]{ transition:none; }
  .gfs-panel-in,.gfs-pop,details[open]>:not(summary){ animation:none; }
}