/* Flat header, footer and overlay menu — shown only with the "Khối màu" design.
 *
 * Loaded alongside landing-flat.css. Everything is prefixed .cf- and every
 * colour is stated outright: design-system.css styles bare elements
 * (a{color:var(--primary)}, p{...}, h1..h6{...}) and would otherwise claim
 * anything left to inherit.
 *
 * House rules: radius 0, no shadow, no gradient, no translucency.
 */

.cf-hdr,.cf-menu,.cf-foot{
  --cf-ink:#0a0a0a; --cf-paper:#fff; --cf-dim:#6b7280;
  --cf-font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --cf-pad:clamp(20px,5vw,72px);
  font-family:var(--cf-font);
}

/* The flat header's height, published for anything that has to sit under it.
   Three separate sticky elements have now been written against a guessed or
   stale value — ba-path-nav.js and the BA→PM section nav both measured the OLD
   chrome (.header) and fell back to 56px, and the roadmap jump strip sat at
   top:0 and disappeared behind the bar entirely. Measured, not assumed: 75px at
   desktop, 70px once the 520px rule tightens the padding.
   CSS-only consumers use var(--cf-h); anything with JS should still measure. */
:root{ --cf-h:75px }
@media (max-width:520px){ :root{ --cf-h:70px } }

/* ── header ─────────────────────────────────────────────────────────────── */
.cf-hdr{
  display:flex;align-items:center;gap:clamp(10px,3vw,36px);flex-wrap:nowrap;
  padding:16px var(--cf-pad);
  background:var(--cf-paper);color:var(--cf-ink);
  border-bottom:2px solid var(--cf-ink);
  position:sticky;top:0;z-index:60;
}
/* The brand yields first. At 390px the full name plus both buttons overflowed
   and the Menu button was clipped off the right edge; letting the name truncate
   keeps every control reachable, which matters more than reading it in full.
   The mark is exempt from that yielding (flex:0 0 auto) — a half-clipped logo
   reads as a broken image, whereas a truncated word reads as a tight header. */
.cf-brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;
  letter-spacing:-.03em;text-decoration:none;color:var(--cf-ink);min-width:0}
.cf-brand:hover{color:var(--cf-ink);text-decoration:none}
.cf-brand-mark{flex:0 0 auto;display:block;width:26px;height:26px}
.cf-brand-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── search trigger ───────────────────────────────────────────────────────
   Sits between the nav and the actions, and yields before either: it is the
   one control here that still works at any width, because collapsed to its
   icon it is still a search button. */
.cf-search{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;min-width:0;
  font-family:inherit;font-size:13px;font-weight:600;text-align:left;
  padding:9px 12px;border:2px solid var(--cf-ink);background:var(--cf-paper);
  color:var(--cf-dim);border-radius:0;cursor:pointer;line-height:1.2;
  margin-left:auto}
.cf-search:hover{background:#f2f2f2}
.cf-search:focus-visible{outline:3px solid var(--cf-ink);outline-offset:2px}
.cf-search-i{flex:0 0 auto;font-size:12px;color:var(--cf-ink)}
.cf-search-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-search-k{flex:0 0 auto;font-family:inherit;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;padding:2px 6px;border:1px solid #e6e6e6;
  color:var(--cf-dim)}
/* Below the nav breakpoint the bar is brand + search + account + Menu, and the
   label is the first thing that can go without losing the control. */
@media (max-width:959px){
  .cf-search{flex:0 0 auto}
  .cf-search-t,.cf-search-k{display:none}
  .cf-search{padding:9px 11px}
}
/* No physical keyboard, no shortcut worth advertising. */
@media (hover:none){ .cf-search-k{display:none} }

.cf-nav{display:none;gap:clamp(14px,2vw,28px);margin-left:auto}
/* Once the nav is visible IT claims the free space; two auto margins would
   split it and leave the search box marooned mid-bar. */
@media (min-width:960px){ .cf-search{margin-left:0} }
@media (min-width:960px){ .cf-nav{display:flex} }
.cf-nav a{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  text-decoration:none;color:var(--cf-ink);white-space:nowrap}
.cf-nav a:hover{color:var(--cf-ink);opacity:.55;text-decoration:none}

/* No auto margin here, deliberately. Below 960px the nav is hidden and
   .cf-search already carries `margin-left:auto`; a second auto margin in the
   same flex row does not push harder — the two SPLIT the free space between
   them. On an iPad in portrait that put 155px on each, stranding the search
   button exactly midway between the wordmark and the account button, which is
   what made it look unplaced. One auto margin, on the first item of the
   right-hand group, moves the whole group together. */
.cf-act{display:flex;align-items:center;gap:9px;margin-left:0}
.cf-btn,.cf-me{font-size:12.5px;font-weight:800;text-decoration:none;padding:10px 18px;
  border:2px solid var(--cf-ink);background:var(--cf-ink);color:var(--cf-paper);
  border-radius:0;white-space:nowrap;line-height:1.2}
.cf-btn:hover,.cf-me:hover{background:#252525;border-color:#252525;color:#fff;text-decoration:none}
.cf-me{background:var(--cf-paper);color:var(--cf-ink)}
.cf-me:hover{background:var(--cf-ink);color:#fff}

/* ── admin account menu ───────────────────────────────────────────────────
   A panel, not a floating card: square, 2px ink border, no shadow, no radius —
   the same object the presence panel and the overlay menu are made of. The
   header creates no stacking context of its own beyond z-index:60, so this sits
   above the page but below nothing that matters. */
.cf-acct{position:relative}
.cf-me-btn{font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.cf-me-car{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor}
.cf-me-btn[aria-expanded="true"] .cf-me-car{transform:rotate(180deg)}
.cf-acct-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:212px;
  background:var(--cf-paper);border:2px solid var(--cf-ink);padding:6px 0}
.cf-acct-pop[hidden]{display:none}
.cf-acct-pop a{display:block;padding:9px 16px;font-size:13.5px;font-weight:700;
  text-decoration:none;color:var(--cf-ink);white-space:nowrap}
.cf-acct-pop a:hover{background:var(--cf-ink);color:#fff;text-decoration:none}
.cf-acct-g{padding:12px 16px 5px;margin-top:5px;border-top:1px solid #e6e6e6;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#9aa1ab}
.cf-acct-out{margin-top:5px;border-top:1px solid #e6e6e6;padding-top:11px!important}
.cf-menu-btn{font-family:inherit;font-size:12.5px;font-weight:800;padding:10px 18px;
  border:2px solid var(--cf-ink);background:var(--cf-paper);color:var(--cf-ink);
  border-radius:0;cursor:pointer;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.cf-menu-btn:hover{background:var(--cf-ink);color:#fff}
/* font-size:15 with line-height:1 gives a 15px line box — exactly what the
   12.5px label at line-height 1.2 produces. That is load-bearing: --cf-h is a
   fixed 75px that sticky offsets all over the site are measured against, so the
   button swapping word for icon must not change the header's height by a pixel. */
.cf-menu-i{display:none;font-size:15px;line-height:1}
.cf-act{flex:0 0 auto}
/* iPad landscape and down: the bars replace the word. A touch header is short
   of room long before a desktop one is, and "Menu" is the least informative
   thing competing for it. */
@media (max-width:1024px){
  .cf-menu-i{display:block}
  /* Hidden from view, kept for the accessibility tree. */
  .cf-menu-t{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .cf-menu-btn{padding:10px 15px}
}

@media (max-width:520px){
  .cf-hdr{padding-left:16px;padding-right:16px;gap:10px}
  .cf-brand{font-size:13px;gap:7px}
  .cf-brand-mark{width:22px;height:22px}
  .cf-btn,.cf-me,.cf-menu-btn{padding:9px 12px;font-size:12px}
  .cf-menu-btn{padding:9px 13px}
}

/* ── spotlight, in the flat language ──────────────────────────────────────
   spotlight.css is loaded on every page including this design's, so the search
   overlay arrived styled for the old one: rounded, shadowed, blurred, with a
   blue pill for the selected row. Overridden here rather than edited at source,
   because the old arm is still served that file and must keep the look it was
   measured with.

   Scoped under body.cf-flat, set in head.php from the same condition the chrome
   uses. That marker has to live on <body> because the overlay is appended near
   the end of the document, outside the flat header entirely — a class on the
   header could never reach it. */

body.cf-flat .spotlight-overlay{background:rgba(10,10,10,.62);
  -webkit-backdrop-filter:none;backdrop-filter:none}
body.cf-flat .spotlight-container{max-width:640px;background:#fff;border-radius:0;
  border:2px solid #0a0a0a;box-shadow:none}

/* input row */
body.cf-flat .spotlight-input-wrap{gap:12px;padding:18px 20px;border-radius:0;
  border-bottom:2px solid #0a0a0a}
body.cf-flat .spotlight-icon{color:#0a0a0a;font-size:15px}
body.cf-flat .spotlight-input{font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;font-weight:700;letter-spacing:-.01em;color:#0a0a0a}
body.cf-flat .spotlight-input::placeholder{color:#9aa1ab;font-weight:600}
/* design-system.css carries :where(a,button,input,…):focus-visible{box-shadow:
   var(--focus-ring);border-radius:var(--radius-sm)}. :where() has ZERO
   specificity, so any real selector beats it — but only for properties it
   actually declares, and .spotlight-input declared neither. Result: a blue
   rounded glow around the field the moment the palette opened. The input is
   auto-focused and is the only thing focused at that point, so the ring marked
   nothing; the overlay itself is the focus indicator. Declared, not deleted —
   the global rule still protects every other control on the site. */
body.cf-flat .spotlight-input:focus,
body.cf-flat .spotlight-input:focus-visible{box-shadow:none;border-radius:0;outline:none}

body.cf-flat .spotlight-kbd,
body.cf-flat .spotlight-shortcut kbd{border-radius:0;border:1px solid #e6e6e6;
  background:#fff;color:#6b7280;font-weight:700;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}

/* results */
body.cf-flat .spotlight-results{max-height:min(60vh,460px)}
body.cf-flat .spotlight-list{padding:0}
/* #6b7280, not #9aa1ab: measured 2.5:1 at 9.5px, which is unreadable rather
   than merely quiet. Same correction the stats page needed. */
body.cf-flat .spotlight-group-label{padding:13px 20px 7px;font-size:9.5px;letter-spacing:.18em;
  font-weight:700;color:#6b7280;background:#fafafa;border-bottom:1px solid #e6e6e6}
body.cf-flat .spotlight-item{gap:13px;padding:12px 20px;border-radius:0;
  border-bottom:1px solid #f0f0f0;color:#0a0a0a}
body.cf-flat .spotlight-item:last-child{border-bottom:0}
/* Selected row is ink, the same "you are here" the sidebar and chips use —
   the old blue-on-pale-blue pill belongs to a palette this design does not have. */
body.cf-flat .spotlight-item:hover,
body.cf-flat .spotlight-item.active{background:#0a0a0a;color:#fff}
body.cf-flat .spotlight-item-icon{width:30px;height:30px;border-radius:0;
  background:#f2f2f2;color:#6b7280;font-size:11px}
body.cf-flat .spotlight-item:hover .spotlight-item-icon,
body.cf-flat .spotlight-item.active .spotlight-item-icon{background:rgba(255,255,255,.16);color:#fff}
body.cf-flat .spotlight-item-title{font-size:14px;font-weight:700;letter-spacing:-.01em}
body.cf-flat .spotlight-item-meta{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#6b7280;margin-top:2px}
body.cf-flat .spotlight-item:hover .spotlight-item-meta,
body.cf-flat .spotlight-item.active .spotlight-item-meta{color:rgba(255,255,255,.72)}

/* empty + loading + no-results */
body.cf-flat .spotlight-empty{padding:34px 20px}
body.cf-flat .spotlight-hint{font-size:14px;font-weight:600;color:#6b7280}
body.cf-flat .spotlight-shortcuts{margin-top:16px;gap:18px}
body.cf-flat .spotlight-shortcut{font-size:12px;color:#6b7280;font-weight:600}
body.cf-flat .spotlight-loading{padding:26px 20px;font-size:13.5px;color:#6b7280;font-weight:600}
body.cf-flat .spotlight-no-results{padding:30px 20px;font-size:14px;color:#6b7280;font-weight:600}

/* ── overlay menu ───────────────────────────────────────────────────────── */
.cf-menu{position:fixed;inset:0;z-index:100;background:var(--cf-ink);color:#fff;
  overflow-y:auto;display:flex;flex-direction:column}
.cf-menu[hidden]{display:none}
.cf-menu-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--cf-pad);border-bottom:1px solid rgba(255,255,255,.22)}
.cf-menu-bar .cf-brand{color:#fff}
.cf-menu-bar .cf-brand:hover{color:#fff}
.cf-menu-close{font-family:inherit;font-size:12.5px;font-weight:800;padding:10px 18px;
  border:2px solid #fff;background:transparent;color:#fff;border-radius:0;cursor:pointer;
  line-height:1.2}
.cf-menu-close:hover{background:#fff;color:var(--cf-ink)}
.cf-menu-in{display:grid;grid-template-columns:1fr;gap:0;
  padding:0 var(--cf-pad) clamp(40px,6vw,72px)}
/* Column count follows the width the links actually need, not the device.
   Four columns at an iPad Mini's 1133px gives each one ~250px, which wrapped
   five of the 24 links onto two lines while leaving 62% of the screen empty
   below. Two roomy columns use that vertical space and stop the wrapping.
   Four columns only once there is genuinely room for them. */
@media (min-width:700px){ .cf-menu-in{grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,64px)} }
@media (min-width:1400px){ .cf-menu-in{grid-template-columns:repeat(4,1fr)} }
.cf-group{padding:clamp(26px,3vw,40px) 0 8px;border-bottom:1px solid rgba(255,255,255,.16)}
@media (min-width:1400px){ .cf-group{border-bottom:0} }
.cf-group-t{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.55);margin-bottom:16px}
.cf-group ul{list-style:none;margin:0;padding:0}
.cf-group li{margin-bottom:10px}
.cf-group a{font-size:clamp(18px,2.1vw,24px);font-weight:800;letter-spacing:-.03em;
  text-decoration:none;color:#fff;line-height:1.2;display:inline-block}
.cf-group a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}

/* ── footer ─────────────────────────────────────────────────────────────── */
.cf-foot{background:var(--cf-ink);color:#fff;padding:clamp(44px,6vw,72px) var(--cf-pad) 30px}
/* ── footer layout ────────────────────────────────────────────────────────
   The four link groups are one grid child now, not four, so the phone can give
   them their own column count independently of the tagline block.

   The old breakpoint was 760px — and the most common iPad portrait width is
   744px, sixteen pixels short. Tablets were therefore getting the PHONE
   footer: one column, twenty links in a line, 1,121px tall. The steps below
   are chosen so a 744px iPad lands on three columns rather than falling off
   the end of the scale. */
.cf-foot-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:900px){ .cf-foot-grid{grid-template-columns:2fr 4fr;gap:28px} }

/* Two columns, then four — never three. There are exactly four groups, so a
   three-column grid strands the fourth on a row of its own with two empty
   cells beside it; 2×2 and 1×4 both tile evenly. The step is at 700px so a
   744px iPad in portrait gets the single clean row. */
.cf-foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
@media (min-width:700px){ .cf-foot-cols{grid-template-columns:repeat(4,1fr)} }
@media (min-width:900px){ .cf-foot-cols{gap:28px} }

/* On a phone the tagline and the tip jar sit side by side rather than stacked:
   it keeps the donation ask inside the first screenful instead of below a
   scroll, and it is the single biggest height saving in the whole footer.
   Above 900px the block goes back to being a column, which is what the wide
   layout wants. */
@media (max-width:899px){
  .cf-foot-mark{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
  .cf-foot-mark > p{font-size:clamp(18px,4.6vw,23px);max-width:12ch}
  .cf-foot .footer-support{margin-top:0;flex:0 0 auto}

  /* The tip jar's 264px tooltip is anchored to its tile's LEFT edge. That was
     fine while the tiles sat on the left; moving them to the right edge sent
     the tooltip past the viewport and gave the whole page a horizontal scroll
     of 106px — on every flat page, not just this one. Re-anchored to the right
     and capped to the screen, since on a phone there is no room to hang it
     anywhere else. */
  .cf-foot .fs-tip{left:auto;right:0;transform-origin:bottom right;
    width:min(264px,calc(100vw - 40px))}
  .cf-foot .fs-tip::after{left:auto;right:24px;transform:none}
}

/* ── the member's fold ──────────────────────────────────────────────────── */
.cf-foot-links{min-width:0}
details.cf-foot-links{border-top:1px solid rgba(255,255,255,.14);padding-top:4px}
.cf-foot-sum{list-style:none;cursor:pointer;padding:13px 0 15px;display:flex;
  align-items:center;justify-content:space-between;gap:12px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:rgba(255,255,255,.62)}
.cf-foot-sum::-webkit-details-marker{display:none}
.cf-foot-sum:hover{color:#fff}
.cf-foot-sum:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cf-foot-car{width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;flex:0 0 auto}
details.cf-foot-links[open] .cf-foot-car{transform:rotate(-135deg);margin-top:2px}
/* Wide enough for four columns and folding buys nothing — the summary would be
   a control that saves no space. The element still renders open there, so
   hiding the summary hides a toggle, never the links. */
@media (min-width:900px){
  details.cf-foot-links{border-top:0;padding-top:0}
  .cf-foot-sum{display:none}
}
/* Direct child only. As a descendant selector this annexed every <p> inside the
   block — and the tip jar's confirmation modal now lives here, so its .dn-sub,
   .dn-notice and .dn-fine rendered as 36px white display type inside a white
   modal. The tagline is the only <p> this rule is about. */
.cf-foot-mark > p{font-size:clamp(22px,3.2vw,36px);font-weight:800;letter-spacing:-.04em;
  line-height:1.04;max-width:14ch;margin:0;color:#fff}
/* ── tip jar ─────────────────────────────────────────────────────────────
   Markup comes from includes/tipjar-block.php, shared with the old footer, so
   the classes here are the old ones (.fs-tile / .fs-tip / .dn-*) — they are the
   script's contract and must not be renamed. footer.css loads on every page
   including flat ones, so this only restates what the two designs disagree on:
   radius, shadow and palette.

   The QR is sized on the IMAGE, measured rather than read off the markup: the
   img carries width="76" but .fs-tile also has a 2px border, so the old footer
   RENDERS the code at 72px (88 − 12 padding − 4 border). 30% smaller is
   therefore 50px, and the tile follows at 50 + 8 padding + 4 border = 62px.
   The white field is functional — a QR needs the light module colour and a
   quiet zone to scan — so the tile stays white and square rather than taking
   the footer's dark ground. */
.cf-foot .footer-support{margin-top:26px}
.cf-foot .footer-support-label{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;text-decoration:none;
  color:rgba(255,255,255,.5);margin-bottom:11px}
.cf-foot .footer-support-label:hover{color:#fff}
.cf-foot .footer-support-row{display:flex;gap:12px;flex-wrap:wrap}
.cf-foot .fs-item{width:62px}
.cf-foot .fs-tile{width:62px;height:62px;padding:4px;background:#fff;border-radius:0;
  border:2px solid #fff;box-shadow:none}
.cf-foot .fs-tile img{border-radius:0}
.cf-foot .fs-tile:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.55)}
.cf-foot .fs-tile:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cf-foot .fs-cap{color:rgba(255,255,255,.5);font-size:10.5px;margin-top:6px}

/* tooltip — square, hard border, no drop shadow */
.cf-foot .fs-tip{border-radius:0;border:2px solid #0a0a0a;box-shadow:none;background:#fff;
  color:#0a0a0a}
.cf-foot .fs-tip::after{border-top-color:#0a0a0a}
.cf-foot .fs-tip-badge{border-radius:0;background:#0a0a0a;color:#fff}
.cf-foot .fs-tip-title{color:#0a0a0a;font-weight:800}
.cf-foot .fs-tip-body,.cf-foot .fs-tip-url{color:#5c626b}
.cf-foot .fs-tip-go{color:#1a3aff;font-weight:800}

/* confirmation modal */
.cf-foot .dn-overlay{background:rgba(10,10,10,.82)}
.cf-foot .dn-modal{border-radius:0;border:2px solid #0a0a0a;box-shadow:none;background:#fff}
.cf-foot .dn-mark{border-radius:0;background:#1a3aff;color:#fff}
.cf-foot .dn-title{color:#0a0a0a;font-weight:800;letter-spacing:-.02em}
.cf-foot .dn-sub{color:#5c626b;font-size:13.5px;line-height:1.55;font-weight:500;
  letter-spacing:normal;max-width:none;margin:6px 0 0}
.cf-foot .dn-fine,.cf-foot .dn-notice{color:#5c626b;font-size:12px;line-height:1.5;
  font-weight:500;letter-spacing:normal;max-width:none}
.cf-foot .dn-title{font-size:19px;line-height:1.2}
.cf-foot .dn-label{color:#6b7280;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  font-size:11px}
.cf-foot .dn-in,.cf-foot .dn-amt-in input{border-radius:0;border:2px solid #e6e6e6;color:#0a0a0a}
.cf-foot .dn-in:focus,.cf-foot .dn-amt-in input:focus{border-color:#0a0a0a;outline:none;
  box-shadow:none}
.cf-foot .dn-cur{border-radius:0;border:2px solid #e6e6e6;background:#fff}
.cf-foot .dn-cur button{border-radius:0;color:#6b7280;font-weight:800}
.cf-foot .dn-cur button.on{background:#0a0a0a;color:#fff}
.cf-foot .dn-chip{border-radius:0;border:2px solid #e6e6e6;color:#0a0a0a;font-weight:700}
.cf-foot .dn-chip:hover{border-color:#0a0a0a}
.cf-foot .dn-chip.on{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.cf-foot .dn-av{border-radius:0;background:#1a3aff;color:#fff}
.cf-foot .dn-btn{border-radius:0;font-weight:800;border:2px solid #0a0a0a}
.cf-foot .dn-btn-go{background:#0a0a0a;color:#fff}
.cf-foot .dn-btn-go:hover{background:#252525;border-color:#252525}
.cf-foot .dn-btn-ghost{background:transparent;color:#0a0a0a}
.cf-foot .dn-btn-ghost:hover{background:#0a0a0a;color:#fff}
.cf-foot .dn-msg.err{color:#b42318;font-weight:700}

.cf-foot-col h4{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.5);margin:0 0 13px}
.cf-foot-col ul{list-style:none;margin:0;padding:0}
.cf-foot-col li{margin-bottom:9px}
.cf-foot-col a{font-size:13.5px;text-decoration:none;color:rgba(255,255,255,.88);font-weight:500}
.cf-foot-col a:hover{color:#fff;text-decoration:underline}
/* Copyright left, legal links right, on one line. It wraps to two centred
   rows on a phone rather than letting the links run off the edge — legal links
   people cannot reach are worse than no links at all. */
.cf-foot-fine{border-top:1px solid rgba(255,255,255,.18);margin-top:36px;padding-top:18px;
  font-size:12px;color:rgba(255,255,255,.5);
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cf-foot-legal{display:flex;gap:20px;flex-wrap:wrap}
.cf-foot-legal a{color:rgba(255,255,255,.62);text-decoration:none}
.cf-foot-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){
  .cf-foot-fine{justify-content:center;text-align:center}
  .cf-foot-legal{justify-content:center;width:100%}
}