/*
 * Spincast corporate site visual theme
 * Visual baseline: Editorial palette + Clean Tech layout + Manrope/Inter
 *
 * IMPORTANT: This stylesheet is presentation-only. It relies on the existing
 * Metalsmith-generated HTML and does not require changes to Markdown, Nunjucks,
 * navigation data, URLs, or copy.
 *
 * Icon downgrade path:
 *   RICH     = Minimal + Balanced + Rich sections enabled (default)
 *   BALANCED = Disable/comment only the "ICON SYSTEM: RICH" section
 *   MINIMAL  = Disable/comment both "ICON SYSTEM: RICH" and
 *              "ICON SYSTEM: BALANCED" sections
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  --sp-red: #d90000;
  --sp-red-dark: #a90000;
  --sp-red-soft: #eaded7;
  --sp-ink: #121212;
  --sp-slate: #353535;
  --sp-muted: #6d675e;
  --sp-paper: #f3f0e9;
  --sp-panel: #eee9df;
  --sp-panel-light: #f8f5ef;
  --sp-white: #ffffff;
  --sp-rule: #d4cfc5;
  --sp-gold: #d4af37;
  --sp-gold-dark: #846b13;
  --sp-shadow: 0 0.5rem 1.6rem rgba(18, 18, 18, 0.08);
  --sp-radius: 0.625rem;
  --sp-content: 54rem;
  --sp-wide: 72rem;
  --sp-font-heading: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sp-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================================================
   RESET + GLOBAL TYPOGRAPHY
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  background: var(--sp-paper);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sp-paper);
  color: var(--sp-slate);
  font-family: var(--sp-font-body);
  font-size: 1rem;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--sp-red-dark);
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.18em;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

a:hover {
  color: var(--sp-red);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(217, 0, 0, 0.3);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--sp-ink);
  font-family: var(--sp-font-heading);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  letter-spacing: -0.04em;
}

h2 {
  margin: 3.25rem 0 1rem;
  font-size: clamp(1.55rem, 3vw, 2rem);
}

h3 {
  margin: 2.25rem 0 0.75rem;
  font-size: clamp(1.18rem, 2vw, 1.45rem);
}

h4 {
  margin: 1.6rem 0 0.5rem;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

p,
ul,
ol,
blockquote,
table {
  margin-top: 0;
  margin-bottom: 1.15rem;
}

strong {
  color: var(--sp-ink);
  font-weight: 700;
}

ul,
ol {
  padding-left: 1.35rem;
}

li + li {
  margin-top: 0.35rem;
}

hr {
  height: 1px;
  margin: 3rem 0;
  border: 0;
  background: var(--sp-rule);
}

/* =========================================================
   PAGE SHELL
   ========================================================= */
main {
  width: 100%;
  padding: 0 1.25rem 5rem;
}

.page,
.post,
.profile,
.archive,
.service {
  width: min(100%, var(--sp-content));
  margin: 0 auto;
  padding-top: clamp(3rem, 7vw, 5rem);
}

.page > h1,
.post > header:first-child,
.profile > h1,
.archive > h1,
.service > h1 {
  position: relative;
}

.page > h1::after,
.profile > h1::after,
.archive > h1::after,
.service > h1::after {
  content: "";
  display: block;
  width: 4rem;
  height: 0.28rem;
  margin-top: 1.15rem;
  border-radius: 999px;
  background: var(--sp-red);
}

/* =========================================================
   HEADER + PRIMARY NAVIGATION
   ========================================================= */
.site-header {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 2.5rem), var(--sp-wide));
  min-height: 5rem;
  margin: 0 auto;
  gap: 2rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--sp-rule);
}

.site-name {
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: none;
}

.site-brand-logo {
  width: auto;
  height: 3rem;
  max-width: min(13.75rem, 42vw);
  object-fit: contain;
}

.primary-nav ul,
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.primary-nav .nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem 1rem;
}

.primary-nav .nav-item {
  position: relative;
  margin: 0;
}

.primary-nav .nav-item-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.primary-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.6rem 0.15rem;
  color: var(--sp-ink);
  font-family: var(--sp-font-heading);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
}

/* The anchor caret is used only on mouse/trackpad desktop layouts. */
.primary-nav .has-children > .nav-item-row > .nav-link::after {
  content: none;
}

.primary-nav .nav-link:hover,
.primary-nav .nav-link:focus-visible {
  color: var(--sp-red);
}

.primary-nav .nav-cta {
  margin-left: 0.3rem;
  padding: 0.72rem 1rem;
  border-radius: 0.5rem;
  background: var(--sp-red);
  color: var(--sp-white);
  font-weight: 750;
}

.primary-nav .nav-cta:hover,
.primary-nav .nav-cta:focus-visible {
  background: var(--sp-red-dark);
  color: var(--sp-white);
}

/* Touch/keyboard submenu control. Hidden on fine-pointer desktop below. */
.primary-nav .submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  margin-left: 0.12rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--sp-slate);
  cursor: pointer;
}

.primary-nav .submenu-toggle:hover,
.primary-nav .submenu-toggle:focus-visible {
  background: var(--sp-panel);
  color: var(--sp-red);
}

.primary-nav .submenu-toggle span {
  width: 0.48rem;
  height: 0.48rem;
  margin-top: -0.2rem;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 140ms ease, margin-top 140ms ease;
}

.primary-nav .submenu-toggle[aria-expanded="true"] span {
  margin-top: 0.18rem;
  transform: rotate(225deg);
}

/* Submenus are collapsed by default on every input type. */
.primary-nav .submenu {
  display: none;
  flex-direction: column;
  gap: 0.12rem;
}

.primary-nav .nav-item.submenu-open > .submenu {
  display: flex;
}

.primary-nav .submenu a {
  display: block;
  padding: 0.42rem 0;
  color: var(--sp-slate);
  font-size: 0.875rem;
  line-height: 1.35;
  text-decoration: none;
}

/* Tablet and larger: an opened touch submenu behaves like a real dropdown. */
@media (min-width: 48rem) {
  .primary-nav .submenu {
    position: absolute;
    top: calc(100% - 0.1rem);
    left: -0.8rem;
    z-index: 60;
    min-width: 18rem;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--sp-rule);
    border-radius: var(--sp-radius);
    background: var(--sp-panel-light);
    box-shadow: var(--sp-shadow);
  }
}

/* Desktop with a fine pointer keeps conventional hover/focus dropdowns. */
@media (hover: hover) and (pointer: fine) and (min-width: 48rem) {
  .primary-nav .submenu-toggle {
    display: none;
  }

  .primary-nav .has-children > .nav-item-row > .nav-link::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    margin-top: -0.18rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }

  .primary-nav .nav-item:hover > .submenu,
  .primary-nav .nav-item:focus-within > .submenu {
    display: flex;
  }

  .primary-nav .submenu a:hover,
  .primary-nav .submenu a:focus-visible {
    color: var(--sp-red);
  }
}

/* =========================================================
   GENERIC CONTENT RHYTHM
   ========================================================= */
.page > p,
.page > ul,
.page > ol,
.post > p,
.post > ul,
.post > ol,
.profile > p,
.service > p {
  max-width: 48rem;
}

.page > h2 + p,
.page > h3 + p,
.post h2 + p,
.post h3 + p,
.profile h2 + p,
.service h2 + p {
  margin-top: -0.2rem;
}

.page > img:not(.site-brand-logo),
.post > img,
.profile > img {
  margin: 1.5rem 0 2.5rem;
  border-radius: var(--sp-radius);
}

/* Home hero image: existing Markdown image only, no markup change. */
.page > h1 + img {
  width: 100%;
  margin-top: 0.25rem;
  margin-bottom: 3rem;
  border: 1px solid var(--sp-rule);
  box-shadow: var(--sp-shadow);
}

/* Selective content emphasis: open reading flow remains the default. */
#built-to-be-turnkey-for-content-partners,
#building-the-network-now,
#innovation-built-for-premium-media {
  padding-top: 1rem;
  border-top: 1px solid var(--sp-rule);
}

/* =========================================================
   HOME: WATCH / DISCOVER / ACT
   Uses only the exact existing Markdown-generated sibling sequence.
   No wrappers or text movement are required.
   ========================================================= */
#watch-discover-act + p,
#watch-discover-act + p + p + p,
#watch-discover-act + p + p + p + p + p {
  margin: 1rem 0 0;
  padding: 1.15rem 1.25rem 0.2rem;
  border: 1px solid var(--sp-rule);
  border-bottom: 0;
  border-radius: var(--sp-radius) var(--sp-radius) 0 0;
  background: var(--sp-panel-light);
}

#watch-discover-act + p + p,
#watch-discover-act + p + p + p + p,
#watch-discover-act + p + p + p + p + p + p {
  margin: 0 0 1rem;
  padding: 0.2rem 1.25rem 1.25rem;
  border: 1px solid var(--sp-rule);
  border-top: 0;
  border-radius: 0 0 var(--sp-radius) var(--sp-radius);
  background: var(--sp-panel-light);
}

#watch-discover-act + p > strong,
#watch-discover-act + p + p + p > strong,
#watch-discover-act + p + p + p + p + p > strong {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--sp-font-heading);
  font-size: 1.15rem;
}

/* =========================================================
   HOME: PARTNER AUDIENCE SECTIONS
   ========================================================= */
#content-partners,
#advertisers-and-demand-partners,
#brands-and-retailers,
#platforms-and-media-companies {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--sp-rule);
}

/* =========================================================
   HOW IT WORKS
   The five numbered headings receive visual separation without
   re-parenting the paragraphs that follow them.
   ========================================================= */
.page > h2[id^="1-"],
.page > h2[id^="2-"],
.page > h2[id^="3-"],
.page > h2[id^="4-"],
.page > h2[id^="5-"] {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2.25rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--sp-rule);
  border-radius: var(--sp-radius);
  background: var(--sp-panel-light);
}

#no-special-shoppable-post-production {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 4px solid var(--sp-red);
}

/* =========================================================
   TABLES
   ========================================================= */
table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--sp-rule);
  border-radius: var(--sp-radius);
  background: var(--sp-panel-light);
  font-size: 0.92rem;
}

th,
td {
  min-width: 9rem;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--sp-rule);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--sp-panel);
  color: var(--sp-ink);
  font-family: var(--sp-font-heading);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

tr:last-child td {
  border-bottom: 0;
}

/* =========================================================
   CHANNELS + VOD
   ========================================================= */
.channels-page {
  width: min(100%, var(--sp-wide));
}

.spincast-channel-grid,
.partner-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}

.spincast-channel-card,
.partner-channel-card {
  overflow: hidden;
  border: 1px solid var(--sp-rule);
  border-radius: var(--sp-radius);
  background: var(--sp-panel-light);
}

/* Channel title-card media box. All current channel artwork is 1060 × 597.
   The generated + Channels placeholder uses this same box geometry so it
   scales exactly like the PNG title cards at every responsive width. */
.spincast-channel-image,
.partner-channel-card img,
.spincast-channel-placeholder,
.partner-channel-placeholder {
  display: block;
  width: 100%;
  max-width: 1060px;
  aspect-ratio: 1060 / 597;
  box-sizing: border-box;
}

.spincast-channel-image,
.partner-channel-card img {
  height: auto;
  object-fit: cover;
  background: var(--sp-ink);
}

.spincast-channel-body,
.partner-channel-card-body {
  padding: 1.05rem 1.15rem 1.2rem;
}

.spincast-channel-body h3,
.partner-channel-card-body h3,
.spincast-channel-body h4 {
  margin-top: 0;
}

.spincast-channel-body h3,
.partner-channel-card-body h3 {
  margin-bottom: 0.3rem;
  font-size: 1.2rem;
}

.spincast-channel-body h4 {
  margin: 1rem 0 0.2rem;
  color: var(--sp-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spincast-channel-body p,
.partner-channel-card-body p {
  margin-top: 0.25rem;
  font-size: 0.93rem;
  line-height: 1.6;
}

.spincast-channel-category,
.partner-channel-category {
  color: var(--sp-red-dark);
  font-family: var(--sp-font-heading);
  font-size: 0.82rem !important;
  font-weight: 750;
}

.spincast-genre-list {
  columns: 3 12rem;
  column-gap: 2rem;
  padding: 1.25rem 1.25rem 1.25rem 2.5rem;
  border: 1px solid var(--sp-rule);
  border-radius: var(--sp-radius);
  background: var(--sp-panel-light);
}

.spincast-vod {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sp-rule);
}

/* Future channel placeholder: special state, intentionally gold.
   Geometry is inherited from the shared 1060 × 597 title-card media rule
   above. The text size is component-safe rather than viewport-based so the
   + Channels label cannot become disproportionately large inside the card. */
.spincast-channel-placeholder,
.partner-channel-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--sp-ink);
  color: var(--sp-gold);
  font-family: var(--sp-font-heading);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
}

.spincast-channel-card-placeholder,
.partner-channel-card-placeholder {
  border-color: rgba(132, 107, 19, 0.5);
}

/* =========================================================
   PARTNER + CAMPAIGN PAGES
   ========================================================= */
.partner-page {
  width: min(100%, var(--sp-wide));
  margin: 0 auto;
  padding-top: clamp(3rem, 7vw, 5rem);
}

.partner-hero {
  margin-bottom: 2rem;
  padding: 0 0 1.6rem;
  border-bottom: 1px solid var(--sp-rule);
}

.partner-eyebrow {
  margin: 0 0 0.65rem;
  color: var(--sp-red);
  font-family: var(--sp-font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.partner-hero h1 {
  max-width: 58rem;
  margin-bottom: 0.8rem;
}

.partner-deck {
  max-width: 52rem;
  margin-bottom: 0;
  color: var(--sp-slate);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.6;
}

.partner-content {
  width: min(100%, 58rem);
}

.partner-content > h2 {
  margin-top: 3rem;
}

.partner-content > ul,
.partner-content > ol {
  padding: 1.2rem 1.4rem 1.2rem 2.65rem;
  border: 1px solid var(--sp-rule);
  border-radius: var(--sp-radius);
  background: var(--sp-panel-light);
}

.partner-campaign-page .partner-hero {
  position: relative;
  padding: 1.6rem 1.7rem;
  border: 1px solid rgba(132, 107, 19, 0.5);
  border-top: 0.35rem solid var(--sp-gold);
  border-radius: var(--sp-radius);
  background: var(--sp-panel-light);
}

.partner-campaign-page .partner-eyebrow {
  color: var(--sp-gold-dark);
}

.partner-campaign-page .partner-content > h2:first-child {
  margin-top: 2rem;
}

.partner-channel-examples {
  margin-top: 4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--sp-rule);
}

.partner-cta {
  margin: 4rem 0 0;
  padding: 1.6rem 1.7rem;
  border: 1px solid var(--sp-rule);
  border-left: 0.3rem solid var(--sp-red);
  border-radius: var(--sp-radius);
  background: var(--sp-panel);
}

.partner-cta h2 {
  margin-top: 0;
}

.partner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.partner-action {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--sp-red);
  border-radius: 0.5rem;
  background: var(--sp-red);
  color: var(--sp-white);
  font-family: var(--sp-font-heading);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.25;
  text-decoration: none;
}

.partner-action:hover,
.partner-action:focus-visible {
  border-color: var(--sp-red-dark);
  background: var(--sp-red-dark);
  color: var(--sp-white);
}

.partner-action-secondary {
  border-color: var(--sp-ink);
  background: transparent;
  color: var(--sp-ink);
}

.partner-action-secondary:hover,
.partner-action-secondary:focus-visible {
  border-color: var(--sp-ink);
  background: var(--sp-ink);
  color: var(--sp-white);
}

.partner-contact {
  margin: 1.25rem 0 0;
  color: var(--sp-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.partner-form-slot:empty {
  display: none;
}

/* =========================================================
   ARCHIVES, POSTS, PROFILES + ABOUT
   ========================================================= */
.archive-list,
.profile-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

.archive-list li,
.profile-list li {
  margin: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--sp-rule);
}

.archive-list li:last-child,
.profile-list li:last-child {
  border-bottom: 1px solid var(--sp-rule);
}

.archive-list a,
.profile-list a {
  color: var(--sp-ink);
  font-family: var(--sp-font-heading);
  font-weight: 700;
  text-decoration: none;
}

.profile-position {
  display: block;
  margin-top: 0.2rem;
  color: var(--sp-muted);
  font-family: var(--sp-font-body);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.45;
}

.archive-list li > div {
  margin-top: 0.2rem;
  color: var(--sp-muted);
  font-size: 0.8rem;
}

.post > header {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--sp-rule);
}

.post > header p,
.profile > h1 + p {
  color: var(--sp-muted);
  font-family: var(--sp-font-heading);
  font-size: 0.88rem;
  font-weight: 650;
}

.profile > img {
  width: min(100%, 28rem);
  border: 1px solid var(--sp-rule);
  box-shadow: var(--sp-shadow);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  width: 100%;
  margin: 0;
  padding: 3.25rem 1.25rem 3.75rem;
  background: var(--sp-ink);
  color: var(--sp-white);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, var(--sp-wide));
  margin: 0 auto;
  gap: 1.5rem;
}

.footer-group h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.8rem;
  color: var(--sp-white);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-group li {
  margin: 0;
}

.footer-group li + li {
  margin-top: 0.42rem;
}

.footer-group a {
  color: #c9c3bb;
  font-size: 0.82rem;
  line-height: 1.4;
  text-decoration: none;
}

.footer-group a:hover,
.footer-group a:focus-visible {
  color: var(--sp-white);
}

/* =========================================================
   ICON SYSTEM: MINIMAL
   Core action icons only. Keep enabled even if higher icon
   levels are disabled.

   Implementation note: these are Font Awesome Free v7.3.1 SVGs
   applied as CSS masks. No icon markup or fallback text is added
   to the HTML. If an icon asset cannot load, the decoration simply
   disappears rather than displaying a broken glyph.
   ========================================================= */
.primary-nav .nav-cta::before,
.partner-action::before,
.partner-action-secondary::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.9em;
  height: 0.9em;
  background-color: currentColor;
  -webkit-mask: var(--sp-icon) center / contain no-repeat;
  mask: var(--sp-icon) center / contain no-repeat;
}

.primary-nav .nav-cta::before {
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/play.svg");
}

.partner-action::before {
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/envelope.svg");
}

.partner-action-secondary::before {
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/calendar.svg");
}

/* =========================================================
   ICON SYSTEM: BALANCED
   Adds icons to major conceptual/content components.
   Disable/comment this entire section to fall back to Minimal.
   ========================================================= */
#watch-discover-act + p > strong::before,
#watch-discover-act + p + p + p > strong::before,
#watch-discover-act + p + p + p + p + p > strong::before,
.page > h2[id^="1-"]::before,
.page > h2[id^="2-"]::before,
.page > h2[id^="3-"]::before,
.page > h2[id^="4-"]::before,
.page > h2[id^="5-"]::before,
#content-partners::before,
#advertisers-and-demand-partners::before,
#brands-and-retailers::before,
#platforms-and-media-companies::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  background-color: var(--sp-red);
  -webkit-mask: var(--sp-icon) center / contain no-repeat;
  mask: var(--sp-icon) center / contain no-repeat;
}

#watch-discover-act + p > strong::before,
.page > h2[id^="1-"]::before {
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/tv.svg");
}

#watch-discover-act + p + p + p > strong::before,
.page > h2[id^="2-"]::before {
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/wand-magic-sparkles.svg");
}

#watch-discover-act + p + p + p + p + p > strong::before,
.page > h2[id^="4-"]::before {
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/bookmark.svg");
}

.page > h2[id^="3-"]::before,
#brands-and-retailers::before {
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/cart-shopping.svg");
}

.page > h2[id^="5-"]::before {
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/coins.svg");
}

#content-partners::before {
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/film.svg");
}

#advertisers-and-demand-partners::before {
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/tower-broadcast.svg");
}

#platforms-and-media-companies::before {
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/microchip.svg");
}

/* =========================================================
   ICON SYSTEM: RICH
   Adds broader navigation/section reinforcement. Rich is the
   selected production level.

   IMPORTANT: Rich no longer uses a generic fallback icon. Each
   decorated corporate heading is explicitly mapped to an icon
   associated with its subject. If a future heading is not mapped,
   it remains text-only instead of receiving a repeated generic mark.

   Historical post/article body headings are intentionally not
   included. Disable/comment this entire section to fall back
   to Balanced.
   ========================================================= */

/* Shared geometry. Corporate section icons are hidden until a
   semantic mapping below explicitly enables them. */
.page > h2::before,
.partner-content > h2::before,
#built-to-be-turnkey-for-content-partners::before,
#no-special-shoppable-post-production::before,
#our-channels::before,
#video-on-demand::before,
.partner-channel-examples > h2::before,
.partner-cta > h2::before {
  content: "";
  display: none;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5rem;
  background-color: var(--sp-red);
  vertical-align: -0.02em;
  -webkit-mask: var(--sp-icon) center / contain no-repeat;
  mask: var(--sp-icon) center / contain no-repeat;
}

.footer-group h2::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  background-color: var(--sp-red);
  -webkit-mask: var(--sp-icon) center / contain no-repeat;
  mask: var(--sp-icon) center / contain no-repeat;
}

/* Footer navigation groups */
.footer-group:nth-child(1) h2::before { --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/tv.svg"); }
.footer-group:nth-child(2) h2::before { --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/handshake.svg"); }
.footer-group:nth-child(3) h2::before { --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/building.svg"); }
.footer-group:nth-child(4) h2::before { --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/newspaper.svg"); }
.footer-group:nth-child(5) h2::before { --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/scale-balanced.svg"); }

/* Media, viewing, and entertainment */
:is(
  #entertainment-made-actionable,
  #why-spincast,
  #watch-spincast-anywhere,
  #from-whats-on-screen-to-what-viewers-want-next,
  #watch-on-the-web,
  #get-the-apps,
  #more-ways-to-watch,
  #our-channels,
  #video-on-demand,
  #distribute-spincast
)::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/tv.svg");
}

/* AI, discovery, and interactive experiences */
:is(
  #watch-discover-act,
  #building-for-the-ai-era,
  #when-entertainment-creates-demand-make-your-products-discoverable,
  #from-ai-discovery-to-trusted-commerce,
  #product-discovery-across-the-network,
  #your-evergreen-content-is-already-full-of-shoppable-moments,
  #bring-ai-powered-shoppable-entertainment-to-your-platform,
  #watch-and-save-and-ai-enabled-advertising,
  #actionable-advertising-beyond-the-moment-it-airs
)::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/wand-magic-sparkles.svg");
}

/* Content, programming, and production */
:is(
  #built-to-be-turnkey-for-content-partners,
  #content-partnerships,
  #content-partners,
  #built-for-professional-distribution-workflows,
  #content-qualification,
  #no-special-shoppable-post-production-required,
  #no-special-shoppable-post-production,
  #content-partner-platform-guidelines
)::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/film.svg");
}

/* Commerce, retail, and product categories */
:is(
  #brands-and-retailers,
  #own-your-category-in-ai-powered-entertainment-commerce,
  #what-category-partners-can-explore,
  #the-category-exclusivity-offer
)::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/cart-shopping.svg");
}

/* Network, distribution, demand, and broadcast infrastructure */
:is(
  #network-first,
  #a-network-first-approach,
  #one-network-new-opportunities-across-media-and-commerce,
  #building-the-network-now,
  #more-than-traditional-ad-only-fast-inventory,
  #advertisers-and-demand-partners,
  #advertising-and-programmatic-demand,
  #why-prebid-server-adapter-partners
)::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/tower-broadcast.svg");
}

/* Platforms, technology, programmatic integration, and creative delivery */
:is(
  #platforms-and-media-companies,
  #platforms-and-technology-partners,
  #platforms-oems-and-technology-licensing,
  #programmatic-integration,
  #advertising-creative-requirements,
  #advertising-partner-platform-guidelines,
  #license-spincast-technology
)::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/microchip.svg");
}

/* Revenue, offers, and first-mover economics */
:is(
  #monetization-beyond-traditional-ad-breaks,
  #the-launch-window-offer,
  #why-the-launch-window-matters,
  #first-movers-can-receive-up-to-75000-in-spincast-advertising-credits,
  #the-advertising-credit-offer,
  #first-mover-availability-is-limited
)::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/coins.svg");
}

/* Partner fit, qualification, and collaboration */
:is(
  #what-we-look-for,
  #who-we-want-to-work-with,
  #qualification-checklist,
  #what-early-partners-can-review
)::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/handshake.svg");
}

/* Premium media, protection, and standards */
:is(
  #innovation-built-for-premium-media,
  #built-for-premium-media,
  #designed-for-premium-media
)::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/shield-halved.svg");
}

/* Company history and people */
#a-long-standing-focus-on-interactive-television::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/clock-rotate-left.svg");
}

#meet-the-team::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/users.svg");
}

/* Newsroom and media resources */
:is(
  #newsroom,
  #company-boilerplate,
  #downloadable-assets
)::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/newspaper.svg");
}

/* Legal notices */
:is(#trademarks, #copyright)::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/scale-balanced.svg");
}

/* Questions, inquiries, and conversations */
:is(
  #media-investor-corporate-and-general-inquiries,
  #media-investors-and-corporate-inquiries,
  #questions-or-exceptions,
  #start-a-conversation
)::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/envelope.svg");
}

/* How It Works numbered step icons are supplied by the BALANCED layer. */

/* Partner-page structural headings */
.partner-channel-examples > h2::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/film.svg");
}

.partner-cta > h2::before {
  display: inline-block;
  --sp-icon: url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.3.1/svgs/solid/envelope.svg");
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 68rem) {
  /* Stack the logo above a single-row top-level navigation on tablet
     widths so iPad layouts do not wrap unpredictably beside the logo. */
  .site-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }

  .primary-nav {
    width: 100%;
    padding-top: 0.55rem;
    border-top: 1px solid var(--sp-rule);
  }

  .primary-nav .nav-list {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.25rem 0.65rem;
  }

  .primary-nav .nav-link {
    font-size: 0.84rem;
  }

  .footer-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  main {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .site-header {
    display: block;
    width: calc(100% - 2rem);
    min-height: 0;
    padding: 0.9rem 0 1rem;
  }

  .site-brand-logo {
    height: 2.4rem;
    max-width: 11.25rem;
  }

  .primary-nav {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--sp-rule);
  }

  /* Only top-level items occupy the grid. Submenus remain collapsed until
     their adjacent chevron button is activated. */
  .primary-nav .nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.8rem;
  }

  .primary-nav .nav-item + .nav-item {
    margin-top: 0;
  }

  .primary-nav .nav-item-row {
    width: 100%;
  }

  .primary-nav .nav-link {
    flex: 1 1 auto;
    width: auto;
    justify-content: flex-start;
    padding: 0.5rem 0;
  }

  .primary-nav .submenu-toggle {
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
  }

  .primary-nav .nav-cta {
    justify-content: center;
    width: 100%;
    margin: 0.35rem 0 0;
    padding: 0.75rem 1rem;
  }

  .primary-nav .nav-item:last-child {
    grid-column: 1 / -1;
  }

  /* Mobile submenu is an indented accordion beneath its parent item. */
  .primary-nav .submenu {
    position: static;
    min-width: 0;
    margin: 0.15rem 0 0 0.15rem;
    padding: 0.15rem 0 0.15rem 0.75rem;
    border: 0;
    border-left: 1px solid var(--sp-rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .primary-nav .submenu a {
    padding: 0.36rem 0;
    font-size: 0.82rem;
  }

  .page,
  .post,
  .profile,
  .archive,
  .service,
  .partner-page {
    padding-top: 2.75rem;
  }

  .page > h1 + img {
    margin-bottom: 2.25rem;
  }

  .partner-campaign-page .partner-hero,
  .partner-cta {
    padding: 1.3rem;
  }

  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }

  .spincast-genre-list {
    columns: 2 9rem;
  }
}

@media (max-width: 30rem) {
  .primary-nav .nav-list {
    grid-template-columns: 1fr;
  }

  .primary-nav .nav-item:last-child {
    grid-column: auto;
  }

  .footer-nav {
    grid-template-columns: 1fr;
  }

  .partner-actions {
    display: grid;
  }

  .partner-action {
    justify-content: center;
    width: 100%;
  }

  .spincast-genre-list {
    columns: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}