/* Site-wide footer, shared by /split and /shield. The reference implementation
   is notchup.app/tools/; column order and links are in docs/site-footer-spec.md
   (notchup-tools-and-calculators). Loaded after the page stylesheet. */
/* Hairline top edge: on Split the closing CTA section is the same navy, so the two otherwise read as one block. */
.site-footer { background: #17163A; color: #B9B6F4; padding: 40px clamp(20px, 5vw, 32px) 44px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.sf-inner { max-width: 960px; margin: 0 auto; }

.sf-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: #24235A; border-radius: 18px; padding: 22px 24px; margin-bottom: 30px; }
/* Styled as a heading; it is a paragraph. As an h2 the slogan sat in the
   page outline as though it were a section of the product page. */
.sf-cta-head { color: #FFFFFF; font-weight: 700; font-size: clamp(20px, 5vw, 26px); line-height: 1.15; margin: 0 0 4px; }
.sf-cta p { margin: 0; font-size: 13.5px; color: #B9B6F4; }
.sf-cta .btn-primary { background: #E8684A; white-space: nowrap; text-decoration: none; display: inline-block; text-align: center; }

.sf-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px; margin-bottom: 28px; }
@media (min-width: 700px) { .sf-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .sf-cols { grid-template-columns: repeat(5, 1fr); } }
.sf-cols h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; }
.sf-cols ul { list-style: none; margin: 0; padding: 0; }
.sf-cols a { display: block; color: #B9B6F4; text-decoration: none; font-size: 13.5px; line-height: 1.5; padding: 3px 0; }
.sf-cols a:hover { color: #FFFFFF; }
/* Touch screens: every footer link a 44px target, measured, not eyeballed. */
@media (max-width: 767px) { .sf-cols a { display: flex; align-items: center; min-height: 44px; padding: 0; } }

.sf-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sf-brand img { height: 22px; filter: brightness(0) invert(1); }
.sf-tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; }
.sf-legal p { font-size: 12px; line-height: 1.7; margin: 0 0 12px; }