/* /sponsorships — ported from docs/product-knowledge/brand-exploration/prototype/sponsor.html
   + styles.css (.so-* rules ~lines 813-872). Scoped under .so-front so it never leaks onto other
   pages. Unlike the newsletter/cities/home ports, this page does NOT use the shared Vox masthead
   (@suppress_site_header is left unset) — the existing site header / footer render normally above
   and below this page's <main> content, matching the prototype's plain .hdr nav on sponsor.html.
   Shares the same token values as homepage_front.css / newsletter_front.css (ink #212121, link
   blue #216bff, hover #0054fc, Inter + 'Bricolage Grotesque'); mint value copied from
   docs/product-knowledge/tokens/tokens.css's --color-pastel-mint (used there for
   --color-surface-contextual-mint, the prototype's .so-request panel background). */

.so-front {
  --sf-ink: #212121;
  --sf-ink-a80: rgba(33, 33, 33, 0.8);
  --sf-ink-a70: rgba(33, 33, 33, 0.7);
  --sf-ink-a50: rgba(33, 33, 33, 0.5);
  --sf-ink-a10: rgba(33, 33, 33, 0.1);
  --sf-white: #ffffff;
  --sf-link: #216bff;
  --sf-accent: #216bff;
  --sf-accent-hover: #0054fc;
  --sf-border: var(--sf-ink-a10);
  --sf-border-field: var(--sf-ink-a50);
  --sf-pastel-mint: #d6f5e3;
  --sf-font-primary: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sf-font-editorial: 'Bricolage Grotesque', Inter, system-ui, sans-serif;
  --sf-space-4: 4px;
  --sf-space-8: 8px;
  --sf-space-12: 12px;
  --sf-space-16: 16px;
  --sf-space-20: 20px;
  --sf-space-24: 24px;
  --sf-space-32: 32px;
  --sf-space-40: 40px;
  --sf-space-48: 48px;
  --sf-space-64: clamp(48px, calc(48px + 1.9vw), 64px);
  --sf-space-section-dense: clamp(24px, calc(24px + 2.9vw), 48px);
  --sf-radius-pill: 9999px;
  --sf-radius-control: 6px;
  --sf-radius-panel: 16px;

  color: var(--sf-ink);
  font-family: var(--sf-font-primary);
  background: var(--sf-white);
}

.so-front .so-edge { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.so-front .so-c-primary { color: var(--sf-ink); }
.so-front .so-c-secondary { color: var(--sf-ink-a70); }
.so-front .so-c-body { color: var(--sf-ink-a80); }
.so-front .so-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.so-front .so-metadata { font-size: 13px; font-weight: 500; }
.so-front .so-body-ui { font-size: 15px; }
.so-front .so-ui-heading { font-family: var(--sf-font-editorial); font-weight: 800; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.015em; }
.so-front a { color: inherit; text-decoration: none; }

.so-front .so-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: var(--sf-radius-control); font-weight: 600; font-size: 15px; border: 2px solid transparent; cursor: pointer; }
.so-front .so-btn-primary { background: var(--sf-accent); color: var(--sf-white); }
.so-front .so-btn-primary:hover { background: var(--sf-accent-hover); }
.so-front .so-btn-ghost { background: transparent; color: var(--sf-ink); border-color: var(--sf-ink); }
.so-front .so-btn-ghost:hover { background: var(--sf-ink-a10); }
/* Solid dark: the secondary action on a white page (an outline button disappears there; CLAUDE.md button rule). */
.so-front .so-btn-dark { background: var(--sf-ink); color: var(--sf-white); }
.so-front .so-btn-dark:hover { background: #3a3a3a; }

/* HERO */
/* /sponsors: the statement on the left, a short "how sponsors appear" note on the right, so the right half is not empty. */
@media (min-width: 960px) { .so-front .so-hero.so-hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: center; } }
.so-front .so-hero-note { padding: var(--sf-space-24); border-radius: var(--sf-radius-panel); background: #eef2f6; }
.so-front .so-hero-note-h { margin: 0; font-family: var(--sf-font-primary); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-ink); }
.so-front .so-hero-note ul { list-style: none; margin: var(--sf-space-16) 0 0; padding: 0; display: grid; gap: var(--sf-space-16); }
.so-front .so-hero-note li { padding-top: var(--sf-space-16); border-top: 2px solid var(--sf-ink); font-size: 16px; line-height: 1.5; color: var(--sf-ink-a80); }
.so-front .so-hero-note li strong { display: block; margin-bottom: var(--sf-space-4); font-size: 17px; font-weight: 600; color: var(--sf-ink); }
.so-front .so-hero-note .so-sponsor-link { display: inline-block; margin-top: var(--sf-space-20); }
.so-front .so-hero { display: grid; gap: var(--sf-space-32); padding-block: var(--sf-space-48) var(--sf-space-64); border-bottom: 1px solid var(--sf-border); }
@media (min-width: 960px) {
  .so-front .so-hero { grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--sf-space-64); align-items: end; padding-block: var(--sf-space-64); }
}
.so-front .so-display-xl {
  margin-top: var(--sf-space-8); max-width: 18ch;
  font-family: var(--sf-font-editorial); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98;
  font-size: clamp(34px, calc(34px + 2.4vw), 48px);
}
.so-front .so-dek { margin-top: var(--sf-space-16); max-width: 46ch; font-size: clamp(17px, calc(17px + 0.12vw), 18px); }
.so-front .so-ctas { display: flex; flex-wrap: wrap; gap: var(--sf-space-12); margin-top: var(--sf-space-24); }
.so-front .so-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sf-space-16); margin: 0; list-style: none; padding: 0; }
@media (min-width: 960px) { .so-front .so-stats { grid-template-columns: 1fr; } }
.so-front .so-stats > div { padding-top: var(--sf-space-12); border-top: 2px solid var(--sf-ink); }
.so-front .so-stats dd { margin: var(--sf-space-4) 0 0; font-family: var(--sf-font-editorial); font-weight: 800; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; color: var(--sf-ink); }
.so-front .so-intro { margin-top: var(--sf-space-8); max-width: 56ch; line-height: 1.6; }

/* WHERE YOU SHOW UP */
.so-front .so-where { display: grid; gap: var(--sf-space-40); padding-block: var(--sf-space-64); border-bottom: 1px solid var(--sf-border); }
@media (min-width: 960px) { .so-front .so-where { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sf-space-64); align-items: center; } }
.so-front .so-section-heading { font-family: var(--sf-font-editorial); font-weight: 800; font-size: clamp(22px, calc(22px + 0.8vw), 28px); letter-spacing: -0.02em; }
.so-front .so-places { list-style: none; margin: var(--sf-space-24) 0 0; padding: 0; counter-reset: pl; }
.so-front .so-places li { position: relative; padding: var(--sf-space-16) 0 var(--sf-space-16) var(--sf-space-40); border-top: 1px solid var(--sf-border); counter-increment: pl; }
.so-front .so-places li::before { content: counter(pl); position: absolute; left: 0; top: var(--sf-space-16); font-family: var(--sf-font-editorial); font-weight: 800; font-size: 1.25rem; color: var(--sf-ink); }
.so-front .so-places p { margin-top: var(--sf-space-4); }
.so-front .so-sample { margin: 0; }
.so-front .so-ad { margin-top: var(--sf-space-8); padding: var(--sf-space-20) var(--sf-space-24); border: 1px solid var(--sf-border); border-left: 4px solid var(--sf-ink); border-radius: var(--sf-radius-panel); background: var(--sf-white); box-shadow: 0 12px 28px -18px rgba(33, 33, 33, .3); }
.so-front .so-ad p { margin: 0; }
.so-front .so-ad-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-ink-a70); }
.so-front .so-ad-biz { margin-top: var(--sf-space-4) !important; font-weight: 700; color: var(--sf-ink); }
.so-front .so-ad-head { margin-top: var(--sf-space-12) !important; font-family: var(--sf-font-editorial); font-weight: 800; font-size: 1.375rem; line-height: 1.15; color: var(--sf-ink); }
.so-front .so-ad-body { margin-top: var(--sf-space-8) !important; line-height: 1.55; color: var(--sf-ink-a70); }
.so-front .so-ad-link { display: inline-block; margin-top: var(--sf-space-12); font-weight: 600; color: var(--sf-link); }
.so-front .so-note { margin-top: var(--sf-space-12); }

/* WHO IT'S FOR */
.so-front .so-who { padding-block: var(--sf-space-64); border-bottom: 1px solid var(--sf-border); }
.so-front .so-chips { list-style: none; margin: var(--sf-space-24) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sf-space-8); }
.so-front .so-chips li { padding: var(--sf-space-8) var(--sf-space-16); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-pill); font-size: 15px; color: var(--sf-ink); }

/* OPTIONS / TIERS */
.so-front .so-options { padding-block: var(--sf-space-64); }
.so-front .so-tiers { display: grid; gap: var(--sf-space-16); margin-top: var(--sf-space-32); }
@media (min-width: 900px) { .so-front .so-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.so-front .so-tier { display: flex; flex-direction: column; gap: var(--sf-space-8); padding: var(--sf-space-24); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-panel); }
.so-front .so-tier.is-rec { border: 2px solid var(--sf-ink); }
.so-front .so-rec { align-self: flex-start; padding: var(--sf-space-4) var(--sf-space-8); border-radius: var(--sf-radius-pill); background: var(--sf-ink); color: var(--sf-white); }
.so-front .so-tier-name { margin: 0; font-family: var(--sf-font-editorial); font-weight: 800; font-size: 1.5rem; line-height: 1.1; color: var(--sf-ink); }
.so-front .so-gets { list-style: none; margin: var(--sf-space-8) 0 var(--sf-space-16); padding: var(--sf-space-12) 0 0; border-top: 1px solid var(--sf-border); display: grid; gap: var(--sf-space-8); }
.so-front .so-gets li { position: relative; padding-left: var(--sf-space-24); line-height: 1.45; color: var(--sf-ink); }
.so-front .so-gets li::before, .so-front .so-safe li::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; }
.so-front .so-pick { margin-top: auto; width: 100%; }

/* TRUST / BRAND SAFETY */
.so-front .so-trust { display: grid; gap: var(--sf-space-40); padding-block: var(--sf-space-48) var(--sf-space-64); border-top: 1px solid var(--sf-border); }
@media (min-width: 900px) { .so-front .so-trust { grid-template-columns: 1fr 1fr; gap: var(--sf-space-64); } }
.so-front .so-expect { margin: 0; padding-left: var(--sf-space-20); border-left: 3px solid var(--sf-ink); }
.so-front .so-expect p { margin: 0; font-family: var(--sf-font-editorial); font-weight: 800; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); line-height: 1.2; color: var(--sf-ink); }
.so-front .so-expect cite { display: block; margin-top: var(--sf-space-12); font-style: normal; }
.so-front .so-safe-intro { margin-top: var(--sf-space-8); }
.so-front .so-safe { list-style: none; margin: var(--sf-space-16) 0 0; padding: 0; display: grid; gap: var(--sf-space-8); }
.so-front .so-safe li { position: relative; padding-left: var(--sf-space-24); color: var(--sf-ink); }

/* REQUEST FORM — real formsubmit.co mechanism, restyled only */
.so-front .so-request-wrap { padding-bottom: var(--sf-space-section-dense); }
.so-front .so-request { display: grid; gap: var(--sf-space-32); padding: var(--sf-space-40) var(--sf-space-32); border-radius: var(--sf-radius-panel); background: var(--sf-pastel-mint); }
@media (min-width: 960px) { .so-front .so-request { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--sf-space-64); padding: var(--sf-space-48); } }
.so-front .so-display-lg { margin: 0; font-family: var(--sf-font-editorial); font-weight: 800; font-size: clamp(28px, calc(28px + 1.2vw), 36px); letter-spacing: -0.03em; line-height: 1.05; color: var(--sf-ink); }
.so-front .so-req-head .so-body-ui { margin-top: var(--sf-space-12); line-height: 1.6; }
.so-front .so-req-head .so-metadata { margin-top: var(--sf-space-12); }
.so-front .so-req-head a { color: var(--sf-link); }
.so-front .so-form { display: grid; gap: var(--sf-space-16); }
.so-front .so-row { display: grid; gap: 0 var(--sf-space-16); }
@media (min-width: 560px) { .so-front .so-row { grid-template-columns: 1fr 1fr; } }
.so-front .so-fieldlabel { display: block; margin-bottom: var(--sf-space-4); font-weight: 600; color: var(--sf-ink); }
.so-front .so-field {
  width: 100%; height: 48px; padding: 0 var(--sf-space-16); border: 2px solid var(--sf-border-field);
  border-radius: var(--sf-radius-control); background: var(--sf-white); font: inherit; font-size: 15px; color: var(--sf-ink);
}
.so-front select.so-field { appearance: auto; }
.so-front .so-field:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; border-color: var(--sf-accent); }
.so-front .so-notes { height: auto; padding-block: var(--sf-space-12); resize: vertical; }
.so-front .so-send { width: 100%; min-height: 52px; }

@media (max-width: 639px) {
  .so-front .so-hero { padding-block: var(--sf-space-32) var(--sf-space-48); }
  .so-front .so-where, .so-front .so-who, .so-front .so-options { padding-block: var(--sf-space-48); }
  .so-front .so-request { padding: var(--sf-space-24) var(--sf-space-20); }
}

/* ---------- success toast (real formsubmit.co ?success=true flow — untouched mechanism,
   restyled to the new design system) ---------- */
.so-front .so-toast { position: fixed; top: 1rem; left: 50%; transform: translate3d(-50%, -10px, 0); z-index: 60; width: min(44rem, calc(100vw - 2rem)); pointer-events: none; opacity: 0; transition: opacity 220ms ease, transform 220ms ease; }
.so-front .so-toast.is-visible { opacity: 1; transform: translate3d(-50%, 0, 0); }
.so-front .so-toast__inner { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sf-space-12); border-radius: var(--sf-radius-panel); border: 1px solid var(--sf-ink-a10); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); box-shadow: 0 18px 50px rgba(33, 33, 33, 0.16); padding: var(--sf-space-16); }
.so-front .so-toast__icon { flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--sf-radius-pill); background: var(--sf-pastel-mint); color: var(--sf-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.so-front .so-toast__copy { min-width: 0; flex: 1; }
.so-front .so-toast__title { font-weight: 800; color: var(--sf-ink); }
.so-front .so-toast__body { margin-top: 2px; color: var(--sf-ink-a70); }
.so-front .so-toast__close { flex-shrink: 0; background: none; border: none; font-weight: 700; color: var(--sf-ink-a70); cursor: pointer; }
.so-front .so-toast__close:hover { color: var(--sf-ink); }

@media (prefers-reduced-motion: reduce) {
  .so-front .so-toast { opacity: 1 !important; transform: translate3d(-50%, 0, 0) !important; transition: none !important; }
}

/* ---------- /sponsors directory (list of real paying sponsors, not the pitch page) ----------
   so-hero-single: this page has no stats sidebar to fill the pitch page's 2-column hero, so it
   overrides so-hero back to a single column at every width instead of leaving an empty 16rem gap. */
.so-front .so-hero-single { grid-template-columns: none !important; }

.so-front .so-sponsor-tier + .so-sponsor-tier { margin-top: var(--sf-space-64); }

/* Two equal columns from 720px up (one below), cards stretched to the row's height with their links pinned to the bottom, so a row
   never looks ragged and one or two sponsors still sit on the same column rhythm (a lone card takes one column, not the full row). */
.so-front .so-sponsor-grid { display: grid; gap: var(--sf-space-20); margin-top: var(--sf-space-24); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 720px) { .so-front .so-sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-space-24); } }

/* Sponsored Content Block pattern (docs/product-knowledge/visual-grammar.md): Contained,
   required — this page's whole job is distinguishing paid/sponsored content, so a restrained
   shadow is earned here (not decorative default). */
.so-front .so-sponsor-card {
  position: relative; display: flex; flex-direction: column; padding: var(--sf-space-24);
  border: 1px solid var(--sf-border); border-radius: var(--sf-radius-panel); background: var(--sf-white);
  box-shadow: 0 10px 24px -18px rgba(33, 33, 33, .35);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}
.so-front .so-sponsor-card:has(.so-sponsor-link):hover,
.so-front .so-sponsor-card:has(.so-sponsor-fb):hover {
  border-color: var(--sf-ink-a50); box-shadow: 0 18px 36px -16px rgba(33, 33, 33, .4); transform: translateY(-2px);
}

.so-front .so-sponsor-head { display: flex; align-items: flex-start; gap: var(--sf-space-16); }
.so-front .so-sponsor-logo {
  flex: none; width: 60px; height: 60px; border-radius: var(--sf-radius-control); border: 1px solid var(--sf-border);
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--sf-white);
}
.so-front .so-sponsor-logo img { width: 100%; height: 100%; object-fit: contain; padding: var(--sf-space-4); }
.so-front .so-sponsor-logo-fallback { background: var(--sf-pastel-mint); font-family: var(--sf-font-editorial); font-weight: 800; font-size: 15px; color: var(--sf-ink); }
.so-front .so-sponsor-meta { margin: 0 0 var(--sf-space-4); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-ink-a70); }
.so-front .so-sponsor-name { margin: 0; font-family: var(--sf-font-editorial); font-weight: 800; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--sf-ink); }
.so-front .so-sponsor-desc { margin: var(--sf-space-16) 0 var(--sf-space-16); flex: 1 0 auto; font-size: 16px; line-height: 1.55; color: var(--sf-ink-a80, var(--sf-ink-a70)); text-wrap: pretty; }
.so-front .so-sponsor-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-space-12); margin-top: auto; padding-top: var(--sf-space-12); border-top: 1px solid var(--sf-border); }
.so-front .so-sponsor-link { font-weight: 600; font-size: 15px; color: var(--sf-link); }
.so-front .so-sponsor-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.so-front .so-sponsor-fb {
  display: inline-flex; align-items: center; gap: var(--sf-space-4); padding: var(--sf-space-4) var(--sf-space-12);
  border-radius: var(--sf-radius-pill); background: #1877f2; border: 1px solid #1877f2;
  color: var(--sf-white); font-size: 13px; font-weight: 700;
}
.so-front .so-sponsor-fb:hover { background: #0f63cc; border-color: #0f63cc; }
.so-front .so-sponsor-empty {
  padding: var(--sf-space-48) var(--sf-space-32); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-panel);
  background: var(--sf-white); text-align: center;
}
.so-front .so-sponsor-empty .so-btn { margin-top: var(--sf-space-24); }