/* Free Cash Flow Track Record page and the Cash Flow Analysis guide.
   Built on the Shareholder Yield page's rows, tiles and cards (css/shareholder-yield.css, loaded first, which in turn
   shares the hero, bands, controls and chips with css/sustainable-dividends.css). This file adds the growth cell, the
   free-cash-flow-by-year bar chart, the capex-intensity bands, the sort bar and header, and (for the guide) the five
   steps, the definition cards and the two calculators.

   Colour: one teal family for "cash arrived" (bars above the line), neutral grey-violet for negative years, and a band
   for capex intensity that is only ever a glyph and a word. Nothing is red: a year of negative free cash flow is a
   fact, not a verdict. Every state also carries a glyph and a word, and numbers stay in plain ink. */

/* ---------------- rows ---------------- */
.fr-table .sy-head-row, .fr-table .fr-row{
  grid-template-columns: 40px minmax(180px, 1.2fr) 200px repeat(2, minmax(118px, 1.2fr)) repeat(3, minmax(92px, .9fr)) 128px;
}
.fr-row .fr-main{ display:flex; flex-direction:column; gap:4px; min-width:0; cursor:help; }
.fr-main b{ font-size:19px; font-weight:800; color:#fff; font-variant-numeric: tabular-nums; white-space:nowrap; }
.fr-main small{ font-size:11px; line-height:1.35; color: rgba(255,255,255,0.5); }
.fr-arrow{ color: rgba(255,255,255,0.45); font-weight:600; }
.fr-row .sy-c b{ font-size:14px; }
.fr-row .c-spark{ align-items:flex-end; }

.fr-band{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: rgba(255,255,255,0.62); }
.fr-glyph{ display:inline-flex; align-items:center; justify-content:center; width:12px; font-style:normal; font-size:10px; line-height:1; color: rgba(255,255,255,0.55); }
.fr-glyph--light{ color:#4FC9B8; }
.fr-glyph--moderate{ color:#8FD9CE; }

/* the free-cash-flow-by-year chart: one bar a year on one scale */
.fr-chart{ display:block; overflow:visible; }
.fr-zero{ stroke: rgba(255,255,255,0.25); stroke-width:1; stroke-dasharray:2,3; }
.fr-bar{ fill:#4FC9B8; }
.fr-bar--neg{ fill:#9A93C9; }

/* ---------------- the sort bar and header ---------------- */
.fr-sortbar{ position:relative; z-index:4; display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:0 0 14px; padding:9px 12px; border-radius:16px; }
.fr-sortbar-sel{ display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 240px; }
.fr-sortbar-sel span{ flex:none; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.fr-sortbar select{
  min-width:0; flex:1; height:40px; padding:0 30px 0 12px; border-radius:12px; font:inherit; font-size:14px; font-weight:700; color:#fff;
  background-color: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
}
.fr-sortbar select:focus-visible, .fr-dir:focus-visible, .fr-th:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.fr-dir{
  display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 16px 0 12px; border-radius:999px; font:inherit; font-size:13.5px; font-weight:800; color:#fff; cursor:pointer;
  background: color-mix(in oklab, #8B7FFF 22%, transparent); border:1px solid color-mix(in oklab, #8B7FFF 55%, transparent);
  transition: transform .2s var(--m-ease, ease), background .2s ease;
}
.fr-dir:hover{ background: color-mix(in oklab, #8B7FFF 34%, transparent); transform: translateY(-1px); }
.fr-dir:active{ transform: scale(.97); }
.fr-ico{ display:inline-block; font-style:normal; font-weight:800; line-height:1; color: rgba(255,255,255,0.35); transition: transform .25s var(--m-ease, ease), color .2s ease; }
.fr-ico--on{ color:#C9C2FF; }
.fr-dir .fr-ico{ font-size:16px; }

.fr-table .sy-head-row{
  position:sticky; top:var(--fr-stick, 78px); z-index:20; padding:6px 6px; border-bottom:1px solid var(--m-edge, rgba(255,255,255,0.12));
  background: color-mix(in oklab, #121220 84%, transparent);
}
@supports (backdrop-filter: blur(1px)){ .fr-table .sy-head-row{ backdrop-filter: blur(16px) saturate(1.4); } }
.fr-th{
  display:flex; align-items:center; flex-wrap:wrap; gap:2px 6px; justify-self:start; max-width:100%; padding:7px 9px; margin:0 -9px; border:0; border-radius:10px; background:transparent;
  font:inherit; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; text-align:left; color: rgba(255,255,255,0.5); cursor:pointer;
  transition: color .15s ease, background .15s ease;
}
.fr-th small{ flex-basis:100%; font-size:10.5px; font-weight:600; letter-spacing:.02em; text-transform:none; color: rgba(255,255,255,0.38); }
.fr-th:hover{ color:#fff; background: rgba(255,255,255,0.06); }
.fr-th:hover .fr-ico{ color: rgba(255,255,255,0.7); }
.fr-th--on{ color:#fff; background: color-mix(in oklab, #8B7FFF 18%, transparent); }
.fr-th--on .fr-ico{ color:#C9C2FF; }

.fr-table .fr-row{
  position:relative; margin:6px 0; padding:16px 10px; border:1px solid transparent; border-radius:16px;
  background: linear-gradient(160deg, rgb(255 255 255 / .045), rgb(255 255 255 / .012));
  transition: background .2s ease, border-color .2s ease, transform .25s var(--m-ease, ease);
}
.fr-table .fr-row:hover{ background: linear-gradient(160deg, rgb(139 127 255 / .12), rgb(255 255 255 / .025)); border-color: color-mix(in oklab, #8B7FFF 42%, transparent); transform: translateY(-1px); }
.fr-row .c-rank{ font-variant-numeric: tabular-nums; }
.fr-row--top{ border-color: color-mix(in oklab, #4FC9B8 35%, transparent); background: linear-gradient(110deg, rgb(79 201 184 / .14), rgb(255 255 255 / .02) 55%); }
.fr-row--top::before{ content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; border-radius:3px; background: linear-gradient(180deg, #8FE3D6, #1F9C8B); }
.fr-gliding .sy-row{ animation:none; }

/* what the sticky header row and sort bar sit below: the site header (78px) plus the section bar once it has appeared after you scroll past the hero */
#fr-list.sd-band{ overflow:clip; }
#fr-list{ --fr-stick: 78px; }
body:has(.subnav.visible) #fr-list{ --fr-stick: 130px; }

/* ---------------- the guide: steps, definitions, calculators ---------------- */
.fh-steps{ position:relative; z-index:1; display:grid; gap:14px; margin:6px 0 0; padding:0; list-style:none; counter-reset: fh; }
.fh-step{ display:grid; grid-template-columns: 52px minmax(0,1fr); gap:6px 18px; padding:20px 22px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.fh-step::before{ counter-increment: fh; content: counter(fh); grid-row: 1 / span 3; align-self:start; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; font-size:20px; font-weight:800; color:#0E1F1C; background: linear-gradient(180deg, #8FE3D6, #3DBBA8); }
.fh-step h3{ margin:0; font-size:19px; font-weight:700; color:#fff; }
.fh-step .fh-q{ margin:0; font-size:13px; font-weight:700; color:#8FE3D6; }
.fh-step p{ margin:0; font-size:14.5px; line-height:1.65; color: rgba(255,255,255,0.82); }
.fh-links{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:6px; }
.fh-links a{ display:inline-flex; align-items:center; padding:7px 13px; border-radius:var(--radius-pill); font-size:13px; font-weight:700; color:#fff; text-decoration:none; background: color-mix(in oklab, #4FC9B8 18%, transparent); border:1px solid color-mix(in oklab, #4FC9B8 50%, transparent); transition: background .2s ease, transform .2s var(--m-ease, ease); }
.fh-links a:hover{ background: color-mix(in oklab, #4FC9B8 30%, transparent); transform: translateY(-1px); }
.fh-links a:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }

.fh-defs{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; margin-top:6px; }
.fh-def{ padding:20px 22px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.fh-def h3{ margin:0 0 6px; font-size:18px; font-weight:700; color:#fff; }
.fh-def .fh-formula{ display:block; margin:0 0 10px; padding:8px 12px; border-radius:10px; font-size:13.5px; font-weight:700; color:#8FE3D6; background: rgba(79,201,184,0.1); border:1px solid rgba(79,201,184,0.28); }
.fh-def p{ margin:0 0 8px; font-size:14px; line-height:1.65; color: rgba(255,255,255,0.8); }
.fh-def p:last-child{ margin-bottom:0; }
.fh-def a{ color:#8FE3D6; }

.fh-try{ position:relative; z-index:1; margin-top:18px; padding:20px 22px; border-radius:var(--radius-sm); background: rgba(79,201,184,0.08); border:1px solid rgba(79,201,184,0.32); }
.fh-try h3{ margin:0 0 4px; font-size:20px; font-weight:700; color:#fff; }
.fh-try > p{ margin:0 0 14px; font-size:13px; line-height:1.55; color: rgba(255,255,255,0.7); }
.fh-try-form{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }
.fh-try-form--5{ grid-template-columns: repeat(5, minmax(0,1fr)); }
.fh-try-form label{ display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.6); }
.fh-try-form input{ height:42px; padding:0 12px; border-radius:var(--radius-sm); font:inherit; font-size:16px; font-weight:700; color:#fff; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); font-variant-numeric: tabular-nums; }
.fh-try-form input:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.fh-try-out{ margin:14px 0 0; font-size:14px; line-height:1.65; color:#fff; }

.fh-table-wrap{ position:relative; z-index:1; margin-top:6px; overflow-x:auto; }
.fh-table{ width:100%; border-collapse:collapse; font-size:14px; }
.fh-table caption{ text-align:left; padding:0 0 10px; font-size:12.5px; color: rgba(255,255,255,0.6); }
.fh-table th, .fh-table td{ padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.84); }
.fh-table thead th{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.55); }
.fh-table tbody th{ font-weight:700; color:#fff; white-space:nowrap; }
.fh-table a{ color:#8FE3D6; }

/* ---------------- responsive ---------------- */
.fr-how4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.fr-how4 a, .sy-worked a{ color:#8FE3D6; }
@media (max-width: 1180px){
  .fr-table .sy-head-row, .fr-table .fr-row{ grid-template-columns: 34px minmax(150px, 1.15fr) 176px repeat(2, minmax(104px, 1.1fr)) repeat(3, minmax(76px, .85fr)) 118px; column-gap:10px; }
}
@media (max-width: 1080px){ .fr-how4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 960px){
  .fr-how4{ grid-template-columns: minmax(0,1fr); }
  .fr-table .fr-row{
    grid-template-columns: 34px minmax(0,1fr) auto; column-gap:12px; row-gap:14px; padding:18px 4px;
    grid-template-areas: "rank id main" "cells cells cells" "tail tail tail";
  }
  .fr-row .fr-main{ grid-area:main; align-self:start; min-width:150px; max-width:210px; }
  .fr-main b{ font-size:17px; }
  .fr-sortbar{ position:sticky; top:var(--fr-stick, 78px); }
  .fh-defs{ grid-template-columns: minmax(0,1fr); }
  .fh-try-form, .fh-try-form--5{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){ #fr-list, body:has(.subnav.visible) #fr-list{ --fr-stick: 80px; } }
@media (max-width: 480px){
  .fr-row .fr-main{ max-width:150px; min-width:120px; }
  .fr-sortbar{ padding:6px 8px; gap:6px; }
  .fr-sortbar-sel span{ display:none; }
  .fr-sortbar select, .fr-dir{ height:36px; }
  .fr-dir{ flex:1 1 100%; justify-content:center; font-size:13px; }
  .fh-step{ grid-template-columns: minmax(0,1fr); padding:16px; }
  .fh-step::before{ grid-row:auto; }
  .fh-try{ padding:16px; }
}
@media (prefers-reduced-motion: reduce){ .fr-table .fr-row, .fr-dir, .fh-links a{ transition:none; } }

/* ---- How to Analyze Cash Flow: hero glance strip, step flow, rules, worked example, definitions, benchmarks, cards, presets, read-next */
.fh-glance{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:10px; margin:26px 0 0; padding:0; list-style:none; }
.fh-glance a{ display:flex; flex-direction:column; gap:3px; height:100%; padding:13px 14px; border-radius:var(--radius-sm); text-decoration:none; color:#fff; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); transition: background .2s ease, transform .2s var(--m-ease, ease), border-color .2s ease; }
.fh-glance a:hover{ background: rgba(79,201,184,0.16); border-color: rgba(79,201,184,0.5); transform: translateY(-2px); }
.fh-glance a:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.fh-glance b{ font-size:16px; font-weight:800; color:#8FE3D6; }
.fh-glance span{ font-size:12.5px; line-height:1.4; color: rgba(255,255,255,0.72); }

.fh-flow{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px 6px; margin:4px 0 18px; padding:0; list-style:none; }
.fh-flow li{ display:flex; align-items:center; }
.fh-flow li + li::before{ content:""; width:18px; height:2px; margin-right:6px; background: rgba(79,201,184,0.5); }
.fh-flow a{ display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:7px 14px 7px 8px; border-radius:var(--radius-pill); text-decoration:none; color:#fff; font-size:13.5px; font-weight:700; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); transition: background .2s ease; }
.fh-flow a:hover{ background: rgba(79,201,184,0.18); }
.fh-flow a:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.fh-flow b{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-size:12px; color:#0E1F1C; background: linear-gradient(180deg, #8FE3D6, #3DBBA8); }

.fh-step{ scroll-margin-top:110px; }
.fh-step::before{ width:52px; height:52px; font-size:24px; }
.fh-step .fh-rule{ padding:9px 12px; border-radius:10px; background: rgba(79,201,184,0.08); border:1px solid rgba(79,201,184,0.24); font-size:14px; }
.fh-key{ display:inline-block; margin-right:8px; padding:2px 9px; border-radius:var(--radius-pill); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#0E1F1C; background:#8FE3D6; }

.fh-example-charts{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; margin-top:18px; }
.fh-fig{ margin:0; padding:16px 16px 12px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.fh-fig figcaption{ margin-top:8px; font-size:12.5px; line-height:1.5; color: rgba(255,255,255,0.62); }
.fh-chart svg{ display:block; width:100%; height:auto; max-height:240px; }
.fh-bar{ fill:#4FC9B8; }
.fh-bar--cut{ fill:#F0A56B; }
.fh-bar--net{ fill:#8FE3D6; }
.fh-axis{ stroke: rgba(255,255,255,0.3); stroke-width:1; }
.fh-val{ font-size:12.5px; font-weight:700; fill:#fff; font-variant-numeric: tabular-nums; }
.fh-lbl{ font-size:11px; font-weight:600; fill: rgba(255,255,255,0.65); }
.fh-callout{ position:relative; z-index:1; margin-top:18px; padding:18px 22px; border-radius:var(--radius-sm); background: rgba(240,165,107,0.08); border:1px solid rgba(240,165,107,0.35); }
.fh-callout h3{ margin:0 0 6px; font-size:18px; font-weight:700; color:#fff; }
.fh-callout p{ margin:0 0 10px; font-size:14.5px; line-height:1.65; color: rgba(255,255,255,0.84); }

.fh-def .fh-lead{ margin:0 0 10px; font-size:14.5px; line-height:1.6; font-weight:600; color:#fff; }
.fh-more{ margin-top:10px; }
.fh-more summary{ cursor:pointer; display:inline-flex; align-items:center; min-height:44px; font-size:13px; font-weight:700; color:#8FE3D6; }
.fh-more summary:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.fh-more[open] summary{ margin-bottom:4px; }
.fh-defs + .fh-table-wrap, .fh-table-wrap + .fh-table-wrap{ margin-top:22px; }

.fh-now{ position:relative; z-index:1; margin-top:22px; padding:18px 22px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.fh-now h3{ margin:0 0 6px; font-size:18px; font-weight:700; color:#fff; }
.fh-now-lede{ margin:0 0 12px; font-size:14.5px; line-height:1.65; color: rgba(255,255,255,0.82); }
.fh-now-tiles{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.fh-now-tiles li{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:10px; background: rgba(79,201,184,0.1); border:1px solid rgba(79,201,184,0.28); }
.fh-now-tiles b{ font-size:22px; font-weight:800; color:#8FE3D6; font-variant-numeric: tabular-nums; }
.fh-now-tiles span{ font-size:12.5px; color: rgba(255,255,255,0.72); }

.fh-prose{ position:relative; z-index:1; max-width:860px; margin-top:22px; }
.fh-prose h3, .fh-sub{ margin:22px 0 8px; font-size:19px; font-weight:700; color:#fff; }
.fh-prose p, .fh-where li{ font-size:15px; line-height:1.7; color: rgba(255,255,255,0.84); }
.fh-prose p{ margin:0 0 10px; }
.fh-where{ margin:0 0 10px; padding-left:22px; }
.fh-where li{ margin-bottom:6px; }
.fh-prose b{ color:#fff; }

.fh-cards{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.fh-cards--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.fh-card{ padding:16px 18px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.fh-card h4{ margin:0 0 6px; font-size:15.5px; font-weight:700; color:#fff; }
.fh-card p{ margin:0; font-size:13.5px; line-height:1.6; color: rgba(255,255,255,0.78); }
.fh-card a{ color:#8FE3D6; }

.fh-presets{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; }
.fh-presets-lbl{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.55); }
.fh-presets button{ min-height:44px; padding:0 16px; border-radius:var(--radius-pill); font:inherit; font-size:13px; font-weight:700; color:#fff; cursor:pointer; background: color-mix(in oklab, #4FC9B8 18%, transparent); border:1px solid color-mix(in oklab, #4FC9B8 50%, transparent); transition: background .2s ease; }
.fh-presets button:hover{ background: color-mix(in oklab, #4FC9B8 32%, transparent); }
.fh-presets button:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.fh-verdict{ margin:8px 0 0; font-size:14px; line-height:1.65; color:#8FE3D6; }

.fh-next{ padding-block:36px; }
.fh-next h2{ margin:0 0 14px; font-size:clamp(22px, 2.6vw, 28px); }
.fh-next-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
.fh-next h3{ margin:0 0 8px; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.6); }
.fh-next ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.fh-next li{ font-size:14.5px; line-height:1.55; color: rgba(255,255,255,0.78); }
.fh-next a{ color:#8FE3D6; font-weight:700; }

@media (max-width: 900px){
  .fh-glance{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .fh-cards, .fh-cards--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .fh-glance{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fh-example-charts, .fh-next-grid, .fh-now-tiles, .fh-cards, .fh-cards--4{ grid-template-columns: minmax(0,1fr); }
  .fh-flow li + li::before{ display:none; }
  .fh-callout, .fh-now{ padding:16px; }
}
@media (prefers-reduced-motion: reduce){ .fh-glance a, .fh-flow a, .fh-presets button{ transition:none; } .fh-glance a:hover{ transform:none; } }

/* ---- Free Cash Flow Screener: ready-made views, fine-tune filters, sticky summary, tags, row details, map, missing-stock lookup, skeletons */
.fr-stats .sy-stat b{ font-size:clamp(30px, 4vw, 44px); }
.fr-stats .sy-stat span{ font-size:14px; font-weight:600; }
.fr-stats .sy-stat small{ font-size:12.5px; color: rgba(255,255,255,0.68); }
.fr-rule{ position:relative; z-index:1; max-width:860px; margin:14px 0 22px; font-size:14px; line-height:1.65; color: rgba(255,255,255,0.78); }
.fr-rule b{ color:#fff; }
.fr-rule a{ color:#8FE3D6; font-weight:700; }
.fr-lead{ font-weight:600; color:#fff; }

.fr-hint{ position:relative; z-index:1; margin:0 0 10px; font-size:13.5px; color: rgba(255,255,255,0.7); }
.fr-presets{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap:10px; margin:0 0 20px; }
.fr-preset{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:44px; padding:12px 14px; border-radius:var(--radius-sm); font:inherit; text-align:left; color:#fff; cursor:pointer; background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); transition: background .2s ease, border-color .2s ease, transform .2s var(--m-ease, ease); }
.fr-preset b{ font-size:14.5px; font-weight:800; }
.fr-preset small{ font-size:12px; line-height:1.4; color: rgba(255,255,255,0.62); }
.fr-preset:hover{ background: rgba(79,201,184,0.14); border-color: rgba(79,201,184,0.5); transform: translateY(-1px); }
.fr-preset.active{ background: color-mix(in oklab, #4FC9B8 22%, transparent); border-color:#4FC9B8; }
.fr-preset:focus-visible, .fr-btn:focus-visible, .fr-tag:focus-visible, .fr-more:focus-visible, .fr-adv summary:focus-visible, .fr-cmp input:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }

.fr-adv{ position:relative; z-index:1; margin:6px 0 14px; padding:0 14px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); }
.fr-adv summary{ cursor:pointer; display:flex; align-items:center; min-height:44px; font-size:13.5px; font-weight:700; color:#8FE3D6; }
.fr-adv-grid{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:12px; padding:2px 0 14px; }
.fr-adv-grid label{ display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; color:#fff; }
.fr-adv-grid label span{ font-size:11px; font-weight:600; color: rgba(255,255,255,0.55); }
.fr-adv-grid input{ height:42px; padding:0 12px; border-radius:var(--radius-sm); font:inherit; font-size:16px; font-weight:700; color:#fff; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); font-variant-numeric: tabular-nums; }
.fr-adv-grid input:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }

.fr-summary{ position:relative; z-index:22; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 12px; padding:9px 12px; border-radius:16px; background: color-mix(in oklab, #121220 88%, transparent); border:1px solid rgba(255,255,255,0.1); }
@supports (backdrop-filter: blur(1px)){ .fr-summary{ backdrop-filter: blur(16px) saturate(1.4); } }
@media (min-width: 961px){ .fr-summary{ position:sticky; top:var(--fr-stick, 78px); } }
.fr-summary .sd-count{ margin:0; flex:none; }
.fr-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; flex:1 1 220px; min-width:0; }
.fr-tag{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 11px; border-radius:var(--radius-pill); font:inherit; font-size:12.5px; font-weight:700; color:#fff; cursor:pointer; background: color-mix(in oklab, #8B7FFF 22%, transparent); border:1px solid color-mix(in oklab, #8B7FFF 55%, transparent); }
.fr-tag i{ font-style:normal; font-size:15px; line-height:1; color:#C9C2FF; }
.fr-tag:hover{ background: color-mix(in oklab, #8B7FFF 34%, transparent); }
.fr-tools{ display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.fr-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 14px; border-radius:var(--radius-pill); font:inherit; font-size:13px; font-weight:700; color:#fff; text-decoration:none; cursor:pointer; background: color-mix(in oklab, #4FC9B8 18%, transparent); border:1px solid color-mix(in oklab, #4FC9B8 50%, transparent); transition: background .2s ease; }
.fr-btn:hover{ background: color-mix(in oklab, #4FC9B8 32%, transparent); }
.fr-btn:disabled{ opacity:.45; cursor:not-allowed; }
.fr-toast{ flex:1 1 100%; margin:0; min-height:0; font-size:12.5px; color:#8FE3D6; }
.fr-toast:empty{ display:none; }

/* the sort icon only shows on the active column (and on hover), so the header reads cleaner */
.fr-th:not(.fr-th--on) .fr-ico{ opacity:0; }
.fr-th:not(.fr-th--on):hover .fr-ico, .fr-th:not(.fr-th--on):focus-visible .fr-ico{ opacity:.8; }

/* a sixth number cell (yield): the grids above get one more column */
.fr-table .sy-head-row, .fr-table .fr-row{ grid-template-columns: 40px minmax(190px, 1.25fr) 190px repeat(2, minmax(112px, 1.1fr)) repeat(4, minmax(78px, .8fr)) 124px; }
@media (max-width: 1280px){
  .fr-table .sy-head-row, .fr-table .fr-row{ grid-template-columns: 34px minmax(160px, 1.2fr) 168px repeat(2, minmax(100px, 1fr)) repeat(4, minmax(68px, .75fr)) 112px; column-gap:8px; }
}
@media (max-width: 960px){
  .fr-table .fr-row{ grid-template-columns: 34px minmax(0,1fr) auto; }
}

.fr-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:6px; }
.fr-cmp{ display:inline-flex; align-items:center; gap:6px; min-height:32px; font-size:12px; font-weight:700; color: rgba(255,255,255,0.7); cursor:pointer; }
.fr-cmp input{ width:16px; height:16px; accent-color:#4FC9B8; }
.fr-more{ min-height:32px; padding:0 4px; border:0; background:transparent; font:inherit; font-size:12px; font-weight:800; color:#8FE3D6; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.fr-detail{ grid-column: 1 / -1; margin-top:6px; padding:14px 16px; border-radius:12px; background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); }
.fr-detail[hidden]{ display:none; }
.fr-detail dl{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px 22px; margin:0 0 10px; }
.fr-detail dt{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.fr-detail dd{ margin:2px 0 0; font-size:13.5px; line-height:1.55; color: rgba(255,255,255,0.86); }
.fr-detail-links{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; font-size:13px; font-weight:700; }
.fr-detail-links a{ color:#8FE3D6; }

.fr-skel{ height:92px; margin:6px 0; border-radius:16px; background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 70%) 0 0 / 200% 100%; animation: fr-shimmer 1.4s linear infinite; }
@keyframes fr-shimmer{ to{ background-position: -200% 0; } }

.fr-why{ position:relative; z-index:1; margin-top:26px; padding:18px 22px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.fr-why h3{ margin:0 0 4px; font-size:18px; font-weight:700; color:#fff; }
.fr-why > p{ margin:0 0 12px; font-size:13.5px; color: rgba(255,255,255,0.7); }
.fr-why-row{ display:flex; gap:10px; flex-wrap:wrap; }
.fr-why-row input{ flex:1 1 200px; min-width:0; height:42px; padding:0 12px; border-radius:var(--radius-sm); font:inherit; font-size:16px; font-weight:700; text-transform:uppercase; color:#fff; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25); }
.fr-why-row input::placeholder{ text-transform:none; font-weight:500; color: rgba(255,255,255,0.45); }
.fr-why-row input:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.fr-why-out{ margin:12px 0 0; font-size:14px; line-height:1.6; color:#8FE3D6; }
.fr-why-out:empty{ display:none; }

.fr-map-wrap{ position:relative; z-index:1; padding:16px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.fr-map-svg{ display:block; width:100%; height:auto; }
.fr-grid{ stroke: rgba(255,255,255,0.1); stroke-width:1; }
.fr-guide{ stroke: rgba(240,165,107,0.7); stroke-width:1.2; stroke-dasharray:4,4; }
.fr-tick{ font-size:11px; fill: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
.fr-tick--guide{ fill:#F0A56B; font-weight:700; }
.fr-axis{ font-size:12px; font-weight:700; fill: rgba(255,255,255,0.7); }
.fr-dot{ stroke: rgba(18,18,32,0.9); stroke-width:1; fill-opacity:.82; cursor:pointer; transition: fill-opacity .15s ease; }
.fr-dot:hover{ fill-opacity:1; stroke:#fff; stroke-width:1.5; }
.fr-dot--light{ fill:#4FC9B8; }
.fr-dot--moderate{ fill:#B9A7FF; }
.fr-dot--heavy{ fill:#F0A56B; }
.fr-map-key{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:8px; font-size:12.5px; color: rgba(255,255,255,0.75); }
.fr-dot-key{ display:inline-block; width:11px; height:11px; margin-right:6px; border-radius:50%; vertical-align:-1px; }
.fr-dot-key--light{ background:#4FC9B8; }
.fr-dot-key--moderate{ background:#B9A7FF; }
.fr-dot-key--heavy{ background:#F0A56B; }

.snapshot-sub{ margin:22px 0 10px; font-family:'Instrument Sans', sans-serif; font-size:18px; font-weight:600; color:var(--ink); }
.snapshot-lede + .snapshot-sub{ margin-top:6px; }

@media (max-width: 960px){
  .fr-adv-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fr-tools{ margin-left:0; }
  .fr-detail dl{ grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 480px){
  .fr-presets{ grid-template-columns: minmax(0,1fr); }
  .fr-tools .fr-btn{ flex:1 1 auto; }
  .fr-map-wrap{ padding:10px; }
}
@media (prefers-reduced-motion: reduce){ .fr-preset, .fr-btn, .fr-dot{ transition:none; } .fr-skel{ animation:none; } }

.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width: 640px){ .fr-summary .sd-count{ flex:1 1 100%; white-space:normal; overflow-wrap:anywhere; } }