/* The sponsorship page. A sibling of static/watch-marketing/watch.css: same
   dark hero, same light wash, flat white cards and the site's type tokens. */
@layer components {
  .adv-page {
    --story-card-shadow: 0 2px 6px rgb(27 26 32 / 3%), 0 10px 28px rgb(27 26 32 / 6%);
    width: 100vw; margin-left: calc(50% - 50vw); color: #25212e; background: #fff;
  }
  .adv-container { max-width: 1200px; margin-inline: auto; padding-inline: 32px; }
  .adv-page :is(h1, h2, h3) { font-family: var(--font-display); text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
  .adv-eyebrow { font-size: var(--text-compact); font-weight: 500; line-height: 1.6; color: #66568e; margin-bottom: 18px; }

  /* Hero */
  .adv-hero { background: #0f0d1f; color: #fff; padding-block: 88px 96px; }
  .adv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .adv-hero .adv-eyebrow { color: #b8abd9; }
  .adv-pitch h1 { font-size: clamp(44px, 4.7vw, 66px); font-weight: 500; line-height: 1.04; letter-spacing: -.05em; }
  .adv-lead { margin-top: 28px; font-size: var(--text-intro); line-height: 1.6; color: #d4cfdf; max-width: 470px; }
  .adv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
  .adv-page .adv-button { min-height: 48px; gap: 20px; font-size: var(--text-read); font-weight: 500; line-height: 1.4; text-decoration: none; }
  .adv-link { display: inline-flex; gap: 12px; align-items: center; padding-block: 8px; color: #5142ad; font-size: var(--text-read); font-weight: 500; text-decoration: underline; text-decoration-color: #bcb4d9; text-underline-offset: 5px; }
  .adv-link-light { color: #e2dced; text-decoration-color: #625970; }
  .adv-hero-mock { min-width: 0; background: #fff; color: #25212e; box-shadow: var(--story-card-shadow); }
  .adv-mock-bar { padding: 18px 26px; border-bottom: 1px solid #e9e5ef; font-size: var(--text-compact); line-height: 1.5; color: #6c627b; }
  .adv-mock-inner { padding: 26px; }
  .adv-mock-name { font-size: var(--text-title-small); font-weight: 500; line-height: 1.25; }
  .adv-mock-meta { margin-top: 6px; font-size: var(--text-compact); line-height: 1.6; color: #756d80; }

  /* The sponsored card, on the profile's own box idiom. */
  .adv-sponsored { margin-top: 20px; padding: 1.25rem; background: #fbfaf8; box-shadow: 0 2px 12px rgb(0 0 0 / 6%); }
  .adv-sponsored-label { font-size: var(--text-compact); letter-spacing: .08em; text-transform: uppercase; color: #8a8194; }
  .adv-sponsored-body { display: flex; gap: 14px; margin-top: 12px; align-items: flex-start; }
  .adv-sponsored-logo { flex: none; width: 44px; height: 44px; background: #e4e0ec; }
  .adv-sponsored-copy { min-width: 0; }
  .adv-sponsored-title { font-size: var(--text-read); font-weight: 500; line-height: 1.35; }
  .adv-sponsored-text { margin-top: 5px; font-size: var(--text-compact); line-height: 1.55; color: #5e5769; }
  .adv-sponsored-link { display: inline-block; margin-top: 10px; font-size: var(--text-compact); font-weight: 500; color: #5142ad; }

  /* Audience figures: hairline rules between cells, no boxes. */
  .adv-metrics { background: #f8f7f4; padding-block: 64px 56px; }
  .adv-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adv-figures > div { padding: 8px 28px; border-left: 1px solid #e3ded6; }
  .adv-figures > div:first-child { padding-left: 0; border-left: 0; }
  .adv-figures dt { font-size: var(--text-compact); line-height: 1.5; color: #6c657a; }
  .adv-figures dd { margin-top: 10px; font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 46px); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
  .adv-note { margin-top: 26px; font-size: var(--text-compact); line-height: 1.7; color: #756d80; }

  /* Sections */
  .adv-section-heading { max-width: 840px; margin-bottom: 40px; }
  .adv-section-heading h2 { font-size: clamp(34px, 3.8vw, 50px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
  .adv-section-heading > p:last-child { margin-top: 20px; max-width: 620px; font-size: var(--text-detail); line-height: 1.65; color: #696471; }
  .adv-reasons, .adv-targeting { padding-block: 88px; }
  .adv-placement, .adv-pricing { background: #f8f7f4; padding-block: 88px; scroll-margin-top: 84px; }
  .adv-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .adv-columns p:last-child { font-size: var(--text-read); line-height: 1.65; color: #5e5769; }

  /* Placement mockups */
  .adv-mockups { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
  .adv-mockup > div { background: #fff; padding: 28px; box-shadow: var(--story-card-shadow); }
  .adv-mockup figcaption { margin-top: 14px; font-size: var(--text-compact); color: #756d80; }
  .adv-profile-head { padding-bottom: 20px; border-bottom: 1px solid #e9e5ef; }
  .adv-profile-cols { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 32px; margin-top: 24px; align-items: start; }
  .adv-profile h3 { margin-top: 24px; font-size: var(--text-compact); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #8a8194; }
  .adv-profile-aside > :first-child, .adv-profile-cols h3:first-child { margin-top: 0; }
  .adv-facts { margin-top: 12px; }
  .adv-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding-block: 9px; border-bottom: 1px solid #f0edf3; }
  .adv-facts dt { font-size: var(--text-compact); color: #6c657a; }
  .adv-facts dd { font-size: var(--text-compact); color: #25212e; }

  /* Pricing */
  .adv-offer { max-width: 620px; padding: 40px; background: #fff; box-shadow: var(--story-card-shadow); }
  .adv-offer-name { font-size: var(--text-subheading); font-weight: 500; line-height: 1.3; }
  .adv-price { margin-top: 10px; font-family: var(--font-display); font-size: clamp(36px, 3.6vw, 48px); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; }
  .adv-includes { margin-top: 28px; display: grid; gap: 12px; }
  .adv-includes li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-read); line-height: 1.55; color: #4b4557; }
  .adv-includes .adv-check { flex: none; width: 20px; height: 20px; margin-top: 3px; color: #5142ad; }
  .adv-offer .adv-button { margin-top: 30px; }
  .adv-offer .adv-note { margin-top: 16px; }

  /* Targeting */
  .adv-attributes { display: flex; flex-wrap: wrap; gap: 10px; }
  .adv-attributes .ui-chip { min-height: 40px; padding: 8px 15px; font-size: var(--text-compact); }
  .adv-examples { margin-top: 28px; display: grid; gap: 10px; max-width: 700px; }
  .adv-examples li { padding: 16px 20px; background: #f8f7f4; font-size: var(--text-read); line-height: 1.55; color: #4b4557; }

  /* Close */
  .adv-close { background: #0f0d1f; color: #fff; padding-block: 88px; }
  .adv-close h2 { font-size: clamp(34px, 3.8vw, 50px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; max-width: 780px; }
  .adv-close > div > p { margin-top: 22px; max-width: 620px; font-size: var(--text-detail); line-height: 1.65; color: #d4cfdf; }
  .adv-close .adv-button { margin-top: 30px; }
  .adv-close .adv-note { color: #b9b1cc; }
  .adv-close a { color: #e2dced; text-decoration: underline; text-underline-offset: 4px; }

  @media (max-width: 1023px) {
    .adv-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .adv-mockups { grid-template-columns: minmax(0, 1fr); }
    .adv-mockup-mobile { max-width: 360px; }
    .adv-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
    .adv-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
    .adv-figures > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  }

  @media (max-width: 767px) {
    .adv-container { padding-inline: 20px; }
    .adv-hero { padding-block: 64px 72px; }
    .adv-reasons, .adv-targeting, .adv-placement, .adv-pricing, .adv-close { padding-block: 64px; }
    .adv-columns { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .adv-profile-cols { grid-template-columns: minmax(0, 1fr); }
    .adv-offer { padding: 28px; }
  }
}