/* OddStorm marketing footer — namespaced .osf-* under chrome/OSDS tokens.
   Lives next to oddstorm-chrome.css; reads --bg/--surface/--text/--primary
   from there, so dark and html.light themes flip automatically.
   No selector overlaps with legacy #wrapper-footer / .footer-title /
   .footer-copyright in style.css — old rules are inert against the new
   markup. */

.osf {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  margin-top: 32px;
}
/* Chrome footer is self-contained — never inherits font / box-sizing
   from page body. Mix-page legacy body is `Arial 10px` (62.5% base)
   which silently shrinks every footer element relative to the modern
   page. Pin box-sizing too. */
.osf,
.osf *,
.osf *::before,
.osf *::after { box-sizing: border-box; }

/* ── CTA strip ─────────────────────────────────────────── */
.osf-cta {
  background: var(--brand-gradient);
  color: var(--on-primary);
  padding: 28px 0;
}
.osf-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.osf-cta-text {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--on-primary);
}
.osf-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--on-primary);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--shape-pill);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.osf-cta-btn:hover,
.osf-cta-btn:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--on-primary);
  text-decoration: none;
  outline: none;
}
.osf-cta-icon {
  width: 18px;
  height: 18px;
}

/* ── Main grid ─────────────────────────────────────────── */
.osf-main {
  background: var(--surface-container-low);
  border-top: 1px solid var(--border);
  padding: 56px 0 24px;
}
.osf-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.osf-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 0.8fr;
  gap: 36px;
}

.osf-col {
  min-width: 0;
}

/* Brand col */
.osf-col-brand {
  max-width: 320px;
}
.osf-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1;
  margin-bottom: 18px;
}
.osf-brand:hover,
.osf-brand:focus-visible {
  color: var(--text);
  text-decoration: none;
  outline: none;
}
.osf-brand-mark {
  width: 28px;
  height: 28px;
  display: block;
}
.osf-brand-word {
  display: inline-block;
}

.osf-tagline {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.osf-tagline-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
}

.osf-social {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.osf-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--shape-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition:
    color var(--t-fast),
    border-color var(--t-fast),
    background var(--t-fast);
}
.osf-social-link:hover,
.osf-social-link:focus-visible {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-container);
  text-decoration: none;
  outline: none;
}
.osf-social-link svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Column titles */
.osf-title {
  /* Explicit font-family — legacy `style.css h1,h2,h3 { font-family: Gudea }`
     would otherwise hijack this h2 on mix pages and not on modern. */
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1;
}
.osf-title-sister {
  margin-top: 28px;
}

/* Link lists */
.osf-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.osf-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition: color var(--t-fast);
}
.osf-links a:hover,
.osf-links a:focus-visible {
  color: var(--text);
  text-decoration: none;
  outline: none;
}

/* ── Bottom bar ────────────────────────────────────────── */
.osf-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.osf-copy {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.4;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .osf-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
  .osf-col-brand {
    grid-column: 1 / -1;
    max-width: none;
  }
  .osf-tagline {
    max-width: 480px;
  }
}

/* Sister-sites takes its own row on phones so Resources doesn't
   tower over Company. */
@media (max-width: 720px) {
  .osf-col-sister {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .osf {
    margin-top: 16px;
  }
  .osf-main {
    padding: 24px 0 20px;
  }
  .osf-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .osf-cta-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
  }
  .osf-inner {
    padding: 0 20px;
  }
  .osf-bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 32px;
  }
}

/* Very narrow (Galaxy Fold ~280, old phones) — single column only as
   a last resort. Mainstream phones (iPhone SE 320+ / 360+) keep 2-col. */
@media (max-width: 340px) {
  .osf-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}