/* ETF Trace design system, "Capital" direction.
   One stylesheet for the single-page app (landing + analyzer) and the
   server-rendered comparison / fund pages, so every surface reads as one product.
   Tokens below are the values from the design guide, copied verbatim. */

/* Self-hosted webfonts (frontend/fonts/, served at /fonts/): the same files
   Google Fonts serves (Manrope v20 variable 400-800, IBM Plex Mono v20), hosted
   here because the CSP (default-src 'self') never allowed the Google origins,
   so the old fonts.googleapis.com <link> silently fell back to system fonts in
   production. latin + latin-ext subsets only; unicode-range keeps latin-ext
   lazy. The landing preloads manrope-latin.woff2 (the LCP headline font). */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: optional; src: url(fonts/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: optional; src: url(fonts/manrope-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: optional; src: url(fonts/plexmono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: optional; src: url(fonts/plexmono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: optional; src: url(fonts/plexmono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: optional; src: url(fonts/plexmono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: optional; src: url(fonts/plexmono-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: optional; src: url(fonts/plexmono-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Metrics-matched local fallbacks so the Manrope swap cannot reflow the page
   (that reflow was the remaining mobile layout shift after the scan fix).
   Values are computed from the fonts' own tables: size-adjust is the ratio of
   frequency-weighted average glyph advances (hmtx), ascent/descent/line-gap
   are hhea values normalized by upm and the size-adjust. Arial covers
   Windows/macOS, Roboto covers Android; either resolves via local(). */
@font-face { font-family: 'Manrope Fallback'; src: local('Arial'); size-adjust: 100.43%; ascent-override: 106.15%; descent-override: 29.87%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback Android'; src: local('Roboto'); size-adjust: 99.95%; ascent-override: 106.65%; descent-override: 30.02%; line-gap-override: 0%; }

:root {
  /* surfaces */
  --canvas: #F6F7F4;
  --surface: #FFFFFF;
  --ink: #0C2A28;
  --body: #16201C;
  --muted: #6A7873;
  --faint: #878D89;
  --faint-2: #9AA39E;
  --faint-3: #A3A9A5;
  --hairline: #ECEBE4;
  --row-line: #F1F3F1;
  --border: #E6E8E6;
  /* greens: your money, positives */
  --primary: #0F7D6B;
  --primary-bright: #11A98F;
  --primary-deep: #0A6E62;
  --primary-deepest: #085A50;
  --tint: #E7F2EE;
  --mint: #3DDAB4;
  /* one warm highlight */
  --gold: #E0A93B;
  /* risk ramp: diversified -> high */
  --risk-1: #3DDAB4;
  --risk-2: #E0A93B;
  --risk-3: #E08A42;
  --risk-4: #E06B57;
  /* type */
  --sans: 'Manrope', 'Manrope Fallback', 'Manrope Fallback Android', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

@keyframes ltspin { to { transform: rotate(360deg); } }
@keyframes ltfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* landing 3a merge-flow ribbons fade in left->right; 3b report tabs crossfade */
/* The report panels carry an inline display for their own layout, which would
   otherwise override the `hidden` attribute (inline style beats the UA [hidden]
   rule), so every panel shows at once. Force hidden panels off so exactly one
   tab is visible at a time. */
[data-rpanel][hidden] { display: none !important; }
@keyframes ribbonIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tabFade  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [style*="ribbonIn"], [data-rpanel] { animation: none !important; }
}

/* ---- landing + app layout grids (from the reference build) ---- */
.ltHero  { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 48px; align-items: center; }
.ltFeat  { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.ltSteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ltTesti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ltFoot  { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.ltApp   { display: grid; grid-template-columns: 1.66fr 1fr; }
.ltKpi   { display: grid; grid-template-columns: repeat(4, 1fr); }
.ltScroll { overflow-x: auto; }
.ltRiskMetrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ltRiskGrid    { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
.ltGeoGrid     { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.ltGeoStack    { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ltGeoTrio     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.ltOvGrid      { display: grid; grid-template-columns: 1.66fr 1fr; gap: 22px; align-items: start; }
.ltAcct        { display: grid; grid-template-columns: 234px 1fr; gap: 28px; align-items: start; padding: 20px 28px 28px; }
/* A grid's 1fr track will not shrink below its content's min width; without
   this, one nowrap row inside the account body widens the whole document on
   phones and every card runs past the right edge. */
.ltAcct > *    { min-width: 0; }
@media (max-width: 760px) { .ltAcct { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 480px) { .ltAcct { padding: 14px 14px 24px; } }
/* top-nav Menu dropdown (native <details>, so it works under the strict CSP) */
.ltMenu > summary { list-style: none; }
.ltMenu > summary::-webkit-details-marker { display: none; }
.ltMenuItem { display: block; padding: 9px 13px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: #16201c; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ltMenuItem:hover { background: #F2F9F6; color: #0F7D6B; text-decoration: none; }
/* in-app "More" tab dropdown */
.ltMore > summary { list-style: none; }
.ltMore > summary::-webkit-details-marker { display: none; }
.ltMoreItem { display: block; padding: 9px 13px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: #16201c; cursor: pointer; white-space: nowrap; }
.ltMoreItem:hover { background: #F2F9F6; color: #0F7D6B; }
.ltRiskVerdict { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.ltPopular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
/* Overview redesign (Direction A) + tab-refresh grids */
.ltRibbon  { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* min-width:0 lets a cell shrink below its number's min-content width, so a wide
   mono value scales/wraps inside the card instead of spilling over its border */
.ltRibbon > div { border-right: 1px solid var(--row-line); min-width: 0; }
.ltRibbon > div:last-child { border-right: 0; }
.ltTwoUp   { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.ltFundCards   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ltOverlapGrid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 18px; align-items: start; }
/* Grid items default to min-width:auto, so a wide child (the horizontally
   scrollable holdings table, the overlap heatmap) stretches the column past the
   viewport instead of scrolling inside it. Let these cells shrink. */
.ltApp > *, .ltOvGrid > *, .ltTwoUp > *, .ltGeoGrid > *,
.ltRiskGrid > *, .ltOverlapGrid > *, .ltFundCards > *, .ltGeoTrio > * { min-width: 0; }
.ltSectorLegend { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px 16px; }
@media (max-width: 560px) { .ltSectorLegend { grid-template-columns: 1fr 1fr; } }

/* Overlap network graph: the overlap tab's hero card. SVG on the left (fixed
   viewBox, scales with the column), insights list on the right; the two stack
   on narrow screens. Edge emphasis lives on the SVG attributes; hover only
   lifts the line to full opacity. */
.ovCard  { background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 20px 24px 22px; margin-bottom: 18px; }
.ovHead  { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.ovSub   { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.ovTitle { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.ovHeadRight { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ovGridLink  { font-size: 12px; font-weight: 600; color: var(--primary); cursor: pointer; white-space: nowrap; }
.ovSeg > span[role="button"] { font-size: 11.5px; padding: 5px 11px; }
/* Single column: the diagram gets the full card width, insights sit under it as
   a strip, so the whole card reads as one balanced shot when screenshotted. */
.ovBody  { display: block; }
.ovStage { background: radial-gradient(120% 80% at 50% 32%, #fbfdfc 0%, #f7faf8 55%, #f3f7f4 100%); border: 1px solid var(--row-line); border-radius: 12px; padding: 6px 8px 2px; }
.ovSvg   { width: 100%; height: auto; display: block; }
/* Figure + "What you own" rail. The rail rides inside the stage so a screenshot
   of the tinted panel carries the holdings payoff; it folds away on narrow
   screens (the Companies tab holds the full list). */
.ovStageGrid { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 10px; align-items: center; }
.ovRail      { align-self: center; padding: 10px 8px 10px 14px; border-left: 1px solid rgba(12,42,40,0.08); }
.ovRailHead  { font-size: 11px; font-weight: 600; color: var(--muted); }
.ovRailCount { margin: 6px 0 7px; }
.ovRailCount .mono { font-size: 17px; font-weight: 600; color: var(--ink); }
.ovRailCount span + span { font-size: 10.5px; color: var(--faint); }
.ovRailRow   { display: flex; align-items: baseline; gap: 7px; padding: 2px 0; }
.ovRailRank  { font-size: 9px; color: var(--faint-2); width: 12px; flex: none; }
.ovRailName  { font-size: 11px; font-weight: 600; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.ovRailPct   { font-size: 10.5px; font-weight: 600; color: var(--body); }
.ovRailMore  { margin-top: 7px; }
.ovRailMore span { font-size: 11px; font-weight: 600; color: var(--primary); cursor: pointer; }
@media (max-width: 720px) {
  .ovStageGrid { grid-template-columns: 1fr; }
  .ovRail { display: none; }
}
.ovEdge  { transition: stroke-opacity 0.12s ease; cursor: pointer; }
.ovEdge:hover { stroke-opacity: 1; }
.ovLegend { display: flex; align-items: center; gap: 8px; margin: 4px 6px 2px; flex-wrap: wrap; }
.ovLegend .mono { font-size: 11px; font-weight: 600; color: var(--body); }
.ovLegendCap { font-size: 11px; color: var(--faint); }
.ovStrip { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; padding-top: 15px; border-top: 1px solid var(--row-line); }
.ovStat  { flex: 1 1 120px; min-width: 108px; display: flex; flex-direction: column; gap: 5px; }
.ovStatK { font-size: 11px; color: var(--muted); font-weight: 500; }
.ovStatV { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.ovStatV b { font-size: 16px; color: var(--ink); }
.ovInsPair  { display: inline-flex; align-items: center; gap: 4px; }
.ovNote     { font-size: 11.5px; color: var(--faint-2); line-height: 1.5; margin: 12px 0 0; }
/* Hover affordance + a subtle entrance reveal. .ovAnim is only ever on a freshly
   rebuilt SVG (first show, tab open, or metric toggle -- gated by a signature in
   paintOverlapGraph), so the reveal plays on those moments and not on every
   unrelated state change. animation ends leave elements at their natural styles
   (backwards fill), so the node hover-scale still works. */
.ovSvg .ovNodeG { transform-box: fill-box; transform-origin: center; cursor: pointer; transition: transform .14s ease; }
.ovSvg .ovNodeG:hover { transform: scale(1.06); }
@keyframes ovNodeIn { from { opacity: 0; transform: scale(.5); } }
@keyframes ovEdgeIn { from { stroke-dashoffset: 1; } }
@keyframes ovFadeIn { from { opacity: 0; } }
.ovAnim .ovNodeG { animation: ovNodeIn .45s cubic-bezier(.2, .7, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 16ms); }
.ovAnim .ovEdge  { stroke-dasharray: 1; animation: ovEdgeIn .5s ease backwards; animation-delay: calc(.1s + var(--i, 0) * 8ms); }
.ovAnim .ovLbl   { animation: ovFadeIn .4s ease .5s backwards; }
.ovAnim .ovPill  { animation: ovFadeIn .45s ease .3s backwards; }
.ovAnim .ovWm    { animation: ovFadeIn .7s ease .5s backwards; }
@media (prefers-reduced-motion: reduce) {
  .ovAnim .ovNodeG, .ovAnim .ovEdge, .ovAnim .ovLbl, .ovAnim .ovPill, .ovAnim .ovWm { animation: none; }
}
/* Keep the diagram legible on phones: it pans inside its own scroll container
   (same pattern as the overlap grid's .ltScroll) instead of shrinking to the
   column or widening the page. */
@media (max-width: 640px) {
  .ovScroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ovSvg    { min-width: 520px; }
}

/* Verify-step fund row: weight | fund | status+as-of date | remove. On phones the
   four fixed/auto tracks can't fit, so the status-and-date cell drops under the fund
   name and the remove control sits top-right, keeping every field readable. */
.ltVfRow  { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 14px; align-items: center; }
.ltVfMid  { min-width: 0; }
.ltVfPill { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
@media (max-width: 520px) {
  .ltVfRows { padding: 16px 18px 4px !important; }
  .ltVfRow  { grid-template-columns: 68px minmax(0,1fr) auto;
              grid-template-areas: "wt name rm" ". pill pill"; column-gap: 10px; row-gap: 8px; align-items: start; }
  .ltVfWt   { grid-area: wt; align-self: start; }
  .ltVfMid  { grid-area: name; align-self: start; }
  .ltVfPill { grid-area: pill; align-items: flex-start; padding-left: 46px; min-width: 0; }
  .ltVfRm   { grid-area: rm; align-self: start; }
  .ltVfWeightsBar {
    align-items: stretch !important;
    flex-direction: column;
    padding: 6px 18px 16px !important;
  }
  .ltVfWeightActions {
    justify-content: space-between;
    min-width: 0;
    width: 100%;
  }
  .ltVfWeightActions .seg {
    flex: 0 1 auto;
    min-width: 0;
  }
  .ltVfWeightActions .seg > span[role="button"] {
    font-size: 12px;
    min-height: 44px;
    padding: 8px 9px;
  }
  .ltVfWeightTotal { width: 100%; }
  .ltVfSummaryCell { min-width: 0; padding: 14px 6px !important; }
  .ltVfSummaryValue {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 42px;
  }
  .ltVfSummaryValue .ltVfEstimatePrefix {
    flex-basis: 100%;
    line-height: 1;
  }
  .ltVfSummaryLabel {
    line-height: 1.4;
    min-height: 30px;
  }
  /* Footer CTAs: the two nowrap buttons outgrow the card on phones and the
     card's overflow:hidden clipped the confirm button. Give the row the full
     width and split it between the buttons instead. */
  .ltVfFoot { padding: 16px 18px; }
  .ltVfCtas { width: 100%; flex-wrap: wrap; }
  .ltVfCtas > [role="button"] { flex: 1 1 auto; text-align: center; }
}

/* Inline "?" info popover: reveals a plain-English definition on hover or
   keyboard focus (and on tap, via :focus-within). CSS-only, so it survives the
   app's innerHTML re-renders. Used on KPI labels that need a term defined. */
.ltInfo { position: relative; display: inline-flex; vertical-align: middle; }
.ltInfoBtn {
  -webkit-appearance: none; appearance: none; cursor: help; padding: 0;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid #cfd6d1; background: #fff; color: #8a938e;
  font: 700 9.5px/1 'Manrope', system-ui, sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.ltInfoBtn:hover, .ltInfo:focus-within .ltInfoBtn { border-color: #0F7D6B; color: #fff; background: #0F7D6B; }
.ltInfoPop {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  width: 234px; z-index: 50; pointer-events: none; text-align: left;
  background: #0C2A28; color: rgba(255,255,255,0.9);
  border-radius: 10px; padding: 12px 14px;
  font: 400 11.5px/1.5 'Manrope', system-ui, sans-serif;
  box-shadow: 0 16px 38px -14px rgba(8,40,36,0.65);
  opacity: 0; visibility: hidden; transform: translate(-50%, 5px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.ltInfoPop b { color: #fff; font-weight: 700; }
.ltInfoPop::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #0C2A28;
}
.ltInfo:hover .ltInfoPop, .ltInfo:focus-within .ltInfoPop {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
@media (max-width: 720px) {
  /* Phones: the popover becomes a fixed full-width strip near the button.
     position:fixed with auto offsets keeps the static position vertically while
     the left/right pin stops it running past the screen edge; being out of flow
     it also no longer inflates its card's scroll width. */
  .ltInfoPop {
    position: fixed; left: 16px; right: 16px; width: auto;
    top: auto; bottom: auto; margin-top: 10px; transform: none;
  }
  .ltInfo:hover .ltInfoPop, .ltInfo:focus-within .ltInfoPop { transform: none; }
  .ltInfoPop::after { display: none; }
}

/* Empty-state 3-step guide strip: on phones the steps stack vertically and the
   arrow connectors (the strip's span children) disappear; !important beats the
   inline 5-column template. */
@media (max-width: 560px) {
  .otGuideStrip { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; justify-items: start; }
  .otGuideStrip > span { display: none; }
}

/* Overview "biggest positions" rows: rank · name+tags · bar · weight. The bar
   column narrows on phones so the company name keeps readable width. */
.ltPosRow { display: grid; grid-template-columns: 22px minmax(0, 1fr) 130px 52px; gap: 12px; align-items: center; }
@media (max-width: 720px) {
  .ltPosRow { grid-template-columns: 18px minmax(0, 1fr) 54px 48px; gap: 8px; }
}

/* Overlap tab rows: name · fund tags · fund count · weight. On phones the tags
   drop to their own full-width second line and the count column (redundant with
   the visible tags) is hidden, so the company name keeps readable width. */
.ltOvRow { display: grid; grid-template-columns: minmax(0, 1fr) auto 78px 52px; gap: 14px; align-items: center; }
@media (max-width: 720px) {
  .ltOvRow { grid-template-columns: minmax(0, 1fr) 52px; gap: 6px 14px; }
  .ltOvRow > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
  .ltOvRow > span:nth-child(3) { display: none; }
}

@media (max-width: 980px) {
  .ltHero { grid-template-columns: 1fr; gap: 34px; }
  .ltFeat { grid-template-columns: 1fr; gap: 30px; }
  .ltApp  { grid-template-columns: 1fr; }
  .ltOvGrid { grid-template-columns: 1fr; }
  .ltGeoGrid { grid-template-columns: 1fr; }
  .ltGeoTrio { grid-template-columns: 1fr; }
  .ltFoot { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ltRiskGrid { grid-template-columns: 1fr; }
  .ltPopular  { grid-template-columns: repeat(2, 1fr); }
  .ltTwoUp { grid-template-columns: 1fr; }
  .ltOverlapGrid { grid-template-columns: 1fr; }
  .ltFundCards { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ltSteps { grid-template-columns: 1fr; }
  .ltTesti { grid-template-columns: 1fr; }
  .ltKpi   { grid-template-columns: repeat(2, 1fr); }
  .ltRiskMetrics { grid-template-columns: repeat(2, 1fr); }
  .ltRiskVerdict { grid-template-columns: 1fr; gap: 22px; }
  .ltPopular { grid-template-columns: 1fr; }
  .ltHideSm { display: none !important; }
  .ltRibbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ltRibbon > div:nth-child(2n) { border-right: 0; }
  .ltRibbon > div:nth-child(-n+2) { border-bottom: 1px solid var(--row-line); }
}

.ltBottomNav { display: none; }
@media (max-width: 720px) {
  .ltBottomNav { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  /* The four nav items (Screener, Menu, the account chip, Open app) need more
     than a phone's width in one row. Without wrapping they widen the document,
     and the bottom bar, pinned left:0/right:0, stretches to that width too: the
     Geography tab then sits off-screen and every page scrolls sideways. */
  .topbar .wrap { padding-left: 16px; padding-right: 16px; }
  .topbar-nav { flex-wrap: wrap; justify-content: flex-end; gap: 10px 12px; }
  .topbar-nav .btn { padding: 8px 13px; font-size: 13px; }
  .ltAppContent { padding-bottom: 86px !important; }
  /* the fixed bottom nav is the only section nav on small screens */
  .ltTopTabs { display: none; }
}

/* clickable affordance for interactive spans built with inline styles */
[role="button"], .lt-click { cursor: pointer; }

/* keyboard focus ring: interactive controls are role=button spans, made
   focusable in app.js; without this they would have no visible focus state */
[role="button"]:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}
textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 125, 107, 0.15);
}

/* ===================================================================== */
/* Content pages (server-rendered comparison / fund pages)               */
/* These reuse a small set of legacy class names from pages.py, restyled  */
/* to the Capital system: light cards on canvas, mono numbers, teal.      */
/* ===================================================================== */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* Site header: one instance, present on every page (landing, blog, account,
   compare/fund/terms/privacy, the in-app analyzer). Only the content below it
   changes; this bar and the footer are what make every page read as one product. */
.topbar { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 28px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand .logo { width: 26px; height: 26px; display: inline-flex; }
.brand h1, .brand .brand-name { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.brand h1 a, .brand h1 [role="button"], .brand .brand-name a, .brand .brand-name [role="button"] { color: inherit; cursor: pointer; }
.brand .tag { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 500; }

.topbar-nav { display: flex; align-items: center; gap: 18px; }
.landingNavLink { display: none; }
.topbar-signin { font-size: 14.5px; font-weight: 600; color: var(--body); cursor: pointer; }
.topbar-signin:hover { color: var(--primary); text-decoration: none; }
.topbar-link { font-size: 14.5px; font-weight: 600; color: var(--body); cursor: pointer; text-decoration: none; }
.topbar-link:hover { color: var(--primary); text-decoration: none; }
.ltMenu { position: relative; }
.ltMenu > summary {
  cursor: pointer; color: var(--body); font-size: 14.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 2px;
}
.ltMenuPanel {
  position: absolute; left: 0; top: calc(100% + 10px); background: var(--surface);
  border-radius: 12px; box-shadow: 0 18px 44px -16px rgba(3, 28, 24, 0.35);
  padding: 7px; min-width: 184px; z-index: 60;
}

/* Site footer: same instance everywhere, appended after whichever page content
   is showing. Brand + nav links + the data-sourcing note + copyright. */
.footHead {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint-2); margin-bottom: 12px;
}
.footLinks { display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: #4C5A55; font-weight: 500; }
.footLinks a, .footLinks [role="button"] { color: inherit; cursor: pointer; }
.foot .brand { margin-bottom: 14px; }
.foot .brand h1, .foot .brand .brand-name { font-size: 17px; }
.foot-bottom { border-top: 1px solid var(--hairline); margin-top: 28px; padding-top: 18px; }

main.wrap { padding-top: 26px; padding-bottom: 56px; }

.card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 22px 24px;
}
.card-dark {
  background: var(--ink); color: #fff; border-radius: 16px; padding: 22px 24px;
  position: relative; overflow: hidden;
}

h2.section-title, .section-title {
  font-size: 16px; font-weight: 700; color: var(--ink);
  margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.section-title .sub { font-size: 12px; font-weight: 500; color: var(--muted); }

.hint { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 12px; }

.label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint-2);
}

/* metric / KPI cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Phones: metric grids stack two-up (the !important beats the per-page inline
   repeat(3,1fr)); minmax(0,1fr) lets a cell shrink below its number's
   min-content width instead of pushing the page wider than the screen. Wide
   tables scroll inside their card rather than dragging the viewport right. */
@media (max-width: 720px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .metric .v { font-size: 24px; }
  .card { overflow-x: auto; }
}
.metric {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 18px 20px;
}
.metric .v {
  font-family: var(--mono); font-size: 28px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.01em;
  /* an ISIN in a half-width phone card wraps instead of spilling over its neighbour */
  overflow-wrap: anywhere;
}
.metric .l { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 6px; }
.metric .s { font-size: 11.5px; color: var(--faint); margin-top: 3px; line-height: 1.4; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--row-line); vertical-align: top; }
thead th {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--faint-3); border-bottom: 1px solid var(--border); padding-top: 0;
}
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.via { color: var(--faint); font-size: 11.5px; }
tbody tr:hover { background: #fbfcfb; }

/* a scroll box for long holdings tables */
.scroll { max-height: 460px; overflow: auto; border: 1px solid var(--hairline); border-radius: 12px; }
.scroll table thead th { position: sticky; top: 0; background: var(--surface); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}

/* pills / chips */
.pill {
  display: inline-block; padding: 6px 13px; border-radius: 20px;
  font-size: 12.5px; font-weight: 600; background: var(--tint); color: var(--primary);
}
.pill.ok { background: var(--primary); color: #fff; }
.pill.warn { background: #FBEFD9; color: #9A6B16; }

/* Utility control: quiet hairline chip for minor/repeated actions (Change
   market, Equal/Normalize, per-row actions). Colour-fill stays reserved for
   .btn-primary; a tinted pill here would read as status, not an action. */
.btn-util {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 14px; font: 600 13px/1.2 var(--sans);
  cursor: pointer; white-space: nowrap;
  transition: border-color .14s, background .14s;
}
.btn-util:hover { background: #fbfcfb; border-color: #c4cbc6; text-decoration: none; }
.btn-util svg { color: var(--faint); }
.btn-util.is-danger { color: #B4452F; }
.btn-util.is-danger:hover { border-color: #e4c3ba; }

/* Ghost nav link: in-app back / breadcrumb. */
.nav-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 13px/1 var(--sans); color: var(--muted);
  cursor: pointer; padding: 4px 2px; transition: color .14s;
}
.nav-ghost:hover { color: var(--ink); text-decoration: none; }
.nav-ghost svg { color: var(--faint-2); }

/* Segmented control: 2-3 tightly-linked actions/options in one control
   (Equalize/Normalize; % vs amount; region switch). Items are usually real
   <button>s, but the app's global data-action dispatch already gives
   role=button spans their own Enter/Space handling (see the data-action
   keydown listener); a real <button> there would double-fire. So this
   targets either element, tag-agnostic. */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #fff; }
.seg > button, .seg > span[role="button"] {
  border: 0; background: transparent; padding: 8px 14px; font: 600 13px var(--sans);
  color: var(--ink); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
}
.seg > button:not(:first-child), .seg > span[role="button"]:not(:first-child) { border-left: 1px solid var(--border); }
.seg > button:hover, .seg > span[role="button"]:hover { background: #fbfcfb; }
.seg > button[aria-pressed="true"], .seg > span[role="button"][aria-pressed="true"], .seg .is-active { background: var(--tint); color: var(--primary-deep); }

/* Grouped list: one surface with hairline rows, replacing stacks of floating
   cards in the Account / Portfolios / Reports screens. */
.list-group { background: #fff; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; }
.list-row + .list-row { border-top: 1px solid var(--row-line); }
.list-row.is-link { cursor: pointer; transition: background .12s; }
.list-row.is-link:hover { background: #fbfcfb; }
.list-row .lr-label { font: 600 14px var(--sans); color: var(--ink); }
.list-row .lr-meta { font: 400 12.5px var(--sans); color: var(--muted); margin-top: 2px; }

/* Text button: inline action inside a row. */
.text-btn { font: 600 13.5px var(--sans); color: var(--ink); cursor: pointer; border-bottom: 1px solid #cfd6d1; padding-bottom: 1px; }
.text-btn:hover { border-bottom-color: var(--ink); text-decoration: none; }

.badge-mono {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--tint); color: var(--primary); padding: 3px 9px; border-radius: 6px;
}

/* buttons */
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 14px;
  padding: 11px 20px; border-radius: 11px; border: 0; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { filter: brightness(1.05); text-decoration: none; }
.btn-secondary { background: transparent; border: 1px solid #D8DDD8; color: var(--body); }
.btn-invert { background: #fff; color: var(--primary-deep); }

/* internal link grids (popular comparisons, related pairs) */
.links { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
.links a {
  display: block; padding: 11px 14px; border: 1px solid var(--hairline);
  border-radius: 11px; background: var(--surface); color: var(--body);
  font-weight: 600; font-size: 14px;
}
.links a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
@media (max-width: 820px) { .links { grid-template-columns: repeat(2, 1fr); } }

/* FAQ disclosure */
details.faq { border-bottom: 1px solid var(--row-line); padding: 12px 0; }
details.faq summary { cursor: pointer; font-weight: 700; color: var(--ink); }
details.faq p { color: var(--muted); margin: 8px 0 0; line-height: 1.6; }

/* footer for content pages */
.foot {
  padding: 32px 28px 56px; color: var(--muted); font-size: 13px;
  border-top: 1px solid var(--hairline); margin-top: 28px;
}
.foot p { margin: 6px 0; max-width: 880px; line-height: 1.6; }
.foot strong { color: var(--ink); }
.foot .muted { color: var(--faint-2); }

/* data bars (the workhorse viz) */
.bar { height: 6px; background: #EEF0EE; border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 3px; }

/* Compare pages: a flat research-sheet layout. The rules and aligned values
   carry the hierarchy; cards, pills and decorative charts stay out of the way. */
.cmp-page { max-width: 1120px; }
.cmp-crumb { margin: 0 0 36px; color: var(--muted); font-size: 12px; }
.cmp-crumb a { color: var(--primary-deep); }
.cmp-crumb b { color: var(--ink); font-weight: 700; }
.cmp-hero {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
  gap: 64px; align-items: end; padding: 8px 0 44px;
}
.cmp-eyebrow {
  color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
}
.cmp-hero h1 {
  margin: 15px 0 10px; color: var(--ink); font-size: clamp(42px, 4.2vw, 58px);
  line-height: 1; letter-spacing: -.045em; font-weight: 800;
}
.cmp-hero h1 span { color: var(--faint-2); font-weight: 500; }
.cmp-names { margin: 0; color: var(--muted); font-size: 14px; }
.cmp-names b { color: var(--ink); font-weight: 700; }
.cmp-verdict {
  margin-top: 27px; padding-top: 15px; border-top: 1px solid var(--ink);
  max-width: 660px;
}
.cmp-verdict strong { display: block; color: var(--ink); font-size: 15px; }
.cmp-verdict span { display: block; margin-top: 5px; color: var(--muted); font-size: 12.5px; }
.cmp-summary { padding-top: 18px; border-top: 3px solid var(--ink); }
.cmp-kicker {
  color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
}
.cmp-overlap {
  margin-top: 14px; color: var(--ink); font-family: var(--mono);
  font-size: 42px; font-weight: 500; line-height: 1;
}
.cmp-overlap small {
  margin-left: 8px; color: var(--muted); font-family: var(--sans);
  font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.cmp-summary > p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cmp-summary > p b { color: var(--ink); }
.cmp-summary-stats {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px;
  border-top: 1px solid var(--hairline);
}
.cmp-summary-stats > div { padding-top: 13px; }
.cmp-summary-stats > div + div { padding-left: 20px; border-left: 1px solid var(--hairline); }
.cmp-summary-stats b { display: block; color: var(--ink); font: 500 17px/1 var(--mono); }
.cmp-summary-stats span {
  display: block; margin-top: 6px; color: var(--muted); font-size: 9.5px;
  letter-spacing: .07em; text-transform: uppercase;
}
.cmp-funds {
  display: grid; grid-template-columns: 1fr 1fr; background: var(--surface);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.cmp-fund { padding: 24px 27px 26px; }
.cmp-fund + .cmp-fund { border-left: 1px solid var(--ink); }
.cmp-fund-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.cmp-fund-head b { color: var(--ink); font: 500 24px/1 var(--mono); }
.cmp-fund-head span {
  color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; text-align: right;
}
.cmp-fund > p { margin: 8px 0 21px; color: var(--muted); font-size: 12.5px; }
.cmp-facts, .cmp-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cmp-facts > div { padding-top: 13px; border-top: 1px solid var(--hairline); }
.cmp-facts b, .cmp-values b { display: block; color: var(--ink); font: 500 16px/1 var(--mono); }
.cmp-facts span, .cmp-values span {
  display: block; margin-top: 5px; color: var(--faint); font-size: 10px;
  letter-spacing: .075em; text-transform: uppercase;
}
.cmp-val-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ink);
}
.cmp-val-head b {
  color: var(--ink); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
}
.cmp-val-head span { color: var(--faint); font-size: 10.5px; text-align: right; }
.cmp-values { margin-top: 12px; }
.cmp-values > div + div { padding-left: 13px; border-left: 1px solid var(--hairline); }
.cmp-values b { font-size: 19px; }
.cmp-values small { display: block; margin-top: 4px; color: var(--faint); font-size: 9.5px; }
.cmp-profile {
  display: inline-block; margin-top: 18px; padding-bottom: 1px; color: var(--primary-deep);
  border-bottom: 1px solid #A9C7BE; font-size: 11.5px; font-weight: 700;
}
.cmp-profile:hover { border-bottom-color: var(--primary-deep); text-decoration: none; }
.cmp-insights {
  margin: 24px 0 54px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.cmp-insights > div {
  display: grid; grid-template-columns: 1fr 1.8fr; gap: 34px; align-items: start;
  padding: 17px 0;
}
.cmp-insights > div + div { border-top: 1px solid var(--hairline); }
.cmp-insights b {
  color: var(--ink); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
}
.cmp-insights p { margin: 0; color: var(--body); font-size: 13px; }
.cmp-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-bottom: 13px; border-bottom: 1px solid var(--ink);
}
.cmp-section-head h2 { margin: 0; color: var(--ink); font-size: 22px; letter-spacing: -.025em; }
.cmp-section-head p { margin: 0; color: var(--muted); font-size: 12.5px; }
.cmp-legend {
  display: flex; align-items: center; gap: 22px; padding: 12px 15px;
  border-bottom: 1px solid var(--hairline); color: var(--muted); font-size: 10.5px;
}
.cmp-legend span { display: inline-flex; align-items: center; }
.cmp-legend i { width: 8px; height: 3px; margin-right: 6px; }
.cmp-legend .a, .cmp-track .a { background: #567F91; }
.cmp-legend .b, .cmp-track .b { background: #77768F; }
.cmp-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 14px; }
.cmp-table th {
  padding: 12px 15px; border-bottom: 1px solid var(--hairline); color: var(--faint-2);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; text-align: left;
}
.cmp-table th.num { text-align: right; }
.cmp-table td { padding: 13px 15px; border-bottom: 1px solid var(--row-line); vertical-align: middle; }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-company { color: var(--ink); font-weight: 700; }
.cmp-table small { margin-left: 6px; color: var(--faint-2); font: 500 10.5px var(--mono); }
.cmp-weight { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.cmp-weight > span:last-child { min-width: 45px; text-align: right; font: 500 12px var(--mono); }
.cmp-track { width: 108px; height: 4px; background: #E8EBE6; overflow: hidden; }
.cmp-track i { display: block; height: 100%; }
.cmp-subrow td { color: var(--muted); font-size: 12px; }
.cmp-subrow td:first-child { padding-left: 28px; }
.cmp-questions { margin-top: 54px; }
.cmp-questions > div:last-child {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 42px;
}
.cmp-questions details.faq { padding: 17px 0 19px; border-bottom: 0; border-top: 1px solid var(--hairline); }
.cmp-questions details.faq summary { font-size: 14px; }
.cmp-questions details.faq p { font-size: 12.5px; }
.cmp-related {
  display: grid; grid-template-columns: 1fr 3fr; gap: 34px; margin-top: 44px;
  padding: 17px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.cmp-related h2 {
  margin: 0; color: var(--ink); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase;
}
.cmp-related > div { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.cmp-related a {
  color: var(--primary-deep); font-size: 12.5px; border-bottom: 1px solid #A9C7BE;
}
.cmp-related a:hover { border-bottom-color: var(--primary-deep); text-decoration: none; }
.cmp-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 44px; padding: 20px 0; border-top: 1px solid var(--ink);
}
.cmp-cta b { color: var(--ink); font-size: 15px; }
.cmp-cta p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }
@media (max-width: 900px) {
  .cmp-hero { grid-template-columns: 1fr; gap: 30px; }
  .cmp-summary { max-width: 560px; }
  .cmp-funds { grid-template-columns: 1fr; }
  .cmp-fund + .cmp-fund { border-left: 0; border-top: 1px solid var(--ink); }
  .cmp-insights > div { grid-template-columns: 1fr; gap: 8px; }
  .cmp-questions > div:last-child { grid-template-columns: 1fr; }
  .cmp-related { grid-template-columns: 1fr; gap: 10px; }
  .cmp-track { width: 70px; }
}
@media (max-width: 620px) {
  .cmp-page { padding-left: 14px; padding-right: 14px; }
  .cmp-hero { padding-top: 0; }
  .cmp-hero h1 { font-size: 42px; }
  .cmp-fund { padding: 21px; }
  .cmp-section-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .cmp-table-wrap { overflow-x: auto; }
  .cmp-table { min-width: 680px; }
  .cmp-cta { align-items: flex-start; flex-direction: column; }
}

/* ETF overlap calculator and comparison hub. */
.cmpHub { max-width: 1120px; }
.cmpHubHero {
  align-items: center;
  display: grid;
  gap: 64px;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  padding: 24px 0 54px;
}
.cmpHubEyebrow, .cmpHubSectionHead p {
  color: var(--primary-deep);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  margin: 0;
  text-transform: uppercase;
}
.cmpHubHero h1 {
  color: var(--ink);
  font-size: clamp(42px, 5vw, 64px);
  letter-spacing: -.045em;
  line-height: 1;
  margin: 15px 0 18px;
}
.cmpHubHero > div > p:last-child {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  max-width: 650px;
}
.cmpHubForm {
  background: var(--surface);
  border-top: 3px solid var(--ink);
  box-shadow: 0 18px 50px -38px rgba(8,40,36,.55);
  display: grid;
  gap: 8px;
  padding: 24px;
}
.cmpHubFormHead {
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 8px;
}
.cmpHubForm label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cmpHubForm input {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  font: 500 15px var(--mono);
  padding: 12px 13px;
  text-transform: uppercase;
}
.cmpHubForm input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15,125,107,.12);
  outline: 0;
}
.cmpHubForm .btn { border: 0; cursor: pointer; justify-content: center; margin-top: 8px; }
/* Typeahead under the two hub inputs (comparefind.js). The wrapper span keeps
   the dropdown anchored to its own input inside the form's grid. */
.cmpHubFind { display: block; position: relative; }
.cmpHubFind input { width: 100%; }
.cmpHubPop {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 18px 44px -16px rgba(3, 28, 24, 0.28); left: 0; right: 0;
  max-height: 264px; overflow-y: auto; position: absolute; top: calc(100% + 5px); z-index: 40;
}
.cmpHubPop > div { align-items: baseline; cursor: pointer; display: flex; gap: 10px; justify-content: space-between; padding: 9px 12px; }
.cmpHubPop > div:hover, .cmpHubPop > div.is-active { background: #F2F9F6; }
.cmpHubPopName { color: var(--ink); font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmpHubPopId { color: var(--muted); flex-shrink: 0; font-family: var(--mono); font-size: 11px; }
.cmpHubPopEmpty { color: #878d89; font-size: 12.5px; padding: 9px 12px; }
.cmpHubForm > small { color: var(--faint); font-size: 10.5px; line-height: 1.5; }
.cmpHubVs {
  color: var(--faint-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  padding-left: 2px;
  text-transform: uppercase;
}
.cmpHubMethod {
  border-bottom: 1px solid var(--ink);
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 62px;
}
.cmpHubMethod > div { padding: 21px 28px 22px 0; }
.cmpHubMethod > div + div { border-left: 1px solid var(--hairline); padding-left: 28px; }
.cmpHubMethod b {
  color: var(--ink);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cmpHubMethod p { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 7px 0 0; }
.cmpHubSection { margin-top: 58px; }
.cmpHubSectionHead {
  align-items: end;
  border-bottom: 1px solid var(--ink);
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
}
.cmpHubSectionHead h2 {
  color: var(--ink);
  font-size: 26px;
  letter-spacing: -.025em;
  margin: 7px 0 0;
}
.cmpHubSectionHead > span {
  color: var(--faint);
  font: 500 11px var(--mono);
  text-transform: uppercase;
}
.cmpHubGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.cmpHubCard {
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  min-height: 168px;
  padding: 22px 20px 22px 0;
  text-decoration: none;
}
.cmpHubCard:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--hairline);
  padding-left: 20px;
}
.cmpHubCard:hover { background: #F7FAF8; text-decoration: none; }
.cmpHubMarket {
  color: var(--faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cmpHubCard h3 { color: var(--ink); font-size: 16px; margin: 10px 0 15px; }
.cmpHubCard strong { color: var(--primary-deep); font: 500 24px var(--mono); }
.cmpHubCard strong small {
  color: var(--muted);
  font: 700 9px var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.cmpHubCard p { color: var(--faint); font-size: 10.5px; line-height: 1.45; margin: 8px 0 0; }
.cmpHubFaq { margin-top: 68px; }
@media (max-width: 900px) {
  .cmpHubHero { gap: 34px; grid-template-columns: 1fr; }
  .cmpHubMethod { grid-template-columns: 1fr; }
  .cmpHubMethod > div { padding: 18px 0; }
  .cmpHubMethod > div + div { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; }
  .cmpHubGrid { grid-template-columns: repeat(2, 1fr); }
  .cmpHubCard:not(:nth-child(3n + 1)) { border-left: 0; padding-left: 0; }
  .cmpHubCard:nth-child(even) { border-left: 1px solid var(--hairline); padding-left: 20px; }
}
@media (max-width: 620px) {
  .cmpHub { padding-left: 18px; padding-right: 18px; }
  .cmpHubHero { padding-top: 4px; }
  .cmpHubHero h1 { font-size: 42px; }
  .cmpHubGrid { grid-template-columns: 1fr; }
  .cmpHubCard:nth-child(even) { border-left: 0; padding-left: 0; }
  .cmpHubSectionHead { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* ===================================================================== */
/* Landing hero: light look-through card, metric ribbon and utility cards */
/* ===================================================================== */

.landingHero {
  background: linear-gradient(168deg, #0E8E78 0%, #0A6E62 58%, #085A50 100%);
  overflow: hidden;
  position: relative;
}
.landingHeroBloom {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%);
  border-radius: 50%;
  height: 520px;
  left: -120px;
  position: absolute;
  top: -160px;
  width: 520px;
}
.landingHeroGrid {
  align-items: center;
  display: grid;
  gap: 44px;
  grid-template-columns: 1fr 1.14fr;
  margin: 0 auto;
  max-width: 1180px;
  padding: 30px 28px 46px;
  position: relative;
}
.landingHeroEyebrow {
  color: #3DDAB4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.landingHero h1 {
  color: #fff;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.04;
  margin: 14px 0 0;
  text-wrap: balance;
}
.landingHeroLede {
  color: rgba(255,255,255,.85);
  font-size: 17.5px;
  line-height: 1.55;
  margin: 18px 0 0;
  max-width: 470px;
}
.landingHeroActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
}
.landingHeroActions .btn { font-size: 15.5px; padding: 14px 24px; }
.landingHeroDemo {
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.landingHeroCoverage { display: flex; flex-direction: column; gap: 5px; margin-top: 18px; }
.landingHeroCoverageLine { align-items: baseline; display: flex; gap: 8px; }
.landingHeroCoverageLine .mono { color: #fff; font-size: 13.5px; font-weight: 600; }
.landingHeroCoverageLine > span:not(.mono) { color: rgba(255,255,255,.82); font-size: 12.5px; }
.landingHeroCoverageLine small, .landingHeroCoverageNote { color: rgba(255,255,255,.52); font-size: 12.5px; }
.landingHeroRight { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.landingHeroRegion {
  align-self: flex-start;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  display: inline-flex;
  gap: 3px;
  padding: 3px;
}
.landingHeroRegion button {
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 10px;
}
.landingHeroRegion button[aria-pressed="true"] { background: #fff; color: #0C2A28; }
.landingHero .stXray {
  background: #F6F7F4;
  box-shadow: 0 44px 90px -52px rgba(8,40,36,.55);
}
/* Fund-to-company connector lines are drawn by app.js into .stXraySvg; on the
   light card they render in the fund palette at low opacity. */
.landingHero .stXraySvg { z-index: 2; }
.landingHero .stXrayScan { background: linear-gradient(100deg,transparent 42%,rgba(15,125,107,.12) 50%,transparent 58%); }
html.stx-go .landingHero .stXrayScan { animation: stxScan 1.7s ease-out .55s 1 both; }
html.stx-go .landingHero .stXrayBar { animation: stxBar .8s .5s cubic-bezier(.22,.61,.36,1) backwards; }
.landingHero .stXrayMain { grid-template-columns: .78fr 1.22fr; }
.landingHero .stXrayMain > div { padding: 20px 22px; }
.landingHero .stXrayIn { border-right-color: #ECEBE4; }
.landingHero .stXrayEy { color: #9aa39e; font-size: 10.5px; }
.landingHero .stXrayOut .stXrayEy { color: #0F7D6B; }
.landingHeroRows { display: flex; flex-direction: column; gap: 10px; margin-top: 13px; }
.heroFundRow > div { align-items: baseline; display: flex; gap: 8px; }
.heroFundRow span { color: #0C2A28; font-size: 13px; font-weight: 600; }
.heroFundRow b { color: #0F7D6B; font-size: 11.5px; }
.heroFundRow small { color: #878d89; display: block; font-size: 11px; margin-top: 1px; }
.heroCompanyRow > div { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; margin-bottom: 4px; }
.heroCompanyRow > div > span { color: #0C2A28; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.heroCompanyRow small { color: #0F7D6B; font-size: 10.5px; font-weight: 600; margin-left: 4px; }
.heroCompanyRow b { color: #4c5a55; font-size: 12px; font-weight: 600; }
.heroCompanyRow:first-child b { color: #0F7D6B; }
.heroCompanyRow > i { background: #EEF1ED; border-radius: 3px; display: block; height: 6px; overflow: hidden; }
.heroCompanyRow > i > span { background: #0F7D6B; border-radius: 3px; display: block; height: 100%; }
.heroCompanyRow:first-child > i > span { background: linear-gradient(90deg,#0F7D6B,#3DDAB4); }
.heroFigureMore { color: #9aa39e; font-size: 11px; }
.landingHero .stXrayFoot { padding: 0; }
/* Scoped under .landingHero so the legacy .stXrayFoot flex block (declared
   later in this file for the old dark hero) cannot override the ribbon grid. */
.landingHero .landingHeroMetrics {
  background: #ECEBE4;
  border-top: 1px solid #ECEBE4;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(5, 1fr);
}
.landingHeroMetric { background: #fff; padding: 12px 14px; }
.landingHeroMetric span { color: #6a7873; display: block; font-size: 10px; font-weight: 600; }
.landingHeroMetric b { color: #0C2A28; display: block; font-size: 16px; font-weight: 600; margin-top: 5px; }
.landingHeroMetric.is-accent b { color: #0F7D6B; }
.landingHeroTools { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.landingHeroTools > span {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  cursor: pointer;
  padding: 14px 16px;
}
.landingHeroTools b { color: #fff; display: flex; font-size: 13px; justify-content: space-between; }
.landingHeroTools b small { color: #3DDAB4; font-size: 11.5px; font-weight: 600; margin-left: 8px; }
.landingHeroTools > span > span { color: rgba(255,255,255,.7); display: block; font-size: 12px; line-height: 1.45; margin-top: 5px; }
.landingReportTools { display: flex; gap: 7px; margin-left: auto; }
.landingReportTools > span {
  background: #fff;
  border: 1px solid #E6E8E6;
  border-radius: 9px;
  color: #16201c;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
}
.landingReportPanels { min-height: 332px; padding: 20px; }
.landingReportOverview { border: 1px solid #ecebe4; border-radius: 13px; overflow: hidden; }
.landingReportVerdict { display: grid; gap: 4px 16px; grid-template-columns: 1fr auto; padding: 14px; }
.landingReportVerdict > span { color: #9aa39e; font-size: 10.5px; text-align: right; white-space: nowrap; }
.landingReportEyebrow { color: #9aa39e; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.landingReportVerdictWord { color: #9A6B16; font-size: 20px; font-weight: 700; line-height: 1.1; }
.landingReportVerdictCopy { color: #4c5a55; font-size: 13.5px; grid-column: 1 / -1; line-height: 1.55; }
.landingReportVerdictCopy b { color: #0C2A28; }
.landingReportKpis { background: #ecebe4; display: grid; gap: 1px; grid-template-columns: repeat(4,1fr); }
.landingReportKpis > div { background: #fff; padding: 12px 14px; }
.landingReportKpis span, .landingReportKpis small { color: #6a7873; display: block; font-size: 11px; }
.landingReportKpis b { color: #16201c; display: block; font-size: 24px; font-style: normal; font-weight: 600; margin-top: 3px; }
.landingReportKpis b i { color: #9aa39e; font-size: 15px; font-style: normal; }
.landingReportKpis small { color: #878d89; font-size: 10.5px; }
.landingReportValuation {
  border: 1px solid #ecebe4;
  border-radius: 13px;
  overflow: hidden;
}
.landingReportValuationHead {
  align-items: center;
  background: #FBFCFB;
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
}
.landingReportValuationHead span {
  color: #6a7873;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.landingReportValuationHead small { color: #9aa39e; font-size: 10.5px; }
.landingReportValuationGrid {
  background: #ecebe4;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, 1fr);
}
.landingReportOverview > .landingReportValuationGrid { grid-template-columns: repeat(4,1fr); }
.landingReportOverview > .landingReportValuationGrid > * { min-width: 0; }
/* Title row spans the full grid (title left, coverage right); the method note
   then lands as the fourth cell of the metric row, like the reference. */
.landingReportValuationTitle { align-items: baseline; display: flex; grid-column: 1 / -1; justify-content: space-between; }
.landingReportValuationTitle > span { color: #6a7873; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.landingReportValuationTitle small { color: #9aa39e; font-size: 10px; }
.landingReportValuationGrid > p { align-items: flex-end; color: #a3a9a5; display: flex; font-size: 10.5px; line-height: 1.45; margin: 0; }
.landingReportValuationGrid > div > small { color: #878d89; display: block; font-size: 10.5px; margin-top: 3px; }
.landingCompaniesPanel { display: flex; flex-direction: column; gap: 10px; }
.landingCompanySearch { align-items: center; border: 1px solid #E6E8E6; border-radius: 10px; color: #9aa39e; display: flex; font-size: 12.5px; gap: 8px; padding: 8px 12px; }
.landingCompanyRow { align-items: center; border-bottom: 1px solid #F1F3F1; display: grid; gap: 10px; grid-template-columns: 18px minmax(130px,1fr) 120px minmax(90px,1fr) 52px; padding: 9px 2px; }
.landingCompanyRow > span:first-child { color: #b7bdb9; font-size: 11px; }
.landingCompanyRow b { color: #16201c; font-size: 13.5px; font-weight: 600; }
.landingCompanyRow b small { color: #a3a9a5; font-size: 10px; font-weight: 400; margin-left: 5px; }
.landingFundTags { display: flex; gap: 4px; }
.landingFundTags i { background: #F1F3F1; border-radius: 5px; color: #4c5a55; font-size: 10px; font-style: normal; padding: 2px 6px; }
.landingDataBar { background: #EEF0EE; border-radius: 3px; display: block; height: 6px; overflow: hidden; }
.landingDataBar i { background: #0F7D6B; border-radius: 3px; display: block; height: 100%; }
.landingCompanyRow strong { color: #16201c; font-size: 12.5px; text-align: right; }
.landingCompanyFoot { align-items: center; color: #878d89; display: flex; font-size: 12.5px; justify-content: space-between; padding: 9px 2px 2px; }
.landingCompanyFoot b { color: #0F7D6B; }
.landingOverlapPanel { align-items: start; display: grid; gap: 20px; grid-template-columns: 352px minmax(0,1fr); }
.landingOverlapCard, .landingOverlapPairs { border: 1px solid #ecebe4; border-radius: 12px; padding: 16px 18px; }
.landingOverlapHeadline { align-items: baseline; display: flex; gap: 10px; }
.landingOverlapHeadline > b { color: #0C2A28; font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.landingOverlapHeadline > span { color: #6a7873; font-size: 12px; line-height: 1.4; }
.landingOverlapHeadline strong { color: #16201c; }
.landingOverlapCard > svg { display: block; margin-top: 10px; width: 100%; }
.landingOverlapLegend { align-items: center; border-top: 1px solid #f1f3f1; color: #9aa39e; display: flex; font-size: 11px; gap: 8px; padding-top: 10px; }
.landingOverlapLegend > i { background: linear-gradient(90deg,rgba(15,125,107,.25) 0 42%, transparent 42% 52%,#0F7D6B 52%); border-radius: 4px; display: block; height: 7px; width: 128px; }
.landingOverlapLegend small { margin-left: auto; }
.landingOverlapSubhead { display: flex !important; justify-content: space-between; }
.landingOverlapSubhead span { color: #6a7873; font-size: 12px; font-weight: 600; }
.landingOverlapSubhead b, .landingReportLink { color: #0F7D6B; font-size: 11.5px; }
.landingOverlapPairs > div:not(:first-child) { align-items: center; border-bottom: 1px solid #f1f3f1; display: grid; gap: 10px; grid-template-columns: 1fr 62px 34px; padding: 8px 0; }
.landingOverlapPairs > div:last-child { border-bottom: 0; }
/* Ticker chips only: the bar fill inside .landingDataBar is also an <i>. */
.landingOverlapPairs i.mono { background: #F1F3F1; border-radius: 5px; font-size: 10px; font-style: normal; padding: 2px 6px; }
.landingOverlapPairs .landingDataBar { border-radius: 4px; height: 7px; }
.landingOverlapPairs .landingDataBar i { border-radius: 4px; }
.landingOverlapPairs > div > b { color: #16201c; font-size: 12.5px; text-align: right; }
.landingOverlapDetails > p { color: #5c6b67; font-size: 12.5px; margin: 14px 0 8px; }
.landingSharedRows > div { align-items: center; border-bottom: 1px solid #f1f3f1; display: grid; gap: 10px; grid-template-columns: minmax(120px,1fr) 120px 58px 52px; padding: 9px 0; }
.landingSharedRows > div b { color: #16201c; font-size: 13.5px; font-weight: 600; }
.landingSharedRows > div b small { color: #a3a9a5; font-size: 10px; font-weight: 400; }
.landingSharedRows > div > span:nth-child(3) { color: #6a7873; font-size: 11px; }
.landingSharedRows strong { color: #16201c; font-size: 12.5px; text-align: right; }
.landingReportLink { display: inline-block; margin-top: 12px; }
.landingFundsPanel { display: flex; flex-direction: column; gap: 14px; }
.landingFundCards { display: grid; gap: 14px; grid-template-columns: repeat(3,1fr); }
.landingFundCard { border: 1px solid #ecebe4; border-radius: 12px; padding: 16px 18px; }
.landingFundCardTop { align-items: center; display: flex; justify-content: space-between; }
.landingFundCardTop > span { align-items: center; display: flex; gap: 8px; }
.landingFundCardTop img { border-radius: 5px; height: 22px; object-fit: contain; width: 22px; }
.landingFundCardTop i { background: #f1f3f1; border-radius: 7px; color: #16201c; font-size: 12px; font-style: normal; font-weight: 700; padding: 4px 9px; }
.landingFundCardTop em { align-items: center; background: #EEF1ED; border-radius: 5px; color: #6a7873; display: inline-flex; font-size: 9px; font-style: normal; font-weight: 700; height: 22px; justify-content: center; width: 22px; }
.landingFundCardTop > b { color: #c7cdc8; font-size: 16px; }
.landingFundCard h3 { color: #16201c; font-size: 14px; margin: 12px 0 2px; }
.landingFundCard p { color: #878d89; font-size: 11.5px; margin: 0; }
.landingFundWeight { align-items: baseline; display: flex; gap: 6px; margin: 14px 0 6px; }
.landingFundWeight b { color: #0C2A28; font-size: 26px; font-weight: 600; line-height: 1; }
.landingFundWeight span { color: #878d89; font-size: 11.5px; }
.landingFundBar { background: #EEF0EE; border-radius: 3px; height: 6px; overflow: hidden; }
.landingFundBar i { border-radius: 3px; display: block; height: 100%; }
.landingFundBlend { align-items: center; border: 1px solid #ecebe4; border-radius: 12px; display: flex; gap: 14px; padding: 13px 18px; }
.landingFundBlend > b { color: #0C2A28; font-size: 12.5px; }
.landingFundBlend > span { border-radius: 4px; display: flex; flex: 1; height: 8px; min-width: 180px; overflow: hidden; }
.landingFundBlend > span i:nth-child(1) { background: #0F7D6B; width: 40%; }
.landingFundBlend > span i:nth-child(2) { background: #11A98F; width: 30%; }
.landingFundBlend > span i:nth-child(3) { background: #E0A93B; width: 30%; }
.landingFundBlend small { color: #6a7873; font-size: 11px; }
.landingGeoPanel { align-items: start; display: grid; gap: 24px; grid-template-columns: 404px minmax(0,1fr); }
.landingGeoPanel p { color: #5c6b67; font-size: 12.5px; margin: 0 0 10px; }
.landingReportMap { height: 214px; overflow: hidden; width: 100%; }
.landingReportMap svg { display: block; height: 100%; width: 100%; }
.landingGeoRows { padding-top: 26px; }
.landingGeoRows > div { align-items: center; display: grid; gap: 12px; grid-template-columns: 104px minmax(80px,1fr) 46px; margin-bottom: 7px; }
.landingGeoRows > div > span { color: #2f3d38; font-size: 12px; font-weight: 500; }
.landingGeoRows > div > i { background: #eef0ee; border-radius: 4px; display: block; height: 8px; overflow: hidden; }
.landingGeoRows > div > i > b { background: linear-gradient(90deg,#11A98F,#0F7D6B); border-radius: 4px; display: block; height: 100%; min-width: 2px; }
.landingGeoRows strong { color: #16201c; font-size: 12px; text-align: right; }
@keyframes landingEdgeDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes landingNodePop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
[data-rpanel="overlap"]:not([hidden]) .landingOverlapEdge { animation: landingEdgeDraw .9s cubic-bezier(.22,.61,.36,1) both; stroke-dasharray: 1; }
[data-rpanel="overlap"]:not([hidden]) .landingOverlapNode { animation: landingNodePop .5s .2s cubic-bezier(.22,.61,.36,1) both; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .landingOverlapEdge, .landingOverlapNode { animation: none !important; stroke-dashoffset: 0; }
}
@media (max-width: 720px) {
  .landingCompanyRow { grid-template-columns: 18px minmax(130px,1fr) 52px; }
  .landingCompanyRow .landingFundTags, .landingCompanyRow .landingDataBar { display: none; }
  .landingCompanyFoot { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (max-width: 900px) {
  /* minmax(0,1fr): a bare 1fr track refuses to shrink below the card's
     min-content, and the overlap svg then runs past the phone viewport. */
  .landingOverlapPanel { grid-template-columns: minmax(0, 1fr); }
  .landingOverlapPanel > * { min-width: 0; }
  .landingOverlapLegend { flex-wrap: wrap; }
  .landingFundCards { grid-template-columns: 1fr; }
  .landingFundBlend { align-items: flex-start; flex-direction: column; }
  .landingFundBlend > span { flex: auto; min-height: 8px; width: 100%; }
  .landingGeoPanel { grid-template-columns: 1fr; }
  .landingGeoRows { padding-top: 0; }
}
.landingReportMap { min-height: 176px; }
.landingMapLegend { align-items: center; color: #9aa39e; display: flex; font-size: 10.5px; gap: 8px; margin-top: 8px; }
.landingMapLegend i { background: linear-gradient(90deg,#eef1ee,rgba(15,125,107,0.45),rgba(15,125,107,1)); border-radius: 4px; height: 7px; width: 96px; }
.landingMapLegend small { font-size: 10.5px; margin-left: auto; }
.landingReportValuationGrid > div, .landingReportValuationGrid > p {
  background: #fff;
  margin: 0;
  padding: 12px 14px;
}
.landingReportValuationGrid span { color: #6a7873; display: block; font-size: 11px; }
.landingReportValuationGrid b { color: #16201c; display: block; font-size: 20px; margin-top: 7px; }
.landingReportValuationGrid p { color: #a3a9a5; font-size: 10.5px; line-height: 1.45; }
@keyframes heroRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.heroCol > * { animation: heroRise .55s cubic-bezier(.22,.61,.36,1) both; }
.heroCol > *:nth-child(2) { animation-delay: .04s; }
.heroCol > *:nth-child(3) { animation-delay: .10s; }
.heroCol > *:nth-child(4) { animation-delay: .18s; }
.heroCol > *:nth-child(5) { animation-delay: .24s; }
.heroFigure { animation: heroRise .55s .12s cubic-bezier(.22,.61,.36,1) both; }
/* First view: the gradient band (header + hero) fills the viewport, like the
   live site. Content taller than the viewport still scrolls (min-height only). */
@media (min-width: 901px) {
  .landingHero { align-items: center; display: flex; min-height: calc(100vh - 77px); }
  .landingHeroGrid { width: 100%; }
}
@media (max-width: 900px) {
  .landingHeroGrid { grid-template-columns: 1fr; }
  .landingHeroLede { max-width: 620px; }
}
@media (max-width: 620px) {
  .landingHeroGrid { padding: 34px 20px 42px; }
  .landingHeroCoverageLine { align-items: flex-start; flex-wrap: wrap; gap: 3px 7px; }
  .landingHeroCoverageLine small { flex-basis: 100%; }
  .landingHeroTools { grid-template-columns: 1fr; }
  .landingHero .landingHeroMetrics { grid-template-columns: repeat(3, 1fr); }
  /* 5 cells in 3 columns: the last one spans two tracks so the second row has
     no dead cell showing the grid background. */
  .landingHero .landingHeroMetrics .landingHeroMetric:last-child { grid-column: span 2; }
  .landingHero .stXrayMain { grid-template-columns: 1fr; }
  .landingHero .stXrayIn { border-bottom: 1px solid #ECEBE4; border-right: 0; }
  .landingReportTools { display: none; }
  .landingReportValuationGrid { grid-template-columns: repeat(2, 1fr); }
  .landingReportOverview > .landingReportValuationGrid,
  .landingReportKpis { grid-template-columns: repeat(2, 1fr); }
  .landingReportVerdict { grid-template-columns: 1fr; }
  .landingReportVerdict > span { text-align: left; }
}

/* The landing keeps the same white product header as the deployed site; only
   the nav is condensed: Screener, the account slot and Open app stay visible,
   everything else lives under the Menu dropdown at every width. */
body.is-landing .topbar .wrap { max-width: 1180px; }
body.is-landing .landingNavLink { display: none; }
body.is-landing .topbar .ltMenu { display: block; }
@media (max-width: 420px) {
  .landingHeroRegion { align-self: stretch; }
  .landingHeroRegion button { flex: 1; }
  .landingHero .landingHeroMetrics { grid-template-columns: repeat(2, 1fr); }
  .landingHero .landingHeroMetrics .landingHeroMetric:last-child { grid-column: 1 / -1; }
}

/* The what-if section sits in its own white band above the method section so
   the two adjacent sections read as separate surfaces. */
.whatIfBand { background: #fff; border-bottom: 1px solid #ecebe4; border-top: 1px solid #ecebe4; margin-top: 60px; padding: 62px 0; }
.whatIfCopyRows { display: grid; margin-top: 26px; }
.whatIfCopyRows > div { border-top: 1px solid #ECEBE4; color: #4c5a55; font-size: 14.5px; line-height: 1.55; padding: 14px 0; }
.whatIfCopyRows > div:last-child { border-bottom: 1px solid #ECEBE4; }
.whatIfCopyRows b { color: #0C2A28; }
.whatIfLedger { background: #fff; border: 1px solid #E3E7E3; border-radius: 18px; box-shadow: 0 22px 58px -42px rgba(8,40,36,.55); padding: 26px; }
.whatIfLedgerHead { align-items: baseline; border-bottom: 1px solid #EEF0EC; display: flex; gap: 16px; justify-content: space-between; padding-bottom: 18px; }
.whatIfLedgerHead > div { color: #0C2A28; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.whatIfLedgerHead > span, .whatIfGridLabel { color: #9aa39e; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.whatIfNovelty { align-items: baseline; display: flex; justify-content: space-between; padding-top: 20px; }
.whatIfNovelty > div { display: flex; flex-direction: column; }
.whatIfNovelty > div:last-child { text-align: right; }
.whatIfNovelty b { color: #0C2A28; font-size: 31px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.whatIfNovelty > div:last-child b { color: #0F7D6B; }
.whatIfNovelty span { color: #4c5a55; font-size: 13px; margin-top: 7px; }
.whatIfNoveltyBar { display: flex; gap: 3px; height: 8px; margin-top: 15px; }
.whatIfNoveltyBar i:first-child { background: #EEF1ED; border-radius: 4px 2px 2px 4px; width: 86%; }
.whatIfNoveltyBar i:last-child { background: #0F7D6B; border-radius: 2px 4px 4px 2px; width: 14%; }
.whatIfGrid { display: grid; gap: 0 10px; grid-template-columns: minmax(140px,1fr) 64px 64px 82px; margin-top: 24px; }
.whatIfGrid > div { border-top: 1px solid #EEF0EC; color: #4c5a55; font-size: 13.5px; padding: 11px 0; }
.whatIfGrid > div:nth-child(-n+4) { border-top: 0; padding-top: 0; padding-bottom: 10px; }
.whatIfGrid > div:not(:nth-child(4n+1)) { color: #878D89; font-size: 13px; text-align: right; }
.whatIfGrid .strong { color: #0C2A28 !important; font-weight: 600; }
.whatIfGrid .risk { color: #E06B57 !important; font-size: 12.5px !important; font-weight: 600; }
.whatIfGrid .muted { color: #9aa39e !important; font-size: 12.5px !important; }
.whatIfFoot { border-top: 1px solid #EEF0EC; color: #878D89; font-size: 11.5px; line-height: 1.5; padding-top: 14px; }
@media (max-width: 520px) {
  /* Fit, not scroll: the four columns compress to the card's width; the
     metric labels may wrap to two lines, the numbers stay aligned right. */
  .whatIfLedger { padding: 22px 16px; }
  .whatIfLedgerHead > div { font-size: 18px; }
  .whatIfNovelty b { font-size: 26px; }
  .whatIfGrid { grid-template-columns: minmax(88px, 1fr) 48px 48px 56px; gap: 0 6px; }
  .whatIfGrid > div { font-size: 12.5px; }
  .whatIfGrid > div:not(:nth-child(4n+1)) { font-size: 12px; }
  .whatIfGrid .risk, .whatIfGrid .muted { font-size: 11px !important; }
}

/* Existing hero connector animation, issuer marquee and ambient accents */

/* hero look-through figure: one surface, your funds -> the real companies inside */
.stXray { position: relative; background: #0C2A28; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 84px -38px rgba(3,28,24,0.8); }
.stXrayMain { display: grid; grid-template-columns: 0.84fr 1.16fr; position: relative; }
.stXrayMain > div { padding: 24px 26px; }
.stXrayIn { border-right: 1px solid rgba(255,255,255,0.10); position: relative; z-index: 1; }
.stXrayOut { position: relative; z-index: 1; }
.stXraySvg { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 0; }
.stXrayFlow { animation: stxFlow 2.2s linear infinite; }
@keyframes stxFlow { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }

/* FAQ accordion + sample-report niceties (landing) */
.ltFaqGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 36px; }
.otFaq { border-bottom: 1px solid #e7e5dd; }
.otFaq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 2px; font-size: 15.5px; font-weight: 700; color: #0C2A28; }
.otFaq > summary::-webkit-details-marker { display: none; }
.otFaq > summary .otFaqIco { flex-shrink: 0; transition: transform 0.22s ease; }
.otFaq[open] > summary .otFaqIco { transform: rotate(45deg); }
.otFaq > div { padding: 0 2px 18px; font-size: 14.5px; line-height: 1.65; color: #4c5a55; max-width: 56ch; }
@media (max-width: 720px) { .ltFaqGrid { grid-template-columns: 1fr; } }

/* add-funds screen: subtle staggered entrance (content visible at rest) */
@keyframes otRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
[data-panel="empty"].ot-go [data-rise] { animation: otRise 0.5s cubic-bezier(0.22,0.61,0.36,1) both; }
[data-panel="empty"].ot-go [data-rise="2"] { animation-delay: 0.08s; }
[data-panel="empty"].ot-go [data-rise="3"] { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) { [data-panel="empty"].ot-go [data-rise] { animation: none; } }

/* a newly added fund row drops in */
@keyframes otRowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ot-rowin { animation: otRowIn 0.4s cubic-bezier(0.22,0.61,0.36,1); }
/* onboarding step strip: a soft pulse travelling 1 -> 2 -> 3 */
@keyframes otStepPulse { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(17,169,143,0); } 10% { box-shadow: 0 0 0 5px rgba(17,169,143,0.20); } 26% { box-shadow: 0 0 0 0 rgba(17,169,143,0); } }
.otStep { animation: otStepPulse 3.6s ease-in-out infinite; }
.otStep2 { animation-delay: 0.5s; }
.otStep3 { animation-delay: 1.0s; }
@media (prefers-reduced-motion: reduce) { .otStep, .ot-rowin { animation: none; } }

/* collapsible "paste a list" section in the add-funds form */
.otPaste { margin-top: 18px; }
.otPaste > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: #0F7D6B; background: #F1F7F4; border: 1px solid #d2e6dd; border-radius: 11px; padding: 12px 15px; transition: background 0.15s ease, border-color 0.15s ease; }
.otPaste > summary:hover { background: #E7F2EC; border-color: #bbddcf; }
.otPaste > summary::-webkit-details-marker { display: none; }
.otPaste > summary .otPasteIco { transition: transform 0.2s ease; }
.otPaste[open] > summary { border-radius: 11px 11px 0 0; }
.otPaste[open] > summary .otPasteIco { transform: rotate(90deg); }
.otPaste > div { border: 1px solid #d2e6dd; border-top: none; border-radius: 0 0 11px 11px; padding: 15px; }
.stXrayFoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 15px 26px; border-top: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.025); }
@media (max-width: 760px) {
  .stXrayMain { grid-template-columns: 1fr; }
  .stXrayIn { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.10); }
}
.stXrayEy { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.46); }
.stXrayReveal { }
.stXrayBar { transform-origin: left; }
html.stx-go .stXrayBar { animation: stxBar 1.1s cubic-bezier(0.22,0.61,0.36,1) backwards; }
/* Full-panel overlay swept by its own width so the keyframes touch only
   transform/opacity: animating `left` here made every frame a layout shift
   (mobile CLS 0.237) and kept the animation off the compositor. */
.stXrayScan { position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: transform; background: linear-gradient(90deg, transparent calc(50% - 65px), rgba(61,218,180,0.18) 50%, transparent calc(50% + 65px)); }
html.stx-go .stXrayScan { animation: stxScan 2.6s ease-out 0.2s 1 both; }
@keyframes stxIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes stxBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stxScan { 0% { transform: translateX(-100%); opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }

/* issuer marquee */
@keyframes stMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.stMarqueeMask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image: linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.stMarqueeTrack { display: flex; align-items: center; gap: 40px; width: max-content; padding: 0 20px; animation: stMarquee 38s linear infinite; }
.stMarqueeTrack:hover { animation-play-state: paused; }
.stIssuer { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 19px; font-weight: 700; color: #3a4642; letter-spacing: -0.01em; }
.stLogo { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; flex-shrink: 0; }

/* smart search input focus glow (empty-state fund picker) */
.smart-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(15,125,107,0.13); }
.smart-input::placeholder { color: #a3a9a5; }

/* ambient accents */
@keyframes stPulse { 0%,100%{opacity:.55; transform:scale(1);} 50%{opacity:1; transform:scale(1.35);} }
@keyframes stSheen { 0%{transform:translateX(-130%);} 60%,100%{transform:translateX(260%);} }

/* in-app: live data-match steps inside the analyzing overlay */
@keyframes stPop { 0%{transform:scale(.4); opacity:0;} 60%{transform:scale(1.18);} 100%{transform:scale(1); opacity:1;} }
.stMatchRow { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid #ecebe4; border-radius: 11px; padding: 9px 13px; }
.stMatchIcon { position: relative; flex-shrink: 0; width: 24px; height: 24px; }
.stMatchIcon .spin { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid #DDEDE8; border-top-color: #0F7D6B; animation: ltspin .7s linear infinite; }
.stMatchIcon .check { position: absolute; inset: 0; border-radius: 50%; background: #0F7D6B; display: flex; align-items: center; justify-content: center; opacity: 0; animation: stPop .35s ease forwards; }
.stMatchIcon .pend { position: absolute; inset: 0; border-radius: 50%; background: #FBEFD6; color: #B07D17; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; opacity: 0; animation: stPop .35s ease forwards; }

/* Verify step (onboarding step 2 of 3): row reveal, progress sheen, status pop */
@keyframes ltReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ltScan { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes ltPop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  [data-bp], [data-amb], .stMarqueeTrack, .stXrayReveal, .stXrayBar, .stXrayFlow,
  .stMatchIcon .spin, .stMatchIcon .check, .stMatchIcon .pend,
  .ltVerifyReveal, .ltVerifyScan, .ltVerifyPop {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .stMatchIcon .spin, .ltVerifyScan, .stXrayScan { display: none; }
}

/* ===================================================================== */
/* Account / paywall modals + teaser lock (commerce layer)               */
/* ===================================================================== */
.lt-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; }
.lt-modal-scrim { position: absolute; inset: 0; background: rgba(12, 42, 40, 0.45); }
.lt-modal-card {
  position: relative; width: min(440px, 94vw); max-height: 92vh; overflow: auto;
  background: #fff; border-radius: 18px; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.5);
  animation: ltfade 0.2s ease;
}
.lt-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--hairline);
}
.lt-modal-head h3 { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.lt-modal-x { font-size: 22px; color: var(--faint-2); line-height: 1; cursor: pointer; }
.lt-modal-body { padding: 22px 24px; }

.ltScenarioEntry {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: #0C2A28; border-radius: 14px; padding: 21px 24px; margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.ltScenarioEntry h3 {
  color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -0.015em;
  margin: 9px 0 0;
}
.ltScenarioEntry p {
  color: rgba(255,255,255,0.72); font-size: 13px; line-height: 1.55;
  margin: 5px 0 0; max-width: 670px;
}
.ltScenarioModal { width: min(700px, 95vw); }
.ltScenarioPortfolio {
  background: #FBFCFB; border: 1px solid #E3E8E4; border-radius: 12px;
  overflow: hidden;
}
.ltScenarioPortfolioHead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #F4F7F4; border-bottom: 1px solid #E5E9E5; padding: 10px 13px;
}
.ltScenarioPortfolioHead > div { display: flex; align-items: baseline; gap: 8px; }
.ltScenarioPortfolioHead span {
  color: #8a938e; font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ltScenarioPortfolioHead b { color: #3f4b46; font-size: 11.5px; }
.ltScenarioPortfolioHead > span { color: #0C2A28; letter-spacing: 0; }
.ltScenarioPortfolioRows { max-height: 176px; overflow: auto; }
.ltScenarioPortfolioRow {
  display: grid; grid-template-columns: 118px minmax(0, 1fr) 54px; gap: 10px;
  align-items: center; border-top: 1px solid #EEF1EE; padding: 9px 13px;
}
.ltScenarioPortfolioRow:first-child { border-top: 0; }
.ltScenarioPortfolioId {
  align-items: center; display: flex; gap: 8px; min-width: 0;
  color: #0F7D6B; font-size: 11.5px; font-weight: 800;
}
.ltScenarioPortfolioName {
  color: #4f5b56; font-size: 12.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.ltScenarioPortfolioWeight {
  color: #16201c; font-size: 12px; font-weight: 700; text-align: right;
}
.ltScenarioFundMark {
  align-items: center; background: #fff; border: 1px solid #E6EAE6;
  border-radius: 7px; display: inline-flex; flex: 0 0 auto; height: 29px;
  justify-content: center; overflow: hidden; width: 29px;
}
.ltScenarioFundMark img { height: 20px; object-fit: contain; width: 20px; }
.ltScenarioFundMark.is-letter {
  background: #0C2A28; border-color: #0C2A28; color: #fff;
  font-size: 11px; font-weight: 700;
}
.ltScenarioFundMark.is-large { border-radius: 9px; height: 38px; width: 38px; }
.ltScenarioFundMark.is-large img { height: 25px; width: 25px; }
.ltScenarioSearchResults { margin-top: 8px; }
.ltScenarioSearchNote {
  color: #8a938e; font-size: 12px; padding: 10px 3px;
}
.ltScenarioSearchRow {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px;
  border-bottom: 1px solid #eef1ee; border-radius: 9px; cursor: pointer;
}
.ltScenarioSearchRow:hover, .ltScenarioSearchRow:focus { background: #F3F8F5; }
.ltScenarioSearchRow.is-unavailable { cursor: default; opacity: 0.58; }
.ltScenarioCandidate {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #F5F8F5; border: 1px solid #E2E8E3; border-radius: 12px;
  padding: 13px 15px;
}
.ltScenarioCandidateFund { align-items: center; display: flex; gap: 12px; min-width: 0; }
.ltScenarioResult {
  border-top: 1px solid #e7eae7; margin-top: 21px; padding-top: 20px;
}
.ltScenarioResultGrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.ltScenarioResultGrid > div {
  background: #F5F8F5; border: 1px solid #E3E9E4; border-radius: 12px;
  padding: 15px 16px;
}
.ltScenarioResultGrid span {
  display: block; color: #6a7873; font-size: 11px; font-weight: 700;
}
.ltScenarioResultGrid strong {
  display: block; color: #0C2A28; font-size: 30px; line-height: 1;
  letter-spacing: -0.02em; margin-top: 9px;
}
.ltScenarioResultGrid p {
  color: #7b8580; font-size: 11.5px; line-height: 1.45; margin: 7px 0 0;
}
.ltScenarioMetricGrid {
  border: 1px solid #e7eae7; border-radius: 12px; overflow: hidden;
}
.ltScenarioMetricHead, .ltScenarioMetricRow {
  display: grid; grid-template-columns: minmax(190px, 1fr) 72px 72px 82px;
  gap: 7px; align-items: center;
}
.ltScenarioMetricHead {
  padding: 8px 12px; background: #F8FAF8; color: #9aa39e;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  text-align: right;
}
.ltScenarioMetricRow { padding: 10px 12px; border-top: 1px solid #eef1ee; }
.ltScenarioMetricRow > span:first-child {
  color: #4f5b56; font-size: 12.5px; font-weight: 600;
}
.ltScenarioMetricRow > span:nth-child(2) {
  color: #6a7873; font-size: 12.5px; text-align: right;
}
.ltScenarioMetricRow > span:nth-child(3) {
  color: #16201c; font-size: 13px; font-weight: 700; text-align: right;
}
.ltScenarioMetricRow > span:nth-child(4) {
  color: #0F7D6B; font-size: 11.5px; font-weight: 700; text-align: right;
}
.ltScenarioMetricRow.is-unavailable > span:not(:first-child) {
  color: #9aa39e; font-weight: 600;
}
.ltScenarioWatermark {
  border-top: 1px solid #eef1ee; color: #9aa39e; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.04em; padding: 5px 11px 6px;
  text-align: right;
}
.ltScenarioShifts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ltScenarioShift {
  min-width: 0; background: #FBFCFB; border: 1px solid #E8EBE8;
  border-radius: 10px; padding: 10px 11px;
}
.ltScenarioShift span {
  display: block; color: #9aa39e; font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.ltScenarioShift b {
  display: block; color: #16201c; font-size: 12.5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; margin-top: 5px;
}
.ltScenarioShift em {
  display: block; color: #0F7D6B; font-size: 11.5px; font-style: normal;
  font-weight: 700; margin-top: 4px;
}
.ltScenarioCaveat {
  color: #7b8580; background: #F8FAF8; border-left: 3px solid #B9C8C0;
  font-size: 11.5px; line-height: 1.5; margin: 11px 0 0; padding: 8px 10px;
}
.ltScenarioPeNote {
  color: #8a938e; font-size: 11px; line-height: 1.45; margin: 8px 2px 0;
}
.ltScenarioShareAction {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #F5F8F5; border: 1px solid #DDE7E1; border-radius: 12px;
  margin-top: 13px; padding: 12px 13px;
}
.ltScenarioShareAction p {
  color: #72807a; font-size: 10.5px; line-height: 1.45; margin: 0;
}
.ltScenarioShareAction .btn { flex: 0 0 auto; padding: 9px 14px; }
.ltScenarioShareUrl {
  color: #315048; font-size: 10.5px; overflow-wrap: anywhere; margin-top: 7px;
}
.ltScenarioWorkflow {
  align-items: center; border: 1px solid #E2E8E3; border-radius: 12px;
  display: flex; gap: 16px; justify-content: space-between; margin-top: 11px;
  padding: 12px 13px;
}
.ltScenarioWorkflow div { min-width: 0; }
.ltScenarioWorkflow b {
  color: #0C2A28; display: block; font-size: 12px; margin-bottom: 3px;
}
.ltScenarioWorkflow div span {
  color: #72807A; display: block; font-size: 10.5px; line-height: 1.45;
}
.ltScenarioWorkflow > span {
  color: #0F7D6B; cursor: pointer; flex: 0 0 auto; font-size: 11.5px;
  font-weight: 800;
}
.ltScenarioShareModal { width: min(760px, 95vw); }
.ltScenarioSharePreview {
  background: #E9EEEA; border: 1px solid #DDE4DE; border-radius: 13px;
  max-height: 55vh; overflow: auto; padding: 12px;
}
.ltScenarioSharePreview img {
  border-radius: 9px; box-shadow: 0 12px 30px -18px rgba(12,42,40,0.45);
  display: block; height: auto; width: 100%;
}
.ltScenarioSharePreviewNote {
  color: #72807A; font-size: 11.5px; line-height: 1.5; margin: 12px 2px 0;
}
.ltScenarioShareButtons {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.ltScenarioShareButtons .btn { flex: 1 1 145px; text-align: center; }
.ltScenarioShareOpen {
  color: #0F7D6B; display: inline-block; font-size: 12px; font-weight: 700;
  margin: 13px 2px 0;
}

.ltScenarioSharePage { max-width: 940px; padding-bottom: 12px; }
.ltScenarioShareHero {
  background: #0C2A28; border-radius: 18px; color: #fff;
  margin-top: 22px; overflow: hidden; padding: 40px 44px; position: relative;
}
.ltScenarioShareHero::after {
  background: radial-gradient(circle, rgba(61,218,180,0.24) 0 2px, transparent 3px);
  background-size: 20px 20px; content: ""; height: 180px; opacity: 0.7;
  position: absolute; right: -22px; top: -20px; transform: rotate(10deg); width: 260px;
}
.ltScenarioShareEyebrow, .ltScenarioShareSectionHead span, .ltScenarioShareLabel {
  color: #0F7D6B; font-size: 10px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ltScenarioShareHero .ltScenarioShareEyebrow { color: #3DDAB4; }
.ltScenarioShareHeroTitle {
  align-items: center; display: flex; gap: 16px; position: relative; z-index: 1;
}
.ltScenarioShareHeroTitle .ltScenarioFundMark {
  background: #fff; border-color: rgba(255,255,255,0.35);
}
.ltScenarioShareHero h1 {
  color: #fff; font-size: clamp(31px, 5vw, 50px); letter-spacing: -0.045em;
  line-height: 1.05; margin: 12px 0 13px; max-width: 720px;
}
.ltScenarioShareHero p {
  color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.6;
  margin: 0; position: relative; z-index: 1;
}
.ltScenarioShareCard { margin-top: 16px; padding: 24px; }
.ltScenarioShareSectionHead {
  align-items: flex-end; display: flex; gap: 20px; justify-content: space-between;
  margin-bottom: 15px;
}
.ltScenarioShareSectionHead h2 {
  color: #0C2A28; font-size: 20px; letter-spacing: -0.02em; margin: 4px 0 0;
}
.ltScenarioShareSectionHead > b { color: #0F7D6B; font-size: 20px; }
.ltScenarioSharePortfolio .ltScenarioPortfolioRows { max-height: none; }
.ltScenarioShareLabel { color: #9aa39e; margin: 22px 0 8px; }
.ltScenarioShareCta {
  align-items: center; background: #0C2A28; border-radius: 16px; color: #fff;
  display: flex; gap: 24px; justify-content: space-between; margin-top: 16px;
  padding: 24px 28px;
}
.ltScenarioShareCta span {
  color: #3DDAB4; font-size: 10px; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ltScenarioShareCta h2 { color: #fff; font-size: 21px; margin: 5px 0 3px; }
.ltScenarioShareCta p { color: rgba(255,255,255,0.68); font-size: 12.5px; margin: 0; }
.ltScenarioShareCta .ltScenarioSharePlan {
  border-top: 1px solid rgba(255,255,255,0.13); line-height: 1.55;
  margin-top: 13px; max-width: 680px; padding-top: 11px;
}
.ltScenarioShareCta .ltScenarioSharePlan b { color: #fff; }
.ltScenarioShareCta .ltScenarioSharePlan a { color: #8EE8D2; font-weight: 700; }
.ltScenarioShareCta .btn { flex: 0 0 auto; }
.ltScenarioShareDisclosure {
  color: #7b8580; font-size: 11.5px; line-height: 1.55; margin: 14px 4px 0;
}

.lt-field {
  width: 100%; border: 1px solid #d8ddd8; border-radius: 11px;
  padding: 12px 14px; font-size: 14px; color: var(--body); margin-top: 6px;
  font-family: var(--sans);
}
.lt-field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15, 125, 107, 0.13); }
.lt-label { font-size: 12px; font-weight: 700; color: var(--ink); }
.lt-form-row { margin-bottom: 14px; }
.lt-err { color: #B4452F; font-size: 13px; margin: 4px 0 0; min-height: 16px; }
.lt-note { color: var(--primary-deep); font-size: 13px; margin: 4px 0 0; }
.lt-switch { font-size: 13px; color: var(--muted); margin-top: 14px; }
.lt-switch a { font-weight: 600; cursor: pointer; }

@media (max-width: 620px) {
  .ltScenarioEntry { align-items: flex-start; flex-direction: column; gap: 15px; }
  .ltScenarioEntry .btn { width: 100%; text-align: center; }
  .ltScenarioResultGrid, .ltScenarioShifts { grid-template-columns: 1fr; }
  .ltScenarioMetricHead { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ltScenarioMetricHead > span:first-child { display: none; }
  .ltScenarioMetricRow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ltScenarioMetricRow > span:first-child {
    grid-column: 1 / -1; padding-bottom: 2px;
  }
  .ltScenarioShareAction, .ltScenarioShareCta {
    align-items: stretch; flex-direction: column;
  }
  .ltScenarioShareAction .btn, .ltScenarioShareCta .btn { text-align: center; width: 100%; }
  .ltScenarioWorkflow { align-items: flex-start; flex-direction: column; }
  .ltScenarioShareHero { padding: 30px 24px; }
  .ltScenarioShareCard { padding: 19px 16px; }
}

/* Federated sign-in: a neutral white button (Google's brand guidance) and an
   "or" divider between it and the email form. */
.lt-oauth-btn {
  background: #fff; border: 1px solid #D8DDD8; color: #3c4043;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.lt-oauth-btn:hover { background: #F8FAF9; text-decoration: none; }
.lt-oauth-or {
  display: flex; align-items: center; text-align: center;
  color: var(--muted); font-size: 12px; margin: 14px 0 4px;
}
.lt-oauth-or::before, .lt-oauth-or::after {
  content: ""; flex: 1; height: 1px; background: #E4E8E4;
}
.lt-oauth-or span { padding: 0 12px; }

/* top-bar Export dropdown */
.lt-exp-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  background: #fff; border: 1px solid #e1e5e1; border-radius: 11px;
  box-shadow: 0 16px 40px -16px rgba(12, 42, 40, 0.35); padding: 6px; min-width: 168px;
}
.lt-exp-item {
  display: block; padding: 8px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--body); cursor: pointer; white-space: nowrap;
}
.lt-exp-item:hover { background: #F2F9F6; color: var(--primary); }

/* price option cards in the paywall */
.ltPaywallIntro {
  border-bottom: 1px solid var(--hairline); margin: 0 0 16px;
  padding: 0 0 13px;
}
.ltPaywallIntro summary {
  color: #0F7D6B; cursor: pointer; font-size: 12.5px; font-weight: 700;
}
.ltPaywallIntro summary:focus-visible {
  border-radius: 4px; outline: 2px solid #7CC8B6; outline-offset: 3px;
}
.ltPaywallIntro p {
  color: #6a7873; font-size: 13px; line-height: 1.55; margin: 10px 0 0;
}
.lt-price-card { border: 1.5px solid var(--hairline); border-radius: 14px; padding: 18px; cursor: pointer; transition: border-color .12s, background .12s; }
.lt-price-card.sel { border-color: var(--primary); background: var(--tint); }
.lt-price-card .amt { font-family: var(--mono); font-size: 26px; font-weight: 600; color: var(--ink); }

/* cookie-consent banner (Google Analytics, Consent Mode v2). Injected by
   seo.analytics_head() on every page when ETF_GA_ID is set. */
/* Consent card, pinned bottom-left (compact corner card, not a full-width bar).
   On phones it spans the width minus margins. */
.lt-consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 70;
  max-width: 380px; background: #fff;
  border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: 0 18px 50px -20px rgba(12, 42, 40, 0.4);
  padding: 16px 18px; display: block; animation: ltfade 0.2s ease;
}
@media (max-width: 440px) { .lt-consent { right: 16px; max-width: none; } }
.lt-consent-txt { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.lt-consent-txt a { font-weight: 600; }
.lt-consent-btns { display: flex; gap: 8px; margin-top: 12px; }
.lt-consent-btns .lt-consent-b { flex: 1; }
.lt-consent-b {
  font-family: var(--sans); font-weight: 700; font-size: 13px;
  padding: 9px 16px; border-radius: 10px; cursor: pointer; border: 0;
}
.lt-consent-decline { background: transparent; border: 1px solid #D8DDD8; color: var(--body); }
.lt-consent-accept { background: var(--primary); color: #fff; }

/* teaser: blurred sample behind the lock */
.lt-locked-blur { filter: blur(5px); opacity: 0.5; pointer-events: none; user-select: none; }
.lt-lock-wrap { position: relative; }
.lt-lock-over {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px;
}

/* --- Blog ("The look-through journal"): article-body prose + card hover.
   The article body is injected as raw HTML, the one place inline styles cannot
   reach, so a scoped class block is the right tool. --accent is set on the blog
   wrapper (blog.py); the fallbacks keep it correct if it is ever absent. */
.blogBody { font-size: 17px; line-height: 1.75; color: #3a443f; }
.blogBody > :first-child { margin-top: 0; }
.blogBody p { margin: 0 0 19px; }
.blogBody h2 { font-size: 23px; font-weight: 800; color: #0C2A28; letter-spacing: -0.02em; line-height: 1.25; margin: 40px 0 15px; }
.blogBody ul, .blogBody ol { margin: 0 0 22px; padding: 0; list-style: none; }
.blogBody li { position: relative; padding-left: 28px; margin: 0 0 11px; font-size: 16.5px; line-height: 1.6; }
.blogBody ul li::before { content: ""; position: absolute; left: 7px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #0F7D6B); }
.blogBody ol { counter-reset: bl; }
.blogBody ol li { counter-increment: bl; padding-left: 34px; margin-bottom: 14px; }
.blogBody ol li::before { content: counter(bl); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 7px; background: #E7F2EE; color: var(--accent, #0F7D6B); font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 22px; text-align: center; }
.blogBody b, .blogBody strong { color: #0C2A28; font-weight: 700; }
.blogBody a { color: var(--accent, #0F7D6B); font-weight: 600; text-decoration: none; border-bottom: 1px solid #bfe0d6; }
.blogBody a:hover { border-bottom-color: var(--accent, #0F7D6B); }
.blogBody .src { font-size: 12.5px; line-height: 1.65; color: #9aa39e; font-style: italic; margin-top: 30px; padding-top: 16px; border-top: 1px solid #ecebe4; }
.blogCard { transition: transform .18s ease, box-shadow .18s ease; }
.blogCard:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(8,40,36,0.42); }

/* ---------------------------------------------------------------- screener --
   Full-page fund screener (#screener / renderScreener in app.js): a filter
   card over the capped /api/screener results table. Uses the shared tokens;
   chips echo the landing ISIN chips, the table echoes the Companies tab. */
.scrHead { margin: 0 0 22px; }
.scrHead h1 { font-size: clamp(28px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.scrHead p { font-size: 15px; color: var(--muted); margin: 10px 0 0; max-width: 680px; line-height: 1.5; }
.scrCard { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 22px 26px; margin-bottom: 16px; }
.scrGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; }
.scrField label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin: 0 0 5px; }
.scrField input, .scrField select { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; color: var(--body); background: #FBFBF9; border: 1px solid var(--hairline); border-radius: 9px; padding: 8px 10px; }
.scrField input:focus, .scrField select:focus { outline: none; border-color: #0F7D6B; background: #fff; }
.scrSeg { display: inline-flex; background: #F1F2EE; border-radius: 9px; padding: 3px; gap: 2px; }
.scrSeg [role="button"] { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.scrSeg [aria-pressed="true"] { background: #fff; color: #0F7D6B; box-shadow: 0 1px 3px rgba(12,42,40,0.12); }
.scrChips { display: flex; flex-wrap: wrap; gap: 7px; }
.scrChip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--body); background: #F2F9F6; border: 1px solid #d7eae3; border-radius: 999px; padding: 5px 8px 5px 12px; }
.scrChip .x { cursor: pointer; font-weight: 700; color: #7fa89d; padding: 0 4px; border-radius: 999px; }
.scrChip .x:hover { color: #B4483B; background: #fdeeec; }
.scrChip[aria-pressed] { cursor: pointer; background: #FBFBF9; border-color: var(--hairline); color: var(--muted); padding: 5px 12px; }
.scrChip[aria-pressed="true"] { background: #FBEFED; border-color: #ecc9c3; color: #B4483B; }
.scrPick { position: relative; }
.scrPop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1px solid var(--hairline); border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(8,40,36,0.35); max-height: 260px; overflow: auto; }
.scrPop [role="option"] { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.scrPop [role="option"]:hover, .scrPop [role="option"][aria-selected="true"] { background: #F2F9F6; }
.scrPop .t { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.scrPop [role="option"] .scrFlag { align-self: center; flex: none; }
.scrPopName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--body); }
.scrSearch { position: relative; margin: 0 0 16px; }
.scrSearch .scrSearchIco { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--faint); stroke-width: 1.9; stroke-linecap: round; pointer-events: none; }
.scrSearch input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--body); background: #FBFBF9; border: 1px solid var(--hairline); border-radius: 11px; padding: 12px 42px 12px 44px; }
.scrSearch input::placeholder { color: var(--faint); }
.scrSearch input:focus { outline: none; border-color: #0F7D6B; background: #fff; box-shadow: 0 0 0 3px rgba(15,125,107,0.10); }
.scrSearchX { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--faint); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 7px; }
.scrSearchX:hover { color: var(--ink); background: #EEF1EE; }
.scrSearchX.hidden { display: none; }
.scrTableWrap { overflow-x: auto; }
.scrTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.scrTable th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.scrTable th.num, .scrTable td.num { text-align: right; }
.scrTable td { padding: 9px 10px; border-bottom: 1px solid #F3F2EC; vertical-align: top; }
.scrTable tbody tr:hover { background: #FAFBF8; }
.scrFund { font-weight: 600; color: var(--body); }
.scrFund a { color: inherit; text-decoration: none; }
.scrFund a:hover { color: #0F7D6B; }
.scrSub { font-size: 11px; color: var(--faint); margin-top: 2px; }
.scrReg { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 999px; background: #EFF1ED; color: var(--muted); }
.scrReg.us { background: var(--tint); color: var(--primary-deep); }
.scrReg.eu { background: #EFF1ED; color: var(--muted); }
/* Screener pager: 50 per page, under the results table. */
.scrPager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 8px 4px; }
.scrPage { font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: 7px; padding: 6px 13px; cursor: pointer; }
.scrPage:hover:not(:disabled) { border-color: #0F7D6B; color: #0F7D6B; }
.scrPage:disabled { opacity: 0.4; cursor: default; }
.scrPageAt { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Fund "Basics": regulatory facts as label/value pairs, wrapping to the
   card width rather than forcing a fixed column count. */
.factGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 18px; }
.factGrid .l { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.factGrid .v { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 3px; }
/* Issuer mark on a fund row: the self-hosted logo, or the issuer's initial
   when we hold no mark for that house. */
.scrFundRow { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.scrMark { width: 24px; height: 24px; border-radius: 6px; background: #fff; border: 1px solid #ecebe4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.scrMark img { object-fit: contain; }
.scrMark.mono { background: #0C2A28; border-color: #0C2A28; color: #fff; font-size: 11px; font-weight: 600; }
/* Sector tilts are two full rows of chips: folded away by default so they
   stop dominating the filter card, with a count so a collapsed section
   never hides an active filter. */
.scrFold { margin-top: 13px; border-top: 1px solid var(--line); padding-top: 10px; }
.scrFold > summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 7px; }
.scrFold > summary::-webkit-details-marker { display: none; }
.scrFold > summary::before { content: "▸"; font-size: 10px; transition: transform 0.15s; }
.scrFold[open] > summary::before { transform: rotate(90deg); }
.scrFoldTag:not(:empty) { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: #EAF3EF; color: #2F6B58; text-transform: none; letter-spacing: 0; }
/* Share-class currency: one product name can cover several classes that
   differ only by currency and fee, so the row states which one it is. */
.scrCcy { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 4px; background: #F3F4F1; color: var(--muted); vertical-align: 1px; }
.scrPos { color: #0F7D6B; font-weight: 600; }
.scrNeg { color: #B4483B; font-weight: 600; }
.scrNote { font-size: 11.5px; color: var(--faint-2); line-height: 1.55; margin: 12px 2px 0; }
.scrCount { display: inline-flex; align-items: center; gap: 8px; min-height: 20px; font-size: 12.5px; color: var(--muted); }
.scrCount b { color: var(--ink); }
.scrSpinner { width: 16px; height: 16px; flex: none; border: 2px solid #D4DDD9; border-top-color: var(--primary); border-radius: 50%; animation: ltspin 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .scrSpinner { animation: none; } }
@media (max-width: 720px) { .scrHead h1 { font-size: 20px; } .scrCard { padding: 14px; } }
.scrChip.inc[aria-pressed="true"] { background: #E7F2EE; border-color: #bfe0d6; color: #0F7D6B; }

/* ---- Screener redesign ("Analyst, refined" scan view): quick screens,
   reordered filter grid, sort-in-header, 10-column table. Reuses Capital
   tokens; only the two flag SVGs carry their own colours. ---- */
.scrQuickRow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.scrQuickLab { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--faint-2); }
.scrQuickPills { display: flex; gap: 9px; flex-wrap: wrap; }
.scrQuick { font-size: 13px; font-weight: 600; color: var(--body); background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 7px 14px; cursor: pointer; }
.scrQuick:hover { border-color: var(--primary); color: var(--primary); }
.scrQuick.is-active { background: var(--tint); border-color: #bfe0d6; color: var(--primary-deep); }
.scrReset { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.scrReset:hover { color: var(--primary); }
.scrRule { border-top: 1px solid var(--hairline); margin: 16px 0; }
.scrPickRow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.scrPickRow > * { min-width: 0; }
.scrRow4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 18px; }
.scrRow4 > * { min-width: 0; }
.scrRow5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 14px; }
.scrRow5 > * { min-width: 0; }
.scrHint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint-2); }
.scrFlag { border-radius: 2px; flex-shrink: 0; }
.scrRHead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 2px 10px; }
.scrRHead .scrCount { font-size: 14px; }
.scrSortLab { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint-2); display: inline-flex; align-items: center; gap: 8px; }
.scrSortLab select { font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--body); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.scrLargest { max-width: 260px; }
.scrLargest span { font-size: 12px; color: var(--muted); }
@media (max-width: 860px) {
  .scrRow4, .scrRow5 { grid-template-columns: repeat(2, 1fr); }
  .scrPickRow { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .scrRow4, .scrRow5 { grid-template-columns: 1fr; }
  .scrReset { margin-left: 0; }
}

/* Screener filter rail: the reference layout leads with look-through filters and
   keeps the live results table visible beside a self-scrolling rail. */
.scrRoot { margin: 0 auto; max-width: 1240px; padding: 20px 22px 40px; }
.scrHead { align-items: end; display: grid; gap: 24px; grid-template-columns: minmax(0,1fr) 320px; margin-bottom: 14px; }
.scrHead h1 { font-size: 30px; }
.scrHead p { font-size: 14.5px; margin-top: 4px; max-width: 580px; }
.scrHeadSearch { margin: 0; }
.scrHeadSearch input { background: #fff; font-size: 13px; padding-bottom: 10px; padding-top: 10px; }
.scrLayout { align-items: start; display: grid; gap: 22px; grid-template-columns: 274px minmax(0,1fr); }
.scrResultsTop { grid-column: 2; min-width: 0; }
.scrRail.scrCard { border-radius: 14px; grid-column: 1; grid-row: 2; margin: 0; max-height: calc(100vh - 32px); overflow-y: auto; padding: 0; position: sticky; top: 16px; }
.scrRailHead { align-items: center; background: #FBFCFB; border-bottom: 1px solid #ECEBE4; display: flex; justify-content: space-between; padding: 13px 16px; }
.scrRailHead b { color: #6a7873; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.scrRailHead button, .scrApplied button { background: none; border: 0; color: #6a7873; cursor: pointer; font: inherit; font-size: 11px; }
.scrRailSection { border-bottom: 1px solid #ECEBE4; padding: 14px 16px 16px; }
.scrRailTitle { align-items: center; display: flex; justify-content: space-between; margin-bottom: 7px; }
.scrRailTitle > b { color: #0C2A28; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.scrRailTitle > span { color: #0F7D6B; font-family: var(--mono); font-size: 10px; }
.scrRailSection > p { color: #878d89; font-size: 10.5px; line-height: 1.45; margin: 0 0 10px; }
.scrRail .scrField label, .scrMiniLabel { color: #4c5a55; display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0; margin: 0 0 5px; text-transform: none; }
.scrMiniLabel { margin-top: 11px; }
.scrRail .scrField input { background: #FBFBF9; border-radius: 8px; font-size: 11.5px; padding: 7px 8px; }
.scrRail .scrChip { border-radius: 7px; font-size: 10.5px; padding: 4px 6px 4px 8px; }
.scrStakeRow { align-items: center; background: #FBFCFB; border: 1px solid #ECEBE4; border-radius: 0 0 8px 8px; color: #878d89; display: flex; font-size: 10.5px; gap: 5px; margin-top: -1px; padding: 6px 8px; }
.scrStakeRow input { background: #fff; border: 1px solid #E6E8E6; border-radius: 5px; color: #0C2A28; font-family: var(--mono); font-size: 10.5px; font-weight: 600; padding: 3px 4px; text-align: right; width: 48px; }
.scrStakeRow input:disabled { background: #F3F4F1; color: #a3a9a5; }
.scrHistogram { align-items: end; display: flex; gap: 2px; height: 48px; margin: 8px 0 2px; }
.scrHistogram.compact { height: 40px; }
.scrHistogram i { background: #DFE3DE; border-radius: 1px 1px 0 0; flex: 1; min-height: 3px; }
.scrHistogram i.is-in { background: #0F7D6B; }
.scrRange { accent-color: #0F7D6B; display: block; height: 18px; margin: 0 0 8px; width: 100%; }
.scrChoiceFlag { display: inline-flex; flex-shrink: 0; }
.scrBound { align-items: center; display: flex; gap: 7px; }
.scrBound input { background: #FBFBF9; border: 1px solid #E6E8E6; border-radius: 6px; color: #0C2A28; font-family: var(--mono); font-size: 10.5px; padding: 5px 6px; width: 72px; }
.scrBound span { color: #878d89; font-size: 10px; }
.scrChoiceList { display: flex; flex-direction: column; gap: 3px; }
.scrChoice { align-items: center; background: none; border: 0; color: #2f3d38; cursor: pointer; display: flex; font: inherit; font-size: 11px; gap: 7px; min-height: 21px; padding: 1px 0; text-align: left; width: 100%; }
.scrChoice > i { background: #fff; border: 1px solid #cfd6d2; border-radius: 50%; height: 14px; position: relative; width: 14px; }
.scrChoice[aria-pressed="true"] > i { border-color: #0F7D6B; }
.scrChoice[aria-pressed="true"] > i::after { background: #0F7D6B; border-radius: 50%; content: ""; inset: 3px; position: absolute; }
.scrRailFold { border-bottom: 1px solid #ECEBE4; }
.scrRailFold > summary { align-items: center; cursor: pointer; display: grid; gap: 2px 8px; grid-template-columns: 1fr auto; list-style: none; padding: 12px 16px; }
.scrRailFold > summary::-webkit-details-marker { display: none; }
.scrRailFold > summary:not(:has(small)) { display: flex; }
.scrRailFold summary { color: #0C2A28; font-size: 11.5px; font-weight: 600; }
.scrRailFold summary small { color: #9aa39e; font-size: 9.5px; font-weight: 400; grid-column: 1; }
.scrRailFold summary b { color: #0F7D6B; font-size: 12px; font-weight: 500; grid-column: 2; grid-row: 1 / 3; }
.scrRailFold[open] summary b { transform: rotate(45deg); }
.scrFoldBody { border-top: 1px solid #F1F3F1; padding: 12px 16px 15px; }
.scrResults { grid-column: 2; grid-row: 2; min-width: 0; }
.scrApplied { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; min-height: 29px; }
.scrApplied > b { color: #9aa39e; font-size: 9.5px; letter-spacing: .08em; margin-right: 2px; text-transform: uppercase; }
.scrApplied > span { align-items: center; background: #fff; border: 1px solid #E6E8E6; border-radius: 8px; color: #2f3d38; display: inline-flex; font-size: 10.5px; gap: 7px; padding: 5px 7px 5px 9px; }
.scrApplied > span b { color: #9aa39e; cursor: pointer; font-size: 13px; line-height: 1; }
.scrApplied > button { margin-left: 2px; }
.scrRHead { align-items: center; margin: 8px 2px 8px; }
.scrResultControls { align-items: center; display: flex; gap: 8px; }
.scrColumns { position: relative; }
.scrColumns > summary { background: #fff; border: 1px solid #E6E8E6; border-radius: 8px; color: #2f3d38; cursor: pointer; font-size: 10.5px; list-style: none; padding: 6px 9px; }
.scrColumns > summary::-webkit-details-marker { display: none; }
.scrColumns > div { background: #fff; border: 1px solid #E6E8E6; border-radius: 9px; box-shadow: 0 14px 34px -20px rgba(8,40,36,.45); display: grid; gap: 6px; min-width: 120px; padding: 9px 10px; position: absolute; right: 0; top: calc(100% + 5px); z-index: 20; }
.scrColumns label { align-items: center; color: #4c5a55; display: flex; font-size: 10.5px; gap: 6px; white-space: nowrap; }
.scrColumns input { accent-color: #0F7D6B; }
.scrSortLab { font-size: 9.5px; }
.scrSortLab select { background: #fff; font-size: 10.5px; padding: 6px 8px; }
.scrTableWrap { background: #fff; border: 1px solid #ECEBE4; border-radius: 12px; }
.scrTable { font-size: 11px; }
.scrTable th { font-size: 8.5px; padding: 8px 8px; }
.scrTable td { padding: 8px; }
.scrTable .scrFund { min-width: 220px; }
.scrTable .scrFund a { font-size: 11.5px; }
.scrTable .scrSub { font-size: 9px; }
.scrTable .scrMark { height: 22px; width: 22px; }
.scrValCell b { color: #16201c; display: block; font-weight: 500; }
.scrValCell small { color: #9aa39e; display: block; font-family: var(--sans); font-size: 8.5px; white-space: nowrap; }
.scrStakeHead, .scrStakeCell { color: #0F7D6B !important; font-weight: 700; }
.scrEmpty { color: #6a7873; font-size: 13.5px; padding: 26px; text-align: center; }
.scrMobileFilterBtn { display: none; }
@media (max-width: 900px) {
  .scrHead { align-items: stretch; grid-template-columns: 1fr; }
  .scrHeadSearch { max-width: none; }
  .scrLayout { grid-template-columns: 1fr; }
  .scrResultsTop, .scrRail.scrCard, .scrResults { grid-column: 1; grid-row: auto; }
  .scrMobileFilterBtn { background: #fff; border: 1px solid #E6E8E6; border-radius: 9px; color: #0C2A28; display: block; font: inherit; font-size: 12px; font-weight: 700; margin: 0 0 12px; padding: 8px 12px; }
  .scrRail.scrCard { display: none; max-height: none; position: static; }
  .scrRail.scrCard.is-open { display: block; }
}
@media (max-width: 620px) {
  .scrRoot { padding: 18px 14px 32px; }
  .scrResultControls { align-items: flex-end; flex-direction: column; }
}

/* ============================================================================
   Fund page redesign — "Analyst, refined" (server-rendered /fund/<id>).
   Rules over boxes: hairline-ruled tables and definition grids on the warm
   canvas, IBM Plex Mono on every number. Colours are :root tokens; the only
   non-token hex are the two spec'd secondary-viz colours (#4A6FA5 benchmark/
   bonds, bar tracks). Everything ships in the initial HTML for crawlers. */
/* The fund report sits on its own white sheet over the page canvas, so the
   page reads as one bounded document rather than content floating on the wash. */
.fp-sheet { background: #fff; border: 1px solid #E4E7E3; border-radius: 18px; box-shadow: 0 30px 70px -55px rgba(8,40,36,.45); margin: 18px 0 34px; overflow: clip; }
.fp-hero { display: grid; grid-template-columns: 0.9fr 1.1fr; border-bottom: 1px solid var(--ink); }
.fp-hero > * { min-width: 0; }
.fp-hero-l { display: flex; flex-direction: column; padding: 34px 40px 30px; border-right: 1px solid var(--hairline); }
.fp-hero-r { display: flex; flex-direction: column; padding: 26px 40px 24px; }
.fp-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--primary); }
.fp-h1 { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.0; color: var(--ink); margin-top: 12px; }
.fp-h1 .dim { color: var(--faint-2); font-weight: 600; }
.fp-fullname { font-size: 16px; color: var(--muted); margin-top: 9px; }
/* What the fund holds, in one line under its name: the first thing a reader
   should be able to answer, so it sits above the identifiers and outranks them
   in weight. */
.fp-what { font-size: 17px; color: var(--ink); margin-top: 10px; line-height: 1.4;
           max-width: 46ch; font-weight: 600; letter-spacing: -.01em; }
.fp-ids { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 11px; line-height: 1.55; }
.fp-ids .issuer { font-family: var(--sans); color: var(--faint); }
.fp-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.fp-hero-actions .btn { min-height: 40px; }
.fp-hero-actions span { max-width: 240px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.fp-conc { margin-top: auto; padding-top: 30px; }
.fp-conc-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint-2); }
.fp-verdict-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.fp-verdict { font-size: 19px; font-weight: 800; white-space: nowrap; letter-spacing: -0.01em; }
.fp-conc-top10 { font-size: 13px; color: var(--muted); }
.fp-conc-top10 b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.fp-chart-k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fp-chart-k .l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint-2); white-space: nowrap; }
.fp-chart-k .r { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
.fp-chartwrap { margin-top: 12px; flex: 1; }

/* Concentration meter (light surface) */
.fp-meter { position: relative; height: 8px; border-radius: 4px; margin-top: 12px;
  background: linear-gradient(90deg, #3DDAB4 0%, #3DDAB4 16%, #E0A93B 42%, #E08A42 64%, #E06B57 100%); }
.fp-meter i { position: absolute; top: 0; width: 1px; height: 8px; background: rgba(255,255,255,0.75); }
.fp-meter b { position: absolute; top: -1px; width: 3px; height: 10px; border-radius: 2px; background: var(--ink);
  box-shadow: 0 0 0 3px var(--surface); transform: translateX(-50%); }
.fp-meter-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--faint-2); margin-top: 7px; }

/* Stat band: 6 factsheet KPIs */
.fp-stats { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hairline); }
.fp-stat { padding: 17px 22px; border-right: 1px solid var(--hairline); min-width: 0; }
.fp-stat:last-child { border-right: 0; }
.fp-stat .l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--faint-2); }
.fp-stat .v { font-family: var(--mono); font-size: 25px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-top: 7px; line-height: 1.05; }
.fp-stat .m { font-size: 10.5px; color: var(--faint); margin-top: 3px; line-height: 1.35; }

/* Body: sticky rail + numbered sections */
.fp-body { display: grid; grid-template-columns: 212px 1fr; gap: 30px; }
.fp-body > * { min-width: 0; }
.fp-rail { position: sticky; top: 12px; align-self: start; z-index: 4; max-height: calc(100vh - 24px); overflow-y: auto; background: #fff; border-right: 1px solid var(--hairline); padding: 28px 22px 28px 24px; }
.fp-rail-k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint-2); margin-bottom: 8px; }
.fp-rail-nav { display: flex; flex-direction: column; }
.fp-rail-row { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--row-line); color: var(--muted); font-weight: 600; font-size: 13.5px; }
.fp-rail-row:hover { text-decoration: none; color: var(--ink); }
.fp-rail-row .n { font-family: var(--mono); font-size: 11px; color: var(--faint-2); }
.fp-rail-row.is-active { color: var(--ink); font-weight: 700; }
.fp-rail-row.is-active .n { color: var(--primary); }
.fp-rail-note { margin-top: 16px; font-size: 11px; color: var(--faint-2); line-height: 1.5; }
.fp-rail-note a { font-size: 11px; color: var(--faint-2); }
.fp-content { padding: 28px 40px; }
.fp-sec { margin-bottom: 42px; scroll-margin-top: 14px; }
.fp-sec:last-child { margin-bottom: 8px; }
.fp-sechead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--ink); padding-bottom: 9px; margin-bottom: 20px; }
.fp-sechead-l { display: flex; gap: 12px; align-items: baseline; }
.fp-secnum { font-family: var(--mono); font-size: 12px; color: var(--faint-2); }
.fp-seclabel { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); white-space: nowrap; }
.fp-secmeta { font-size: 12px; color: var(--muted); text-align: right; }
.fp-subhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 26px 0 12px; }
.fp-subhead .l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--ink); }
.fp-subhead .m { font-size: 11px; color: var(--faint); text-align: right; }
.fp-method { font-size: 12px; color: var(--faint); margin-top: 14px; line-height: 1.6; }
.fp-method .how { text-decoration: underline dotted 1px; text-underline-offset: 2px; cursor: help; color: var(--muted); }

/* Overview basics grid */
/* minmax(0, 1fr), not 1fr: a plain 1fr track cannot shrink below its longest
   word, so "Luxembourg" pushed the whole grid past the phone viewport. */
.fp-basics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 44px; }
.fp-basic { border-bottom: 1px solid var(--row-line); padding-bottom: 13px; min-width: 0; }
.fp-basic .l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--faint-2); }
.fp-basic .v { font-size: 17px; font-weight: 600; color: var(--ink); margin-top: 4px; overflow-wrap: anywhere; }

/* Performance returns strip + valuation strip */
.fp-returns { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.fp-returns > div { padding: 12px 16px; border-right: 1px solid var(--hairline); }
.fp-returns > div:last-child { border-right: 0; }
.fp-returns .l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint-2); }
.fp-returns .v { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--primary); margin-top: 5px; }
.fp-val { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.fp-val > div { padding: 14px 18px; border-right: 1px solid var(--hairline); }
.fp-val > div:last-child { border-right: 0; }
.fp-val .v { font-family: var(--mono); font-size: 28px; font-weight: 600; color: var(--ink); }
.fp-val .l { font-size: 12px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.fp-val .m { font-size: 11px; color: var(--faint); margin-top: 2px; }
.fp-val .m.how { text-decoration: underline dotted 1px; text-underline-offset: 2px; cursor: help; }

/* Holdings table */
.fp-holdings { max-height: 520px; overflow: auto; }
.fp-holdings table { width: 100%; border-collapse: collapse; }
.fp-holdings th { position: sticky; top: 0; z-index: 1; background: var(--canvas); text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint-3); border-bottom: 1px solid var(--ink); padding: 9px 10px; }
.fp-holdings th.r { text-align: right; }
.fp-holdings td { border-bottom: 1px solid var(--row-line); padding: 8px 10px; font-size: 13px; vertical-align: middle; }
.fp-holdings .n { text-align: right; font-family: var(--mono); color: var(--faint-2); width: 34px; }
.fp-holdings .cc { font-family: var(--mono); font-size: 11px; color: var(--faint-2); margin-left: 5px; }
.fp-holdings .isin { font-family: var(--mono); color: var(--muted); font-size: 12px; }
.fp-seeall { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; }
.fp-seeall:hover { text-decoration: underline; }
.fp-holdings .wcell { width: 210px; }
.fp-wbar-wrap { display: flex; align-items: center; gap: 9px; }
.fp-wtrack { flex: 1; height: 5px; border-radius: 3px; background: #EEF1ED; }
.fp-wtrack i { display: block; height: 5px; border-radius: 3px; background: var(--primary); }
.fp-wval { font-family: var(--mono); font-size: 12.5px; color: var(--ink); flex: 0 0 44px; text-align: right; }

/* Exposure: asset-mix ribbon + sector/country bar lists */
.fp-mix { display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: #F3F2EC; }
.fp-mix i { display: block; height: 12px; }
.fp-mix-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; font-size: 12.5px; }
.fp-mix-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fp-mix-legend .dot { width: 9px; height: 9px; border-radius: 2px; }
.fp-mix-legend b { font-family: var(--mono); font-weight: 600; }
.fp-expcols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 24px; }
.fp-expcols > div { min-width: 0; }
.fp-exprow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--row-line); }
.fp-exprow .nm { flex: 0 0 40%; font-size: 12.5px; display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.fp-exprow .nm .code { font-family: var(--mono); font-size: 11px; color: var(--faint-2); }
.fp-exprow .nm .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-exprow .track { flex: 1; height: 5px; border-radius: 3px; background: #EEF1ED; }
.fp-exprow .track i { display: block; height: 5px; border-radius: 3px; }
.fp-exprow .v { font-family: var(--mono); font-size: 12px; color: var(--ink); flex: 0 0 46px; text-align: right; }
.fp-currency { font-family: var(--mono); font-size: 12.5px; color: var(--body); margin-top: 18px; }
.fp-currency .k { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--faint-2); margin-right: 10px; }

/* Similar funds */
.fp-simrow { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--row-line); }
.fp-simrow .tkr { flex: 0 0 56px; font-family: var(--mono); font-weight: 600; color: var(--ink); }
.fp-simrow .nm { flex: 1; min-width: 0; }
.fp-simrow .nm .t { font-size: 13.5px; color: var(--body); }
.fp-simrow .nm .s { font-size: 12px; color: var(--muted); }
.fp-simrow .fp-simmetric { flex: 0 0 96px; text-align: right; font-family: var(--mono); font-weight: 700; color: var(--ink); font-size: 13.5px; }
.fp-simrow .fp-simmetric.qual { font-family: var(--sans); font-weight: 600; color: var(--faint); font-size: 12px; }
.fp-simrow .lnk { flex: 0 0 82px; text-align: right; font-size: 12.5px; }

/* Where it trades */
.fp-trades { max-width: 600px; }
.fp-trades table { width: 100%; border-collapse: collapse; }
.fp-trades th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint-3); border-bottom: 1px solid var(--border); padding: 8px 10px; }
.fp-trades td { border-bottom: 1px solid var(--row-line); padding: 7px 10px; font-size: 13px; }
.fp-trades .mic, .fp-trades .since { font-family: var(--mono); color: var(--muted); font-size: 12.5px; }

/* CTA band (full-bleed dark ink + radial green glow) */
.fp-cta { position: relative; overflow: hidden; background: var(--ink); color: #fff; margin-top: 10px; }
.fp-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 88% 26%, rgba(15,125,107,0.42), transparent 70%); pointer-events: none; }
.fp-cta-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 34px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fp-cta h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.fp-cta p { font-size: 14px; color: rgba(255,255,255,0.8); margin-top: 6px; max-width: 560px; }

/* Growth chart: period tabs (underline) + stats under the chart */
.fp-chart-tabs { display: flex; gap: 16px; }
.fp-chart-tab { font-size: 12.5px; font-weight: 600; color: var(--faint); background: none; border: 0; border-bottom: 2px solid transparent; padding: 3px 1px; cursor: pointer; font-family: var(--sans); }
.fp-chart-tab:hover { color: var(--muted); }
.fp-chart-tab.is-active { color: var(--ink); font-weight: 700; border-bottom-color: var(--primary); }
.fp-chart-stats { display: flex; gap: 26px; margin-top: 12px; }
.fp-chart-stat .l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint-2); }
.fp-chart-stat .v { font-family: var(--mono); font-size: 15px; font-weight: 600; margin-top: 2px; }

/* Responsive */
@media (max-width: 900px) {
  .fp-stats { grid-template-columns: repeat(3, 1fr); }
  .fp-stat { border-bottom: 1px solid var(--hairline); }
  .fp-stat:nth-child(3n) { border-right: 0; }
}
@media (max-width: 820px) {
  .fp-basics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .fp-hero { grid-template-columns: 1fr; }
  .fp-hero-l { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .fp-body { grid-template-columns: 1fr; gap: 0; }
  .fp-rail {
    display: flex;
    align-items: stretch;
    top: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 0 14px;
  }
  .fp-rail-k {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 12px 0 0;
    background: #fff;
  }
  .fp-rail-nav { flex-direction: row; min-width: max-content; }
  .fp-rail-row {
    gap: 5px;
    padding: 13px 10px 11px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .fp-rail-row.is-active { border-bottom-color: var(--primary); }
  .fp-rail-note { display: none; }
  .fp-content { padding: 24px 0; }
  .fp-sec { scroll-margin-top: 58px; }
  .fp-expcols { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 560px) {
  .fp-stats { grid-template-columns: repeat(2, 1fr); }
  .fp-stat:nth-child(3n) { border-right: 1px solid var(--hairline); }
  .fp-stat:nth-child(2n) { border-right: 0; }
  .fp-h1 { font-size: 36px; }
  .fp-hero-l, .fp-hero-r { padding: 24px 20px; }
  .fp-returns { grid-template-columns: repeat(3, 1fr); }
  .fp-val { grid-template-columns: 1fr; }
  .fp-exprow .nm { flex-basis: 46%; }
  .fp-simrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 14px;
    padding: 14px 0;
  }
  .fp-simrow .tkr {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .fp-simrow .nm {
    grid-column: 1;
    grid-row: 2;
  }
  .fp-simrow .fp-simmetric {
    grid-column: 2;
    grid-row: 1;
    min-width: 64px;
    text-align: right;
  }
  .fp-simrow .fp-simmetric.qual { display: none; }
  .fp-simrow .lnk {
    grid-column: 2;
    grid-row: 2;
    min-width: 82px;
    text-align: right;
  }
  .fp-simrow .lnk a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---- Guide page ("How to use it") --------------------------------------- */
/* Question-and-answer layout: a sticky scroll-spy rail (guide.js) and one
   answers card with hairline rows. Rendered by pages.render_guide_page. */
.gp-main { padding-top: 44px; padding-bottom: 72px; }
.gp-head { max-width: 640px; }
.gp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); }
.gp-h1 { font-size: 38px; line-height: 1.1; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; margin: 10px 0 0; text-wrap: balance; }
.gp-sub { font-size: 16px; line-height: 1.55; color: #4c5a55; margin: 14px 0 0; max-width: 520px; }

.gp-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 34px; }
.gp-rail { position: sticky; top: 86px; }
.gp-rail a { display: block; font-size: 13px; font-weight: 600; color: var(--muted); padding: 8px 11px; border-radius: 8px; text-decoration: none; }
.gp-rail a:hover { background: #fbfcfb; text-decoration: none; }
.gp-rail a.active { color: var(--primary); background: var(--tint); font-weight: 700; }

.gp-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px -38px rgba(8, 40, 36, 0.5); max-width: 780px; }
.gp-sec { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint-2); padding: 18px 22px 6px; border-top: 1px solid var(--row-line); scroll-margin-top: 86px; }
.gp-sec:first-child { border-top: 0; }
.gp-qa { padding: 20px 22px; border-top: 1px solid var(--row-line); scroll-margin-top: 86px; }
.gp-qa h3 { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin: 0 0 6px; }
.gp-qa p { font-size: 14px; line-height: 1.55; color: #4c5a55; margin: 0; }
.gp-qa b { color: var(--ink); }
.gp-qarow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gp-qarow > p { flex: 1; min-width: 260px; }

.gp-spec { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gp-chip { display: inline-block; font-size: 11px; font-weight: 600; color: var(--body); background: #F2F4F0; border: 1px solid var(--hairline); padding: 3px 8px; border-radius: 6px; }
.gp-upload { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 1px dashed #cfd8d2; border-radius: 9px; padding: 7px 11px; font-size: 12px; font-weight: 600; color: #5c6b67; background: #FAFBF9; }
.gp-paste { font-size: 11.5px; line-height: 1.7; color: #3a443f; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 12px; white-space: pre; }
.gp-fresh { font-size: 11.5px; line-height: 1.6; color: var(--muted); white-space: nowrap; }

.gp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid var(--row-line); background: #fbfcfb; }
.gp-foot span { font-size: 13px; color: var(--muted); }
.gp-foot a[href^="mailto"] { font-weight: 600; white-space: nowrap; }
.gp-legal { font-size: 12px; color: var(--faint-2); margin-top: 26px; }

@media (max-width: 900px) {
  .gp-grid { grid-template-columns: 1fr; }
  .gp-rail { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
}
@media (max-width: 620px) {
  .gp-h1 { font-size: 30px; }
  .gp-qarow { align-items: flex-start; }
}

/* Phone topbar: one row. Placed after the base .topbar-nav / .brand rules
   because media queries add no specificity; the earlier <=720px block loses
   equal-specificity ties to the base rules below it. The standalone text
   links fold into the Menu panel (same destinations), leaving logo + Menu +
   account + Open app, which fit a 360px viewport without wrapping. */
@media (max-width: 720px) {
  .topbar .wrap { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .topbar-nav { gap: 10px 12px; }
  .topbar-nav > .topbar-link { display: none; }
  .brand { gap: 8px; }
  .brand h1, .brand .brand-name { font-size: 17.5px; }
}
/* Compact phones (and the app view, whose container is narrower than the
   viewport): shave the nav pieces so the row still holds at 288px of content. */
@media (max-width: 480px) {
  .topbar-nav { gap: 8px; }
  .topbar-nav .btn { padding: 7px 11px; font-size: 12.5px; }
  .ltMenu > summary { font-size: 13.5px; gap: 5px; }
  .brand h1, .brand .brand-name { font-size: 16.5px; }
  .brand .logo, .brand .logo svg { width: 22px; height: 22px; }
}