/* ============================================================================
   THE marketing footer — one definition, every public page.
   ----------------------------------------------------------------------------
   Before this file there were five footers. The homepage had a full four-column
   one; /advertising had six links and its own wording; /amazon, /support and
   the four legal pages had a six-link legal strip; /integrations and /security
   had a different six-link strip under a different class; and /reports had a
   single line with an email address and NO legal links at all — no Privacy, no
   Terms, on the page that sells a paid report. The copyright line disagreed
   with itself too ("© Synthesis Intelligence." vs "© 2026 Synthesis
   Intelligence, Inc. All rights reserved.").

   Same rules as assets/sitenav.css:
   - Literal colours, never var(). The pages define different variable sets.
   - Class prefix .mfoot, so it cannot collide with the old .footer/.sitefoot
     rules still sitting in some pages' inline CSS.
   - The markup is ONE block copied verbatim into each page;
     scripts/check_site_consistency.py fails CI if the blocks diverge.

   Page-specific wording (the Amazon SP-API disclaimer, "Cancel any time") goes
   in a .mfoot-note block ABOVE the shared footer, never inside it.
   ========================================================================== */

/* DEFENSIVE RESET — do not trim this.
   The shared block is a <footer> element, and eight pages still carry bare
   `footer { ... }` element rules in their own inline CSS. A class beats an
   element selector only for properties the class also sets, so everything
   these pages set and this file did not leaked straight through: /privacy-
   policy, /terms-of-service, /data-deletion and /security-incident-response
   rendered the footer as a 760px box with 80px margins, /amazon and /support
   as a 920px box, instead of full-bleed. Colours and columns looked right the
   whole time, which is why the first check missed it — measure WIDTH.
   text-align is here for the same reason: /reports and /integrations centre
   their body text and that centred all four columns. */
.mfoot{background:#191340;color:#B5AEDA;padding:64px 0 36px;overflow:hidden;
  text-align:left;width:auto;max-width:none;margin:0;
  /* RELATIVE, not static. The reset below originally forced `position:static`
     to undo a leaked `position` from a page's own bare `footer{}` rule, but
     this footer now has ::before and ::after decorations that must be
     contained BY it. Declared static, those layers resolve against a higher
     ancestor -- usually the viewport -- and the violet glow washes over the
     whole page instead of staying in the footer. `relative` overrides a leaked
     value just as well, so the defensive intent survives. */
  position:relative;border:0;border-radius:0;
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;}
/* the brand's spectrum as a hairline along the top edge, and a soft violet
   glow behind it, so the footer reads as the same surface as the rest of the
   dark half rather than a black box bolted on the end. */
.mfoot::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,#E8A94E,#A07FE0 30%,#5E8FEA 58%,#37C39A);}
.mfoot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 60% at 22% 0%, rgba(124,92,240,.30), transparent 70%),
             radial-gradient(44% 60% at 78% 20%, rgba(43,42,224,.22), transparent 72%);}
.mfoot-in{max-width:1180px;margin:0 auto;padding:0 24px;text-align:left;position:relative;z-index:1;}

.mfoot h4{color:#fff;font-size:14px;font-weight:700;letter-spacing:0;margin:0 0 14px;}
.mfoot a{display:block;color:#B5AEDA;font-size:14.5px;padding:5px 0;
  text-decoration:none;transition:color .14s;}
.mfoot a:hover{color:#fff;}

.mfoot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;
  padding-bottom:40px;border-bottom:1px solid #20232e;}

/* Written as `.mfoot a.mfoot-brand`, not `.mfoot-brand`: the brand IS an <a>,
   so the `.mfoot a{display:block}` rule above outranks a bare class selector
   and was stacking the gem on top of the wordmark. */
.mfoot a.mfoot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:0;}
.mfoot-brand .word{font-size:18px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.2;}
.mfoot-brand .word small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#8B84B4;margin-top:-2px;}
.mfoot-blurb{color:#B5AEDA;font-size:14.5px;max-width:280px;margin:0;line-height:1.6;}
.mfoot-price{color:#CFC9E8;font-size:14px;margin:14px 0 0;font-weight:600;}
.mfoot-price span{color:#8B84B4;font-weight:500;}
.mfoot-mail{display:inline-block;color:#B5AEDA;font-size:14px;margin-top:8px;}

.mfoot-bottom{display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;font-size:13.5px;color:#8B84B4;gap:12px;flex-wrap:wrap;}
.mfoot-bottom a{display:inline;color:#8B84B4;padding:0;}
.mfoot-bottom a:hover{color:#fff;}

/* Page-specific wording that sits above the shared footer. */
/* The note and the footer are the same colour and sit flush, so they read as
   one dark block. With no bottom padding the note was pinned to the top edge of
   that block with 64px of empty dark under it before the footer's own content
   began -- 26px above the line and 64px below it. Symmetrical padding plus a
   hairline makes it read as a band the footer sits under, which is what it is. */
.mfoot-note{background:#191340;color:#8B84B4;font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:12.5px;line-height:1.65;padding:30px 0 30px;}
.mfoot-note + .mfoot{padding-top:40px;}
.mfoot-note .mfoot-note-in{border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:30px;}
.mfoot-note-in{max-width:1180px;margin:0 auto;padding:0 24px;}
.mfoot-note a{color:#B5AEDA;}

@media(max-width:900px){
  .mfoot-top{grid-template-columns:1fr 1fr;gap:28px;}
}
@media(max-width:560px){
  .mfoot{padding:48px 0 30px;}
  .mfoot-top{grid-template-columns:1fr;gap:24px;}
  .mfoot-bottom{flex-direction:column;align-items:flex-start;gap:10px;}
}

/* Touch sizing. On a phone these links were about 32px tall; a thumb needs 44.
   Scoped to coarse pointers so the desktop footer keeps its tighter rhythm. */
@media (pointer:coarse), (max-width:900px){
  .mfoot a{padding:11px 0;}
  .mfoot a.mfoot-brand{padding:0;}
}