.b-foot{
  background:var(--bg);
  padding:clamp(48px,6vw,72px) 0 clamp(30px,3.6vw,42px);
}

/* --- zone 1: link columns ---
   hero.css styles the bare element selector `nav` as the 80px-tall
   top bar (flex, space-between, its own padding, z-index:5). A
   <nav> in the footer inherits all of it, which collapsed the
   columns into an 80px flex row that overlapped the identity block.
   Every one of those properties is reset explicitly below. */
.b-foot .fnav{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  column-gap:20px;row-gap:34px;
  height:auto;padding:0;position:static;z-index:auto;
  align-items:start;justify-content:normal;
}
.b-foot .fcol h3{margin-bottom:14px}
.b-foot .fcol ul{list-style:none}
.b-foot .fcol li + li{margin-top:9px}
.b-foot .fcol a{
  font-size:13.5px;letter-spacing:-.005em;line-height:1.45;
  color:var(--muted);text-decoration:none;
  transition:color .18s ease;
}
.b-foot .fcol a:hover{color:var(--ink)}
.b-foot .fcol a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* --- zone 2: identity + social --- */
.b-foot .fbase{
  margin-top:clamp(40px,5vw,60px);
  border-top:1px solid var(--hair);
  padding-top:clamp(24px,3vw,32px);
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
}
.b-foot .fid{display:flex;align-items:flex-start;gap:14px}
.b-foot .fmark{display:block;height:30px;width:auto;flex:none}
.b-foot .fidtext{display:flex;flex-direction:column;gap:4px;padding-top:1px}
.b-foot .fname{font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.b-foot .faddr{
  font-size:12px;line-height:1.5;color:var(--faint);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}

/* no tile behind the marks - the padding is the hit area, not a box.
   No negative margin here on purpose: pulling the row 8px past the
   column edge made .fbase report scrollWidth 1040 against clientWidth
   1032, which is exactly the per-element overflow G28 asks you to
   check for. The 8px optical inset is invisible; the overflow is not. */
.b-foot .fsoc{display:flex;align-items:center;gap:14px}
.b-foot .fsoc a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px;color:var(--muted);text-decoration:none;
  transition:color .18s ease;
}
.b-foot .fsoc a:hover{color:var(--ink)}
.b-foot .fsoc a:focus-visible{outline:2px solid var(--ink);outline-offset:0;border-radius:var(--radius)}

/* --- zone 3: copyright + the quiet legal footnote --- */
.b-foot .fbot{
  margin-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--hair);
  padding-top:clamp(18px,2.2vw,24px);
}
.b-foot .fmeta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:12.5px;color:var(--faint);letter-spacing:.01em;
}
.b-foot .fdisc{
  margin-top:12px;max-width:64ch;
  font-size:11.5px;line-height:1.55;letter-spacing:.02em;
  font-style:italic;color:var(--faint);
}

/* --- responsive --- */
/* four columns hold down to ~700px: the longest label
   ("Customer Stories") is ~105px against a ~139px track there. */
@media (max-width:700px){
  .b-foot .fnav{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
}
@media (max-width:560px){
  .b-close h2{letter-spacing:-.028em}
  .b-foot .faddr{font-size:11.5px}
  .b-foot .fbase{flex-direction:column;align-items:flex-start;gap:22px}
  .b-foot .fmeta{flex-direction:column;align-items:flex-start;gap:8px}
}

/* MOBILE PASS 2026-07-25 - C1 / C2, the tap-target floor.
   Nineteen links at 37.8 x 16px with a 9px gap is a 25px pitch: you
   cannot reliably hit "Privacy Policy" without hitting "Terms of
   Service", and those are two of the only three links in this footer
   that resolve at all. An inline <a> cannot be given a hit area, so
   the link becomes a block and the row gap becomes its padding -
   16.2 + 30 = 46px, comfortably over the 44px floor, and adjacent
   targets no longer share a boundary the finger has to split.
   The fat footer is kept WHOLE (playbook option A): the founder
   overruled the research to get an enterprise footer, so every column
   survives and the footer pays for it in height. That is free at the
   end of a page - it costs ~320px of scroll that nobody has to read.
   The h3 gives back most of its margin because the first link now
   brings its own 15px.
   Gated on width OR a coarse pointer so a touch tablet gets it too. */
@media (max-width:700px),(pointer:coarse){
  .b-foot .fcol h3{margin-bottom:2px}
  .b-foot .fcol li + li{margin-top:0}
  .b-foot .fcol a{display:block;padding:15px 0;line-height:1.2}
  /* 17px and 16px marks: 14px of padding puts both at 44-45px without
     a visible box - the padding is the hit area, never a tile. The gap
     comes down by the amount the padding went up, so the optical
     spacing between the two marks is unchanged. */
  .b-foot .fsoc{gap:6px}
  .b-foot .fsoc a{padding:14px}
}