/* Sponsor rate card — whattodobaja.com/sponsors
   Recreates design_handoff_sponsor_rate_card. Page content is scoped under .sp so
   the global resets in style.css only reach the shared site header. */

html.sp-html { scroll-behavior: smooth; }
body.sp-body { background: #FFFFFF; min-height: 0; }
body.sp-body .header { background: linear-gradient(90deg, #F0733F 0%, #F48B4C 40%, #F7A660 75%, #F9C27A 100%); }

/* Three header pills (language, currency, menu) leave less room for the title on phones. */
body.sp-body .header__title { font-size: clamp(15px, 4.2vw, 2rem); }
body.sp-body .header__inner { gap: 0.5rem; }

.header__currency { gap: 0.3rem; }
.header__currency-sign { color: #E8611A; font-size: 0.75rem; font-weight: 700; }

.sp {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
  color: #1F1D1A;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}
/* style.css makes everything border-box; the design uses browser defaults. */
.sp *, .sp *::before, .sp *::after { box-sizing: content-box; }
.sp button { box-sizing: border-box; }
.sp a { color: #1F1D1A; text-decoration: none; }
.sp a:hover { color: #E8611A; }
.sp button { font-family: inherit; }

.sp-main { max-width: 560px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

.sp-h2 { margin: 0; font-weight: 700; letter-spacing: -0.02em; font-size: 30px; line-height: 1.05; }

/* Pricing intro */
.sp-intro { padding: 28px 0 20px; display: flex; flex-direction: column; gap: 10px; }
.sp-towns { font-size: 15px; font-weight: 600; color: #E66C36; margin-top: -4px; }
.sp-lead { margin: 0; color: #2E2B27; font-size: 16px; line-height: 1.5; }
.sp-label { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7A756D; }
.sp-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -2px; }
.sp .sp-jump a { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #E5E1DA; background: #FFFFFF; color: #1F1D1A; font-size: 14px; font-weight: 600; text-decoration: none; }
.sp-jump b { color: #E8611A; font-weight: 700; }
.sp-jump[hidden] { display: none; }
.sp-picks { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.sp-picks__sub { margin: -2px 0 0; font-size: 15px; line-height: 1.5; color: #4A4640; }
.sp-picks__h { margin: 0; font-weight: 700; letter-spacing: -0.02em; font-size: 22px; line-height: 1.15; color: #1F1D1A; }
.sp-cur { display: flex; align-items: center; gap: 8px; }
.sp-cur--row { margin-top: 2px; }
.sp-cur__seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #E5E1DA; border-radius: 999px; background: #FFFFFF; }
.sp .sp-cur__seg button { border: 0; cursor: pointer; border-radius: 999px; padding: 0 11px; min-height: 26px; font-size: 12px; font-weight: 600; background: transparent; color: #7A756D; transition: background 0.15s, color 0.15s; }
.sp .sp-cur__seg button[aria-pressed="true"] { background: #F1ECE5; color: #1F1D1A; }

/* Placement sections */
.sp-place { scroll-margin-top: 0; padding: 22px 0 28px; border-top: 1px solid #E5E1DA; display: flex; flex-direction: column; gap: 18px; }
/* The cross-region banner scrolls away on this page instead of sticking, so sticky bits sit at the very top. */
.sp-body .region-banner { position: relative; }
.sp-head { position: sticky; top: 0; z-index: 15; background: #FFFFFF; padding: 10px 0; margin: -10px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sp-head__txt { display: flex; flex-direction: column; gap: 3px; }
.sp-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #B4470E; }
.sp-h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; font-size: 24px; line-height: 1.05; }
.sp-sub { color: #7A756D; font-size: 14px; }
.sp-chip { flex: none; background: linear-gradient(100deg, #C9521A 0%, #B4470E 100%); color: #FFFFFF; border-radius: 999px; padding: 6px 13px; font-weight: 700; font-size: 13px; white-space: nowrap; }
/* Center the chip on the title line (kicker ~16px + 3px gap + half the title/chip height difference). */
.sp-head > .sp-chip { margin-top: 16px; }
.sp-chip--outline { background: none; color: #1F1D1A; border: 1px solid #1F1D1A; padding: 4px 12px; }

.sp-stack { display: flex; flex-direction: column; gap: 18px; align-items: center; }

/* Phone mockups */
.sp-phone { margin: 0; flex: none; width: 200px; }
.sp-phones { display: flex; gap: 14px; justify-content: center; width: 100%; }
.sp-phones .sp-phone { flex: 1 1 0; min-width: 0; max-width: 170px; width: auto; }
.sp-phone__frame { width: 100%; border: 6px solid #1F1812; border-radius: 26px; overflow: hidden; background: #FFFFFF; box-sizing: border-box; }
.sp-phone__bar { height: 22px; background: #393B43; display: flex; align-items: center; justify-content: center; padding: 0 10px; box-sizing: border-box; }
.sp-phone__url { width: 100%; height: 13px; border-radius: 999px; background: #51535C; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 600; color: #EDEDED; line-height: 1; }
.sp-phone__screen { position: relative; width: 100%; aspect-ratio: 510 / 1110; }
.sp-phone__screen--mid { aspect-ratio: 510 / 1108; }
.sp-phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-adslot { position: absolute; left: 2.4%; width: 95.2%; top: 25.2%; height: 12.3%; background: #1F1812; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.sp-adslot--mid { top: 64.7%; height: 12.4%; }
.sp-adslot span { color: #FFFFFF; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sp-phones .sp-adslot span { font-size: 9px; letter-spacing: 0.08em; }

/* Price column */
.sp-pricecol { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sp-panel { background: #FBF6F0; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.sp-tog { position: sticky; top: 76px; z-index: 12; box-shadow: 0 0 0 10px #FBF6F0; width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #EFE4D6; border-radius: 12px; padding: 4px; }
.sp-tog button { border: none; cursor: pointer; border-radius: 9px; padding: 9px 8px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: transparent; color: #1F1D1A; transition: background 0.15s; }
.sp-tog__l { font-size: 14px; font-weight: 600; line-height: 1.1; }
.sp-tog__s { font-size: 11.5px; line-height: 1.1; color: #7A756D; }
.sp-tog button[data-season="off"][aria-pressed="true"] { background: #1F1812; color: #FFFFFF; }
.sp-tog button[data-season="off"][aria-pressed="true"] .sp-tog__s { color: #D9CFC4; }
.sp-tog button[data-season="high"][aria-pressed="true"] { background: linear-gradient(100deg, #EA7032 0%, #DE6224 50%, #D2571C 100%); color: #FFFFFF; }
.sp-tog button[data-season="high"][aria-pressed="true"] .sp-tog__s { color: #FFEBDD; }

.sp-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid #E5DACB; border-radius: 12px; padding: 14px 16px; color: #1F1D1A; background: #FFFFFF; }
.sp-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid #EFE9E1; }
.sp-card__name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sp-card__title { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: #1F1D1A; }
.sp-card__note { color: #7A756D; font-size: 13px; }
.sp-card__season { flex: none; font-weight: 600; font-size: 13px; color: #E8611A; }
.sp-card__season[data-season="off"] { color: #4A4640; }

.sp-price-lg { font-weight: 600; letter-spacing: -0.02em; font-size: 36px; line-height: 1; }
.sp-per-lg { font-size: 16px; color: #7A756D; }
.sp-price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.sp-price-md { font-weight: 600; letter-spacing: -0.02em; font-size: 28px; line-height: 1.1; }
.sp-per-md { font-size: 14px; color: #7A756D; }
.sp-save { background: #FCEBDD; color: #B4470E; border-radius: 999px; padding: 1px 9px; font-weight: 600; font-size: 12px; }

.sp-metrics { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.sp-metric { display: flex; gap: 8px; }
.sp-metric svg { flex: none; margin-top: 2px; }

.sp-or { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.sp-or__t { font-size: 13px; font-weight: 600; color: #4A4640; white-space: nowrap; }
.sp-or__line { flex: 1; height: 1px; background: #E5E1DA; }

.sp-year { display: flex; flex-direction: column; gap: 6px; border: 1px solid #D9D2C8; border-top: 4px solid #E8611A; border-radius: 12px; padding: 11px 16px 14px; color: #1F1D1A; }
.sp-year__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid #EFE9E1; }
.sp-more { font-size: 13px; color: #4A4640; font-style: italic; }
/* "Just $X more than High Season pass" is hidden for now; remove this rule to show it again. */
.sp-year .sp-more { display: none; }
.sp-metric [data-bind^="reach"] { font-weight: 700; color: #1F1D1A; }
.sp-permo { font-size: 13.5px; font-weight: 500; color: #7A756D; }
.sp-projnote { margin: 0 4px 2px; font-size: 12px; line-height: 1.4; color: #7A756D; }
.sp-guarantee { margin: 6px 4px 2px; font-size: 12.5px; line-height: 1.4; font-weight: 600; font-style: italic; color: #4A4640; }
.sp-guarantee::before { content: "✓ "; color: #E8611A; }
.sp-guarantee--growth { margin: 14px 4px 0; font-size: 14px; font-weight: 400; display: flex; align-items: flex-start; gap: 8px; }
.sp-guarantee--growth::before { content: none; }
.sp-guarantee--growth svg { flex: none; margin-top: 1px; }
.sp-guarantee--cta { margin: -2px 0 0; font-size: 14px; font-weight: 400; color: #EFE9E1; }
#growth-plan { scroll-margin-top: 16px; }

/* High season offer (Oct 2026). data-offer="high-season" on .sp hides the off-season
   toggle, Year plans, save badges and repeat stats. Remove the attribute to restore them. */
.sp-hs-only { display: none; }
.sp[data-offer="high-season"] .sp-hs-only { display: block; }
.sp[data-offer="high-season"] :is(.sp-tog, .sp-or, .sp-year, .sp-permo, .sp-hs-hide) { display: none; }
.sp-ormo { font-size: 13.5px; font-weight: 500; color: #7A756D; }
.sp-promo { margin-top: 2px; font-size: 13px; font-weight: 600; color: #B4470E; }
.sp-proof__new { margin: 0; font-size: 13.5px; font-weight: 600; color: #1F1D1A; display: flex; align-items: center; gap: 7px; }
.sp-proof__new svg { flex: none; }
.sp-foot__terms { margin-top: 6px; }
/* Asterisks are added in CSS so translated strings stay plain text and the mark stays orange. */
.sp-projnote::before, .sp-tog__s--proj::after { content: "*"; color: #E8611A; }
.sp-tog button[data-season="high"][aria-pressed="true"] .sp-tog__s--proj::after { color: inherit; }

/* Community */
.sp-sec { padding: 30px 0 8px; border-top: 1px solid #E5E1DA; display: flex; flex-direction: column; gap: 14px; }
.sp-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #E66C36; margin-bottom: -4px; }
.sp-grid1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sp-stat { border: 1px solid #E5E1DA; border-radius: 14px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.sp-stat__head { display: flex; align-items: center; gap: 10px; }
.sp-ic { width: 32px; height: 32px; border-radius: 999px; background: #FCEBDD; display: flex; align-items: center; justify-content: center; flex: none; }
.sp-stat__name { font-weight: 600; font-size: 15px; }
.sp-stat__handle { font-size: 13px; color: #7A756D; margin-left: auto; }
.sp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-num { display: flex; flex-direction: column; gap: 4px; }
.sp-num__v { font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-size: 32px; }
.sp-num__l { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #4A4640; }
.sp-num__l svg { flex: none; }

/* Growth plan */
.sp-growth-wrap { padding: 22px 0 8px; border-top: 1px solid #E5E1DA; }
.sp-growth { background: linear-gradient(135deg, #F9DCC6 0%, #FCEBDD 45%, #FDF3EA 100%); border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; gap: 22px; }
.sp-growth__hd { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.sp-growth__kick { display: flex; align-items: center; gap: 6px; }
.sp-growth__kick span { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sp-growth__h { margin: 12px 0 14px; }
/* Always one row (number, arrow, number); labels wrap inside their column on phones. */
.sp-growth__nums { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.sp-gnum { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
@media (max-width: 480px) { .sp .sp-gnum__v { font-size: 30px; } .sp-growth__nums { gap: 8px; } }
.sp-gnum__v { font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-size: 36px; }
.sp-gnum__v--hi { color: #E8611A; }
.sp-gnum__l { font-size: 12.5px; color: #4A4640; }
.sp-gnum__l b { font-weight: 600; color: #1F1D1A; }
.sp-arrow { flex: none; margin-bottom: 16px; }
.sp-ast { color: #E8611A; }
.sp-plan { display: flex; flex-direction: column; gap: 16px; }
.sp-plan__item { display: flex; gap: 12px; align-items: flex-start; }
.sp-plan__ic { width: 34px; height: 34px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; flex: none; }
.sp-plan__txt { display: flex; flex-direction: column; gap: 2px; }
.sp-plan__t { font-weight: 600; font-size: 15px; }
.sp-plan__d { font-size: 14px; color: #2E2B27; }

/* Why sponsor */
.sp-why { margin-top: 28px; padding: 30px 0 8px; border-top: 1px solid #E5E1DA; display: flex; flex-direction: column; gap: 16px; }
.sp-benefit { border: 1px solid #E5E1DA; border-radius: 14px; padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; }
.sp-benefit__ic { width: 38px; height: 38px; border-radius: 999px; background: #FCEBDD; display: flex; align-items: center; justify-content: center; flex: none; }
.sp-benefit__txt { display: flex; flex-direction: column; gap: 3px; }
.sp-benefit__t { font-weight: 600; font-size: 16px; }
.sp-benefit__d { margin: 0; font-size: 14px; color: #4A4640; }
.sp-plus { margin: 0 2px; font-size: 14px; line-height: 1.45; color: #4A4640; }
.sp-plus b { color: #B4470E; font-weight: 700; }

/* Become a sponsor */
.sp-become { padding: 28px 0 12px; }
.sp-cta { background: #1F1812; color: #FFFFFF; border-radius: 18px; padding: 28px 22px; display: flex; flex-direction: column; gap: 14px; }
.sp-cta__pill { align-self: flex-start; background: #E8611A; color: #FFFFFF; border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: 12px; }
.sp-cta__h { font-size: 32px; color: #FFFFFF; }
.sp-cta__p { margin: 0; font-size: 16px; line-height: 1.5; color: #EFE9E1; }
.sp .sp-wa { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; border-radius: 12px; background: #25D366; color: #10301C; font-size: 17px; font-weight: 700; }
.sp-wa svg { flex: none; }
/* Email lead form (under the WhatsApp button) */
.sp-form { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; }
.sp-cta__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.sp-cta__btns .sp-wa { margin-top: 0; font-size: 16px; padding: 0 8px; white-space: nowrap; }
@media (max-width: 420px) { .sp-cta__btns .sp-wa { font-size: 14.5px; gap: 6px; } .sp .sp-cta__btns .sp-mailbtn { font-size: 14.5px; } }
/* Once the form opens, WhatsApp takes the full row. */
.sp-cta__btns:has(.sp-mailbtn[hidden]) .sp-wa { grid-column: 1 / -1; }
.sp .sp-mailbtn { min-height: 52px; border: 1px solid #6B5F54; border-radius: 12px; background: transparent; color: #FFFFFF; font-size: 15px; font-weight: 600; cursor: pointer; }
.sp .sp-mailbtn:hover { border-color: #FFFFFF; }
.sp .sp-mailbtn[hidden] { display: none; }
.sp-form[hidden] { display: none; }
.sp-form__h { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #FFFFFF; }
.sp-form__l { font-size: 13px; font-weight: 600; color: #D9CFC4; }
.sp .sp-form__in { display: block; min-width: 0; margin: 0 0 6px; padding: 12px 14px; border: 1px solid #4A4038; border-radius: 12px; background: #2A221B; color: #FFFFFF; font-family: inherit; font-size: 16px; line-height: 1.35; }
.sp .sp-form__in::placeholder { color: #9A8F84; }
.sp .sp-form__in:focus { outline: none; border-color: #E8611A; }
.sp .sp-form__ta { resize: vertical; min-height: 66px; }
.sp-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sp .sp-form__btn { min-height: 48px; border: 1px solid #FFFFFF; border-radius: 12px; background: #FFFFFF; color: #1F1812; font-size: 15px; font-weight: 700; cursor: pointer; }
.sp .sp-form__btn:hover { filter: brightness(0.93); }
.sp .sp-form__btn:disabled { cursor: default; opacity: 0.6; }
.sp-form__err { margin: 2px 0 0; font-size: 14px; color: #F7B08A; }
.sp .sp-form__err a { color: #25D366; font-weight: 700; text-decoration: underline; }
.sp-form__ok { margin: 6px 0 0; padding: 14px 16px; border-radius: 12px; background: #2A221B; border: 1px solid #25D366; font-size: 15px; line-height: 1.45; color: #FFFFFF; }

.sp-foot { padding: 4px 0 20px; font-size: 12px; line-height: 1.5; color: #7A756D; }

/* Floating contact bar */
.sp-bar { transform: translateY(110%); transition: transform 0.3s ease; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #1F1812; box-shadow: 0 -6px 20px rgba(31, 24, 18, 0.18); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
.sp-bar.is-shown { transform: translateY(0); }
.sp-bar__in { max-width: 560px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-bar__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-bar__t { font-size: 15px; font-weight: 700; color: #FFFFFF; }
.sp-bar__s { font-size: 13px; font-weight: 600; color: #F28A4E; }
.sp .sp-bar__btn { flex: none; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 12px; background: #25D366; color: #10301C; font-size: 15px; font-weight: 700; }

/* Conversion quick wins */
.sp-trust__l { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #7A756D; }
.sp-trust__names { font-size: 14px; font-weight: 600; color: #1F1D1A; }
.sp-best { margin-left: auto; background: #1F1812; color: #FFFFFF; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sp .sp-ask { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px; background: #25D366; color: #10301C; font-size: 15px; font-weight: 700; }
.sp-ask svg { flex: none; }
.sp-askrow { margin-top: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp .sp-askrow .sp-ask { margin-top: 0; white-space: nowrap; }
.sp .sp-askmail { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid #1F1D1A; border-radius: 12px; background: #FFFFFF; color: #1F1D1A; font-size: 15px; font-weight: 700; }
.sp .sp-askmail:hover { background: #F5F1EB; color: #1F1D1A; }
.sp .sp-ask:hover, .sp .sp-wa:hover, .sp .sp-bar__btn:hover { color: #10301C; filter: brightness(0.95); }
.sp-form .sp-guarantee--cta { margin-top: 4px; }
/* Plain text on purpose: easy to read and copy, not links. */
.sp-cta__num { margin: 14px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 14.5px; font-weight: 600; color: #1F1D1A; }
.sp-cta__item { display: inline-flex; align-items: center; gap: 7px; }
.sp-cta__copy { user-select: all; white-space: nowrap; }
.sp-proof { margin-top: 8px; border: 1px solid #E5E1DA; border-radius: 12px; background: #FBF6F0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sp-proof__head { display: flex; flex-direction: column; gap: 1px; }
.sp-proof__h { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: #1F1D1A; }
.sp-proof__sub { margin: 0; font-size: 13.5px; line-height: 1.35; color: #4A4640; }
.sp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.sp-pill { background: #FFFFFF; border: 1px solid #EFE4D6; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 600; color: #1F1D1A; }
.sp-proof__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .sp-proof__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Impression lines are hidden for now; remove this rule to show them again. */
.sp-metric--imp { display: none; }
/* Own the Feed sells repetition (seen twice), so it shows ad views too. */
.sp #own-the-feed .sp-metric--imp { display: flex; }
.sp-mini { background: #FFFFFF; border: 1px solid #EFE4D6; border-radius: 10px; padding: 10px 12px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sp-mini__ic { width: 26px; height: 26px; border-radius: 999px; background: #FCEBDD; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.sp-mini b { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; color: #1F1D1A; }
.sp .sp-proof__t { font-size: 12.5px; color: #4A4640; white-space: pre-line; line-height: 1.3; }
.sp-proof__sponsors { display: flex; flex-direction: column; gap: 3px; padding-top: 10px; border-top: 1px solid #E5E1DA; }

/* Phones: the town names get their own line under the title row instead of
   wrapping beside the three header pills. */
body.sp-body .header__subtitle { white-space: nowrap; }
@media (max-width: 640px) {
  body.sp-body .header__inner { flex-wrap: wrap; row-gap: 2px; }
  body.sp-body .header__brand { display: contents; }
  body.sp-body .header__title-link { order: 1; }
  body.sp-body .header__actions { order: 2; margin-left: auto; }
  body.sp-body .header__subtitle { order: 3; flex-basis: 100%; font-size: 12px; margin: 0 0 2px; }
}
