/* FluxFront — /features hero + sticky feature subnav (.fhero, .fsubnav). Scroll-spy in js/modules/features-subnav.js. */
/* ===================== FEATURES HERO ===================== */
.fhero { padding-top: clamp(40px, 6vw, 88px); }
.fhero .h1 { margin-top: 16px; max-width: 18ch; }
.fhero .lead { margin-top: 18px; max-width: 56ch; }
.fhero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; margin-bottom: clamp(28px, 4vw, 48px); }
.fsubnav { position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.fsubnav-in { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; -webkit-overflow-scrolling: touch; }
.fsubnav-in::-webkit-scrollbar { display: none; }
.fsubnav-in a { flex: none; padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: background var(--d-2), color var(--d-2); }
.fsubnav-in a:hover { color: var(--ink); background: rgb(var(--paper-shadow) / 0.05); }
.fsubnav-in a.active { color: var(--teal-800); background: var(--teal-wash); }
/* anchor offset for the sticky subnav is the shared main > section[id] rule in base.css (84px) */