(a list cannot sit inside a
): that div reads as the footer paragraph it stands
in for (the pages' own "footer p" rule: 11.5px, the muted text color, 10px below, 980px wide), and the notice stays
inline, so the paragraph runs on around its list. A list indents and wraps inside the footer; a link is underlined
in the text's own color; bold is bold (the selectors repeat a class so they outrank fm-shell-d.css's
"footer p b:not(:first-child)", which reads inline emphasis in Methods & Data as ordinary words). */
html body footer div.fm-notice-group{margin:0 0 10px;max-width:980px;font-size:11.5px;color:var(--fm-mute-text)}
html body .fm-notice.fm-notice[data-rich="1"] b,
html body .fm-notices.fm-notices [data-rich="1"] b{color:inherit;font-weight:700}
html body .fm-notices.fm-notices [data-rich="1"] > b:first-child{color:var(--fm-navy);font-weight:600} /* its name */
html body .fm-notice[data-rich="1"] i,
html body .fm-notices [data-rich="1"] i{font-style:italic}
html body .fm-notice[data-rich="1"] u,
html body .fm-notices [data-rich="1"] u{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
html body .fm-notice.fm-notice[data-rich="1"] a,
html body .fm-notices.fm-notices [data-rich="1"] a{color:inherit;font-weight:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;overflow-wrap:anywhere}
html body .fm-notice.fm-notice[data-rich="1"] a:hover,
html body .fm-notices.fm-notices [data-rich="1"] a:hover{color:var(--fm-navy)}
html body .fm-notice.fm-notice[data-rich="1"] a:focus-visible,
html body .fm-notices.fm-notices [data-rich="1"] a:focus-visible{outline:2px solid var(--fm-navy);outline-offset:2px;border-radius:2px}
html body .fm-notice[data-rich="1"] ul,
html body .fm-notice[data-rich="1"] ol,
html body .fm-notices [data-rich="1"] ul,
html body .fm-notices [data-rich="1"] ol{display:block;margin:4px 0 6px;padding:0 0 0 20px;list-style-position:outside;font:inherit;color:inherit}
html body .fm-notice[data-rich="1"] ul,
html body .fm-notices [data-rich="1"] ul{list-style-type:disc}
html body .fm-notice[data-rich="1"] ol,
html body .fm-notices [data-rich="1"] ol{list-style-type:decimal}
html body .fm-notice[data-rich="1"] li,
html body .fm-notices [data-rich="1"] li{display:list-item;margin:0 0 2px;padding:0;font:inherit;color:inherit}
/* ---------------------------------------------------------------- small shared fixes (2026-09-20)
The hidden attribute always wins: the identity rules above set display on .btn, .tool-note and
friends with html-body specificity, which silently defeated [hidden]. A segmented control placed
inside an actions row (a format choice beside a button) keeps its own look: the actions-row button
rule now applies to the row's DIRECT children only. One house progress bar. */
html body [hidden]{display:none!important}
html body progress{appearance:none;-webkit-appearance:none;height:6px;width:160px;border:0;border-radius:6px;overflow:hidden;background:var(--fm-line);vertical-align:middle}
html body progress::-webkit-progress-bar{background:var(--fm-line)}
html body progress::-webkit-progress-value{background:var(--fm-navy)}
html body progress::-moz-progress-bar{background:var(--fm-navy)}
/* ---- moving between tools (2026-09-20) --------------------------------------------------------
Every tool is a page of its own, so a tab change is a navigation. Browsers that support cross-document
view transitions cross-fade the tool body while the site header holds still; the rest navigate exactly
as before. Nothing is prerendered (see fm-shell.js prefetch). Reduced motion: no transition at all. */
@view-transition { navigation: auto; }
header.fmnav { view-transition-name: fm-nav; }
::view-transition-group(fm-nav) { animation-duration: 0s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
}
/* ---- THE FIRST-PAINT HOLD (later list, design D 3; Phase 8, 2026-10-04) ------------------------
fm-site.js loads deferred, so its hold of the tool frame's room above the title (fm-shell-early) starts after the first
paint: a frame or more (about seven on a slow link, one on a fast one) showed the title at the top, then 150px lower.
This sheet blocks rendering, so it holds design D's room (179px, 175px on a phone: fm-shell-d.css) from the first paint on
every page that loads the share module in its head (the tool pages; home.html and creator.html opt out with
data-fm-site-page), until the frame is in (fm-shell-pending, fm-shell-on), fm-site.js's own hold takes over
(fm-shell-early, !important), or no frame comes (fm-shell-off: an embed, a site page, a page the catalog does not
frame, fm-site.js and fm-shell.js) or the design is the legacy one (fm-legacy). */
html:has(> head > script[src$="assets/fm-share.js"]):not([data-fm-site-page]):not(.fm-legacy):not(.fm-shell-off):not(.fm-shell-pending):not(.fm-shell-on) body .wrap:has(> h1.page-title){padding-top:179px}
@media (max-width:700px){
html:has(> head > script[src$="assets/fm-share.js"]):not([data-fm-site-page]):not(.fm-legacy):not(.fm-shell-off):not(.fm-shell-pending):not(.fm-shell-on) body .wrap:has(> h1.page-title){padding-top:175px}
}
/* ---- badges (2026-09-22): the small marks beside a tool's name; drawn by FmSite.badges from the catalog ---- */
html body .fm-badge{display:inline-flex;align-items:center;flex:none;height:16px;line-height:1;vertical-align:middle;margin-left:6px;
font-family:var(--fm-font);font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
html body .fm-badge--text{padding:0 6px;border-radius:999px;color:#fff;background:var(--fm-navy)}
html body .fm-badge--text[data-tone="red"]{background:var(--fm-red)}
html body .fm-badge--text[data-tone="green"]{background:var(--fm-green)}
html body .fm-badge--text[data-tone="gold"]{background:var(--fm-gold);color:var(--fm-navy-deep)}
html body .fm-badge--text[data-tone="gray"]{background:var(--fm-mute)}
html body .fm-badge--glyph{font-size:13px;letter-spacing:0;text-transform:none;font-weight:400}
html body img.fm-badge--image{height:14px;width:auto;max-width:72px}
html body .fm-badge + .fm-badge{margin-left:4px}
/* ---- the "older version" note (2026-09-25): a blue-tinted line under a tool's status pointing at the page it replaces on fminvest.com ---- */
html body .fm-legacy-note{margin:0 0 14px;padding:10px 14px;border-radius:var(--fm-radius-sm);background:var(--fm-ice);
border:1px solid color-mix(in srgb,var(--fm-navy) 14%,var(--fm-panel));color:var(--fm-navy-deep);font-size:13.5px;line-height:1.45}
html body .fm-legacy-note a{color:var(--fm-navy);font-weight:700;text-underline-offset:2px}
html body .fm-legacy-note a:hover{color:var(--fm-navy-deep)}
/* Phase 5: nav */
/* ---------------------------------------------------------------- the site nav, the utility bar and the site footer
(2026-10-03, plan 1e 2, 3, 4 and 7; drawn by assets/fm-nav.js and assets/fm-footer.js). The live fminvest.com nav's
submenus (Who We Are, Investments) are buttons in the authored menu's own look, with the live theme's filled red
caret that turns over while the menu is open; the panels rise in as the live ones do. The utility bar is the thin
navy band above the header. The site footer mirrors the live footer (deep navy, white links). Tokens only. */
/* THE HEADER BOX (2026-10-23, IT's fminvest.com nav reference, docs/fminvest-nav-reference.html): white with the live
header's faint shadow and no rule; the fminvest.com logo at 81x47 (web/fm-logo.svg); the nav pushed right, its items
16px bold navy with no colour change on hover (the caret turns over instead); side padding 12px, 40px from 992px and
82px from 1200px, the utility bar's too so the two edges line up; the content capped at 1276px from 1400px. These
override the pages' own older inline .fmnav rules (height 64px, max 1140px, 15px links), so the first paint, before
fm-nav.js, already has the new look. */
html body header.fmnav{background:#fff;border-bottom:0;box-shadow:0 1px 20px color-mix(in srgb,var(--fm-navy-deep) 4%,transparent);position:sticky;top:0;z-index:30}
html body header.fmnav .in{max-width:none;height:auto;margin:0 auto;padding:8px 12px;display:flex;align-items:center;
justify-content:space-between;gap:0}
html body header.fmnav .logo{display:block;flex:0 0 auto;line-height:0;font-style:normal;letter-spacing:0}
html body header.fmnav .logo img{display:block;width:81px!important;height:47px!important}
html body header.fmnav .sp{display:none}
html body header.fmnav .menu{margin-left:auto;display:flex;align-items:center;gap:0 1.25rem}
html body header.fmnav .menu > a,html body header.fmnav .menu .fmn-sub-btn{padding:.5rem;color:var(--fm-navy);font-size:16px;font-weight:700;
line-height:1.625rem}
html body header.fmnav .menu > a:hover,html body header.fmnav .menu .fmn-sub-btn:hover{color:var(--fm-navy)}
html body header.fmnav .fmn-right{margin-left:1.25rem}
@media (max-width:991.98px){html body header.fmnav .menu{display:none}html body header.fmnav .fmn-right{margin-left:auto}}
@media (min-width:992px){
html body header.fmnav .in{padding:8.5px 40px}
html body .fmn-util .fmn-util-in{padding-left:40px;padding-right:40px}
}
@media (min-width:1200px){
html body header.fmnav .in{padding-left:82px;padding-right:82px}
html body .fmn-util .fmn-util-in{padding-left:82px;padding-right:82px}
html body header.fmnav .menu{column-gap:2rem}
html body header.fmnav .fmn-right{margin-left:2rem}
}
@media (min-width:1400px){
html body header.fmnav .in,html body .fmn-util .fmn-util-in{max-width:1440px}
html body header.fmnav .menu{column-gap:3.75rem}
html body header.fmnav .fmn-right{margin-left:3.75rem}
}
header[data-fmnav="1"] .fmn-sub{position:relative;display:inline-flex;align-items:center}
header[data-fmnav="1"] .fmn-sub-btn{appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;padding:0;cursor:pointer;
display:inline-flex;align-items:center;color:var(--fm-navy);font-family:var(--fm-font);font-size:16px;font-weight:700;line-height:1.625rem;white-space:nowrap}
header[data-fmnav="1"] .fmn-sub-btn:focus-visible{outline:2px solid var(--fm-flame);outline-offset:3px;border-radius:3px}
header[data-fmnav="1"] .fmn-menu .fmn-car svg{transition:transform .3s ease}
header[data-fmnav="1"] .fmn-sub.is-open .fmn-car svg{transform:rotate(180deg)}
header[data-fmnav="1"] .fmn-menu .fmn-sub-panel{min-width:236px}
html body header[data-fmnav="1"] .fmn-menu .fmn-panel{animation:fmn-p5-rise .3s cubic-bezier(.4,0,.2,1)}
@keyframes fmn-p5-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* a tool that needs sign-in for this visitor: the lock sits at the row's end, said aloud by its hidden text */
header[data-fmnav="1"] .fmn-panel a.fmn-item .fmn-lock{margin-left:auto;display:inline-flex;align-items:center;color:var(--fm-mute-text)}
header[data-fmnav="1"] .fmn-panel a.fmn-item--locked .fmn-item-text{color:var(--fm-navy)}
/* the signed-in name from the first paint (fm-nav.js 3.): the pages author no Contact pill now (Contact Us is in the
utility bar); a host whose header still carries one hides it while the last whoami is remembered */
html[data-fmn-known="in"] header.fmnav .contact,html[data-fmn-known="in"] header.nav .cta,html[data-fmn-known="in"] header .fmauth{display:none!important}
/* the authored menu before fm-nav.js rebuilds it, and without JavaScript: the live nav's filled red caret, drawn here
in the rebuilt menu's size, so the first paint and the hydrated nav look alike */
html body header.fmnav:not([data-fmnav="1"]) .menu .car{display:inline-block;width:0;height:0;margin-left:0;vertical-align:1px;overflow:hidden;
font-size:0;line-height:0;color:transparent;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--fm-red)}
html body header.fmnav:not([data-fmnav="1"]) .menu .car svg{display:none}
/* the utility bar: AUTHORED in every page just before the header (fm-nav.js adopts it, or draws it on a host without
one), so it is in the first paint and nothing moves when the script arrives. Hidden inside an embed (fm-site.js marks
html[data-fm-embedded]: a deck slide's frame shows the page, not the site's bar), under IT's estate bar, in print. */
html body .fmn-util{background:var(--fm-oxford);color:#fff;font-family:var(--fm-font);font-size:13px;line-height:1.3} /* Oxford blue (Chris, 2026-10-06) */
html[data-fm-embedded] body .fmn-util,html[data-fm-chrome="estate"] body .fmn-util{display:none}
/* the investor-type control and Contact Us both sit at the right, the control first (Chris, 2026-10-06: "right justify",
"move so next to Contact Us"); the authored markup keeps the control before the link */
html body .fmn-util-in{max-width:none;margin:0 auto;padding:0 12px;min-height:34px;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end;gap:28px}
html body .fmn-util-type{display:flex;align-items:center;min-width:0}
html body .fmn-util-in > a{color:#fff;text-decoration:none;font-weight:600;white-space:nowrap;padding:8px 0;margin-left:0}
html body .fmn-util-in > a.fmn-util-cookies + a{margin-left:20px} /* IT's: a Cookie settings link before Contact Us (fm-nav.js no longer draws it, 6068270) */
html body .fmn-util-in > a:hover,html body .fmn-util-in > a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}
html body .fmn-util-in > a:focus-visible,html body .fmn-ut-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:3px}
/* the type menu's rows, in the header menus' look (fm-nav.css scopes those to the header; the bar sits above it) */
html body .fmn-util .fmn-panel a.fmn-item{display:flex;align-items:center;gap:10px;box-sizing:border-box;padding:9px 12px;border-radius:var(--fm-radius-sm);
color:var(--fm-navy);font-size:14.5px;font-weight:600;line-height:1.3;text-decoration:none;white-space:nowrap;outline:none;
transition:background-color .12s ease,color .12s ease}
html body .fmn-util .fmn-panel a.fmn-item:hover,html body .fmn-util .fmn-panel a.fmn-item:focus{background:var(--fm-ice);color:var(--fm-navy)}
html body .fmn-util .fmn-panel a.fmn-item:focus-visible{box-shadow:inset 0 0 0 2px var(--fm-navy)}
html body .fmn-ut{position:relative;display:inline-flex;align-items:center}
html body .fmn-ut-btn{appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;padding:8px 0;cursor:pointer;color:#fff;
font-family:var(--fm-font);font-size:13px;font-weight:500;line-height:1.3;text-align:left;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
html body .fmn-ut-btn b{font-weight:700}
html body .fmn-ut-btn .fmn-car{display:inline-flex;color:#fff}
html body .fmn-ut-btn .fmn-car svg{transition:transform .3s ease}
html body .fmn-ut.is-open .fmn-car svg{transform:rotate(180deg)}
html body .fmn-ut-panel{left:auto;right:-8px;top:calc(100% + 4px);min-width:288px;color:var(--fm-navy-deep)} /* opens from the bar's right edge */
html body .fmn-ut-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 4px 12px;color:var(--fm-mute-text);
font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
html body .fmn-ut-x,html body .fmn-ut-x:hover{color:var(--fm-mute-text)}
html body .fmn-ut-x:hover{background:var(--fm-ice);color:var(--fm-navy)}
html body .fmn-util .fmn-ut-panel a.fmn-item.is-current{background:var(--fm-row);font-weight:700}
html body .fmn-ut-check{margin-left:auto;color:var(--fm-navy)}
html body .fmn-ut-hint{padding:6px 12px 6px;white-space:normal;max-width:300px}
@media (max-width:480px){html body .fmn-ut-btn{white-space:normal}html body .fmn-util-in{gap:12px}}
/* under 992px fm-nav.css draws the full-screen menu; the type menu opens across the bar */
@media (max-width:991.98px){
html body .fmn-ut-panel{position:fixed;left:12px;right:12px;top:40px;min-width:0}
}
/* the site footer: mirrors the live fminvest.com footer (Chris, 2026-10-06: "the footer should match the main site's
footer"); always the last thing on the page. Two bands, as the live footer has: the dark band (its footer__main: the
line-triangles graphic at the right, the brand mark and copyright top left, the Footer menu in two columns top right,
the Footer Legal menu in one row bottom left, the social icons bottom right) and under it the light band (its
footer__info) that holds a page's disclosures when the page marks a block for it (fm-footer.js, data-fm-footer-info:
the landing's "Important disclosures"). The copy sizes are the live footer's (16px links, a 12px copyright). */
html body footer.fm-site-footer{margin:0;padding:0;border:0;border-top:1px solid var(--fm-head-line);background:var(--fm-navy-deep);
color:#fff;font-family:var(--fm-font);font-size:16px;line-height:1.5}
html body footer.fm-site-footer .fm-site-footer-main{padding:72px 0 64px;background:var(--fm-navy-deep) url("footer-bg-triangles.svg") no-repeat right center/cover}
html body footer.fm-site-footer .fm-site-footer-in{max-width:1140px;margin:0 auto;padding:0 22px;box-sizing:border-box;display:grid;
grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand menu" "legal social";gap:56px 64px;align-items:end}
/* the content's width follows the page container's and the utility bar's: 1140px, 1320px from a 1400px window (Phase 8) */
@media (min-width:1400px){html body footer.fm-site-footer .fm-site-footer-in{max-width:1320px}}
html body footer.fm-site-footer .fm-site-footer-brand{grid-area:brand;align-self:start;display:flex;flex-direction:column;gap:28px;min-width:0}
html body footer.fm-site-footer .fm-site-footer-logo{display:inline-block;width:max-content}
html body footer.fm-site-footer .fm-site-footer-logo img{display:block;height:34px;width:auto}
html body footer.fm-site-footer p.fm-site-footer-copy{margin:0;max-width:none;color:#fff;font-size:12px;line-height:1.35}
html body footer.fm-site-footer .fm-site-footer-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html body footer.fm-site-footer .fm-site-footer-nav{grid-area:menu;justify-self:end;align-self:start;min-width:0}
html body footer.fm-site-footer .fm-site-footer-nav.is-legal{grid-area:legal;justify-self:start;align-self:end}
html body footer.fm-site-footer ul.fm-site-footer-list{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);gap:20px 126px}
html body footer.fm-site-footer .is-legal ul.fm-site-footer-list{display:flex;flex-wrap:wrap;gap:14px 44px}
html body footer.fm-site-footer li{margin:0;padding:0}
html body footer.fm-site-footer a{color:#fff;text-decoration:none;font-weight:600;transition:color .3s ease}
html body footer.fm-site-footer a:hover{color:var(--fm-electric);text-decoration:underline;text-underline-offset:3px}
html body footer.fm-site-footer a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
/* the social icons (X, LinkedIn, Instagram: the live footer's accounts), drawn as inline SVG in the current color */
html body footer.fm-site-footer ul.fm-site-footer-social{grid-area:social;justify-self:end;align-self:end;list-style:none;margin:0;padding:0;display:flex;gap:46px;align-items:flex-end}
html body footer.fm-site-footer .fm-site-footer-social a{display:inline-flex;color:#fff}
html body footer.fm-site-footer .fm-site-footer-social a:hover{color:var(--fm-electric);text-decoration:none}
html body footer.fm-site-footer .fm-site-footer-social svg{display:block;width:24px;height:24px;fill:currentColor}
/* the light band under it: a page's own disclosures block keeps its own styling (the landing's .site-notes) */
html body footer.fm-site-footer .fm-site-footer-info{background:var(--fm-panel);color:var(--fm-ink-soft);font-size:16px;line-height:1.5}
/* a page's disclosures block for that band (section.site-notes, marked data-fm-footer-info: the landing's "Important
disclosures" and the Methods & Data reference's "Attributions & disclosures"); it is styled the same where it is
authored, so a page without JavaScript shows it as the same light band at the foot of the page */
html body .site-notes{background:var(--fm-panel);color:var(--fm-ink-soft);font-size:1rem;line-height:1.5;padding:40px 0 56px;margin-top:0}
html body .site-notes h4{color:var(--fm-navy);font-size:.8rem;margin:0 0 10px;text-transform:uppercase;letter-spacing:.1em}
html body .site-notes p{margin:0 0 12px;max-width:none}
html body .site-notes .legal{border-top:1px solid var(--fm-line);margin-top:18px;padding-top:18px}
html body .site-notes a{color:var(--fm-navy)}
html body .site-notes .tool-note{font-size:inherit;color:inherit;max-width:none;margin:0 0 12px}
@media (max-width:700px){
html body footer.fm-site-footer .fm-site-footer-main{padding:40px 0 48px;background-size:auto 100%}
html body footer.fm-site-footer .fm-site-footer-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "menu" "legal" "social";gap:28px;padding:0 16px;align-items:start}
html body footer.fm-site-footer .fm-site-footer-nav,html body footer.fm-site-footer .fm-site-footer-nav.is-legal,
html body footer.fm-site-footer ul.fm-site-footer-social{justify-self:start;align-self:start}
html body footer.fm-site-footer ul.fm-site-footer-list{grid-auto-flow:row;grid-template-rows:none;gap:14px}
html body footer.fm-site-footer .is-legal ul.fm-site-footer-list{flex-direction:column;gap:14px}
html body footer.fm-site-footer ul.fm-site-footer-social{gap:32px}
html body .site-notes{padding:28px 0 40px;font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
html body header[data-fmnav="1"] .fmn-menu .fmn-panel{animation:none}
header[data-fmnav="1"] .fmn-menu .fmn-car svg,html body .fmn-ut-btn .fmn-car svg,html body footer.fm-site-footer a,
html body .fmn-util .fmn-panel a.fmn-item{transition:none}
}
/* print leaves out the bar and the footer's dark band, never a page's disclosures: a footer that hosts a page's
disclosures block (fm-footer.js footer.has-info) prints that light band alone */
@media print{
html body .fmn-util,html body footer.fm-site-footer:not(.has-info),html body footer.fm-site-footer .fm-site-footer-main{display:none!important}
html body footer.fm-site-footer.has-info{border:0;background:none}
}
/* Phase 5: landing (2026-10-03; next version 1e 6, 1b-A 12 and Alex's launch-mix decision; the review of 2026-10-06 took
the rates strip away, and decision 13 of 2026-10-08 the Sign in buttons on locked tiles and rows). The landing page
(index.html, drawn by assets/fm-landing.js) takes its colors from the --fm-* tokens of this file; these rules dress the
parts Phase 5 added: the featured cards, the signed-out account call (the landing's one Sign in block), and a locked
tool's padlock button. The tool pages' "Create an account" (fm-shell.js) is a rail button (.fm-d-act) and keeps its
words on a phone, where the other rail buttons keep only their icons. */
/* the room the landing holds from the first paint (Phase 8, 2026-10-04; the first load's layout shift was 0.70 to 0.94):
the account call, and the featured area at least a screen tall, so the directory starts below the fold until the cards
are in (the ticker's room is fm-landing.css's .fl-tape.is-loading) */
html body .fl-account.is-loading{visibility:hidden;min-height:62px}
/* ... but not for a visitor the nav remembers as signed in (fm-nav.js data-fmn-known): the call is for signed-out visitors */
html[data-fmn-known="in"] body .fl-account.is-loading{display:none}
html body .fl-featured:has(> .fl-loading){min-height:100vh}
/* ... and the directory waits for the featured area (the review of 2026-10-06): it is drawn in the same step, so it
arrives as new content under whichever layout draws, never as a block that moves. Without the rates strip above them
the cards end short of a 1000px screen at 1400px, and a directory held under a screen-tall area moved up into view
(a shift of 0.084; Spotlight fills the screen and did not). A featured area left hidden (no tools to feature) does not
hold it back. */
html body .fl-featured:not([hidden]):has(> .fl-loading) ~ .fl-dir{display:none}
/* the featured cards: five across for five tools (fm-landing.js layoutCards sets --fl-n), three across under 1180px,
two on a phone, as the theme rails do */
html body .fl-cards{display:grid;gap:20px;grid-template-columns:repeat(var(--fl-n,5),minmax(0,1fr))}
html body .fl-cards .fl-title{font-size:1.04rem}
html body .fl-cards .fl-desc{font-size:.88rem;-webkit-line-clamp:3;line-clamp:3}
html body .fl-cards .fl-body{padding:15px 16px 17px;gap:9px}
/* a card's category tag fits its card at EVERY width: it may take two lines, never cut. Phase 8 (2026-10-04) wrapped it
on a phone only ("TREASURY SUPPL..." in a 147px card at 390px); Phase 9 moved the rule out of the phone block: five
cards in one row at 1400px cut "Treasury supply & money markets" with an ellipsis in a 239px card. Only the cards
layout (.fl-cards); the frontpage layout's tags (.fl-front, .fl-row) keep the one-line pill */
html body .fl-cards .fl-eyebrow{white-space:normal;align-items:flex-start;border-radius:10px;letter-spacing:.06em}
html body .fl-cards .fl-eyebrow span{overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
html body .fl-cards .fl-eyebrow::before{margin-top:3px}
/* the signed-out account call under the masthead line */
html body .fl-account{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:14px 0 0;padding:12px 16px;border-radius:12px;background:var(--fm-ice);
border:1px solid color-mix(in srgb,var(--fm-navy) 14%,var(--fm-panel))}
html body .fl-account-text{margin:0;flex:1 1 300px;font-size:.95rem;line-height:1.45;color:var(--fm-navy-deep)}
html body .fl-account-text b{color:var(--fm-navy);font-weight:700}
html body .fl-account-acts{display:flex;flex-wrap:wrap;gap:8px}
/* a locked tool's padlock (decision 13, 2026-10-08; fm-landing.js padlock): its only mark, on a card, a slide and a
directory row. Signed out it is a button ("Sign in to open ") that opens the sign-in overlay: a 24px target
around the 13px glyph, above a card's stretched link, in the padlock's own color (fm-landing.css .fl-lock: AA on white,
light on the dark slide), with the house focus ring. Signed in without the tool's group it is an image with a title
(approved accounts only), nothing to press: it too sits above the stretched link, so a pointer on it shows the title
and does not open the tile. */
html body .fl-lockbtn{appearance:none;-webkit-appearance:none;position:relative;z-index:3;justify-content:center;box-sizing:border-box;
width:24px;height:24px;margin:0;padding:0;border:0;border-radius:50%;background:none;font:inherit;cursor:pointer}
html body .fl-lockbtn:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
html body .fl-lockbtn:focus-visible{outline:2px solid var(--fm-electric);outline-offset:1px}
html body .fl-lock.fl-locked:not(button){position:relative;z-index:3;cursor:help}
/* the directory's Access column holds the padlock alone, a free preview's badge, staff's "Hidden" badge, or nothing for
an open tool (fm-landing.js accessCell). Above the phone list it gets a fixed width that fits the longest of them
("Free preview") at every width, and the Tool column takes what is left; a longer badge or a larger font wraps inside
the cell, never past it (the table's wrapper would scroll sideways and cut the words off) */
@media (min-width:721px){
html body .fl-table th.c-tool{width:auto}
html body .fl-table th.c-acc{width:8rem}
html body .fl-table td.c-acc .fl-badge{max-width:100%;white-space:normal;text-align:left}
}
@media (max-width:1180px){html body .fl-cards,html body .fl-cards[data-n]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){html body .fl-cards,html body .fl-cards[data-n]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
html body .fl-cards,html body .fl-cards[data-n]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html body .fl-cards .fl-body{padding:12px 12px 14px;gap:7px}
html body .fl-cards .fl-title{font-size:.98rem}
html body .fl-cards .fl-desc{font-size:.84rem}
html body .fl-cards .fl-cta.is-quiet{padding:6px 10px;font-size:.8rem}
/* (the two-line category tag rule applies at every width since Phase 9: see the .fl-cards block above) */
html body .fl-account{padding:10px 12px;gap:8px 16px}
html body .fl-account.is-loading{min-height:108px}
html body .fl-account-text{font-size:.9rem}
html.fm-d .fm-d-act[data-d="account"] .fm-d-lb{display:inline}
}