/* 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 */
@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"] { 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 */
.ltTearSheet {
  --tear-pad: clamp(20px, 3vw, 38px);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: 0 16px 55px rgba(12, 42, 40, 0.07);
}
.ltTearHead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 34px;
  align-items: center;
  padding: 32px var(--tear-pad) 27px;
  background: #0C2A28;
  color: #fff;
}
.ltTearEyebrow { display: block; color: #72D6BE; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ltTearHead h2 { max-width: 720px; margin-top: 8px; color: #fff; font-size: clamp(25px, 3.6vw, 43px); line-height: 1.08; letter-spacing: -.035em; }
.ltTearHead p { margin-top: 11px; color: rgba(255,255,255,.64); font-size: 12.5px; }
.ltTraceScore { min-height: 142px; padding: 17px 18px; border-radius: 14px; background: var(--score-bg); color: var(--score-ink); display: flex; flex-direction: column; justify-content: center; }
.ltTraceScore > span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ltTraceScore > b { margin-top: 5px; font: 600 44px/1 var(--mono); letter-spacing: -.05em; }
.ltTraceScore > b i { font: 500 14px var(--mono); opacity: .68; }
.ltTraceScore > em { margin-top: 8px; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.35; }
.ltTraceScoreOff { color: rgba(255,255,255,.8); background: rgba(255,255,255,.1); }
.ltTraceScoreOff > b { font: 700 18px/1.2 var(--sans); letter-spacing: 0; }
.ltTearLegend i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ltTearMain { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(210px, .68fr); }
.ltTearFigure { min-width: 0; padding: 29px var(--tear-pad) 27px; }
.ltTearSectionHead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ltTearSectionHead h3 { color: var(--ink); font-size: 13px; line-height: 1.3; }
.ltTearSectionHead > span { color: var(--faint-2); font-size: 10.5px; text-align: right; }
.ltTearHoldings { margin-top: 15px; }
.ltTearHolding { display: grid; grid-template-columns: 22px minmax(105px, 1fr) minmax(90px, 1.5fr) 50px; gap: 12px; align-items: center; min-height: 41px; border-bottom: 1px solid var(--row-line); }
.ltTearHolding > span { color: #AAB2AE; font-size: 10px; }
.ltTearHolding > div:nth-child(2) { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.ltTearHolding b { overflow: hidden; color: var(--body); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.ltTearHolding small { color: var(--faint-2); font: 500 9.5px var(--mono); }
.ltTearHolding strong { color: var(--body); font-size: 11.5px; text-align: right; }
.ltTearHoldingTrack { height: 8px; overflow: hidden; border-radius: 5px; background: #EDF1EF; }
.ltTearHoldingTrack > div { display: flex; height: 100%; min-width: 3px; overflow: hidden; border-radius: 5px; }
.ltTearHoldingTrack i { display: block; height: 100%; }
.ltTearHolding.locked b { width: 76px; height: 10px; color: transparent; border-radius: 4px; background: repeating-linear-gradient(90deg,#DDE3DF 0 8px,#EEF1EF 8px 14px); }
.ltTearLockedBar { width: 100%; background: repeating-linear-gradient(90deg,#BFD3CB 0 9px,#DDE7E2 9px 15px); }
.ltTearRail { display: grid; grid-template-columns: 1fr 1fr; align-content: start; background: #F7F8F5; border-left: 1px solid var(--hairline); }
.ltTearRail > div { min-height: 95px; padding: 17px 15px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.ltTearRail > div:nth-child(2n) { border-right: 0; }
.ltTearRail span { display: block; color: var(--muted); font-size: 9.5px; line-height: 1.25; }
.ltTearRail b { display: block; margin-top: 8px; color: var(--ink); font-size: 19px; line-height: 1; }
.ltTearRail em { display: block; overflow: hidden; margin-top: 7px; color: var(--faint); font-size: 9px; font-style: normal; line-height: 1.3; text-overflow: ellipsis; }
.ltTearComposition { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.ltTearStripBlock { min-width: 0; padding: 24px var(--tear-pad) 23px; border-right: 1px solid var(--hairline); }
.ltTearStripBlock:last-child { border: 0; }
.ltTearStrip { display: flex; height: 12px; margin-top: 15px; overflow: hidden; border-radius: 6px; background: #EDF1EF; }
.ltTearStrip i { min-width: 2px; height: 100%; }
.ltTearLegend { display: flex; gap: 6px 12px; flex-wrap: wrap; margin-top: 11px; }
.ltTearLegend span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.ltTearLegend b { color: var(--body); font-size: 9px; }
.ltHistory { padding: 28px var(--tear-pad) 23px; border-top: 1px solid var(--hairline); background: linear-gradient(180deg,#FBFCFA,#F6F8F5); }
.ltHistoryHead { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.ltHistory h3 { margin-top: 5px; color: var(--ink); font-size: 17px; }
.ltHistoryPeriods { display: flex; padding: 3px; border: 1px solid #DDE4DF; border-radius: 8px; background: #fff; }
.ltHistoryPeriods button { appearance: none; padding: 5px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font: 600 10px var(--sans); cursor: pointer; }
.ltHistoryPeriods button.active { background: var(--ink); color: #fff; }
.ltHistoryPlot { margin-top: 15px; }
.ltHistoryPlot svg { display: block; width: 100%; height: auto; overflow: visible; }
.ltHistoryDates { display: flex; justify-content: space-between; margin-top: 3px; color: var(--faint-2); font: 500 9px var(--mono); }
.ltHistoryMetrics { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 17px; border-top: 1px solid #E0E6E2; border-bottom: 1px solid #E0E6E2; }
.ltHistoryMetrics > div { padding: 13px 14px; border-right: 1px solid #E0E6E2; }
.ltHistoryMetrics > div:first-child { padding-left: 0; }.ltHistoryMetrics > div:last-child { border: 0; }
.ltHistoryMetrics span { display: block; color: var(--muted); font-size: 9.5px; }
.ltHistoryMetrics b { display: block; margin-top: 5px; color: var(--ink); font: 600 15.5px/1.15 var(--mono); }
.ltHistoryContrib { display: flex; gap: 8px 16px; flex-wrap: wrap; margin-top: 15px; color: var(--muted); font-size: 9.5px; }
.ltHistoryContrib b { color: var(--body); font-size: 10px; }.ltHistoryContrib i { color: var(--primary); font-style: normal; }
.ltHistoryNote { margin-top: 14px; color: var(--faint); font-size: 9.5px; line-height: 1.5; }
.ltHistoryUnavailable { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.ltHistoryUnavailable p { max-width: 520px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.ltTearFooter { display: grid; grid-template-columns: auto 1fr minmax(280px, 1.4fr); gap: 12px 20px; align-items: center; padding: 14px var(--tear-pad); background: #0C2A28; color: rgba(255,255,255,.62); }
.ltTearFooter b { color: #fff; font-size: 12px; }.ltTearFooter span, .ltTearFooter p { font-size: 9.5px; }.ltTearFooter p { text-align: right; }
.ltTearEmpty { padding: 28px; border: 1px solid var(--hairline); border-radius: 14px; background: #fff; color: var(--muted); font-size: 13px; }
@media (max-width: 1080px) {
  .ltTearMain { grid-template-columns: 1fr; }
  .ltTearRail { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); border-left: 0; }
  .ltTearRail > div:nth-child(2n) { border-right: 1px solid var(--hairline); }
  .ltTearRail > div:nth-child(3n) { border-right: 0; }
  .ltTearComposition { grid-template-columns: 1fr; }
  .ltTearStripBlock { border-right: 0; border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 680px) {
  .ltTearSheet { border-radius: 14px; }
  .ltTearHead { grid-template-columns: 1fr; gap: 20px; }
  .ltTraceScore { min-height: 0; }
  .ltTearSectionHead { display: block; }.ltTearSectionHead > span { display: block; margin-top: 5px; text-align: left; }
  .ltTearHolding { grid-template-columns: 18px minmax(85px, 1.2fr) minmax(42px, .8fr) 43px; gap: 7px; }
  .ltTearHolding small { display: none; }
  .ltTearRail { grid-template-columns: repeat(2, 1fr); }
  .ltTearRail > div:nth-child(3n) { border-right: 1px solid var(--hairline); }.ltTearRail > div:nth-child(2n) { border-right: 0; }
  .ltHistoryHead, .ltHistoryUnavailable { align-items: flex-start; flex-direction: column; }
  .ltHistoryMetrics { grid-template-columns: repeat(2, 1fr); }
  .ltHistoryMetrics > div:nth-child(2) { border-right: 0; }.ltHistoryMetrics > div:nth-child(-n+2) { border-bottom: 1px solid #E0E6E2; }
  .ltTearFooter { grid-template-columns: 1fr; }.ltTearFooter p { text-align: left; }
}
/* Approved overview tear-sheet, design handoff option 3a. Keep the overview
   open and editorial: no hero card, KPI tile grid, dark field or drop shadow. */
.ltTearSheet {
  --tear-pad: 0;
  overflow: hidden;
  padding: 30px 40px 26px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.ltTearHead { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 0; background: transparent; color: var(--ink); }
.ltTearHead > div:first-child { max-width: 640px; }
.ltTearEyebrow { margin-bottom: 12px; color: var(--faint-2); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.ltTearHead h2 { margin: 0; color: var(--ink); font-size: 33px; font-weight: 800; line-height: 1.14; letter-spacing: -.025em; }
.ltTraceScore { display: block; min-width: 330px; min-height: 0; padding: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: right; }
.ltTraceScore > div:first-child { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; }
.ltTraceScore > div:first-child b { color: var(--primary); font: 600 74px/.95 var(--mono); letter-spacing: -.03em; }
.ltTraceScore > div:first-child i { color: var(--faint); font: 500 18px var(--mono); font-style: normal; }
.ltTraceScore p, .ltTearHead .ltTraceScore p { margin: 7px 0 0; color: var(--muted); font-size: 12.5px; }
.ltTraceScoreOff { min-width: 240px; color: var(--muted); }
.ltTraceScoreOff > b { display: block; margin: 0; color: var(--faint); font: 600 30px/1 var(--mono); }
.ltScoreSegments { display: flex; justify-content: flex-end; gap: 3px; margin-top: 13px; }
.ltScoreSegments span { display: grid; width: 52px; gap: 5px; text-align: center; }
.ltScoreSegments i { display: block; width: 100%; height: 6px; border-radius: 3px; }
.ltScoreSegments em { overflow: hidden; color: var(--faint); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.ltTearDivider { height: 1px; margin: 24px 0 26px; background: var(--hairline); }
.ltTearDividerLower { margin: 22px 0; }
.ltTearMain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 56px; align-items: start; }
.ltTearFigure { position: relative; min-width: 0; padding: 0; }
.ltTearFundBand { display: flex; width: 100%; height: 30px; gap: 2px; overflow: hidden; border-radius: 8px; }
.ltTearFundBand > span { display: flex; min-width: 20px; align-items: center; gap: 5px; padding: 0 12px; overflow: hidden; }
.ltTearFundBand b, .ltTearFundBand em { overflow: hidden; font-size: 11px; font-style: normal; font-weight: 600; text-overflow: clip; white-space: nowrap; }
.ltTearFundCaption { margin: 8px 0 22px; color: var(--faint); font-size: 11.5px; }
.ltTearWatermark { position: absolute; z-index: 0; top: 55%; left: calc(50% + 36px); display: flex; align-items: center; gap: 9px; color: rgba(12,42,40,.10); pointer-events: none; transform: translate(-50%,-50%); }
.ltTearWatermark i { position: relative; width: 28px; height: 28px; border: 2px solid currentColor; border-radius: 50%; }
.ltTearWatermark i::after { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: currentColor; content: ""; transform: translate(-50%,-50%); }
.ltTearWatermark b { font-size: 34px; font-weight: 600; white-space: nowrap; }
.ltTearHoldings { position: relative; z-index: 1; display: grid; gap: 12px; margin: 0; }
.ltTearHolding { display: grid; grid-template-columns: 118px minmax(80px, 1fr) 46px; gap: 14px; align-items: center; min-height: 21px; border: 0; }
.ltTearHolding > b { min-width: 0; overflow: hidden; color: var(--ink); font-size: 14.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ltTearHoldingTrack { height: 21px; overflow: visible; border-radius: 5px; background: transparent; }
.ltTearHoldingTrack > div { display: flex; height: 100%; min-width: 3px; gap: 1.5px; overflow: hidden; border-radius: 5px; }
.ltTearHoldingTrack i { display: block; height: 100%; }
.ltTearHolding strong { color: var(--ink); font-size: 14px; font-weight: 600; text-align: right; }
.ltTearHolding.locked > b { width: 88px; height: 12px; color: transparent; border-radius: 4px; background: repeating-linear-gradient(90deg,#DDE3DF 0 8px,#EEF1EF 8px 14px); }
.ltTearLockedBar { width: 100%; background: repeating-linear-gradient(90deg,#BFD3CB 0 9px,#DDE7E2 9px 15px); }
.ltTearBarCaption { margin-top: 14px; color: var(--faint); font-size: 11.5px; line-height: 1.45; }
.ltTearBarCaption b { color: var(--body); }
.ltTearRail { display: block; background: transparent; border: 0; }
.ltTearRail > div { min-height: 0; padding: 0; border: 0; }
.ltRailCallout { padding-bottom: 16px !important; border-bottom: 1px solid var(--hairline) !important; }
.ltRailCallout > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ltRailCallout > div b { margin: 0; color: var(--ink); font: 700 13px/1.35 var(--sans); }
.ltRailCallout strong { color: var(--primary); font: 600 32px/1 var(--mono); letter-spacing: -.02em; }
.ltRailCallout > span, .ltRailMarket > span { position: relative; display: block; height: 8px; margin-top: 11px; overflow: visible; border-radius: 4px; background: #EEF1ED; }
.ltRailCallout > span i, .ltRailMarket > span i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg,#0F7D6B,#3DDAB4); }
.ltRailCallout p { margin: 9px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.ltRailRow { display: flex; min-height: 45px !important; align-items: baseline; justify-content: space-between; gap: 20px; padding: 12px 0 !important; border-bottom: 1px solid var(--row-line) !important; }
.ltRailRow > span { max-width: 190px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.ltRailRow > b { display: block; margin: 0; color: var(--ink); font: 600 15.5px/1.2 var(--mono); text-align: right; }
.ltRailRow.last { border-bottom: 0 !important; }
.ltRailMarket { padding: 12px 0 !important; border-bottom: 1px solid var(--row-line) !important; }
.ltRailMarket > div { display: flex; align-items: baseline; justify-content: space-between; }
.ltRailMarket > div span { color: var(--muted); font-size: 12.5px; }
.ltRailMarket > div b { display: block; margin: 0; color: var(--ink); font: 600 15.5px/1.2 var(--mono); }
.ltRailMarket > span { height: 7px; margin-top: 9px; }
.ltRailMarket > span em { position: absolute; top: -3px; width: 2px; height: 13px; border-radius: 1px; background: var(--gold); }
.ltRailMarket p { margin: 6px 0 0; color: var(--faint); font-size: 11px; line-height: 1.4; }
.ltRailMarket p i, .ltGoldTick { display: inline-block; width: 2px !important; height: 9px !important; margin-right: 5px; border-radius: 0 !important; background: var(--gold) !important; vertical-align: -1px; }
/* Whatever ends the rail ends it cleanly; the composition divider follows. */
.ltTearRail > *:last-child { border-bottom: 0 !important; }
.ltTearComposition { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; border: 0; }
.ltTearStripBlock { min-width: 0; padding: 0; border: 0; }
.ltTearSectionHead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.ltTearSectionHead h3 { color: var(--faint-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ltTearSectionHead > span { color: var(--faint); font: 500 11px var(--mono); text-align: right; }
.ltTearStripWrap { position: relative; }
.ltTearStrip { display: flex; height: 30px; gap: 2px; margin: 0; overflow: hidden; border-radius: 8px; background: #E3E7E2; }
.ltTearStrip > i { display: flex; min-width: 2px; height: 100%; align-items: center; padding-left: 10px; overflow: hidden; color: var(--ink); font-style: normal; }
.ltTearStrip > i:nth-child(-n+3) { color: #fff; }
.ltTearStrip > i b { font-size: 11px; font-weight: 600; }
.ltTearMarker { position: absolute; top: -5px; width: 2px; height: 40px; border-radius: 1px; background: var(--gold); }
.ltTearLegend { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 9px; }
.ltTearLegend span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.ltTearLegend span > i { width: 7px; height: 7px; border-radius: 2px; }
.ltTearLegend b { color: var(--body); font-size: 11px; }
.ltTearFooter { display: flex; grid-template-columns: none; align-items: baseline; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 14px 0 0; border-top: 1px solid var(--hairline); background: transparent; color: var(--faint-2); }
.ltTearFooter span, .ltTearFooter b { color: var(--faint-2); font-size: 11px; font-weight: 400; }
.ltHistory { margin-top: 18px; padding: 28px 32px 23px; border: 1px solid var(--hairline); border-radius: 14px; background: #fff; }
.ltHistoryEmbedded { margin: 0; padding: 0 0 2px; border: 0; border-radius: 0; }
.ltTearDividerHistory { margin: 24px 0 26px; }
.ltHistoryControls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ltHistoryCompare { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.ltHistoryCompare > span { margin-right: 3px; color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ltHistoryCompare button { appearance: none; padding: 5px 8px; border: 1px solid #DDE4DF; border-radius: 6px; background: #fff; color: var(--muted); font: 600 10px var(--sans); cursor: pointer; }
.ltHistoryCompare button:hover { border-color: #B7C9C1; color: var(--ink); }
.ltHistoryCompare button.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.ltHistoryCompare button:disabled { cursor: not-allowed; opacity: .38; }
.ltHistoryCompare select { min-width: 154px; padding: 6px 30px 6px 9px; border: 1px solid #DDE4DF; border-radius: 6px; background: #fff; color: var(--body); font: 600 10px var(--sans); cursor: pointer; }
.ltHistoryCompare select:hover, .ltHistoryCompare select:focus { border-color: #B7C9C1; outline: none; }
.ltHistoryLegend { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 6px; color: var(--muted); font-size: 10.5px; }
.ltHistoryLegend span { display: inline-flex; align-items: center; gap: 6px; }
.ltHistoryLegend i { width: 22px; height: 3px; border-radius: 2px; background: var(--primary); }
.ltHistoryLegend i.benchmark { height: 2px; background: repeating-linear-gradient(90deg,var(--gold) 0 7px,transparent 7px 11px); }
.ltHistoryTracked { display: grid; gap: 7px; margin-top: 15px; padding: 10px 12px; border-radius: 8px; background: #F5F8F5; }
.ltHistoryTracked > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.ltHistoryTracked span { color: var(--faint-2); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ltHistoryTracked p { display: flex; gap: 5px 13px; flex-wrap: wrap; margin: 0; }
.ltHistoryTracked b { color: var(--body); font-size: 10.5px; font-weight: 600; }
.ltHistoryTracked b i { color: var(--primary); font-size: 10.5px; font-style: normal; }
.ltHistoryTracked b small { display: block; max-width: 320px; margin-top: 2px; color: var(--faint); font-size: 9.5px; font-weight: 500; line-height: 1.25; }
.ltHistoryTracked b em { color: var(--faint); font-size: 9.5px; font-style: normal; font-weight: 500; }
.ltHistoryTracked .missing b i { color: #9A6B16; }
.ltHistoryMetrics.hasComparison { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ltPortfolioTracking { margin-top: 25px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.ltPortfolioTrackingHead { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.ltPortfolioTracking h3 { margin-top: 5px; color: var(--ink); font-size: 17px; }
.ltPortfolioTrackingHead > span { color: var(--muted); font-size: 10.5px; text-align: right; }
.ltPortfolioTrackingCoverage { height: 4px; margin-top: 14px; overflow: hidden; border-radius: 5px; background: #E7ECE8; }
.ltPortfolioTrackingCoverage i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.ltPortfolioTrackingMetrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid #E0E6E2; border-bottom: 1px solid #E0E6E2; }
.ltPortfolioTrackingMetrics > div { min-width: 0; padding: 13px 14px; border-right: 1px solid #E0E6E2; }
.ltPortfolioTrackingMetrics > div:first-child { padding-left: 0; }
.ltPortfolioTrackingMetrics > div:last-child { border-right: 0; }
.ltPortfolioTrackingMetrics span { display: block; color: var(--muted); font-size: 9.5px; }
.ltPortfolioTrackingMetrics b { display: block; margin-top: 5px; color: var(--ink); font: 600 15.5px/1.15 var(--mono); }
.ltPortfolioTrackingMetrics b.negative { color: #B4483B; }
.ltPortfolioTrackingMetrics i { display: block; margin-top: 4px; color: var(--faint-2); font-size: 8.5px; font-style: normal; line-height: 1.35; }
.ltPortfolioTrackingFunds { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; margin-top: 15px; padding: 10px 12px; border-radius: 8px; background: #F5F8F5; }
.ltPortfolioTrackingFunds > span { color: var(--faint-2); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ltPortfolioTrackingFunds p { display: flex; gap: 7px 16px; flex-wrap: wrap; margin: 0; }
.ltPortfolioTrackingFunds b { display: grid; grid-template-columns: auto auto; gap: 1px 6px; color: var(--body); font-size: 10.5px; font-weight: 600; }
.ltPortfolioTrackingFunds b span small { display: block; max-width: 280px; margin-top: 2px; color: var(--faint); font-size: 9.5px; font-weight: 500; line-height: 1.25; }
.ltPortfolioTrackingFunds b i { color: var(--primary); font-size: 10.5px; font-style: normal; }
.ltPortfolioTrackingFunds b em { grid-column: 1 / -1; max-width: 240px; color: var(--faint); font-size: 9px; font-style: normal; font-weight: 500; line-height: 1.3; }
.ltPortfolioTrackingUnavailable { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.ltPortfolioTrackingUnavailable p { max-width: 520px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.ltPreviewFunds { margin-bottom: 18px; padding: 22px 24px; border: 1px solid #DCE8E2; border-radius: 16px; background: #fff; }
.ltPreviewFundsHead { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 12px; }
.ltPreviewFundsHead span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ltPreviewFundsHead h3 { margin: 4px 0 0; color: var(--ink); font-size: 17px; }
.ltPreviewFundsHead p { max-width: 310px; margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; text-align: right; }
.ltPreviewFundRows { border-top: 1px solid var(--row-line); }
.ltPreviewFundRow { display: grid; grid-template-columns: minmax(0, 1fr) 62px minmax(150px, auto); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--row-line); }
.ltPreviewFundRow:last-child { border-bottom: 0; }
.ltPreviewFundRow > div { min-width: 0; }
.ltPreviewFundRow b { display: block; color: var(--ink); font-size: 13px; }
.ltPreviewFundRow span { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.ltPreviewFundRow strong { color: var(--body); font-size: 12px; text-align: right; }
.ltPreviewFundRow time { color: var(--muted); font: 500 11px var(--mono); text-align: right; }
.ltPreviewFundsEmpty { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
  .ltHistoryHead { align-items: flex-start; flex-direction: column; }
  .ltHistoryControls { width: 100%; align-items: flex-start; }
  .ltHistoryCompare { justify-content: flex-start; }
  .ltHistoryMetrics.hasComparison { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ltHistoryMetrics.hasComparison > div:nth-child(3) { border-right: 0; }
  .ltHistoryMetrics.hasComparison > div:nth-child(-n+3) { border-bottom: 1px solid #E0E6E2; }
  .ltPortfolioTrackingHead, .ltPortfolioTrackingUnavailable { align-items: flex-start; flex-direction: column; }
  .ltPortfolioTrackingHead > span { text-align: left; }
  .ltPortfolioTrackingMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ltPortfolioTrackingMetrics > div:nth-child(2n) { border-right: 0; }
  .ltPortfolioTrackingMetrics > div:nth-child(-n+2) { border-bottom: 1px solid #E0E6E2; }
}
@media (max-width: 560px) {
  .ltHistoryTracked > div { grid-template-columns: 1fr; gap: 5px; }
  .ltHistoryMetrics.hasComparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ltHistoryMetrics.hasComparison > div:nth-child(3) { border-right: 1px solid #E0E6E2; }
  .ltHistoryMetrics.hasComparison > div:nth-child(2n) { border-right: 0; }
  .ltHistoryMetrics.hasComparison > div:nth-child(-n+4) { border-bottom: 1px solid #E0E6E2; }
  .ltPortfolioTrackingFunds { grid-template-columns: 1fr; gap: 6px; }
  .ltPortfolioTrackingFunds p { display: grid; grid-template-columns: 1fr; }
  .ltPortfolioTrackingFunds b em { max-width: none; }
  .ltPreviewFundsHead { align-items: flex-start; flex-direction: column; gap: 7px; }
  .ltPreviewFundsHead p { text-align: left; }
  .ltPreviewFundRow { grid-template-columns: minmax(0, 1fr) 54px; gap: 8px 12px; }
  .ltPreviewFundRow time { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 1180px) {
  .ltTearMain { grid-template-columns: 1fr; gap: 36px; }
  .ltTearRail { display: block; }
  .ltTearComposition { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 900px) {
  .ltTearHead { align-items: flex-start; flex-direction: column; gap: 24px; }
  .ltTraceScore { min-width: 0; text-align: left; }
  .ltTraceScore > div:first-child, .ltScoreSegments { justify-content: flex-start; }
  .ltTraceScore > div:first-child b { font-size: 56px; }
}
@media (max-width: 680px) {
  .ltTearSheet { padding: 24px 20px 22px; border-radius: 0; }
  .ltTearHead h2 { font-size: 27px; }
  .ltScoreSegments span { width: 46px; }
  .ltTearHolding { grid-template-columns: 96px minmax(55px, 1fr) 40px; gap: 8px; }
  .ltTearHolding > b { font-size: 12px; }
  .ltTearHoldingTrack { height: 18px; }
  .ltTearHolding strong { font-size: 11px; }
  /* Keep the segments proportional on phones: with many funds the 20px floor
     turns the band into equal blocks and clips the tail off the right edge. */
  .ltTearFundBand > span { min-width: 0; padding: 0 7px; }
  .ltTearFundBand em { display: none; }
  .ltTearWatermark { gap: 6px; }
  .ltTearWatermark b { font-size: 15px; }
  .ltTearWatermark i { width: 15px; height: 15px; border-width: 1.5px; }
  .ltTearWatermark i::after { width: 4px; height: 4px; }
  .ltRailRow > b { font-size: 13px; }
  .ltRailCallout strong { font-size: 25px; }
  .ltRailMarket > div b { font-size: 13px; }
  .ltTearFooter { align-items: flex-start; flex-direction: column; }
  .ltHistory { padding: 24px 0 21px; }
}
.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; }
/* What-if tab: dark pitch card + "How it works" aside */
.ltWhatIfGrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr); 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 > *, .ltGeoGrid > *,
.ltRiskGrid > *, .ltOverlapGrid > *, .ltFundCards > *, .ltGeoTrio > *,
.ltWhatIfGrid > * { min-width: 0; }

/* 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: auto; 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;
}

/* Clickable methodology cards. Native popovers provide Escape/outside-click
   dismissal and top-layer rendering; the visual treatment reuses the site's
   editorial cards instead of delegating important explanations to the
   browser's tiny, hover-only title tooltip. */
.methodHelp { display: inline; }
.methodHelpTrigger {
  appearance: none;
  border: 0;
  border-bottom: 1px dotted currentColor;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  padding: 0 1px 1px;
}
.methodHelpTrigger > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border: 1px solid #C9D3CD;
  border-radius: 50%;
  color: #77837D;
  font: 700 9px/1 var(--sans);
  vertical-align: 1px;
}
.methodHelpTrigger:hover,
.methodHelpTrigger:focus-visible { color: var(--primary); outline: none; }
.methodHelpTrigger:hover > span,
.methodHelpTrigger:focus-visible > span {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.methodHelp.compact .methodHelpTrigger {
  width: 17px;
  height: 17px;
  border: 1px solid #C9D3CD;
  border-radius: 50%;
  padding: 0;
  color: #77837D;
  font: 700 10px/15px var(--sans);
  vertical-align: 1px;
}
.methodHelp.compact .methodHelpTrigger:hover,
.methodHelp.compact .methodHelpTrigger:focus-visible {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.methodHelpCard {
  width: min(430px, calc(100vw - 32px));
  max-height: min(78vh, 560px);
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid #DDE4DF;
  border-radius: 16px;
  margin: auto;
  padding: 27px 30px 28px;
  background: #fff;
  color: var(--body);
  box-shadow: 0 28px 80px -30px rgba(8, 40, 36, .52);
}
.methodHelpCard::backdrop {
  background: rgba(8, 30, 28, .24);
  backdrop-filter: blur(1.5px);
}
.methodHelpCard:popover-open { animation: methodHelpIn .16s ease-out; }
@keyframes methodHelpIn {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.methodHelpEyebrow {
  display: block;
  margin-bottom: 9px;
  color: var(--primary);
  font: 800 10px/1.2 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.methodHelpCard > strong {
  display: block;
  padding-right: 30px;
  color: var(--ink);
  font: 750 20px/1.25 var(--sans);
  letter-spacing: -.015em;
}
.methodHelpBody {
  display: block;
  margin-top: 13px;
  color: #53615B;
  font: 400 13px/1.65 var(--sans);
}
.methodHelpClose {
  position: absolute;
  top: 16px;
  right: 17px;
  width: 30px;
  height: 30px;
  border: 1px solid #E1E6E2;
  border-radius: 50%;
  background: #F6F8F5;
  color: #627069;
  cursor: pointer;
  font: 400 20px/26px var(--sans);
}
.methodHelpClose:hover,
.methodHelpClose:focus-visible {
  border-color: #BCD8D0;
  background: #E7F2EE;
  color: var(--primary);
  outline: none;
}
@media (max-width: 560px) {
  .methodHelpCard { padding: 24px 22px 25px; border-radius: 14px; }
  .methodHelpCard > strong { font-size: 18px; }
}
.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); }
  .ltWhatIfGrid { 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. Rules and aligned values carry
   the hierarchy, with one evidence-bearing price-development chart. */
.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-chart-section { margin: 34px 0 54px; }
.cmp-chart-body {
  padding: 20px 24px 22px; background: var(--surface);
  border-bottom: 1px solid var(--ink);
}
.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) {
  /* One gutter for the whole page, the line the header brand sits on. */
  .cmp-page { padding-left: 16px; padding-right: 16px; }
  .cmp-hero { padding-top: 0; }
  .cmp-hero h1 { font-size: 42px; }
  .cmp-fund { padding: 21px; }
  .cmp-chart-body { padding: 18px 10px 20px; }
  .cmp-section-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .cmp-table-wrap { overflow-x: auto; }
  /* Company column plus two weight cells, each a 70px bar and its figure. At
     680 the table did not fit a 620px screen either, so the VTI column, which
     is half of what the page compares, sat off the right edge. */
  .cmp-table { min-width: 520px; }
  .cmp-cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  /* Two white bands sat inside the page gutter, so their text ran against
     their own edge and a phone paid for the gutter twice: the fund cards put
     their figures 35px in and the table put its companies 29px in, while the
     prose above them started at 16. Both bands run to the screen edges here
     and everything inside them lands on the page's 16px line. */
  .cmp-funds, .cmp-table-wrap { margin-left: -16px; margin-right: -16px; }
  .cmp-fund { padding: 21px 16px; }
  .cmp-table th:first-child, .cmp-table td:first-child { padding-left: 16px; }
  .cmp-table th:last-child, .cmp-table td:last-child { padding-right: 16px; }
  .cmp-subrow td:first-child { padding-left: 30px; }
  /* Both weight columns fit once the bars go, so the figures the comparison
     exists for stop being the part you have to scroll sideways to reach. The
     legend only names the bar colours, so it goes with them. */
  .cmp-table { min-width: 0; }
  .cmp-track, .cmp-legend { display: none; }
}

/* 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) {
  /* The same gutter the pair pages and the fund page use. */
  .cmpHub { padding-left: 16px; padding-right: 16px; }
  .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; }
}

/* Fund directory. These lists need their own layout: the shared .links grid is
   designed for short comparison labels and gives long fund names three
   min-content columns, which can widen the whole page. */
.fundDirGroups {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fundDirGroup { min-width: 0; overflow: hidden; }
.fundDirGroup h3 { color: var(--ink); margin: 0 0 12px; }
.fundDirLinks, .fundDirAnswers { list-style: none; margin: 0; padding: 0; }
.fundDirLinks { display: grid; gap: 7px; }
.fundDirLinks a {
  align-items: baseline;
  border-bottom: 1px solid var(--row-line);
  color: var(--body);
  display: grid;
  font-size: 12.5px;
  gap: 10px;
  grid-template-columns: minmax(44px, auto) minmax(0, 1fr);
  line-height: 1.4;
  overflow-wrap: anywhere;
  padding: 8px 0;
}
.fundDirLinks a:hover { color: var(--primary); text-decoration: none; }
.fundDirLinks .mono { color: var(--ink); font-size: 11.5px; font-weight: 700; }
.fundDirAnswers { display: grid; gap: 12px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fundDirAnswers li { color: var(--body); font-size: 13px; line-height: 1.55; }
@media (max-width: 900px) {
  .fundDirGroups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .fundDirGroups, .fundDirAnswers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* The form is the one white card on the page, and inside the page gutter it
     put its inputs 42px in, leaving them 306px of a 390px screen. It runs to
     both edges here, on the same 16px line as the prose above it. */
  .cmpHubForm { margin-left: -16px; margin-right: -16px; padding: 24px 16px; }
}

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

.landingHero {
  background: linear-gradient(168deg, #0E8E78 0%, #0A6E62 58%, #085A50 100%);
  overflow: clip;
  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;
  pointer-events: none;
  position: absolute;
  top: -160px;
  width: 520px;
}
.landingHeroGrid {
  column-gap: clamp(16px, 2vw, 28px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin: 0 auto;
  max-width: 1240px;
  padding: clamp(48px, 6vw, 86px) clamp(20px, 3vw, 34px) 0;
  position: relative;
  z-index: 1;
}
.landingHeroLeft { grid-column: 2 / span 6; }
.landingHeroEyebrow {
  color: #3DDAB4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.landingHero h1 {
  color: #fff;
  font-size: clamp(32px, 3.9vw, 56px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 18px 0 0;
  text-wrap: pretty;
}
.landingHeroRight {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  grid-column: 8 / span 4;
  justify-content: center;
  min-width: 0;
}
.landingHeroLede {
  color: rgba(255,255,255,.78);
  font-size: clamp(14.5px, 1.1vw, 15.5px);
  line-height: 1.55;
  margin: 20px 0 0;
  max-width: 470px;
}
.landingHeroActions { align-items: center; display: flex; flex-wrap: wrap; gap: 20px; }
.landingHeroActions .btn { font-size: 15.5px; padding: 14px 24px; }
.landingHeroDemo {
  border-bottom: 1px solid rgba(255,255,255,.35);
  color: #fff;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 600;
  padding: 14px 2px;
}
.landingHeroScreener {
  align-items: center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 600;
  margin-top: -6px;
  padding: 10px 16px;
}
.landingHeroScreener:hover { background: rgba(255,255,255,.16); }
.landingHeroCoverage { color: rgba(255,255,255,.6); display: grid; font-size: 12.5px; gap: 9px; }
.landingHeroCoverageLine { align-items: center; display: flex; gap: 9px; }
.landingHeroCoverageLine .mono { color: #fff; font-size: 13px; font-weight: 600; }
.landingHeroCoverageLine small, .landingHeroCoverageNote { color: rgba(255,255,255,.46); font-size: 12.5px; }
.landingHeroVideoWrap {
  margin: clamp(28px, 3.4vw, 46px) auto 0;
  max-width: 1320px;
  padding: 0 clamp(20px, 3vw, 34px);
  position: relative;
  z-index: 1;
}
.landingHeroVideoCard {
  background: #F6F7F4;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -1px 0 rgba(255,255,255,.16), 0 30px 70px -34px rgba(3,28,24,.6);
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
}
.landingHeroVideoCard video { aspect-ratio: 16 / 9; display: block; height: auto; width: 100%; }
.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;
}
@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; }
@media (max-width: 1080px) {
  .landingHeroGrid { grid-template-columns: 1fr; }
  .landingHeroLeft, .landingHeroRight { grid-column: 1 / -1; }
  .landingHeroRight { margin-top: 26px; }
}
@media (max-width: 620px) {
  .landingHeroGrid { padding: 34px 20px 0; }
  .landingHeroCoverageLine { align-items: center; flex-wrap: wrap; gap: 3px 7px; }
  .landingHeroCoverageLine small { flex-basis: 100%; margin-left: 27px; }
  .landingReportTools { display: none; }
}

/* The landing shows the full nav on wide screens (design handoff 2026-08);
   below 1080px it condenses to Screener, the account slot and Open app, the
   rest under the Menu dropdown. "What we measure" stays Menu-only. */
body.is-landing .topbar .wrap { max-width: 1180px; }
body.is-landing .landingNavLink { display: none; }
@media (min-width: 1081px) {
  body.is-landing .landingNavLink:not([data-anchor="method"]) { display: inline; }
}
body.is-landing .topbar .ltMenu { display: block; }

/* 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; } }

/* "add several at once" in the add-funds form: a screenshot/file drop card and
   a free-form textarea, switched by two hidden radios so no JS is involved. */
.otBulk { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--row-line); }
.otBulkHead { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint-2); margin-bottom: 11px; }
.otVisuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
/* the radios stay focusable (opacity, not display:none) so the panels can be
   switched from the keyboard; the ring is drawn on the matching label below. */
.otBulkRadio { position: absolute; opacity: 0; pointer-events: none; }
.otBulkTabs { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #fff; }
.otBulkTab { padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; transition: background 0.15s ease, color 0.15s ease; }
.otBulkTab + .otBulkTab { border-left: 1px solid var(--border); }
.otBulkTab:hover { background: #F4F7F5; }
#bmShot:checked ~ .otBulkTabs [for="bmShot"],
#bmPaste:checked ~ .otBulkTabs [for="bmPaste"] { background: var(--tint); color: var(--primary-deep); }
#bmShot:focus-visible ~ .otBulkTabs [for="bmShot"],
#bmPaste:focus-visible ~ .otBulkTabs [for="bmPaste"] { outline: 2px solid var(--primary); outline-offset: -2px; }
.otBulkPanel { display: none; margin-top: 14px; }
#bmShot:checked ~ .otBulkPanel--shot { display: block; }
#bmPaste:checked ~ .otBulkPanel--paste { display: block; }
/* the drop target: the whole card is a <label for="fileInput"> */
.otDrop { display: block; border: 1.5px dashed #cfd8d2; border-radius: 14px; background: #FBFCFB; padding: 22px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.otDrop:hover { border-color: #b9c6bf; background: #F8FAF9; }
.otDrop.is-drag { border-style: solid; border-color: var(--primary); background: var(--tint); box-shadow: 0 0 0 4px rgba(15,125,107,0.12); }
.otDrop.is-drag .otDropTitle::after { content: " · release to read it"; font-weight: 600; color: var(--primary-deep); }
.otDropIco { width: 46px; height: 46px; border-radius: 12px; background: var(--tint); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.otDropTitle { display: block; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.otDropSub { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 6px 0 14px; max-width: 360px; }
.otDropBtn { display: inline-block; }
/* the clipboard route is invisible without a hint: a snip taken with Win+Shift+S
   never touches a file dialog, so name the shortcut on the card itself */
.otDropPaste { display: block; font-size: 12px; color: var(--muted); margin-top: 13px; }
.otKbd { display: inline-block; font-family: var(--mono); font-size: 10.5px; line-height: 1; color: var(--primary-deep); background: #fff; border: 1px solid #d3dcd7; border-bottom-width: 2px; border-radius: 4px; padding: 3px 5px; margin: 0 1px; }
.otDropFmt { display: block; font-size: 11.5px; color: var(--faint-2); margin-top: 11px; }
/* one tile per dropped screenshot: spinner while the reader runs, then a tick */
.otThumbs:not(:empty) { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 14px; }
.otThumb { position: relative; width: 84px; height: 108px; border-radius: 9px; border: 1px solid var(--hairline); background: #fff; overflow: hidden; box-shadow: 0 6px 16px -12px rgba(8,40,36,0.5); }
.otThumbImg { width: 100%; height: 100%; background-size: cover; background-position: top center; background-color: #F1F3F1; }
.otThumbX { position: absolute; top: 4px; right: 4px; width: 17px; height: 17px; border: 0; border-radius: 50%; background: rgba(12,42,40,0.55); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.otThumbX:hover { background: rgba(12,42,40,0.8); }
.otThumbStatus { position: absolute; bottom: 5px; left: 5px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.otThumbStatus--load { border: 2px solid #e0e3df; border-top-color: var(--primary); animation: ltspin 0.7s linear infinite; }
.otThumbStatus--wait { background: var(--gold); }
.otThumbStatus--ok { background: var(--primary); }
.otThumbStatus--err { background: var(--risk-4); }
/* free-form text panel */
.otPasteBox { width: 100%; min-height: 118px; resize: vertical; border: 1px solid #d8ddd8; border-radius: 11px; padding: 14px 16px; font-family: var(--mono); font-size: 14px; color: #16201c; line-height: 1.7; }
.otPasteActions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.otPasteHint { font-size: 12.5px; color: var(--muted); }
/* who reads the image, and what happens to it */
.otTrust { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--row-line); }
.otTrustCredit { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.otTrustRow { display: flex; flex-wrap: wrap; gap: 9px 18px; justify-content: center; margin-top: 11px; }
.otTrustRow span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .otThumbStatus--load { animation: none; } }
.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; }
  .ltWhatIfGrid .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-h1-isin { font-size: 0.38em; font-weight: 500; color: var(--muted, #5B6663); letter-spacing: 0; margin-left: 10px; vertical-align: middle; white-space: nowrap; }
.fp-lead { font-size: 13.5px; color: var(--muted, #5B6663); margin: 10px 0 0; line-height: 1.5; }
.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); }
.fp-pe-info { margin-left: 4px; }
.fp-pe-info .ltInfoPop { width: 330px; }
@media (max-width: 720px) {
  .fp-pe-info .ltInfoPop { width: auto; }
}

/* 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; }
.fp-basic.is-index { grid-column: span 2; }

/* 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-returns .v .u { font-family: var(--sans); font-size: 10px; font-weight: 700; color: var(--faint); }
.fp-tracking-metrics { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.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;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 0 14px;
    /* The strip does not fit its tabs, and the sheet clips it, so it ends
       mid-word with nothing to say it scrolls. The paired local/scroll layers
       are the standard scroll shadow: the white cover travels with the content
       and uncovers the shadow only while there is more to reach that way. */
    background:
      linear-gradient(to right, #fff 45%, rgba(255, 255, 255, 0)) 0 0 / 26px 100% no-repeat local,
      linear-gradient(to left, #fff 45%, rgba(255, 255, 255, 0)) 100% 0 / 26px 100% no-repeat local,
      linear-gradient(to right, rgba(8, 40, 36, .16), rgba(8, 40, 36, 0)) 0 0 / 14px 100% no-repeat scroll,
      linear-gradient(to left, rgba(8, 40, 36, .16), rgba(8, 40, 36, 0)) 100% 0 / 14px 100% no-repeat scroll,
      #fff;
  }
  .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;
    /* A sticky box cannot leave its containing block, so the label stops at the
       strip's 14px of left padding and a tab passing underneath showed as a
       sliver in that gap. The solid shadow paints the same white across it. */
    box-shadow: -14px 0 0 #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; }
  /* Match the hero's gutter. At zero the headings and figures sat against the
     sheet's own edge while the hero above them was inset 40px. */
  .fp-content { padding: 24px 40px; }
  .fp-sec { scroll-margin-top: 58px; }
  .fp-expcols { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 560px) {
  /* The label is pinned over the left edge and measured 100px of a 333px strip
     on a 375px phone, which left room for one and a half of the six tabs. The
     numbered tabs read as a contents nav without it. */
  .fp-rail-k { display: none; }
  /* A phone pays for the card twice: the page gutter outside it, then its own
     padding inside, which on a 375px screen left the text about 280px. Below
     560px the sheet gives up its frame and runs to both edges, so everything
     inside it sits on one 16px gutter, the line the header brand sits on. */
  .fp-sheet {
    margin: 0 -28px 28px;      /* cancels the 28px side padding on .wrap */
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  .fp-content { padding: 24px 16px; }
  /* 10px of that is the tab's own padding, so the first tab starts on 16 too. */
  .fp-rail { padding: 0 6px; }
  /* The band sits directly under the sheet, so it takes the same gutter. */
  .fp-cta-inner { padding: 30px 16px; }
  .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; }
  /* A half-width KPI cell leaves about 115px inside the desktop padding, and a
     25px mono value does not fit it: "US$1.99T" measured 118px and was cut off
     at the column edge. Trimming both gives every printed figure room. */
  .fp-stat { padding: 15px 16px; }
  .fp-stat .v { font-size: 21px; }
  .fp-basic.is-index { grid-column: 1 / -1; }
  .fp-h1 { font-size: 36px; }
  .fp-hero-l, .fp-hero-r { padding: 24px 16px; }
  /* Two grids share this class: the five price returns and the four regulatory
     scenarios, whose "Unfavourable" label is far wider than "1M". A fixed
     column count sized each column to its widest content and pushed the whole
     grid past the sheet, where it was clipped. Fitting as many columns as the
     width allows keeps both inside it, at three columns on a 375px phone and
     two on a 320px one. */
  .fp-returns { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
                border-bottom: 0; }
  .fp-tracking-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-returns > div { padding: 10px 9px; border-bottom: 1px solid var(--hairline); }
  .fp-returns .l { overflow-wrap: anywhere; }
  .fp-returns .v { font-size: 17px; }
  .fp-val { grid-template-columns: 1fr; }
  /* Both halves of the chart key are nowrap, so on a narrow phone
     "rebased to 0%" was pushed past the hero's right edge. */
  .fp-chart-k { flex-wrap: wrap; row-gap: 2px; }
  /* Same for the concentration verdict, which runs to "Moderately
     concentrated" at 19px: let it take a second line instead of overflowing. */
  .fp-verdict { white-space: normal; }
  /* Section heads are a two-up row (numbered label, right-aligned meta). At
     phone width the label alone fills it, squeezing the meta to a couple of
     characters wide and spilling the rest ("price · as of 2026-08-03") outside
     the sheet. Stack them and left-align the meta under its label. */
  .fp-sechead { flex-direction: column; align-items: flex-start; gap: 3px; }
  .fp-seclabel { white-space: normal; }
  .fp-secmeta, .fp-subhead .m { text-align: left; }
  .fp-subhead { flex-wrap: wrap; }
  /* The holdings weight bar is squeezed to under 20px of track on a phone,
     where it reads as a dot and costs the company name a second line. Drop the
     track and keep the number, which is the figure itself. */
  .fp-holdings .fp-wtrack { display: none; }
  .fp-holdings .wcell { width: auto; }
  /* Four columns in 320px: the desktop cell padding and rank column left the
     company about 94px of text, so even "NVIDIA CORP US" broke over two lines. */
  .fp-holdings th, .fp-holdings td { padding: 8px 6px; }
  .fp-holdings .n { width: 22px; }
  .fp-exprow .nm { flex-basis: 55%; }
  .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 h2 { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin: 0 0 6px; }
.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; }
}


/* ===================================================================== */
/* Landing report miniature: the real analyzer shell cloned into the mock */
/* window at its 1240px desktop width and shrunk with zoom (zoom reflows, */
/* so the stage's height follows its content). app.js drives the factor  */
/* from the mock window's inner width and repaints via the app painters.  */
/* ===================================================================== */

.miniStage { width: 1240px; zoom: 0.7726; }
.miniBody { background: #F6F7F4; max-height: 740px; overflow-y: auto; overscroll-behavior: contain; }
.miniBody > .ltAppContent { margin: 0 auto; max-width: 1240px; padding: 26px 32px 40px; width: 100%; }
/* Missing rule in the Geography tab (the wrapper had no CSS anywhere, so the
   developed/emerging and currency cards butted together in the app too). */
.ltTwoUp { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .ltTwoUp { grid-template-columns: 1fr; } }

/* Phones: zoom would land the app's 13px type near 4px, so the stage is
   swapped for a compact KPI strip. */
.miniKpis { display: none; }
@media (max-width: 700px) {
  [data-mini-stage] { display: none; }
  .miniKpis { background: #eef0ec; border-top: 1px solid #eef0ec; display: grid; gap: 1px; grid-template-columns: repeat(2, 1fr); }
  .miniKpis > div { background: #fff; padding: 14px 16px; }
  .miniKpis span { color: #6a7873; display: block; font-size: 11px; font-weight: 600; }
  .miniKpis b { color: #0C2A28; display: block; font-size: 20px; font-weight: 600; margin-top: 4px; }
}

/* The miniature is a desktop snapshot, but media queries key on the
   viewport: between 701px and ~1240px the app's own responsive rules would
   restack the panels inside the 1240px stage. Re-assert the desktop
   geometry for everything those rules change (below 700px the stage is
   hidden, so only this band matters). */
[data-mini-stage] .ltTopTabs { display: block; }
[data-mini-stage] .ltAppContent { padding-bottom: 40px !important; }
[data-mini-stage] .ltHideSm { display: inline-flex !important; }
[data-mini-stage] .ltTearMain { gap: 56px; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); }
[data-mini-stage] .ltTearComposition { gap: 56px; grid-template-columns: 1fr 1fr; }
[data-mini-stage] .ltTearHead { align-items: center; flex-direction: row; gap: 40px; }
[data-mini-stage] .ltTraceScore { min-width: 330px; text-align: right; }
[data-mini-stage] .ltTraceScore > div:first-child, [data-mini-stage] .ltScoreSegments { justify-content: flex-end; }
[data-mini-stage] .ltTraceScore > div:first-child b { font-size: 74px; }
[data-mini-stage] .ltHistoryHead { align-items: end; flex-direction: row; }
[data-mini-stage] .ltHistoryControls { align-items: flex-end; width: auto; }
[data-mini-stage] .ltHistoryCompare { justify-content: flex-end; }
[data-mini-stage] .ltHistoryMetrics.hasComparison { grid-template-columns: repeat(6, minmax(0, 1fr)); }
[data-mini-stage] .ltHistoryMetrics.hasComparison > div:nth-child(3) { border-right: 1px solid #E0E6E2; }
[data-mini-stage] .ltHistoryMetrics.hasComparison > div:nth-child(-n+3) { border-bottom: 0; }
[data-mini-stage] .ltPortfolioTrackingHead { align-items: end; flex-direction: row; }
[data-mini-stage] .ltPortfolioTrackingMetrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-mini-stage] .ltPortfolioTrackingMetrics > div:nth-child(2n) { border-right: 1px solid #E0E6E2; }
[data-mini-stage] .ltPortfolioTrackingMetrics > div:nth-child(-n+2) { border-bottom: 0; }
[data-mini-stage] .ltApp { grid-template-columns: 1.66fr 1fr; }
[data-mini-stage] .ltRiskGrid { grid-template-columns: 1.25fr 1fr; }
[data-mini-stage] .ltWhatIfGrid { grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr); }
[data-mini-stage] .ltOverlapGrid { grid-template-columns: 1fr 1.35fr; }
[data-mini-stage] .ltFundCards { grid-template-columns: repeat(3, 1fr); }
[data-mini-stage] .ltOvRow { gap: 14px; grid-template-columns: minmax(0, 1fr) auto 78px 52px; }
[data-mini-stage] .ltOvRow > div:nth-child(2) { grid-column: auto; grid-row: auto; }
[data-mini-stage] .ltOvRow > span:nth-child(3) { display: block; }
[data-mini-stage] .ltRiskMetrics { grid-template-columns: repeat(4, 1fr); }
[data-mini-stage] .ltRiskVerdict { gap: 44px; grid-template-columns: 1fr 1fr; }
[data-mini-stage] .ltRibbon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-mini-stage] .ltRibbon > div:nth-child(2n) { border-right: 1px solid var(--row-line); }
[data-mini-stage] .ltRibbon > div:nth-child(-n+2) { border-bottom: 0; }
[data-mini-stage] .ltRibbon > div:last-child { border-right: 0; }
/* --- Long-word resilience (multilingual) ------------------------------------
   German compounds are the stress case: "ETF-Ueberschneidungsrechner" and
   "Ueberschneidung im Ueberblick" are one word to the layout engine, and a grid
   or flex item defaults to min-width:auto, so a single long word can hold a
   column open past the viewport. On a 375px phone that pushed the German
   /compare hub 122px wide; English never hit it because its longest heading
   word is "calculator".

   min-width:0 lets the track shrink; overflow-wrap breaks the word rather than
   the page. This also covers the long fund and company names that arrive as
   data in every language. Kept at the end of the file so it wins the
   equal-specificity ties with the base rules above. */
.cmpHubHero > div,
.cmpHubForm,
.cmpHubCard,
.cmp-hero > div,
.cmp-summary,
.cmp-fund,
.cmp-insights > div,
.fp-hero-l,
.fp-hero-r,
.fp-stat,
.fp-basic,
.fp-rail-nav a {
  min-width: 0;
}
.cmpHubHero h1,
.cmpHubHero p,
.cmpHubForm label,
.cmpHubCard h3,
.cmp-hero h1,
.cmp-verdict,
.cmp-kicker,
.cmp-section-head h2,
.fp-h1,
.fp-seclabel,
.fp-verdict,
.fp-stat .l,
.fp-basic .v,
.fp-rail-nav a span {
  overflow-wrap: break-word;
  hyphens: auto;
}