/*
 * site-footer.css — the one footer, wherever it is worn.
 *
 * These rules lived in marketing.css, which was right while the footer was a
 * marketing-page thing. It is not one any more: the same footer now closes the
 * landing page, the offline Cut & Trim page and the Account page, and Account is
 * app chrome. Loading marketing.css there to reach twelve footer rules would
 * also have restyled that page's `body` and `main`, because marketing.css is a
 * page's stylesheet and styles bare elements — so the footer's rules move to a
 * sheet of their own and marketing.css keeps only what belongs to a marketing
 * page.
 *
 * THE CLASS PREFIX DOES NOT CHANGE. `.mkt-footer*` is on every shipped page and
 * in the component that renders it; renaming it here would be a rename with no
 * behaviour in it, in the same change as a real move — and the two would be
 * indistinguishable in review.
 *
 * ── THE BOX IS THE PAGE'S, NOT THE FOOTER'S ───────────────────────────────
 *
 * The footer's content starts at the same left edge as every band above it, and
 * that edge is the PAGE's measure — `--page-max` and `--page-gutter` — not a
 * width this sheet knows. A marketing page gets them from marketing.css; the
 * Account page declares its own, because its content is 900 wide and a footer
 * lining up with 1400 would be the misalignment this frame exists to remove.
 *
 * NO FALLBACK NUMBERS, DELIBERATELY. A `var(--page-max, 1400px)` here would be a
 * second place the marketing measure is written down, and the first copy of a
 * number is the one that gets changed. Without one, a page that mounts the
 * footer and declares neither token gets a footer against the window edge —
 * loud, and caught by the guard that asserts every such page declares them.
 */

.mkt-footer-box {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.mkt-footer { border-top: 1px solid var(--border-soft); background: var(--bg-sunken); padding: 48px 0 32px; margin-top: 8px; }
.mkt-footer-top { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.mkt-footer-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mkt-footer-brand img { height: 28px; }
.mkt-footer-brand span { font-weight: 800; color: var(--text-primary); }
.mkt-footer-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.mkt-footer-links a {
    background: none; border: none; padding: 0; cursor: pointer; font: inherit;
    color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: color .15s;
}
.mkt-footer-links a:hover { color: var(--text-primary); }
.mkt-footer-bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-soft); color: var(--text-muted); font-size: 0.82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* The shield is a single-colour mark and a second file would be a second thing
   to keep in sync, so on the light themes the same white ink is inverted rather
   than vanishing into the page. The nav's half of this pair stays in
   marketing.css, with the nav. */
[data-theme="light"] .mkt-footer-brand img,
[data-theme="sepia"] .mkt-footer-brand img { filter: invert(1); }