#fhero { padding-top: calc(var(--nav) + 64px); padding-bottom: 54px; position: relative; overflow: hidden; }
         /* hero stat strip */
         .fstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
         @media (max-width: 767px) { .fstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
         .fstat { background: #6366f1; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 18px 16px; }
         .fstat b { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; }
         .fstat span { display: block; font-size: .76rem; font-weight: 600; color: rgba(255,255,255,.75); margin-top: 7px; line-height: 1.45; }
         /* sticky in-page jump nav */
         #fjump { position: sticky; top: var(--nav); z-index: 900; background: var(--bg2);
                  border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
         #fjump .inner { display: flex; gap: 6px; overflow-x: auto; padding: 11px 0; scrollbar-width: none; }
         #fjump .inner::-webkit-scrollbar { display: none; }
         #fjump a { flex: none; font-size: .78rem; font-weight: 600; color: var(--tx2);
                    padding: 6px 13px; border-radius: 100px; background: var(--sf);
                    border: 1px solid var(--bd2); transition: .2s; white-space: nowrap; }
         #fjump a:hover { color: #fff; background: var(--grad); border-color: transparent; }
         #fjump a.on { color: #fff; background: var(--grad); }
         /* numbered section heading */
         .fnum { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
                 border-radius: 9px; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.22);
                 color: var(--pur); font-size: .76rem; font-weight: 800; margin-right: 12px; flex: none; }
         .fhead { display: flex; align-items: center; margin-bottom: 12px; }
         .fhead h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; margin: 0; }
         .flead { font-size: 1rem; color: var(--tx2); max-width: 720px; line-height: 1.7; margin-bottom: 34px; }
         /* spec list - the dense "what it actually does" bullets */
         .fspec { list-style: none; padding: 0; margin: 0; }
         .fspec li { position: relative; padding-left: 26px; font-size: .875rem; color: var(--tx2);
                     line-height: 1.65; margin-bottom: 11px; }
         .fspec li::before { content: "\f00c"; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome"; font-weight: 900;
                             position: absolute; left: 0; top: 1px; font-size: .7rem; color: var(--pur); }
         .fspec li b, .fspec li strong { color: var(--tx); font-weight: 600; }
         /* key-value spec rows */
         .frow { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--bd); font-size: .85rem; }
         .frow:last-child { border-bottom: 0; }
         .frow dt { flex: 0 0 148px; color: var(--tx3); font-weight: 600; margin: 0; }
         .frow dd { flex: 1; color: var(--tx2); margin: 0; line-height: 1.6; }
         @media (max-width: 575px) { .frow { flex-direction: column; gap: 3px; } .frow dt { flex: none; } }
         /* coverage table */
         .fcov { width: 100%; border-collapse: collapse; font-size: .84rem; }
         .fcov th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
                    color: var(--tx3); font-weight: 700; padding: 0 12px 12px; border-bottom: 1px solid var(--bd); }
         .fcov td { padding: 10px 12px; border-bottom: 1px solid var(--bd); color: var(--tx2); vertical-align: top; }
         .fcov tr:last-child td { border-bottom: 0; }
         .fcov td:first-child { color: var(--tx); font-weight: 600; }
         .fcov td:last-child { text-align: right; color: var(--pur); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
         .fcovwrap { overflow-x: auto; }
         /* pipeline strip */
         .fpipe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
         @media (max-width: 991px) { .fpipe { grid-template-columns: repeat(3, 1fr); } }
         @media (max-width: 575px) { .fpipe { grid-template-columns: repeat(2, 1fr); } }
         .fpipe div { background: rgba(139,92,246,.10); border: 1.5px solid rgba(139,92,246,.45);
                      border-radius: 16px; padding: 16px 12px; text-align: center; }
         .fpipe i { display: block; font-size: 1.65rem; color: var(--pur); margin-bottom: 10px; }
         .fpipe span { display: block; font-size: 1.05rem; font-weight: 800; color: var(--pur); margin-bottom: 5px; }
         .fpipe strong { font-size: .84rem; font-weight: 600; color: var(--tx); }
         /* small mono chips for formats / values */
         .fchip { display: inline-block; padding: 3px 9px; margin: 0 5px 6px 0; border-radius: 7px;
                  font-size: .74rem; font-weight: 600; color: var(--tx2);
                  background: var(--bg3); border: 1px solid var(--bd); }
         /* code block */
         .fcode { background: var(--bg3); border: 1px solid var(--bd); border-radius: 12px; padding: 16px 18px;
                  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem;
                  color: var(--tx2); line-height: 1.75; overflow-x: auto; white-space: pre; }
         .fcode .c { color: var(--tx3); }
         .fcode .k { color: #a78bfa; }
         /* callout */
         .fnote { background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.18);
                  border-radius: 14px; padding: 18px 20px; font-size: .85rem; color: var(--tx2); line-height: 1.7; }
         .fnote b { color: var(--tx); }
         .docslink { margin: 22px 0 0; font-size: .85rem; }
         .docslink a { color: var(--pur); font-weight: 600; text-decoration: none;
                       display: inline-flex; align-items: center; gap: 7px; }
         .docslink a:hover { text-decoration: underline; }

         /* mid-page conversion band */
         .fcta { padding: 34px 24px; text-align: center; border: 1px solid var(--bd); border-radius: 16px; background: var(--bg2); }
         .fcta-t { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
         .fcta-p { font-size: .95rem; color: var(--tx2); max-width: 560px; margin: 0 auto 22px; }

         /* in-section anchor (e.g. #production-safe): land clear of the sticky nav + jump bar */
         .fsub { scroll-margin-top: calc(var(--nav, 68px) + 90px); }
         /* jump-nav targets: on phones .sp padding drops to 48px, less than the ~57px sticky
            jump bar, so headings landed under it; the extra 32px leaves ~23px of clearance */
         @media (max-width: 767px) {
            #fjump ~ section[id] { scroll-margin-top: calc(var(--nav, 68px) + 32px); }
         }