/* One responsive Bonfium header shared by the homepage and every app page.

   Transparent, edge-to-edge and square-cornered over the page at rest.
   Past 8px of scroll (navigation.js toggles .bf-nav-scrolled - no scroll
   library) or while the mobile drawer is open, it switches instantly into
   a floating liquid-glass pill: inset from the sides, fully rounded, the
   same translucent blurred fill as the hero's "See how it works" button.
   Deliberately no transition on this - it pops straight to the pill state
   the moment scrolling begins, both ways, nothing eased. */
.bf-nav-shell{
  --bf-nav-ink:var(--ink,#0E1417); --bf-nav-sub:var(--sub,#5C6B75); --bf-nav-line:var(--line,#E8ECEF);
  --bf-nav-soft:var(--paper-3,#F4F6F8); --bf-nav-teal:var(--teal,#00A38C);
  position:sticky;top:0;z-index:300;
  background:transparent;
  /* The gap above the floating pill comes from THIS padding, not a margin
     on .bf-nav - a margin on .bf-nav could collapse through this element
     (sticky doesn't block collapsing the way absolute/fixed do), which
     would shift the sticky box itself instead of opening up visible space
     above the pill. Padding never collapses, so this is the reliable way
     to get it. */
  padding:0;
  font-family:"Inter", sans-serif;
}
.bf-nav-shell.bf-nav-scrolled,.bf-nav-shell.bf-drawer-open{
  padding:10px 0 0;
}
.bf-nav-shell *{box-sizing:border-box}
/* The glass fill, blur and shadow live on .bf-nav (below) rather than on
   .bf-nav-shell itself. .bf-nav-drawer - position:fixed, inset:0, meant to
   cover the whole viewport - is a sibling of .bf-nav inside this header,
   not its descendant; putting backdrop-filter on an ANCESTOR of a fixed
   element makes that ancestor the fixed element's containing block (spec
   behaviour) and collapses inset:0 down to the ancestor's own small box
   instead of the viewport - which is exactly what broke the drawer before.
   Keeping the filter on .bf-nav sidesteps that permanently: it's never an
   ancestor of the drawer, in either state. */
.bf-nav{
  position:relative;z-index:2;
  max-width:1240px;min-height:68px;margin:0 auto;padding:0 clamp(16px,3.2vw,48px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;
  border-radius:0;
}
/* The pill's glass fill lives on ::before, not on .bf-nav itself. A
   backdrop-filter element becomes a "backdrop root": any descendant's
   OWN backdrop-filter is clipped to what's painted inside that root, not
   the real page behind it. .bf-nav-popover (the language/account/start-
   trade dropdowns) is a genuine DOM descendant of .bf-nav, so putting the
   blur on .bf-nav directly silently broke the popover's own frost the
   moment the nav scrolled into its pill state - it could only "see" the
   pill's own translucent fill, not the page behind. A pseudo-element
   paints as a plain box alongside .bf-nav's real children, never as their
   ancestor, so it can't clip anything nested deeper in the tree - the
   same reason the drawer (an actual sibling of .bf-nav, see below) was
   never affected by this. */
.bf-nav::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  /* Reproduced directly: after a fast scroll (several ticks in quick
     succession), this backdrop-filter can drop out entirely - the pill
     goes fully transparent, showing the vivid category tiles straight
     through with no blur at all, until some other repaint jars it back
     on. A known Chromium issue with backdrop-filter on a sticky ancestor's
     pseudo-element: its own compositing layer can get dropped mid-scroll
     and never recomposited. translateZ(0) forces this onto its own GPU
     layer permanently instead of letting the browser decide, which is the
     standard fix for exactly this failure mode. */
  transform:translateZ(0);
}
/* The pill itself. margin stays exactly 0 auto in both states - unchanged,
   never overridden - and max-width does the insetting instead of a fixed
   side margin. A fixed margin-left/right together with max-width capping
   the width below the container's is an over-constrained box (CSS 2.1
   10.3.3): the browser honours margin-left as given and silently
   recalculates margin-right to soak up whatever's left, which on any
   screen wider than ~1320px put the whole pill off-centre - correct-
   looking inset on the left, a huge gap on the right. margin:auto can't
   be over-constrained this way (it's exactly the value the algorithm
   solves for), so shrinking max-width instead keeps it centred at every
   width, same as .shell/main elsewhere on the site. */
.bf-nav-shell.bf-nav-scrolled .bf-nav,.bf-nav-shell.bf-drawer-open .bf-nav{
  max-width:min(1240px,calc(100% - clamp(24px,6vw,80px)));min-height:60px;border-radius:var(--r-full);
}
.bf-nav-shell.bf-nav-scrolled .bf-nav::before,.bf-nav-shell.bf-drawer-open .bf-nav::before{
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.12),
    0 10px 28px -14px rgba(15,21,25,.28);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
}
.bf-nav-logo{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none}
.bf-nav-logo svg{display:block;width:156px;height:auto}
.bf-nav-primary{min-width:0;display:flex;align-items:center;justify-content:center;gap:2px;overflow:hidden}
.bf-nav-primary>a{
  color:var(--bf-nav-ink);text-decoration:none;font-size:15px;font-weight:500;line-height:1.2;
  padding:11px 15px;border-radius:var(--r-full);white-space:nowrap;transition:background .14s,color .14s;
}
.bf-nav-primary>a:hover,.bf-nav-primary>a.bf-nav-active{color:var(--bf-nav-ink);background:var(--bf-nav-soft)}
.bf-nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0;flex:0 1 auto}
.bf-nav-menu{position:relative;display:inline-flex;min-width:0;flex:0 1 auto}
/* Icon-only chrome (language, account, burger) is plain now - no bordered
   white chip sitting on the bar, just an icon that gets a soft ground on
   hover/open. The one exception is .bf-nav-cta: the single primary button
   the bar is allowed, styled exactly like every other primary button. */
.bf-nav-icon,.bf-account-button,.bf-nav-burger{
  appearance:none;border:0;background:transparent;color:var(--bf-nav-ink);font:inherit;cursor:pointer;
}
.bf-nav-icon{height:40px;min-width:40px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-full)}
.bf-nav-icon>span{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--bf-nav-ink)}
.bf-account-button{
  height:40px;max-width:170px;padding:0 12px 0 14px;border-radius:var(--r-full);display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;white-space:nowrap;
}
.bf-account-button>span{overflow:hidden;text-overflow:ellipsis}
/* Was a plain "✓" text glyph - at this weight/size it read as a stray
   green V, not a checkmark. A proper icon now, colour set directly since
   nothing here still needs the old em wrapper's font-weight trick. */
.bf-nav-verified-ic{color:var(--bf-nav-teal);flex-shrink:0;vertical-align:-1px}
.bf-account-button:hover,.bf-nav-icon:hover,.bf-nav-menu.bf-open .bf-nav-icon,.bf-nav-menu.bf-open .bf-account-button{background:var(--bf-nav-soft)}
.bf-nav-login{padding:10px 8px;color:var(--bf-nav-ink);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.bf-nav-login:hover{text-decoration:underline}
/* The one primary button the bar carries. Same recipe as .btn.dark
   everywhere else: ink fill, --shadow-sm, darken on hover, no lift. */
.bf-nav-cta,.bf-nav-menu>button.bf-nav-cta{
  min-height:40px;padding:0 18px;border:0;border-radius:var(--r-full);background:var(--ink-fill,#0E1417);color:#fff;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(14,20,23,.04));display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:550 14px/1 "Inter", sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .14s;
}
.bf-nav-cta:hover{background:#000}
/* Dropdowns are one of the two places shadow is still allowed. */
.bf-nav-popover{
  position:absolute;right:0;top:calc(100% + 8px);z-index:330;display:none;min-width:220px;padding:8px;
  border:1px solid var(--bf-nav-line);border-radius:var(--r,14px);background:var(--paper,#fff);
  box-shadow:var(--shadow-md,0 4px 16px -8px rgba(14,20,23,.14));
}
.bf-nav-popover.bf-open{display:block;animation:bf-pop-in .1s cubic-bezier(.2,.7,.3,1) both}
@keyframes bf-pop-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bf-nav-popover.bf-open{animation:none}}
.bf-nav-popover a,.bf-nav-popover button{
  width:100%;border:0;background:none;color:var(--bf-nav-ink);font:600 13.5px/1.3 "Inter", sans-serif;text-align:left;
  text-decoration:none;padding:10px 11px;border-radius:var(--r,14px);cursor:pointer;display:block;
}
/* .bf-nav-row: the plain single-line links (Profile, Security, Admin…), which
   carry an icon and so need a horizontal layout. Left as a separate class
   rather than changed on .bf-nav-popover a itself, because the start-trade
   and language rows above are the same element with a stacked <b>+<span>
   title/subtitle instead — those need to stay display:block, or the two
   lines would sit side by side. */
.bf-nav-popover a.bf-nav-row,.bf-drawer-group a{display:flex;align-items:center;gap:11px}
/* Icons make a settings list read as a menu. Fixed width and a muted tint by
   default so the row's own text still carries the weight; the active/hover
   states below darken it along with the text, in step. */
.bf-nav-ic{flex:0 0 auto;color:var(--bf-nav-sub)}
.bf-nav-popover a:hover .bf-nav-ic,.bf-nav-popover a.bf-nav-active .bf-nav-ic,
.bf-drawer-group a:hover .bf-nav-ic,.bf-drawer-group a.bf-nav-active .bf-nav-ic{color:var(--bf-nav-ink)}
.bf-nav-popover a:hover,.bf-nav-popover button:hover,.bf-nav-popover a.bf-nav-active{background:var(--bf-nav-soft)}
.bf-nav-popover a>b,.bf-nav-popover a>span{display:block}
.bf-nav-popover a>span{margin-top:3px;color:var(--bf-nav-sub);font-size:11.5px;font-weight:500;line-height:1.45}
.bf-start-popover{min-width:276px}
.bf-language-popover{min-width:184px}
.bf-language-popover button{display:flex;align-items:center;gap:10px}
.bf-language-popover button b{min-width:22px;color:var(--bf-nav-sub);font-size:10.5px;letter-spacing:.05em}
.bf-language-popover button[aria-current=true]{background:var(--bf-nav-soft)}
/* Tap-outside and Escape already closed this panel (see navigation.js) -
   neither is an option once the panel is wide enough to feel like it owns
   the screen rather than sitting over it, which is exactly what happens
   on a phone: there's no visible "outside" left within easy reach, and a
   panel that only responds to a keyboard-only escape hatch has no
   equivalent for someone who can't see a keyboard at all. A real, visible
   close control fixes that regardless of how the panel was opened. Sized
   44x44 (a real touch target, not just the icon's own visual size) and
   shown only below the width where the popover starts reading as
   near-full-screen - a small anchored dropdown on desktop doesn't need it. */
.bf-nav-popover-close{display:none}
@media(max-width:640px){
  /* .bf-nav-popover .bf-nav-popover-close, not the bare class: the
     generic .bf-nav-popover button{width:100%;display:block;padding:10px
     11px} rule (every plain menu row's own base style) has higher
     specificity than a single class alone and was winning outright -
     this button was rendering as a full-width, top-LEFT-anchored block
     the same shape as every other row instead of a 44x44 square in the
     corner. Only caught by actually opening the popover and looking,
     same as the alt-btn bug earlier this pass - the computed styles
     showed width:218px and display:block long before it was obvious why. */
  .bf-nav-popover .bf-nav-popover-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:2px;right:2px;width:44px;height:44px;
    border:0;background:none;color:var(--bf-nav-ink);cursor:pointer;border-radius:var(--r-full);
    padding:0;
  }
  .bf-nav-popover .bf-nav-popover-close:hover{background:var(--bf-nav-soft)}
  /* The heading/rows already clear the top-left; padding-right keeps them
     clear of the 44px close control sitting over the top-right instead. */
  .bf-account-popover{padding-top:8px}
  .bf-account-heading{padding-right:48px}
}
.bf-account-heading{padding:7px 11px 10px;border-bottom:1px solid var(--bf-nav-line);margin-bottom:5px}
.bf-account-heading b,.bf-account-heading span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-account-heading b{font-size:13.5px}.bf-account-heading span{color:var(--bf-nav-sub);font-size:11px;margin-top:3px}
.bf-nav-popover-separator{height:1px;background:var(--bf-nav-line);margin:5px 2px}
/* Logging out is a POST, so it is a form. It must still read as a menu row. */
.bf-nav-logout,.bf-drawer-logout{margin:0}
.bf-nav-logout button,.bf-drawer-logout button{
  width:100%;border:0;background:none;color:var(--bf-nav-ink);text-align:left;cursor:pointer;
  font:600 13.5px/1.3 "Inter", sans-serif;padding:10px 11px;border-radius:var(--r,14px);
}
.bf-nav-logout button:hover,.bf-drawer-logout button:hover{background:var(--bf-nav-soft)}
.bf-drawer-logout button{padding:12px 13px;border-radius:var(--r,14px);font-size:14px}
/* flex-shrink:0 matters at 320px: without it the account button squeezed the
   burger down to 22px wide and the menu became hard to hit. */
/* Flexbox centring, not the old absolute+top:50%+negative-margin trick -
   that version relied on the button's content-box height resolving
   exactly as expected for "50%" to land in the true centre, and on at
   least one real device it visibly didn't: the whole icon sat noticeably
   above centre next to the logo. flex+justify-content:center has no such
   dependency - the three lines are laid out and centred by the box model
   itself, not by a manually computed offset. */
.bf-nav-burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  width:40px;height:40px;border-radius:var(--r-full);padding:0;flex:0 0 auto}
/* --bf-nav-sub (the existing muted/secondary-text tone) rather than the
   full-strength --bf-nav-ink: pure ink read as too heavy against a plain
   white background. One rule covers both states - closed (three lines)
   and open (the same spans rotated into an X). The homepage overrides
   this with its own literal colours where the hero photo needs full
   black/white contrast instead; this stays the default everywhere else. */
.bf-nav-burger span{display:block;width:16px;height:2px;
  background:var(--bf-nav-sub);border-radius:4px;transition:.18s}
.bf-nav-burger[aria-expanded=true] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.bf-nav-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.bf-nav-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---------------------------------------------------------------- drawer
   Plain --paper panel now, not a glass one - no blur, no translucency, a
   hairline border and the same --shadow-md an open dropdown gets. */
.bf-nav-drawer{
  --bf-drawer-gap:12px;--bf-drawer-row:12px;
  position:fixed;inset:0;z-index:1;display:none;
  background:rgba(14,20,23,.32);
  /* Top padding needs to clear the ~70px pill (60px .bf-nav + 10px
     .bf-nav-shell top padding once .bf-drawer-open applies, constant across
     every breakpoint the drawer shows at) with a visible gap left over, not
     just enough to not overlap it - 80px here left as little as 0px of actual
     gap at common phone widths once the narrower breakpoints below trimmed it
     further, which is why the panel looked flush against the header. */
  padding:88px 14px 8px;overflow:auto;
}
.bf-nav-drawer.bf-open{display:block}
.bf-nav-drawer-panel{
  width:min(460px,100%);max-height:calc(100dvh - 100px);margin:0 auto;overflow:auto;
  padding:var(--bf-drawer-gap);
  background:var(--paper,#fff);
  border:1px solid var(--bf-nav-line);border-radius:var(--r-lg,18px);
  box-shadow:var(--shadow-md,0 4px 16px -8px rgba(14,20,23,.14));
  animation:bf-drawer-in .12s ease-out both;
}
@keyframes bf-drawer-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Heading text lines up with the row text below it. */
.bf-nav-drawer-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  /* +1px matches the 1px border on the rows below, so the heading lines up. */
  padding:6px calc(var(--bf-drawer-row) + 1px) 14px;
}
.bf-drawer-identity{min-width:0}
.bf-drawer-identity b,.bf-drawer-identity span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-drawer-identity b{font-size:16px;letter-spacing:-.2px}
.bf-drawer-identity span{font-size:12px;color:var(--bf-nav-sub);margin-top:2px}
.bf-nav-drawer-top>b{font-size:16px;letter-spacing:-.2px}

/* Hairlines rather than borders: quieter against a translucent surface. */
.bf-drawer-group{display:grid;gap:2px;padding:8px 0;border-top:1px solid var(--bf-nav-line)}
.bf-drawer-group:first-of-type{border-top:0;padding-top:0}
/* Rows arrive one after another rather than as one flat block, so opening the
   drawer reads as a menu unfolding rather than a page loading. Delays are set
   with an inline custom property per row (below) rather than nth-child, so
   the count is never out of step with however many rows a group actually
   renders for this user (fewer for a guest, more for an admin). */
.bf-nav-drawer-panel .bf-drawer-group>a,.bf-nav-drawer-panel .bf-drawer-trades>a,
.bf-nav-drawer-panel .bf-drawer-cta,.bf-nav-drawer-panel .bf-drawer-login,
.bf-nav-drawer-panel .bf-drawer-logout{
  animation:bf-row-in .18s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--row-i,0) * 14ms + 30ms);
}
@keyframes bf-row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .bf-nav-drawer-panel .bf-drawer-group>a,.bf-nav-drawer-panel .bf-drawer-trades>a,
  .bf-nav-drawer-panel .bf-drawer-cta,.bf-nav-drawer-panel .bf-drawer-login,
  .bf-nav-drawer-panel .bf-drawer-logout{animation:none}
}
.bf-drawer-group a,.bf-drawer-logout button{
  display:flex;align-items:center;min-height:46px;padding:11px var(--bf-drawer-row);
  border:1px solid transparent;
  border-radius:var(--r,12px);color:var(--bf-nav-ink);text-decoration:none;font-size:14.5px;font-weight:600;
  width:100%;background:none;text-align:left;font-family:inherit;cursor:pointer;
}
.bf-drawer-group a:hover,.bf-drawer-group a.bf-nav-active,.bf-drawer-logout button:hover{
  background:var(--bf-nav-soft);
}
.bf-drawer-group a.bf-nav-active{font-weight:700}

.bf-drawer-trades{display:grid;grid-template-columns:1fr;gap:7px;padding:8px 0;border-top:1px solid var(--bf-nav-line)}
.bf-drawer-trades a{
  padding:12px var(--bf-drawer-row);border:1px solid var(--bf-nav-line);border-radius:var(--r,14px);
  background:var(--paper-2,#FAFBFC);color:var(--bf-nav-ink);text-decoration:none;
  transition:background .14s,border-color .14s;
}
.bf-drawer-trades a:hover{background:var(--paper,#fff);border-color:var(--bf-nav-ink)}
.bf-drawer-trades b,.bf-drawer-trades span{display:block}
.bf-drawer-trades b{font-size:14.5px}
.bf-drawer-trades span{
  font-size:12px;color:var(--bf-nav-sub);line-height:1.4;margin-top:2px;
}

.bf-drawer-cta,.bf-drawer-login{
  display:flex;align-items:center;justify-content:center;min-height:44px;
  padding:12px 16px;border-radius:var(--r,14px);text-decoration:none;font-size:14.5px;
}
.bf-drawer-cta{margin:10px 0 6px;background:var(--ink-fill,#0E1417);color:#fff;font-weight:550;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(14,20,23,.04))}
.bf-drawer-cta:hover{background:#000}
.bf-drawer-login{color:var(--bf-nav-ink);font-weight:600;border:1px solid var(--bf-nav-line);
  background:var(--paper-2,#FAFBFC)}
.bf-drawer-login:hover{background:var(--paper,#fff);border-color:var(--bf-nav-ink)}

.bf-drawer-languages{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin-top:8px;padding-top:12px;border-top:1px solid var(--bf-nav-line);
}
.bf-drawer-languages button{
  min-height:40px;border:1px solid var(--bf-nav-line);background:var(--paper-2,#FAFBFC);
  border-radius:var(--r,12px);font:700 12px "Inter", sans-serif;color:var(--bf-nav-sub);cursor:pointer;
}
.bf-drawer-languages button:hover{background:var(--paper,#fff);color:var(--bf-nav-ink)}
.bf-drawer-languages button[aria-current=true]{background:var(--bf-nav-soft);border-color:var(--bf-nav-line);color:var(--bf-nav-ink)}

@media(max-width:1180px){
  /* display:flex, not the display:block this used to say - the burger's
     three lines are laid out with flex-direction:column now (see
     .bf-nav-burger's own rule), and display:block ignores flex properties
     entirely: gap collapses to 0 and the lines stack flush into what
     looks like a single flat bar instead of three. Caught by actually
     looking at this on a phone-width screen after the rewrite, not by
     reading the CSS. */
  .bf-nav-primary{display:none}.bf-nav-burger{display:flex}
}
@media(max-width:860px){
  .bf-nav{min-height:60px;padding:0 16px;gap:8px}
  .bf-nav-logo svg{width:140px}.bf-nav-actions{gap:2px}
  /* The base rule below uses .bf-nav-menu>button.bf-nav-cta, which outranks a
     plain .bf-nav-cta selector no matter which media query it sits in — so the
     CTA stayed visible on phones and crowded the burger. Match that weight. */
  .bf-nav-cta,.bf-nav-menu>button.bf-nav-cta{display:none}
}
@media(max-width:620px){
  .bf-nav{grid-template-columns:auto 1fr}.bf-nav-language,.bf-nav-login{display:none}
  .bf-account-button{height:38px;max-width:126px;padding:0 10px 0 12px;font-size:12.5px}
  /* Was 38x38 - under the 44x44 minimum touch target. */
  .bf-nav-burger{width:44px;height:44px}
  .bf-nav-drawer{padding:88px 12px 6px}
  .bf-nav-drawer-panel{max-height:calc(100dvh - 96px);width:100%;border-radius:var(--r-lg,16px)}
}
@media(max-width:360px){
  .bf-nav-drawer{--bf-drawer-gap:10px;--bf-drawer-row:11px;padding:88px 8px 6px}
  .bf-nav-drawer-panel{max-height:calc(100dvh - 94px)}
  .bf-drawer-languages{gap:4px}
  .bf-drawer-languages button{font-size:11px;min-height:38px}
}
/* The panel animates in; honour a request for less motion. */
@media(prefers-reduced-motion:reduce){.bf-nav-drawer-panel{animation:none}}
@media(max-width:390px){
  .bf-nav-logo svg{width:125px}.bf-account-button{max-width:112px}.bf-drawer-trades{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.bf-nav-shell *{scroll-behavior:auto!important;transition:none!important}}

/* ============================================================
   SITE FOOTER — light, on --paper-3, a single hairline top border. Four
   columns collapsing to two then one. The whole product is light: this is
   not the dark band it used to be (see REDESIGN-NOTES.md).
   ============================================================ */
/* A rounded, inset card on every page - not full-bleed - so its width
   reads the same regardless of how wide that page's own content runs.
   margin is a fixed clamp (not tied to any per-page container), which is
   what keeps it identical on the homepage, a 1240px app page and a
   720px reading page alike. */
.bf-foot{position:relative;display:block;background:var(--paper-3,#F4F6F8);color:var(--ink,#0E1417);
  text-align:left;border:1px solid var(--line,#E8ECEF);border-radius:var(--r-lg,24px);
  margin:24px clamp(12px,3vw,40px) 24px}
.bf-foot-in{max-width:1240px;margin:0 auto;padding:80px clamp(16px,3.2vw,48px) 32px}
.bf-foot-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
.bf-foot-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.bf-foot-col span{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint,#61707A);margin-bottom:2px}
.bf-foot-col a{color:var(--sub,#5C6B75);text-decoration:none;font-size:13.5px;transition:color .14s}
.bf-foot-col a:hover{color:var(--ink,#0E1417)}
.bf-foot-entity p{color:var(--sub,#5C6B75);font-size:13.5px;line-height:1.5;margin:0}
.bf-foot-bottom{margin-top:56px;padding-top:20px;border-top:1px solid var(--line,#E8ECEF);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px 18px}
.bf-foot-bottom span{font-size:12.5px;color:var(--faint,#61707A)}
@media(max-width:900px){
  .bf-foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .bf-foot-in{padding:64px 20px 24px}
  .bf-foot-top{grid-template-columns:1fr;gap:28px}
  .bf-foot-bottom{flex-direction:column;margin-top:40px}
}