/* ============================================================================
   fm-landing.css - the Investor Tools landing page (index.html), 2026-09-19.

   Two parts, both rendered by assets/fm-landing.js from the published catalog:
     1. FEATURED  - up to eight tools chosen by position (landing.featured), in one
                    of three switchable editorial layouts (landing.layout, or the
                    ?layout= override): frontpage | spotlight | mosaic.
     2. DIRECTORY - every published tool in a searchable, sortable table with tabs
                    (Show all, Popular, one per category, Favorites when signed in),
                    a Collections selector and a tag filter row.
     and the TICKER ("Rates and auctions", .fl-tape) above them on every view: one row
     of auctions, Treasury par yields and inflation breakevens that scrolls; on the landing
     it is the first thing after the nav bar (Alex, 2026-10-06), above the masthead.

   COLOUR comes ONLY from the --fm-* tokens of assets/fm-theme.css (linked last on
   the page). Tints, shadows and scrims are color-mix() of those tokens, so a token
   change there re-skins this page too. No hex, no rgb() in this file.
   Radii: 20px panels, 16px cards, 10px insets, 999px pills. Motion is small and
   is removed entirely under prefers-reduced-motion.
   ========================================================================== */
.fl-page{
  --fl-ink:var(--fm-navy-deep);
  --fl-copy:color-mix(in srgb,var(--fm-navy-deep) 74%,var(--fm-panel));
  --fl-mute:color-mix(in srgb,var(--fm-mute) 70%,var(--fm-navy-deep));   /* the house muted tone, darkened to pass AA on white */
  --fl-hair:color-mix(in srgb,var(--fm-navy) 13%,var(--fm-panel));
  --fl-hair-strong:color-mix(in srgb,var(--fm-navy) 26%,var(--fm-panel));
  --fl-tint:color-mix(in srgb,var(--fm-row) 42%,var(--fm-panel));
  --fl-shadow:0 1px 2px color-mix(in srgb,var(--fm-navy-deep) 7%,transparent),
              0 8px 22px color-mix(in srgb,var(--fm-navy-deep) 7%,transparent);
  --fl-shadow-up:0 2px 6px color-mix(in srgb,var(--fm-navy-deep) 9%,transparent),
                 0 22px 44px color-mix(in srgb,var(--fm-navy-deep) 15%,transparent);
  --fl-r-lg:20px; --fl-r:16px; --fl-r-sm:10px;
  --fl-cat:var(--fm-navy);
  padding-top:34px; padding-bottom:12px;
  font-family:var(--fm-font); color:var(--fl-ink);
}
/* one colour per category, by the category's position in the catalog */
.fl-page [data-c="0"]{--fl-cat:var(--fm-navy)}
.fl-page [data-c="1"]{--fl-cat:var(--fm-green)}
.fl-page [data-c="2"]{--fl-cat:var(--fm-red)}
.fl-page [data-c="3"]{--fl-cat:var(--fm-steel)}
.fl-page [data-c="4"]{--fl-cat:var(--fm-flame)}
.fl-page [data-c="5"]{--fl-cat:color-mix(in srgb,var(--fm-navy) 52%,var(--fm-green))}
.fl-page [data-c="6"]{--fl-cat:color-mix(in srgb,var(--fm-steel) 45%,var(--fm-green))}
.fl-page [data-c="7"]{--fl-cat:color-mix(in srgb,var(--fm-navy) 58%,var(--fm-red))}

.fl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fl-page svg{display:block;flex:none}
.fl-page button{font-family:inherit}
.fl-page [hidden]{display:none !important}

/* ---------------------------------------------------------------- masthead */
.fl-mast{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin:0 0 22px}
.fl-page h1.page-title{font-family:var(--fm-font);font-size:clamp(2rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.05;color:var(--fm-navy);margin:0 0 10px}
.fl-dek{margin:0;max-width:62ch;font-size:1.08rem;line-height:1.5;color:var(--fl-copy)}
.fl-stats{display:flex;gap:26px;margin:0;padding:0;list-style:none}
.fl-stats li{display:flex;flex-direction:column;gap:2px;padding-left:16px;border-left:2px solid var(--fm-electric)}
.fl-stats b{font-size:1.55rem;line-height:1;color:var(--fm-navy);font-weight:800;font-variant-numeric:tabular-nums}
.fl-stats span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fl-mute);font-weight:700}

/* the ticker, "Rates and auctions" (fm-landing.js renderTicker): one row of plain text that scrolls, on the landing page,
   a category and a theme. It moves by exactly half the track (two identical copies, no padding inside the track:
   the 28px inset is the track's margin, outside the box the percentage is taken of), so the loop has no seam. It
   stops while the pointer is on the moving row, while the row has keyboard focus, and on its button; the button's own
   focus does not hold it (a click focuses the button, and Resume has to resume). Under reduced motion it does not
   move (the row scrolls by hand). While it loads its space is kept, invisible, so nothing under it jumps. */
.fl-tape{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;height:40px;margin:0 0 22px;padding:0 6px 0 16px;
  border:1px solid var(--fl-hair);border-radius:var(--fl-r-sm);background:var(--fm-panel);overflow:hidden}
.fl-tape-k{flex:none;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fl-mute);font-weight:700;
  padding-right:14px;border-right:1px solid var(--fl-hair)}
.fl-tape-view{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--fm-navy) 28px,var(--fm-navy) calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,transparent,var(--fm-navy) 28px,var(--fm-navy) calc(100% - 28px),transparent)}
.fl-tape-view:focus-visible{outline:2px solid var(--fm-navy);outline-offset:-2px;border-radius:6px}
.fl-tape-track{display:inline-flex;align-items:center;margin:0 0 0 28px;padding:0;list-style:none;font-size:.86rem;color:var(--fl-copy)}
.fl-tape-track li{display:inline-block;padding:0 16px;border-right:1px solid var(--fl-hair)}
.fl-tape-track b{color:var(--fm-navy);font-weight:800;font-variant-numeric:tabular-nums}
.fl-tape-track .is-k{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--fm-navy);border-right:0;padding-right:4px}
.fl-tape-track .is-src{color:var(--fl-mute);font-size:.78rem}
.fl-tape-track .is-fomc,.fl-tape-track .is-fomc b{color:var(--fm-red)}            /* a Fed date is the one true alert in the row */
.fl-tape.is-moving .fl-tape-track{will-change:transform;animation:fl-tape var(--fl-tape-s,60s) linear infinite}
.fl-tape.is-moving .fl-tape-view:hover .fl-tape-track,.fl-tape.is-moving .fl-tape-view:focus-visible .fl-tape-track,.fl-tape.is-paused .fl-tape-track{animation-play-state:paused}
.fl-tape.is-loading{visibility:hidden}
@keyframes fl-tape{to{transform:translateX(-50%)}}
.fl-tape-toggle{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--fl-hair-strong);
  background:var(--fm-panel);color:var(--fm-navy);cursor:pointer}
.fl-tape-toggle:hover{background:var(--fm-ice)}
.fl-tape-toggle:focus-visible{outline:2px solid var(--fm-navy);outline-offset:2px}
.fl-tape-toggle svg{width:13px;height:13px}
@media (prefers-reduced-motion:reduce){.fl-tape-view{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}
@media (max-width:720px){.fl-tape{padding-left:6px}.fl-tape-k{display:none}}

/* section heads */
.fl-sechead{display:flex;align-items:center;gap:16px;margin:0 0 16px}
.fl-sechead h2{margin:0;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--fm-navy)}
.fl-sechead::after{content:"";flex:1;height:1px;background:var(--fl-hair-strong);order:2}
.fl-sechead .fl-switch{order:3}
.fl-switch{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--fl-mute);font-weight:600}
.fl-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--fm-panel);border:1px solid var(--fl-hair-strong)}
.fl-seg a{padding:5px 13px;border-radius:999px;font-size:.78rem;font-weight:700;color:var(--fm-navy);text-decoration:none}
.fl-seg a[aria-current="true"]{background:var(--fm-navy);color:var(--fm-panel)}
.fl-seg a:focus-visible{outline:2px solid var(--fm-electric);outline-offset:2px}

/* the authored fallback in index.html: shown by a <noscript> style there, or by
   .fl-failed when the catalog cannot be reached */
.fl-nojs{display:none}
.fl-failed .fl-nojs{display:block}
.fl-nojs{background:var(--fm-panel);border:1px solid var(--fl-hair);border-radius:var(--fl-r);padding:24px 28px;box-shadow:var(--fl-shadow)}
.fl-nojs p{margin:0 0 12px;color:var(--fl-copy)}
.fl-nojs ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 28px}
.fl-nojs li{font-size:.92rem;color:var(--fl-copy);line-height:1.45}
.fl-nojs li a{display:block;font-weight:700;color:var(--fm-navy);font-size:1rem}
.fl-loading{margin:0;padding:48px 0;color:var(--fl-mute);font-size:.95rem;text-align:center}
.fl-failed .fl-loading,.fl-failed .fl-dir,.fl-failed .fl-stats{display:none}

/* ------------------------------------------------------------ shared pieces */
.fl-eyebrow{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:4px 11px 4px 9px;border-radius:999px;
  font-size:.68rem;line-height:1.3;font-weight:800;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  color:var(--fl-cat);background:color-mix(in srgb,var(--fl-cat) 9%,var(--fm-panel));
  border:1px solid color-mix(in srgb,var(--fl-cat) 24%,var(--fm-panel))}
.fl-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fl-cat);flex:none}
.fl-eyebrow span{overflow:hidden;text-overflow:ellipsis}
/* a card's collection name is read whole (#343): the Spotlight's rail joins the cards layout's two-line tag (fm-theme.css,
   Phase 9: .fl-cards), since the launch's Spotlight (2026-10-08, Pete's featured tools) put "Treasury supply & money
   markets" on a small rail card at 1400px, cut with an ellipsis; the dot stays by the first line. The frontpage and the
   other layouts keep the one-line pill */
.fl-spotlight .fl-rail .fl-eyebrow{white-space:normal;align-items:flex-start;border-radius:10px}
.fl-spotlight .fl-rail .fl-eyebrow::before{margin-top:3px}
.fl-spotlight .fl-rail .fl-eyebrow span{overflow:visible;text-overflow:clip;overflow-wrap:break-word}

.fl-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.68rem;line-height:1.3;
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  color:var(--fm-navy);background:var(--fm-ice);border:1px solid var(--fl-hair-strong)}
.fl-badge svg{width:11px;height:11px}
.fl-badge.is-teaser{color:var(--fm-green);background:color-mix(in srgb,var(--fm-green) 9%,var(--fm-panel));
  border-color:color-mix(in srgb,var(--fm-green) 28%,var(--fm-panel))}
.fl-badge.is-login{color:var(--fm-panel);background:var(--fm-navy);border-color:var(--fm-navy)}
.fl-badge.is-ext{color:var(--fm-steel);background:var(--fm-panel);border-color:color-mix(in srgb,var(--fm-steel) 40%,var(--fm-panel))}
.fl-badge.is-free{color:var(--fl-mute);background:transparent;border-color:var(--fl-hair-strong)}
/* launching soon (fm-landing.js isSoon, 2026-10-12): the directory's Access cell says so in the status tint (gold is a
   status color). A card or a slide says it once, with the published badge in its meta row, and has no action of its
   own: its name's link still covers the card and opens the tool's address, where everyone but admins, Compliance and
   F/m staff gets the launching-soon page */
.fl-badge.is-soon{color:var(--fm-navy-deep);background:color-mix(in srgb,var(--fm-gold) 24%,var(--fm-panel));
  border-color:color-mix(in srgb,var(--fm-gold) 62%,var(--fm-panel))}
/* in the directory's narrow Access column the two words may take two lines (fm-theme.css lets a badge wrap there): a
   rounded box, so the wrapped mark reads as one shape */
.fl-table td.c-acc .fl-badge.is-soon{border-radius:10px;line-height:1.25}
/* the padlock of a tool locked for this visitor (fm-landing.js padlock; decision 13, 2026-10-08: the only mark a locked
   tool shows), beside the category tag on a card and a slide, and alone in a directory row's Access cell; light on the
   dark spotlight slide and the mosaic's lead. Signed out it is a button (.fl-lockbtn, dressed in fm-theme.css). */
.fl-lock{display:inline-flex;align-items:center;color:var(--fl-mute);flex:none}
.fl-lock svg{width:13px;height:13px}
.fl-slide .fl-lock,.fl-cell[data-pos="1"] .fl-lock{color:color-mix(in srgb,var(--fm-panel) 78%,transparent)}

.fl-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.fl-meta .fm-badge,.fl-toolline .fm-badge{margin-left:0}                      /* the row's own gap spaces the badges */
.fl-group{font-size:.8rem;color:var(--fl-mute);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.fl-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:10px 20px;border-radius:999px;
  background:var(--fm-flame);color:var(--fm-panel);font-weight:800;font-size:.95rem;line-height:1.2;letter-spacing:.01em;
  border:1.5px solid var(--fm-flame);transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.fl-cta svg{width:15px;height:15px;transition:transform .18s ease}
.fl-cta.is-quiet{padding:7px 15px;font-size:.84rem;background:transparent;color:var(--fm-flame)}
.fl-card:hover .fl-cta,.fl-card:focus-within .fl-cta{background:var(--fm-red);border-color:var(--fm-red);color:var(--fm-panel)}
.fl-card:hover .fl-cta svg,.fl-card:focus-within .fl-cta svg{transform:translateX(3px)}

/* the card: one stretched link (the headline); the CTA is its visible affordance */
.fl-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--fm-panel);color:var(--fl-ink);
  border:1px solid var(--fl-hair);border-radius:var(--fl-r);overflow:hidden;box-shadow:var(--fl-shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.fl-card:hover,.fl-card:focus-within{transform:translateY(-3px);box-shadow:var(--fl-shadow-up);border-color:var(--fl-hair-strong)}
.fl-link{color:inherit;text-decoration:none}
.fl-link::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--fl-r)}
.fl-link:focus-visible{outline:none}
.fl-link:focus-visible::after{outline:3px solid var(--fm-electric);outline-offset:-3px}
.fl-body{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;flex:1 1 auto;min-width:0}
.fl-title{margin:0;font-weight:800;color:var(--fm-navy);letter-spacing:-.01em;line-height:1.18;font-size:1.12rem;text-wrap:balance}
.fl-desc{margin:0;color:var(--fl-copy);font-size:.92rem;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.fl-foot{margin-top:auto;padding-top:4px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.fl-decision{margin:2px 0 0;padding:12px 16px;border-radius:var(--fl-r-sm);background:var(--fl-tint);
  border-left:3px solid var(--fm-electric)}
.fl-decision dt{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--fl-mute);margin:0 0 3px}
.fl-decision dd{margin:0;font-size:.95rem;line-height:1.45;color:var(--fl-ink);display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:3;line-clamp:3;overflow:hidden}

/* media: the designed placeholder is ALWAYS underneath; the chart image covers it
   when there is one, and is removed if it fails to load - never a broken image */
.fl-media{position:relative;flex:none;aspect-ratio:16/10;overflow:hidden;background:var(--fl-cat);
  border-bottom:1px solid var(--fl-hair)}
.fl-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  background:var(--fm-paper);transition:transform .6s ease}
.fl-media[data-anchor="left"] img{object-position:left top}
.fl-card:hover .fl-media img,.fl-card:focus-within .fl-media img{transform:scale(1.025)}
.fl-ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:8% 8% 7%;
  color:var(--fm-panel);
  /* no grid texture: graph paper is the labs skin only */
  background:
    linear-gradient(140deg,color-mix(in srgb,var(--fl-cat) 86%,var(--fm-navy-deep)),color-mix(in srgb,var(--fl-cat) 48%,var(--fm-navy-deep)))}
.fl-ph svg{position:absolute;left:0;right:0;top:6%;width:100%;height:94%;opacity:.5}
.fl-ph svg path{fill:none;stroke:var(--fm-panel);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fl-ph svg path.fl-ph-area{stroke:none;fill:color-mix(in srgb,var(--fm-panel) 14%,transparent)}
.fl-ph-k{position:relative;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;opacity:.8}
.fl-lead .fl-ph-n,.fl-slide .fl-ph-n,.fl-cell[data-shape="big"] .fl-ph-n{font-size:clamp(1.5rem,3vw,2.5rem)}
.fl-ph-n{position:relative;font-size:clamp(1.05rem,2.2vw,1.7rem);font-weight:800;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}

/* ------------------------------------------------------------ 1. FRONTPAGE */
.fl-front{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.fl-front .fl-lead{grid-column:span 8}
.fl-front .fl-side{grid-column:span 4;display:grid;gap:24px;grid-auto-rows:1fr}
.fl-front[data-n="1"] .fl-lead{grid-column:1/-1}
.fl-front .fl-row{grid-column:1/-1;display:grid;gap:20px;grid-template-columns:repeat(var(--fl-n,5),minmax(0,1fr))}

.fl-lead .fl-media{aspect-ratio:auto;flex:1 1 380px;min-height:340px}
.fl-lead .fl-body{flex:0 0 auto;gap:13px;padding:24px 30px 28px}
.fl-lead .fl-title{font-size:clamp(1.7rem,2.7vw,2.35rem);line-height:1.06;letter-spacing:-.022em}
.fl-lead .fl-desc{font-size:1.06rem;-webkit-line-clamp:3;line-clamp:3;max-width:70ch}
.fl-lead .fl-foot{padding-top:8px}
.fl-lead .fl-cta{padding:12px 26px;font-size:1.02rem}
.fl-front[data-n="1"] .fl-lead{flex-direction:row}
.fl-front[data-n="1"] .fl-lead .fl-media{flex:1 1 58%;min-height:380px;border-bottom:0;border-right:1px solid var(--fl-hair)}
.fl-front[data-n="1"] .fl-lead .fl-body{flex:1 1 42%;justify-content:center}

.fl-side .fl-media{aspect-ratio:2/1}
.fl-side .fl-title{font-size:1.28rem}
.fl-side .fl-desc{-webkit-line-clamp:2;line-clamp:2}
.fl-front[data-n="2"] .fl-side .fl-media{aspect-ratio:auto;flex:1 1 200px}

.fl-row .fl-title{font-size:1.04rem}
.fl-row .fl-desc{font-size:.86rem;-webkit-line-clamp:2;line-clamp:2}
.fl-row .fl-body{padding:15px 16px 17px;gap:9px}
/* one or two leftovers read as wide strips rather than stretched tiles */
.fl-row[data-n="1"] .fl-card,.fl-row[data-n="2"] .fl-card{flex-direction:row}
.fl-row[data-n="1"] .fl-media,.fl-row[data-n="2"] .fl-media{flex:0 0 42%;aspect-ratio:auto;min-height:170px;border-bottom:0;border-right:1px solid var(--fl-hair)}
.fl-row[data-n="1"] .fl-media{flex-basis:34%}

/* ------------------------------------------------------------ 2. SPOTLIGHT */
.fl-spot{position:relative;border-radius:var(--fl-r-lg);overflow:hidden;color:var(--fm-panel);box-shadow:var(--fl-shadow-up);
  /* no grid texture: graph paper is the labs skin only */
  background:
    radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--fm-navy) 92%,var(--fm-steel)),var(--fm-navy-deep) 62%)}
.fl-slides{display:grid}
.fl-slide{grid-area:1/1;position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;
  padding:40px 44px 92px;min-width:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
.fl-slide.is-on{opacity:1;visibility:visible;transition:opacity .55s ease,visibility 0s}
.fl-slide-text{display:flex;flex-direction:column;gap:14px;min-width:0}
.fl-slide .fl-eyebrow{color:var(--fm-panel);background:color-mix(in srgb,var(--fm-panel) 10%,transparent);
  border-color:color-mix(in srgb,var(--fm-panel) 28%,transparent)}
.fl-slide .fl-eyebrow::before{background:var(--fm-electric)}
.fl-slide .fl-badge{color:var(--fm-panel);background:transparent;border-color:color-mix(in srgb,var(--fm-panel) 35%,transparent)}
.fl-slide .fl-group{color:color-mix(in srgb,var(--fm-panel) 66%,transparent)}
.fl-slide .fm-badge--text[data-tone="navy"]{background:color-mix(in srgb,var(--fm-panel) 18%,transparent);border:1px solid color-mix(in srgb,var(--fm-panel) 40%,transparent)}
.fl-slide .fl-title{color:var(--fm-panel);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.04;letter-spacing:-.024em}
.fl-slide .fl-desc{color:color-mix(in srgb,var(--fm-panel) 82%,transparent);font-size:1.05rem;-webkit-line-clamp:4;line-clamp:4}
.fl-slide .fl-decision{background:color-mix(in srgb,var(--fm-panel) 8%,transparent)}
.fl-slide .fl-decision dt{color:color-mix(in srgb,var(--fm-panel) 62%,transparent)}
.fl-slide .fl-decision dd{color:var(--fm-panel)}
.fl-slide .fl-cta{margin-top:6px;padding:13px 28px;font-size:1.04rem}
.fl-slide .fl-link::after{border-radius:var(--fl-r-lg);bottom:64px}
.fl-slide:hover .fl-cta,.fl-slide:focus-within .fl-cta{background:var(--fm-panel);border-color:var(--fm-panel);color:var(--fm-navy)}
.fl-slide:hover .fl-cta svg{transform:translateX(3px)}
.fl-slide .fl-media{aspect-ratio:16/10;border-radius:14px;border:1px solid color-mix(in srgb,var(--fm-panel) 22%,transparent);
  box-shadow:0 24px 50px color-mix(in srgb,var(--fm-navy-deep) 55%,transparent)}

.fl-spot-bar{position:absolute;left:44px;right:44px;bottom:26px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px}
.fl-dots{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.fl-dot{position:relative;display:block;width:74px;padding:8px 0 0;border:0;background:none;cursor:pointer;text-align:left;
  color:color-mix(in srgb,var(--fm-panel) 60%,transparent);font-size:.74rem;font-weight:800;letter-spacing:.1em}
.fl-dot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:color-mix(in srgb,var(--fm-panel) 24%,transparent)}
.fl-dot i{position:absolute;left:0;top:0;height:3px;width:0;border-radius:3px;background:var(--fm-electric)}
.fl-dot[aria-current="true"]{color:var(--fm-panel)}
.fl-dot[aria-current="true"] i{width:100%}
.fl-spot.is-running .fl-dot[aria-current="true"] i{animation:fl-fill var(--fl-dwell,7s) linear both}
.fl-spot.is-running.is-held .fl-dot[aria-current="true"] i{animation-play-state:paused}
@keyframes fl-fill{from{width:0}to{width:100%}}
.fl-dot:focus-visible,.fl-ctl:focus-visible{outline:2px solid var(--fm-electric);outline-offset:3px}
.fl-ctls{display:flex;gap:8px}
.fl-ctl{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;cursor:pointer;color:var(--fm-panel);
  background:color-mix(in srgb,var(--fm-panel) 8%,transparent);border:1px solid color-mix(in srgb,var(--fm-panel) 32%,transparent);
  transition:background-color .16s ease,color .16s ease}
.fl-ctl:hover{background:var(--fm-panel);color:var(--fm-navy)}
.fl-ctl svg{width:18px;height:18px}

.fl-rail{margin-top:24px;display:grid;gap:20px;grid-template-columns:repeat(var(--fl-n,5),minmax(0,1fr))}
.fl-rail .fl-title{font-size:1.04rem}
.fl-rail .fl-desc{font-size:.86rem;-webkit-line-clamp:2;line-clamp:2}
.fl-rail .fl-body{padding:15px 16px 17px;gap:9px}

/* --------------------------------------------------------------- 3. MOSAIC */
.fl-mosaic{display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(290px,auto)}
.fl-mosaic[data-n="1"]{grid-template-areas:"c1 c1 c1 c1" "c1 c1 c1 c1"}
.fl-mosaic[data-n="2"]{grid-template-areas:"c1 c1 c2 c2" "c1 c1 c2 c2"}
.fl-mosaic[data-n="3"]{grid-template-areas:"c1 c1 c2 c2" "c1 c1 c3 c3"}
.fl-mosaic[data-n="4"]{grid-template-areas:"c1 c1 c2 c2" "c1 c1 c3 c4"}
.fl-mosaic[data-n="5"]{grid-template-areas:"c1 c1 c2 c2" "c1 c1 c3 c4" "c5 c5 c5 c5"}
.fl-mosaic[data-n="6"]{grid-template-areas:"c1 c1 c2 c2" "c1 c1 c3 c4" "c5 c5 c6 c6"}
.fl-mosaic[data-n="7"]{grid-template-areas:"c1 c1 c2 c2" "c1 c1 c3 c4" "c5 c6 c6 c7"}
.fl-mosaic[data-n="8"]{grid-template-areas:"c1 c1 c2 c2" "c1 c1 c3 c4" "c5 c6 c6 c7" "c5 c8 c8 c7"}
.fl-cell{grid-area:var(--fl-area)}
.fl-cell .fl-media{aspect-ratio:auto;flex:1 1 130px;min-height:130px}
.fl-cell .fl-body{flex:0 0 auto;padding:15px 17px 17px;gap:9px}
.fl-cell[data-shape="std"] .fl-desc{display:none}
.fl-cell[data-shape="std"] .fl-title{font-size:1.04rem}
.fl-cell[data-shape="tall"] .fl-media{flex:1 1 220px;min-height:220px}
.fl-cell[data-shape="tall"] .fl-desc{-webkit-line-clamp:4;line-clamp:4}
.fl-cell[data-shape="tall"] .fl-decision{padding:10px 13px}
.fl-cell[data-shape="tall"] .fl-decision dd{font-size:.88rem;-webkit-line-clamp:3;line-clamp:3}
.fl-cell[data-shape="tall"] .fl-title{font-size:1.2rem}
.fl-cell[data-shape="wide"],.fl-cell[data-shape="banner"]{flex-direction:row}
.fl-cell[data-shape="wide"] .fl-media,.fl-cell[data-shape="banner"] .fl-media{flex:1 1 50%;min-height:0;border-bottom:0;border-right:1px solid var(--fl-hair)}
.fl-cell[data-shape="wide"] .fl-body,.fl-cell[data-shape="banner"] .fl-body{flex:1 1 50%;justify-content:center;padding:20px 22px}
.fl-cell[data-shape="wide"] .fl-foot,.fl-cell[data-shape="banner"] .fl-foot{margin-top:4px}
.fl-cell[data-shape="wide"] .fl-title{font-size:1.3rem}
.fl-cell[data-shape="banner"] .fl-media{flex-basis:38%}
.fl-cell[data-shape="banner"] .fl-body{flex-basis:62%}
.fl-cell[data-shape="banner"] .fl-title{font-size:1.5rem}
.fl-cell[data-shape="big"] .fl-media{flex:1 1 300px}
.fl-cell[data-shape="big"] .fl-body{padding:22px 26px 26px;gap:12px}
.fl-cell[data-shape="big"] .fl-title{font-size:clamp(1.55rem,2.3vw,2.05rem);line-height:1.08;letter-spacing:-.02em}
.fl-cell[data-shape="big"] .fl-desc{font-size:1rem}
/* the first cell carries the weight: navy text panel under the picture */
.fl-cell[data-pos="1"]{background:var(--fm-navy-deep);border-color:var(--fm-navy-deep);color:var(--fm-panel)}
.fl-cell[data-pos="1"] .fl-media{border-bottom-color:color-mix(in srgb,var(--fm-panel) 14%,transparent)}
.fl-cell[data-pos="1"] .fl-title{color:var(--fm-panel)}
.fl-cell[data-pos="1"] .fl-desc{color:color-mix(in srgb,var(--fm-panel) 80%,transparent)}
.fl-cell[data-pos="1"] .fl-group{color:color-mix(in srgb,var(--fm-panel) 62%,transparent)}
.fl-cell[data-pos="1"] .fl-eyebrow{color:var(--fm-panel);background:color-mix(in srgb,var(--fm-panel) 10%,transparent);border-color:color-mix(in srgb,var(--fm-panel) 28%,transparent)}
.fl-cell[data-pos="1"] .fl-eyebrow::before{background:var(--fm-electric)}
.fl-cell[data-pos="1"] .fl-badge{color:var(--fm-panel);background:transparent;border-color:color-mix(in srgb,var(--fm-panel) 35%,transparent)}

/* ---------------------------------------------------------------- DIRECTORY */
.fl-dir{margin-top:46px;background:var(--fm-panel);border:1px solid var(--fl-hair);border-radius:var(--fl-r-lg);box-shadow:var(--fl-shadow);
  padding:28px 30px 8px;scroll-margin-top:88px} /* clears the sticky nav */
.fl-dir-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin:0 0 20px}
.fl-dir-head h2{margin:0 0 4px;font-size:1.65rem;font-weight:800;letter-spacing:-.015em;color:var(--fm-navy);line-height:1.1}
.fl-dir-head p{margin:0;color:var(--fl-copy);font-size:.96rem;max-width:56ch}

.fl-search{position:relative;flex:1 1 420px;max-width:640px;min-width:0}
.fl-search input{width:100%;height:56px;padding:0 54px 0 52px;font:inherit;font-size:1.06rem;font-weight:600;color:var(--fl-ink);
  background:var(--fm-panel);border:2px solid var(--fm-electric);border-radius:999px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--fm-electric) 13%,transparent);appearance:none;-webkit-appearance:none;
  transition:border-color .15s ease,box-shadow .15s ease}
.fl-search input::placeholder{color:var(--fl-mute);font-weight:400;opacity:1}
.fl-search input::-webkit-search-cancel-button,.fl-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.fl-search input:focus{outline:none;border-color:var(--fm-navy);box-shadow:0 0 0 4px color-mix(in srgb,var(--fm-navy) 20%,transparent)}
.fl-search-ico{position:absolute;left:19px;top:50%;width:21px;height:21px;margin-top:-10.5px;color:var(--fm-electric);pointer-events:none}
.fl-search input:focus~.fl-search-ico{color:var(--fm-navy)}
.fl-clear{position:absolute;right:10px;top:50%;margin-top:-18px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;
  cursor:pointer;background:var(--fm-ice);color:var(--fm-navy)}
.fl-clear:hover{background:var(--fm-navy);color:var(--fm-panel)}
.fl-clear:focus-visible{outline:2px solid var(--fm-electric);outline-offset:2px}
.fl-clear svg{width:14px;height:14px}

/* tabs: the house navy-pill selector, wrapping */
/* the tablist is display:contents so the tabs and the Collections selector wrap as ONE
   run of pills (the selector is a sibling of the tablist, not a tab) */
.fl-tabbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 16px;border-bottom:1px solid var(--fl-hair)}
.fl-tabs{display:contents}
.fl-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
  font-size:.9rem;font-weight:700;line-height:1.2;color:var(--fm-navy);background:var(--fm-panel);border:1px solid var(--fl-hair-strong);
  transition:background-color .14s ease,color .14s ease,border-color .14s ease}
.fl-tab:hover{border-color:var(--fm-navy);background:var(--fm-ice)}
.fl-tab[aria-selected="true"]{background:var(--fm-navy);border-color:var(--fm-navy);color:var(--fm-panel)}
.fl-tab:focus-visible{outline:2px solid var(--fm-electric);outline-offset:2px}
.fl-tab .fl-n{font-size:.74rem;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--fm-ice);color:var(--fm-navy);
  font-variant-numeric:tabular-nums}
.fl-tab[aria-selected="true"] .fl-n{background:color-mix(in srgb,var(--fm-panel) 18%,transparent);color:var(--fm-panel)}
.fl-tab.is-all{border-color:var(--fm-navy)}
.fl-tab.is-fav svg{width:15px;height:15px;color:var(--fm-electric)}

.fl-pick{position:relative;display:inline-flex;align-items:center;flex:none}
.fl-pick select{appearance:none;-webkit-appearance:none;font:inherit;font-size:.9rem;font-weight:700;line-height:1.2;cursor:pointer;
  padding:8px 38px 8px 14px;border-radius:999px;color:var(--fm-navy);background:var(--fm-panel);border:1px solid var(--fl-hair-strong);max-width:250px;text-overflow:ellipsis}
.fl-pick select:hover{border-color:var(--fm-navy);background:var(--fm-ice)}
.fl-pick select:focus-visible{outline:2px solid var(--fm-electric);outline-offset:2px}
.fl-pick.is-on select{background:var(--fm-navy);border-color:var(--fm-navy);color:var(--fm-panel)}
.fl-pick svg{position:absolute;right:14px;top:50%;margin-top:-6px;width:12px;height:12px;color:var(--fm-flame);pointer-events:none}
.fl-pick.is-on svg{color:var(--fm-panel)}

.fl-filters{display:flex;align-items:flex-start;gap:10px 14px;padding:14px 0 4px}
.fl-filters-k{flex:none;padding-top:6px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--fl-mute)}
.fl-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;min-width:0}
.fl-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;cursor:pointer;font-size:.78rem;font-weight:600;
  line-height:1.3;color:var(--fm-navy);background:var(--fm-ice);border:1px solid transparent;white-space:nowrap;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease}
.fl-tag:hover{border-color:var(--fm-navy)}
.fl-tag:focus-visible{outline:2px solid var(--fm-electric);outline-offset:1px}
.fl-tag[aria-pressed="true"]{background:var(--fm-navy);color:var(--fm-panel)}
.fl-tag svg{width:9px;height:9px}
.fl-tag .fl-n{opacity:.6;font-weight:700;font-variant-numeric:tabular-nums}
.fl-more{background:transparent;border:1px dashed var(--fl-hair-strong);color:var(--fm-navy)}

.fl-status{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding:14px 0 12px}
.fl-count{margin:0;font-size:.92rem;color:var(--fl-copy)}
.fl-count b{color:var(--fm-navy);font-variant-numeric:tabular-nums}
.fl-status-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fl-reset{border:0;background:none;padding:4px 2px;cursor:pointer;font-size:.86rem;font-weight:700;color:var(--fm-flame);text-decoration:underline;
  text-underline-offset:3px}
.fl-reset:focus-visible{outline:2px solid var(--fm-electric);outline-offset:2px}
.fl-sortpick{display:none}
.fl-note{margin:0 0 14px;padding:12px 16px;border-radius:var(--fl-r-sm);background:var(--fl-tint);color:var(--fl-copy);font-size:.92rem;line-height:1.45}
.fl-note b{color:var(--fm-navy)}

.fl-tablewrap{margin:0 -30px;overflow-x:auto}
.fl-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.9rem}
/* table-layout:fixed takes the column widths from the header cells */
.fl-table th.c-tool{width:39%}.fl-table th.c-cat{width:14%}.fl-table th.c-page{width:15%}
.fl-table th.c-tags{width:24%}.fl-table th.c-acc{width:8%}
.fl-table thead th{position:sticky;top:0;z-index:4;padding:0;text-align:left;background:var(--fm-navy);color:var(--fm-panel);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.fl-table thead th:first-child{padding-left:14px}
.fl-sort{display:flex;align-items:center;gap:7px;width:100%;padding:13px 16px;border:0;background:none;color:inherit;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left}
.fl-sort:hover{background:color-mix(in srgb,var(--fm-panel) 10%,transparent)}
.fl-sort:focus-visible{outline:2px solid var(--fm-electric);outline-offset:-3px}
.fl-sort svg{width:10px;height:14px;opacity:.45}
.fl-sort svg .up,.fl-sort svg .dn{fill:currentColor}
th[aria-sort="ascending"] .fl-sort svg,th[aria-sort="descending"] .fl-sort svg{opacity:1}
th[aria-sort="ascending"] .fl-sort svg .dn,th[aria-sort="descending"] .fl-sort svg .up{opacity:.25}
th[aria-sort="ascending"] .fl-sort svg .up,th[aria-sort="descending"] .fl-sort svg .dn{fill:var(--fm-electric)}

.fl-table tbody td{padding:15px 16px;vertical-align:top;border-bottom:1px solid var(--fl-hair);min-width:0}
.fl-table tbody td:first-child{padding-left:30px}
.fl-table tbody tr:hover,.fl-table tbody tr:focus-within{background:var(--fl-tint)}
.fl-table tbody tr:last-child td{border-bottom:0}
.fl-tool{display:inline;font-size:1.02rem;font-weight:800;color:var(--fm-navy);text-decoration:none;letter-spacing:-.005em}
.fl-tool:hover{color:var(--fm-flame);text-decoration:underline;text-underline-offset:3px}
.fl-tool:focus-visible{outline:2px solid var(--fm-electric);outline-offset:2px;border-radius:4px}
.fl-tool svg{display:inline-block;width:12px;height:12px;margin-left:5px;vertical-align:-1px;color:var(--fm-steel)}
.fl-toolline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fl-rowdesc{margin:4px 0 0;color:var(--fl-mute);font-size:.86rem;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;max-width:78ch}
.fl-catbtn{display:inline-flex;align-items:flex-start;gap:8px;padding:0;border:0;background:none;cursor:pointer;text-align:left;
  font:inherit;font-weight:700;color:var(--fl-ink);line-height:1.35}
.fl-catbtn::before{content:"";flex:none;width:9px;height:9px;margin-top:.36em;border-radius:50%;background:var(--fl-cat)}
.fl-catbtn:hover{color:var(--fm-flame);text-decoration:underline;text-underline-offset:3px}
.fl-catbtn:focus-visible{outline:2px solid var(--fm-electric);outline-offset:2px;border-radius:4px}
.fl-pg{color:var(--fl-copy);line-height:1.35}
.fl-rowtags{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}
.fl-rowtags .fl-tag{font-size:.74rem;padding:3px 9px}
.fl-morebar{display:flex;justify-content:center;padding:18px 0 22px;border-top:1px solid var(--fl-hair)}
.fl-empty{padding:44px 20px 50px;text-align:center;color:var(--fl-copy)}
.fl-empty h3{margin:0 0 6px;font-size:1.15rem;color:var(--fm-navy)}
.fl-empty p{margin:0 auto 16px;max-width:52ch}
.fl-empty .fl-btn{margin:0 4px}
.fl-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;cursor:pointer;font-size:.9rem;font-weight:700;
  color:var(--fm-navy);background:var(--fm-panel);border:1px solid var(--fm-navy)}
.fl-btn:hover{background:var(--fm-navy);color:var(--fm-panel)}
.fl-btn:focus-visible{outline:2px solid var(--fm-electric);outline-offset:2px}
/* one Sign in red (Chris, 2026-10-06; 2026-10-07): the nav's --fm-flame #D04438, 4.6:1 on white, passes AA for this
   13 to 14px bold text; --fm-electric #FB4D3D was 3.4:1 and did not. Every .fl-btn.is-primary takes it (the masthead's
   Create an account, the empty state's Search all; the card and rail Sign in buttons went with launch decision 13,
   2026-10-08), and the hover darkens to --fm-red as the nav's Sign in does */
.fl-btn.is-primary{background:var(--fm-flame);border-color:var(--fm-flame);color:var(--fm-panel)}
.fl-btn.is-primary:hover{background:var(--fm-red);border-color:var(--fm-red)}

/* row preview: the tool's chart, shown beside the hovered or focused tool name */
.fl-peek{position:fixed;z-index:60;width:336px;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .14s ease,transform .14s ease;border-radius:var(--fl-r);overflow:hidden;background:var(--fm-panel);
  border:1px solid var(--fl-hair-strong);box-shadow:var(--fl-shadow-up)}
.fl-peek.is-on{opacity:1;transform:none}
.fl-peek img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--fm-paper)}
.fl-peek[data-full="1"] img{aspect-ratio:auto;height:auto;object-fit:contain}   /* the whole graphic, at its own shape */
.fl-peek[data-anchor="left"] img{object-position:left top}
.fl-peek p{margin:0;padding:9px 13px 10px;font-size:.8rem;font-weight:700;color:var(--fm-navy);border-top:1px solid var(--fl-hair)}
@media (hover:none){.fl-peek{display:none}}

/* --------------------------------------------------------------- responsive */
@media (max-width:1180px){
  .fl-front .fl-row,.fl-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fl-row[data-n="1"],.fl-row[data-n="2"],.fl-row[data-n="4"],.fl-rail[data-n="1"],.fl-rail[data-n="2"],.fl-rail[data-n="4"]{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .fl-row[data-n="1"],.fl-rail[data-n="1"]{grid-template-columns:minmax(0,1fr)}
  .fl-slide{gap:28px;padding:32px 32px 88px}
  .fl-spot-bar{left:32px;right:32px}
}
@media (max-width:1000px){
  .fl-front .fl-lead,.fl-front .fl-side{grid-column:1/-1}
  .fl-front .fl-side{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .fl-front[data-n="2"] .fl-side{grid-template-columns:minmax(0,1fr)}
  .fl-lead .fl-media{min-height:0;flex:none;aspect-ratio:16/9}
  .fl-mosaic,.fl-mosaic[data-n]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:none;grid-auto-rows:auto}
  .fl-cell{grid-area:auto}
  .fl-cell[data-shape="big"],.fl-cell[data-shape="wide"],.fl-cell[data-shape="banner"]{grid-column:1/-1}
  .fl-cell[data-shape="std"] .fl-media,.fl-cell[data-shape="tall"] .fl-media{flex:none;aspect-ratio:16/10;min-height:0}
  .fl-cell[data-shape="big"] .fl-media{flex:none;aspect-ratio:16/9}
  .fl-cell[data-shape="std"] .fl-desc{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2}
  .fl-slide{grid-template-columns:minmax(0,1fr);gap:22px}
  .fl-slide .fl-media{order:-1}
  .fl-table th.c-page,.fl-table td.c-page{display:none}
  .fl-table th.c-tool{width:44%}.fl-table th.c-cat{width:18%}.fl-table th.c-tags{width:27%}.fl-table th.c-acc{width:11%}
  .fl-table th.c-acc .fl-sort{padding-left:10px;padding-right:8px}
  .fl-table tbody td.c-acc{padding-left:10px;padding-right:10px}
}
@media (max-width:720px){
  .fl-page{padding-top:22px}
  .fl-mast{margin-bottom:18px}
  .fl-dek{font-size:1rem}
  .fl-stats{gap:18px}
  .fl-stats b{font-size:1.25rem}
  .fl-front,.fl-front .fl-side,.fl-mosaic{gap:16px}
  .fl-front .fl-side,.fl-front .fl-row,.fl-rail,
  .fl-row[data-n],.fl-rail[data-n],.fl-mosaic,.fl-mosaic[data-n]{grid-template-columns:minmax(0,1fr)}
  .fl-row[data-n="1"] .fl-card,.fl-row[data-n="2"] .fl-card,.fl-front[data-n="1"] .fl-lead,
  .fl-cell[data-shape="wide"],.fl-cell[data-shape="banner"]{flex-direction:column}
  .fl-row[data-n] .fl-media,.fl-front[data-n="1"] .fl-lead .fl-media,
  .fl-cell[data-shape="wide"] .fl-media,.fl-cell[data-shape="banner"] .fl-media{flex:none;aspect-ratio:16/10;min-height:0;border-right:0;
    border-bottom:1px solid var(--fl-hair)}
  .fl-lead .fl-body,.fl-cell[data-shape="big"] .fl-body,.fl-cell[data-shape="wide"] .fl-body,.fl-cell[data-shape="banner"] .fl-body{padding:18px 18px 20px}
  .fl-lead .fl-title,.fl-cell[data-shape="big"] .fl-title{font-size:1.55rem}
  .fl-lead .fl-desc{font-size:.98rem}
  .fl-slide{padding:18px 18px 96px}
  .fl-slide .fl-title{font-size:1.6rem}
  .fl-slide .fl-desc{font-size:.98rem;-webkit-line-clamp:3;line-clamp:3}
  .fl-slide .fl-decision{display:none}
  .fl-spot-bar{left:18px;right:18px;bottom:20px}
  .fl-dot{width:44px}
  .fl-ctl{width:40px;height:40px}

  .fl-dir{margin-top:34px;padding:20px 16px 4px;border-radius:var(--fl-r)}
  .fl-dir-head h2{font-size:1.4rem}
  .fl-search{flex-basis:100%;max-width:none}
  .fl-search input{height:52px;font-size:1rem}
  .fl-tabbar{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px}
  .fl-tabs{display:flex;gap:8px;flex-wrap:nowrap;min-width:0;overflow-x:auto;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:thin;scroll-snap-type:x proximity}
  .fl-tab{scroll-snap-align:start}
  .fl-pick,.fl-pick select{width:100%;max-width:none}
  .fl-sechead{flex-wrap:wrap;gap:10px 16px}
  .fl-sechead h2,.fl-seg a{white-space:nowrap}
  .fl-sechead .fl-switch{flex:1 1 100%}
  .fl-switch>span{display:none}
  .fl-filters{flex-direction:column;gap:8px}
  .fl-filters-k{padding-top:0}
  .fl-sortpick{display:inline-flex}
  .fl-tablewrap{margin:0 -16px;overflow:visible}
  /* the table becomes a list: one tool per block, name and description first, then
     category + page group + access on one line, tags last */
  .fl-table,.fl-table tbody{display:block;width:auto}
  .fl-table thead{display:none}
  .fl-table tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;padding:16px 16px 15px;border-bottom:1px solid var(--fl-hair)}
  .fl-table tbody tr:last-child{border-bottom:0}
  .fl-table tbody td,.fl-table tbody td:first-child{display:block;padding:0;border:0;width:auto}
  .fl-table td.c-tool,.fl-table td.c-tags{flex:1 1 100%}
  .fl-table td.c-tags{order:5}
  .fl-table td.c-page{display:block;flex:1 1 0;min-width:0;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fl-table td.c-page.is-none{display:none}
  .fl-table td.c-acc{margin-left:auto}
  .fl-rowdesc{-webkit-line-clamp:3;line-clamp:3}
}
@media (prefers-reduced-motion:reduce){
  .fl-page *,.fl-peek{transition:none !important;animation:none !important}
  .fl-card:hover,.fl-card:focus-within{transform:none}
  .fl-card:hover .fl-media img,.fl-card:focus-within .fl-media img{transform:none}
  .fl-spot .fl-dot[aria-current="true"] i{width:100%}
}
@media print{
  .fl-spot-bar,.fl-peek,.fl-switch{display:none !important}
  .fl-slide{position:static;opacity:1;visibility:visible;grid-area:auto}
  .fl-slides{display:block}
}

/* ------------------------------------------------------------ category view (index.html?cat=)
   A category's pages, each with its tools in a rail of small cards. */
.fl-back{margin:0 0 6px;font-size:13px;font-weight:600}
.fl-back a{display:inline-flex;align-items:center;gap:6px;color:var(--fm-navy);text-decoration:none}
.fl-back a svg{transform:rotate(180deg);width:14px;height:14px}
.fl-back a:hover{color:var(--fm-red);text-decoration:underline;text-underline-offset:2px}
.fl-group-block{margin:0 0 30px}
.fl-group-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.fl-group-title{margin:0;font-size:22px;line-height:1.25;color:var(--fm-navy)}
.fl-group-title a{color:inherit;text-decoration:none}
.fl-group-title a:hover{color:var(--fm-red)}
.fl-group-n{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fm-mute-text)}
.fl-group-desc{margin:0 0 14px;max-width:96ch;font-size:15px;line-height:1.55;color:var(--fm-navy-deep)}
.fl-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.fl-rail .fl-title{font-size:1.04rem}
.fl-rail .fl-desc{font-size:.86rem;-webkit-line-clamp:2;line-clamp:2}
.fl-rail .fl-body{padding:15px 16px 17px;gap:9px}
@media(max-width:720px){.fl-rail{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.fl-group-title{font-size:19px}}

/* ------------------------------------------------------------ container view (index.html?page=)
   One page group as a page of its own (fm-landing.js renderContainer). The band is the tool pages'
   hero (fm-shell.css .fm-shell-hero at the design D sizes of fm-shell-d.css), drawn here because the
   shell draws nothing on this page. It is the first child of <main> (its h1 is the page's heading, so
   it sits in the main landmark) and spans the window: in this view <main> drops its .wrap and an inner
   .fl-cbody.wrap holds the rest at the site width. The band takes --fm-* tokens only (it is the tool
   pages' band, not a landing card). Then the group's tools as cards in the group's order (three across,
   two for two or four tools, one on a phone), and one line to the collection's other groups. */
.fl-page.fl-cview{padding-top:0}
.fl-cview > .fl-cbody{padding-top:34px}
.fl-hero{position:relative;overflow:hidden;display:flex;align-items:center;box-sizing:border-box;min-height:160px;padding:20px 0 22px;
  color:var(--fm-panel);font-family:var(--fm-font);background-color:var(--fm-navy-deep);
  background-image:url("group-hero-left.svg"),url("group-hero-right.svg"),linear-gradient(180deg,var(--fm-navy) -70%,var(--fm-navy-deep) 100%);
  background-repeat:no-repeat;background-position:left -34px bottom,right -22px bottom,center;background-size:auto 148px,auto 100%,cover}
/* the group's own graphic (pages[].image, else the collection's): the art at the right, no triangles */
.fl-hero.has-art{background-image:var(--fl-hero-art),linear-gradient(180deg,var(--fm-navy) -70%,var(--fm-navy-deep) 100%);
  background-position:right 28px center,center;background-size:auto 82%,cover}
.fl-hero-in{width:100%;max-width:1140px;margin:0 auto;padding:0 22px;box-sizing:border-box}
@media (min-width:1400px){.fl-hero-in{max-width:1320px}}
.fl-hero-trail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;min-height:18px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fm-sky)}
.fl-hero-trail a{color:var(--fm-sky);text-decoration:none}
.fl-hero-trail a:hover{color:var(--fm-panel);text-decoration:underline;text-underline-offset:3px}
.fl-hero-trail a:focus-visible{outline:2px solid var(--fm-electric);outline-offset:3px;border-radius:4px}
.fl-hero-sep{color:var(--fm-steel)}
.fl-hero h1.fl-hero-title{margin:7px 0 6px;font-family:var(--fm-font);font-size:1.85rem;font-weight:800;letter-spacing:-.01em;line-height:1.12;color:var(--fm-panel)}
.fl-hero-desc{margin:0;max-width:760px;font-size:1.04rem;line-height:1.45;color:var(--fm-row)}
.fl-hero-count{margin:8px 0 0;font-size:.9rem;font-weight:700;color:var(--fm-sky)}   /* the collection view: "16 tools in 4 groups" */

.fl-cgrid{display:grid;gap:22px;grid-template-columns:repeat(3,minmax(0,1fr))}
.fl-cgrid[data-n="2"],.fl-cgrid[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.fl-cgrid[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.fl-cgrid[data-n="1"] .fl-card{flex-direction:row}
.fl-cgrid[data-n="1"] .fl-media{flex:0 0 44%;aspect-ratio:auto;min-height:240px;border-bottom:0;border-right:1px solid var(--fl-hair)}
.fl-ccard .fl-title{font-size:1.18rem}
.fl-ccard .fl-desc{font-size:.95rem;-webkit-line-clamp:4;line-clamp:4}
.fl-ccard .fl-foot{padding-top:8px}
/* "Open tool" is the card's one link, stretched over the whole card (as the headline is on the landing's cards) */
.fl-open{text-decoration:none}
.fl-open::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--fl-r)}
.fl-open:focus-visible{outline:none}
.fl-open:focus-visible::after{outline:3px solid var(--fm-electric);outline-offset:-3px}
.fl-more-pages{margin:28px 0 0}
.fl-more-pages p{margin:0;max-width:96ch;font-size:1rem;line-height:1.6;color:var(--fl-copy)}
.fl-more-pages a{color:var(--fm-navy);font-weight:700;text-underline-offset:3px}
.fl-more-pages a:hover{color:var(--fm-red)}
.fl-more-pages a:focus-visible{outline:2px solid var(--fm-electric);outline-offset:2px;border-radius:4px}

@media (max-width:1000px){
  .fl-cgrid,.fl-cgrid[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fl-hero{background-position:left -200px bottom,right -46px bottom,center;background-size:auto 120px,auto 86%,cover}
  .fl-hero.has-art{background-position:right 8px center,center;background-size:auto 70%,cover}
  .fl-hero-desc{max-width:72%}
}
@media (max-width:720px){
  .fl-cview > .fl-cbody{padding-top:22px}
  .fl-cgrid,.fl-cgrid[data-n]{grid-template-columns:minmax(0,1fr);gap:16px}
  .fl-cgrid[data-n="1"] .fl-card{flex-direction:column}
  .fl-cgrid[data-n="1"] .fl-media{flex:none;aspect-ratio:16/10;min-height:0;border-right:0;border-bottom:1px solid var(--fl-hair)}
  .fl-hero{min-height:0;padding:16px 0 18px;background-position:left -300px bottom,right -30px bottom,center;background-size:auto 100px,auto 62%,cover}
  .fl-hero.has-art{background-position:right -40px center,center;background-size:auto 60%,cover}
  .fl-hero-trail{font-size:10.5px;letter-spacing:.12em;gap:2px 7px}
  .fl-hero h1.fl-hero-title{margin:6px 0;font-size:1.3rem;line-height:1.15}
  .fl-hero-desc{max-width:calc(100% - 46px);font-size:.92rem;line-height:1.45}
}
@media (max-width:480px){.fl-hero-in{padding:0 16px}}