/* Hub furniture transcribed from 41-MASTER-nav-and-hubs. Scoped to hub content;
   existing navigation uses its separately approved 35-navigation source. */
.ffh{
 --red:#e8312a;--red-link:#ff5a52;--red-btn:#d62828;
 --bg:#111113;--s:#1a1a1d;--s2:#222226;--b:#2e2e33;
 --text:#f0f0f2;--dim:#c0c0cc;--muted:#8b8b9d;
 --fd:FFDealsCondensed,sans-serif;--fb:FFDealsBarlow,sans-serif;--fh:FFDealsBebas,sans-serif;
 --tap:44px;--gutter:16px;--fs-badge:9.5px;--fs-micro:11px;
 --fs-sub:12px;--fs-body:13.5px;--fs-item:15px;--fs-row:14px;
 --fs-h1:36px;--fs-h1-lg:44px;--fs-h2:22px;--fs-card:16px;--fs-input:16px;
 width:100%;background:var(--bg);color:var(--text);font-family:var(--fb);font-size:var(--fs-item);font-weight:400;line-height:1.55;padding-bottom:34px;
}
.ffh *{box-sizing:border-box}
.ffh :where(h1,h2,h3,p,form){margin:0;padding:0}
.ffh a{color:inherit;text-decoration:none;font-weight:inherit}
.ffh a:focus-visible,.ffh button:focus-visible,.ffh input:focus-visible{outline:2px solid var(--red-link);outline-offset:2px;border-radius:8px}
.ffh-wrap{width:100%;max-width:1080px;margin:auto;padding:0 var(--gutter)}
.ffh-crumb{font-size:var(--fs-micro);color:var(--muted);padding-top:12px}
.ffh-crumb a:hover{color:var(--text)}
.ffh-hero{padding:14px 0 2px}
.ffh-kick{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;color:var(--red-link);font-weight:800}
.ffh h1{font-family:var(--fh);font-size:var(--fs-h1);line-height:1;margin:8px 0;font-weight:400;letter-spacing:.01em;color:var(--text)}
.ffh h2{font-family:var(--fd);font-size:var(--fs-h2);font-weight:800;letter-spacing:.01em;line-height:inherit;color:var(--text)}
.ffh-lead{max-width:64ch;color:var(--dim);font-size:var(--fs-item);line-height:1.6;text-wrap:pretty}
.ffh-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ffh .ffh-btn{min-height:var(--tap);padding:0 15px;border-radius:10px;border:1px solid var(--b);background:var(--s2);display:inline-flex;align-items:center;gap:7px;justify-content:center;font-size:var(--fs-body);font-weight:700}
.ffh .ffh-btn:hover{border-color:rgba(232,49,42,.4)}
.ffh .ffh-primary{background:var(--red-btn);border-color:var(--red-btn);color:#fff}
.ffh-primary:hover{filter:brightness(1.08)}
.ffh-search{margin-top:14px!important;display:flex;align-items:center;gap:9px;background:var(--s);border:1px solid var(--b);border-radius:11px;padding:0 13px!important;height:50px}
.ffh-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;color:var(--muted)}
.ffh-search input[type=search]{flex:1;width:100%;min-width:0;border:0;background:none;color:var(--text);outline:0;font-family:inherit;font-size:var(--fs-input);padding:0;line-height:normal;box-shadow:none}
.ffh-search input::placeholder{color:#5c5c6b;opacity:1}
.ffh-section{padding-top:28px;scroll-margin-top:85px}
.ffh-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:11px;flex-wrap:wrap}
.ffh-sub{font-size:var(--fs-sub);color:var(--muted);margin-top:3px!important;max-width:60ch;text-wrap:pretty}
.ffh .ffh-link{font-size:var(--fs-body);color:var(--red-link);font-weight:700;white-space:nowrap}
.ffh-link:hover{text-decoration:underline}
.ffh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ffh-card{display:block;background:var(--s);border:1px solid var(--b);border-radius:12px;padding:13px;min-width:0}
.ffh a.ffh-card:hover{border-color:rgba(232,49,42,.4)}
.ffh-ey{font-size:var(--fs-micro);color:var(--red-link);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.ffh .ffh-card-title{display:block;font-family:var(--fd);font-size:var(--fs-card);font-weight:800;line-height:1.2;margin-top:3px;overflow-wrap:anywhere;color:var(--text)}
.ffh-card p{font-size:var(--fs-micro);color:var(--muted);line-height:1.5;margin-top:5px}
.ffh-meta{display:block;font-size:var(--fs-micro);color:var(--muted);margin-top:9px}
.ffh-list{display:grid;gap:8px;margin-top:10px}
.ffh-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--s);border:1px solid var(--b);border-radius:11px;padding:12px 13px}
.ffh a.ffh-item:hover{border-color:rgba(232,49,42,.4)}
.ffh-item-title{display:block;font-size:var(--fs-row);font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.ffh-item-sub{display:block;color:var(--muted);font-size:var(--fs-micro);margin-top:3px;line-height:1.45}
.ffh-right{text-align:right;flex:0 0 auto}
.ffh-score{display:inline-block;font-size:var(--fs-badge);font-weight:800;border-radius:6px;padding:3px 7px;white-space:nowrap;background:rgba(74,158,255,.12);border:1px solid rgba(74,158,255,.28);color:#bedbff}
.ffh-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;scroll-margin-top:85px}
.ffh-filters::-webkit-scrollbar{display:none}
.ffh .ffh-chip{white-space:nowrap;min-height:38px;padding:0 13px;display:flex;align-items:center;border:1px solid var(--b);background:var(--s2);border-radius:99px;color:var(--dim);font-size:var(--fs-sub);font-weight:600}
.ffh .ffh-chip[aria-current=true]{border-color:var(--red);color:var(--red-link);background:rgba(232,49,42,.08)}
.ffh-pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px}
.ffh-page{min-width:var(--tap);min-height:var(--tap);padding:0 12px;border:1px solid var(--b);background:var(--s2);border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-body);font-weight:700;font-variant-numeric:tabular-nums}
.ffh-page[aria-current=page]{background:var(--red-btn);border-color:var(--red-btn);color:#fff}
.ffh-notice{margin-top:16px;padding:12px 14px;border-radius:11px;background:rgba(74,158,255,.055);border:1px solid rgba(74,158,255,.22);font-size:var(--fs-sub);color:#b9cfe9;line-height:1.65;text-wrap:pretty}
.ffh-notice b{color:var(--text)}
.ffh-notice.ffh-warn{background:rgba(245,197,24,.05);border-color:rgba(245,197,24,.22);color:#e3d9b4}
.ffh-empty{margin-top:10px;padding:13px;border:1px solid var(--b);border-radius:11px;background:var(--s)}
.ffh-empty h3{font:800 var(--fs-card)/1.2 var(--fd);color:var(--text)}
.ffh-empty p{font-size:var(--fs-sub);color:var(--muted);margin:8px 0 12px}
.ffh-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:760px){.ffh-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1000px){.ffh h1{font-size:var(--fs-h1-lg)}}
@media(prefers-contrast:more){.ffh-card,.ffh-item,.ffh-chip{border-color:var(--text)}}
@media(forced-colors:active){.ffh-score,.ffh-chip[aria-current=true],.ffh-page[aria-current=page]{border:2px solid Highlight}}
@media print{.ffh-search,.ffh-filters,.ffh-pager{display:none}.ffh-card,.ffh-item{break-inside:avoid}}
/* Additional Master components used by Compare and Learn. */
.ffh-library-grid{margin-top:10px}
.ffh-badge{display:inline-block;font-size:var(--fs-badge);font-weight:800;border-radius:6px;padding:3px 7px;white-space:nowrap}
.ffh-grey{background:var(--s2);border:1px solid var(--b);color:var(--muted)}
.ffh-yellow{background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.28);color:#f3dd8a}

/* Match the current homepage shell: 600px centered outer width, 16px gutters.
   Shared by Reviews, Compare, Learn and Programs; mobile rules stay unchanged. */
@media (min-width:768px){
 .ffh{--ff-page-content-max-width:600px}
 .ffh-wrap{max-width:var(--ff-page-content-max-width)}
}

/* Compare uses the existing two-column cards within the approved narrow body. */
@media(min-width:760px){#fitfrek-compare-hub .ffh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
