/* ─────────────────────────────────────────────────────────────────────────
   Footer polish — loaded LAST so it wins. Alex's asks:
     • Brand lockup: logo LEFT, wordmark + tagline to its RIGHT (was stacked
       vertically below the logo).
     • Legal / operator copy subtle + smaller; the registered LLC name is no
       longer bold-highlighted — it reads as quiet fine print.
     • A supportable trust strip (all four claims are genuinely true).
   Selectors carry `.premium-footer` for specificity over the earlier footer
   rules; spacing stays on the 8px ramp; colors use style.css tokens.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Brand lockup: horizontal. Logo left; wordmark stacked over the tagline to
   its right. Overrides the earlier column-stack + 168px logo rules. ── */
body.qf-wft .premium-footer .footer-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
body.qf-wft .premium-footer .qf-footer-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
body.qf-wft .premium-footer .footer-brand .qf-footer-logo {
  width: auto;
  height: 60px;
  max-width: 100%;
}
body.qf-wft .premium-footer .qf-footer-brandtext {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body.qf-wft .premium-footer .qf-footer-wordmark {
  /* font-size stays — the baked-SVG wordmark sizes in `em` off it. Weight and
     tracking left with the text node; both are baked into the outline. */
  font-size: 19px;
  /* !important: the global `a { color: var(--accent) }` (and a JS-injected
     cleanup sheet that loads after this static link) otherwise tint the
     wordmark blue; keep it white to match the nav brand. It reaches the
     outline through `fill: currentColor`. */
  color: var(--ink) !important;
  text-decoration: none;
}
body.qf-wft .premium-footer .footer-brand .qf-footer-tagline {
  margin: 0;
  max-width: 340px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Supportable trust strip. Honest claims only: Stripe is the payment
   processor, the site is served over TLS, a GDPR/CCPA DPA is published, and
   every tenant is isolated at the database. ── */
body.qf-wft .qf-footer-trustbar {
  max-width: 1120px;
  margin: 32px auto 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}
body.qf-wft .qf-footer-trustbar li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
body.qf-wft .qf-footer-trustbar svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  opacity: 0.85;
}

/* ── Legal / operator copy: subtle + smaller. No bold emphasis on the entity. ── */
body.qf-wft .premium-footer .footer-bottom {
  font-size: 11.5px;
}
body.qf-wft .premium-footer .footer-bottom .qf-foot-operator,
body.qf-wft .premium-footer .footer-bottom strong {
  color: var(--muted);
  font-weight: 400;
}

/* Match the in-page operator line above the footer — quiet fine print, no bold. */
body.qf-wft .qf-trust-operator strong {
  font-weight: 400 !important;
  color: rgba(245, 252, 255, 0.5) !important;
}

@media (max-width: 720px) {
  body.qf-wft .premium-footer .footer-brand { gap: 12px; }
  body.qf-wft .premium-footer .footer-brand .qf-footer-logo { height: 52px; }
  body.qf-wft .qf-footer-trustbar { gap: 8px 16px; }
}

/* ── Subtle hover feedback on footer links (Alex). The links render light, so a
   colour lift is invisible — use a faint, offset underline that fades in, plus a
   gentle dim on the brand lockup. Trust-strip claims aren't links, so they don't
   react. ── */
body.qf-wft .premium-footer a {
  text-decoration-color: rgba(255, 255, 255, 0);
  transition: all .2s ease;
}
body.qf-wft .premium-footer .footer-col a:hover,
body.qf-wft .premium-footer .footer-bottom a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}
body.qf-wft .premium-footer .qf-footer-brand:hover,
body.qf-wft .premium-footer .qf-footer-wordmark:hover {
  opacity: 0.8;
}

/* ── Footer grid alignment fix. The base rule (landing-conversion.css) declared
   only four tracks — `grid-template-columns: 1.4fr repeat(3, 1fr)` — for a row
   that held five children, so the last column wrapped onto an implicit second
   row and read as a misaligned/offset column.

   REWRITTEN FOR THE FIVE-COLUMN FOOTER. The homepage no longer carries its own
   four-column PRODUCT / SOLUTIONS / COMPANY / LEGAL footer: it embeds the shared
   PREMIUM_FOOTER verbatim, which is FIVE link columns (the three header menus +
   Company + Legal) with the brand lockup on its own full-width row above them.
   So the desktop grid is five equal tracks and the brand spans all of them —
   `1.5fr repeat(4, …)` reserved a track for a brand block that is no longer in
   the row, which is what left a 203–230px permanently empty trailing track.
   nav-ia.css owns the responsive ladder (5 → 3 → 1); this block agrees with its
   desktop step so no sheet contradicts the shipped markup.
   ── */
@media (min-width: 981px) {
  body.qf-wft .premium-footer .premium-footer-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  body.qf-wft .premium-footer .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Header "Solutions" dropdown — surfaces the tools & business pages that used
   to live only in the footer, behind ONE tidy hover/click menu. Kept quiet and
   on-brand with the dark nav: a soft glass panel, subtle group headings, plain
   text links — no images, no blurbs, no full-width mega-menu. Appended here
   (loads last) to avoid shifting the line-based guard baselines in
   landing-conversion.css, where the base .site-nav rules live.
   Spacing stays on the 8px ramp; colors use style.css dark tokens (rgba only).
   ───────────────────────────────────────────────────────────────────────── */
.landing-v2 .nav-dd { position: relative; }

.landing-v2 .nav-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 999px;
}
.landing-v2 .nav-dd-trigger:hover,
.landing-v2 .nav-dd.is-open .nav-dd-trigger {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
}
.landing-v2 .nav-dd-caret {
  width: 12px;
  height: 12px;
  transition: all .2s ease;
}
.landing-v2 .nav-dd.is-open .nav-dd-caret { transform: rotate(180deg); }

.landing-v2 .nav-dd-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 16px 24px;
  margin: 0;
  padding: 16px;
  background: rgb(20, 24, 30);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--qf-shadow-md);
  z-index: 80;
}
.landing-v2 .nav-dd-panel[hidden] { display: none; }

.landing-v2 .nav-dd-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.landing-v2 .nav-dd-head {
  margin: 0 0 8px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.landing-v2 .nav-dd-panel a {
  display: block;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 8px;
}
.landing-v2 .nav-dd-panel a:hover,
.landing-v2 .nav-dd-panel a:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}
.landing-v2 .nav-dd-sub {
  display: block;
  padding: 4px 12px 0;
  max-width: 230px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  white-space: normal;
}
/* Rightmost dropdown (For Importers) anchors to the right so it never overflows. */
.landing-v2 .nav-dd-panel--end { left: auto; right: 0; }

/* Mobile: the same links, grouped under subtle subheadings inside the existing
   burger panel. Matches the mono link styling defined in landing-home-fixes.css. */
@media (max-width: 640px) {
  body.qf-wft .site-mobile-menu .mm-group { border-top: 1px solid rgba(255, 255, 255, 0.09); }
  body.qf-wft .site-mobile-menu .mm-group:first-child { border-top: 0; }
  body.qf-wft .site-mobile-menu .mm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(249, 249, 249, 0.60);
  }
  body.qf-wft .site-mobile-menu .mm-head::-webkit-details-marker { display: none; }
  body.qf-wft .site-mobile-menu summary.mm-head::after {
    content: '▾';
    font-size: 11px;
    color: rgba(249, 249, 249, 0.60);
    transition: all .2s ease;
  }
  body.qf-wft .site-mobile-menu .mm-group[open] > summary.mm-head::after { transform: rotate(180deg); }
  body.qf-wft .site-mobile-menu summary.mm-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
  body.qf-wft .site-mobile-menu .mm-group > a { display: block; padding-left: 24px; }
  body.qf-wft .site-mobile-menu .mm-account {
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    padding-top: 12px;
    font-weight: 600;
  }
  @media (prefers-reduced-motion: reduce) {
    body.qf-wft .site-mobile-menu summary.mm-head::after { transition: none; }
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Footer even-gap + top-align + balanced-grid fix (Alex feedback — appended
   last so it wins).

   FIX 1 — Brand block sat too LOW. The inner grid defaulted to
   `align-items: stretch`, so the brand cell was stretched to the full height of
   the tall link row (Solutions has 8 links); the brand's own flex then centered
   the logo+text inside that tall cell, dropping the logo well below the
   PRODUCT/SOLUTIONS/… heading row. `align-items: start` on the grid + the
   brand's flex `align-items: flex-start` line the logo/wordmark top edge up with
   the column headings.

   FIX 2 — Columns clustered on the RIGHT with a dead gap after the brand.
   The prior attempt used `max-content` tracks + `justify-content: space-between`.
   Because the brand cell is very wide (logo + up-to-340px tagline), its
   max-content track ate ~445px of the 1120px row; the four narrow link columns
   then bunched into the right ~60%, leaving a large empty band between the brand
   and PRODUCT and reading as "columns not aligned" — they lined up with nothing
   in the full-width trust strip or © row below.

   Fix: go back to a real proportional grid of EQUAL `minmax(0, 1fr)` tracks with
   the grid left at its default `stretch` justification, so the tracks span the
   whole 1120px container edge-to-edge. `minmax(0, 1fr)` keeps the link tracks
   exactly equal (and lets them shrink without overflowing near the 981px
   boundary). Result: evenly distributed columns whose left edges form a clean
   grid, and columns, trust strip and © row sharing the same container edges.

   NOW FIVE LINK TRACKS, NOT "brand + four". The footer grew a fifth link column
   when it was regrouped to mirror the header menus, and the brand lockup moved
   to its own full-width row above the columns (so each column keeps a readable
   measure). A brand track reserved in the column row is therefore exactly the
   empty trailing track this file set out to remove — see the matching block
   ~line 134 and the ladder in nav-ia.css.

   Scoped ≥981px; nav-ia.css owns the ≤1100px (3-track) and ≤640px (stack) steps.
   Spacing on the 8px ramp (32px gaps).
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 981px) {
  body.qf-wft .premium-footer .premium-footer-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 32px;
    align-items: start;
  }
  body.qf-wft .premium-footer .footer-brand {
    grid-column: 1 / -1;
    align-items: flex-start;
  }
}

/* ── Footer hover underline: track the link's own color so it stays visible in
   LIGHT too (the earlier rule used a white underline that vanished on the light
   footer). currentColor works in both themes. Appended last → wins over the
   rgba-white decoration above at equal specificity. ── */
body.qf-wft .premium-footer .footer-col a:hover,
body.qf-wft .premium-footer .footer-bottom a:hover {
  text-decoration-color: currentColor;
}