.topbar {
  background: #24364f;
  color: #f7fbff;
  font-size: 14px;
  padding: 7px 0;
}

.topbar a {
  color: #f7fbff;
}

.index-page .header,
.header {
  --background-color: #3d4d6a;
  --heading-color: #ffffff;
  --nav-color: #ffffff;
  --nav-hover-color: #47b2e4;
  background-color: var(--background-color);
  padding: 10px 0;
}

.index-page.scrolled .header {
  --background-color: #3d4d6a;
}

.header .logo h1 {
  font-size: 24px;
  letter-spacing: 0;
}

.hero.news-hero {
  align-items: center;
  display: flex;
  min-height: 520px;
  padding: 0;
}

.news-hero {
  background: #1d3f5b;
  min-height: 520px;
}

.news-hero-slider {
  overflow: hidden;
  position: relative;
}

.news-hero-slider .carousel,
.news-hero-slider .carousel-inner,
.news-hero-slider .carousel-item {
  min-height: 520px;
}

.news-hero-slider .carousel-item {
  padding: 58px 0 72px;
}

.news-hero-copy {
  min-width: 0;
}

.news-hero-labels {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.news-hero-labels time {
  color: color-mix(in srgb, #ffffff, transparent 28%);
  font-size: 14px;
  font-weight: 700;
}

.news-hero h1 {
  color: #ffffff;
  font-size: 50px;
  line-height: 1.08;
  margin: 0 0 18px;
  overflow-wrap: anywhere;
}

.news-hero p {
  color: color-mix(in srgb, #ffffff, transparent 24%);
  display: -webkit-box;
  font-size: 19px;
  line-height: 1.5;
  margin-bottom: 0;
  max-width: 690px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.news-hero-media {
  aspect-ratio: 16 / 10;
  background: #0f1f2d;
  border: 1px solid color-mix(in srgb, #ffffff, transparent 82%);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(15, 31, 45, 0.28);
  overflow: hidden;
}

.news-hero-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.news-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.news-hero-secondary {
  align-items: center;
  border: 1px solid color-mix(in srgb, #ffffff, transparent 72%);
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 7px;
  min-height: 44px;
  padding: 9px 13px;
}

.news-hero-secondary:hover {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}

.news-hero-utility {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid color-mix(in srgb, #ffffff, transparent 82%);
  border-radius: 8px;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 14px;
  padding: 12px 14px;
}

.news-hero-utility span {
  align-items: center;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
}

.news-hero-utility a {
  color: #5cd2ff;
  font-weight: 800;
}

.news-hero-control {
  bottom: 18px;
  height: 44px;
  opacity: 1;
  top: auto;
  width: 54px;
}

.news-hero-control.carousel-control-prev {
  left: auto;
  right: 118px;
}

.news-hero-control.carousel-control-next {
  right: 58px;
}

.news-hero-control .carousel-control-prev-icon,
.news-hero-control .carousel-control-next-icon {
  background-color: rgba(15, 31, 45, 0.72);
  background-size: 56%;
  border-radius: 8px;
  height: 40px;
  width: 40px;
}

.news-hero-indicators {
  bottom: 24px;
  justify-content: flex-start;
  margin-left: calc((100% - min(1140px, 100% - 24px)) / 2);
  margin-right: 0;
}

.news-hero-indicators [data-bs-target] {
  border: 0;
  border-radius: 999px;
  height: 7px;
  opacity: 0.42;
  width: 28px;
}

.news-hero-indicators .active {
  background-color: #5cd2ff;
  opacity: 1;
  width: 44px;
}

@media (max-width: 991px) {
  .hero.news-hero {
    min-height: auto;
  }

  .news-hero-slider .carousel,
  .news-hero-slider .carousel-inner,
  .news-hero-slider .carousel-item {
    min-height: auto;
  }

  .news-hero-slider .carousel-item {
    padding: 32px 0 74px;
  }

  .news-hero h1 {
    font-size: 34px;
  }

  .news-hero p {
    font-size: 17px;
    -webkit-line-clamp: 3;
  }

  .news-hero-control.carousel-control-prev {
    left: 18px;
    right: auto;
  }

  .news-hero-control.carousel-control-next {
    left: 76px;
    right: auto;
  }

  .news-hero-indicators {
    justify-content: flex-end;
    margin-left: 0;
    margin-right: 18px;
  }
}

.news-kicker {
  align-items: center;
  background: rgba(92, 210, 255, 0.12);
  border: 1px solid rgba(92, 210, 255, 0.34);
  border-radius: 8px;
  color: color-mix(in srgb, #ffffff, transparent 20%);
  display: inline-flex;
  font-weight: 700;
  padding: 8px 10px;
  text-transform: uppercase;
}

.news-kicker:hover {
  color: #ffffff;
}

.post-metrics {
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
  margin: 12px 0;
}

.post-metrics i {
  color: var(--accent-color);
  margin-right: 4px;
}

.job-listing {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  padding: 24px 0;
}

.job-listing:first-child {
  padding-top: 0;
}

.job-meta {
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
}

.engagement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.engagement-actions button {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 82%);
  border-radius: 6px;
  color: var(--heading-color);
  padding: 8px 12px;
}

.engagement-actions button:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.media-stack {
  display: grid;
  gap: 18px;
  margin: 24px 0;
}

.media-stack img,
.media-stack video {
  border-radius: 8px;
  width: 100%;
}

.media-stack audio {
  width: 100%;
}

.page-title p {
  color: color-mix(in srgb, var(--default-color), transparent 18%);
  margin: 10px 0 0;
  max-width: 760px;
}

.topic-strip {
  background: #f5f8fb;
  padding: 18px 0;
}

.topic-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topic-link,
.trending-link {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 82%);
  border-radius: 8px;
  color: var(--heading-color);
  display: inline-flex;
  font-weight: 700;
  gap: 7px;
}

.topic-link {
  background: #ffffff;
  padding: 9px 13px;
}

.topic-link.active,
.topic-link:hover,
.trending-link:hover {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}

.trending-link {
  background: color-mix(in srgb, #0f766e, transparent 92%);
  justify-content: space-between;
  padding: 12px 14px;
  width: 100%;
}

.meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

.meta-top a:hover {
  color: var(--accent-color);
}

.app-widget p {
  color: color-mix(in srgb, var(--default-color), transparent 28%);
  font-size: 14px;
  margin-bottom: 14px;
}

.app-widget .app-store-button {
  justify-content: center;
  min-width: 0;
  width: 100%;
}

.sidebar-job-item {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  padding: 0 0 14px;
}

.sidebar-job-item + .sidebar-job-item {
  padding-top: 14px;
}

.sidebar-job-item h4 {
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 5px;
}

.sidebar-job-item span,
.sidebar-job-item small {
  color: color-mix(in srgb, var(--default-color), transparent 38%);
  display: block;
  font-size: 13px;
}

.sidebar-more-link {
  align-items: center;
  color: #0f766e;
  display: inline-flex;
  font-weight: 800;
  gap: 6px;
  margin-top: 14px;
}

.trend-sidebar-list,
.trend-side-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trend-sidebar-list li + li,
.trend-side-links li + li {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.trend-sidebar-list a,
.trend-side-links a {
  align-items: center;
  color: var(--heading-color);
  display: flex;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  justify-content: space-between;
  line-height: 1.35;
  padding: 10px 0;
}

.trend-sidebar-list a:hover,
.trend-side-links a.active,
.trend-side-links a:hover {
  color: #0f766e;
}

.trend-hub {
  background: #f5f8fb;
}

.trend-hub-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trend-card,
.trend-panel,
.trend-story-card {
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
}

.trend-card {
  display: flex;
  flex-direction: column;
  min-height: 290px;
  padding: 22px;
}

.trend-card > span,
.trend-panel .page-kicker,
.trend-page-title .page-kicker,
.trend-story-kicker {
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.trend-card h2 {
  font-size: 22px;
  line-height: 1.18;
  margin: 10px 0;
}

.trend-card p {
  color: color-mix(in srgb, var(--default-color), transparent 28%);
  line-height: 1.55;
}

.trend-query-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: auto 0 16px;
}

.trend-query-list em {
  background: color-mix(in srgb, #0f766e, transparent 92%);
  border-radius: 999px;
  color: #0f766e;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 6px 9px;
}

.football-fact-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.football-fact-card {
  background: #f8fafc;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 8px;
  min-height: 118px;
  padding: 16px;
}

.football-fact-card span {
  color: #0f766e;
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.football-fact-card strong {
  color: var(--heading-color);
  display: block;
  font-size: 16px;
  line-height: 1.4;
}

.sports-scoreboard {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 88%);
  border-radius: 8px;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--heading-color), transparent 92%);
  margin: 0 0 24px;
  overflow: hidden;
  padding: 20px;
  position: relative;
}

.sports-scoreboard::before {
  background: linear-gradient(90deg, #0f766e, #d97706, #dc2626);
  content: "";
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.sports-scoreboard-compact {
  margin-bottom: 22px;
}

.sports-scoreboard-header {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-top: 4px;
}

.sports-scoreboard-header h2 {
  color: var(--heading-color);
  font-size: 28px;
  line-height: 1.18;
  margin: 4px 0 0;
}

.sports-scoreboard-live {
  align-items: center;
  background: #ecfdf5;
  border: 1px solid color-mix(in srgb, #0f766e, transparent 78%);
  border-radius: 999px;
  color: #0f766e;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 900;
  gap: 6px;
  padding: 7px 10px;
}

.sports-scoreboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.sports-scoreboard-tabs a {
  background: #f8fafc;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 86%);
  border-radius: 999px;
  color: var(--heading-color);
  font-size: 13px;
  font-weight: 900;
  padding: 8px 12px;
}

.sports-scoreboard-tabs a:hover {
  border-color: #0f766e;
  color: #0f766e;
}

.sports-match-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sports-match-card {
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 88%);
  border-radius: 8px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--heading-color), transparent 95%);
  display: flex;
  flex-direction: column;
  min-height: 186px;
  padding: 16px;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.sports-match-card:hover {
  border-color: color-mix(in srgb, #0f766e, transparent 35%);
  box-shadow: 0 14px 34px color-mix(in srgb, #0f766e, transparent 88%);
  transform: translateY(-2px);
}

.sports-match-meta,
.sports-match-footer {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.sports-match-meta span {
  color: color-mix(in srgb, var(--default-color), transparent 38%);
  font-size: 12px;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sports-match-meta strong {
  background: #ecfdf5;
  border: 1px solid color-mix(in srgb, #0f766e, transparent 78%);
  border-radius: 999px;
  color: #0f766e;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 900;
  padding: 6px 9px;
}

.sports-match-teams {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.sports-match-team {
  align-items: center;
  background: #f8fafc;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 11px;
}

.sports-team-name {
  align-items: center;
  color: var(--heading-color);
  display: inline-flex;
  font-size: 15px;
  font-weight: 900;
  gap: 10px;
  line-height: 1.25;
  min-width: 0;
}

.sports-team-badge {
  align-items: center;
  background: #24364f;
  border-radius: 7px;
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 38px;
  font-size: 11px;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  letter-spacing: 0;
  width: 38px;
}

.sports-team-score {
  align-items: center;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 86%);
  border-radius: 7px;
  color: color-mix(in srgb, var(--heading-color), transparent 30%);
  display: inline-flex;
  flex: 0 0 38px;
  font-size: 18px;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  line-height: 1;
}

.sports-team-score.winner {
  background: #ecfdf5;
  border-color: color-mix(in srgb, #0f766e, transparent 70%);
  color: #0f766e;
}

.sports-match-footer {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-top: auto;
  padding-top: 12px;
}

.sports-match-footer span {
  align-items: center;
  background: #f1f5f9;
  border-radius: 999px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  min-height: 28px;
  padding: 6px 10px;
}

.sports-match-footer span.is-live {
  background: #fef2f2;
  color: #dc2626;
}

.sports-match-footer a {
  align-items: center;
  background: #0f766e;
  border-radius: 7px;
  color: #ffffff;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 900;
  gap: 6px;
  min-height: 34px;
  padding: 8px 10px;
}

.sports-match-footer a:hover {
  background: #24364f;
  color: #ffffff;
}

.sports-scoreboard-note {
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  font-size: 13px;
  font-weight: 700;
  margin: 12px 0 0;
}

.trend-card-link {
  align-items: center;
  color: #0f766e;
  display: inline-flex;
  font-weight: 900;
  gap: 7px;
}

.trend-page-title .page-kicker {
  display: inline-flex;
  margin-bottom: 10px;
}

.trend-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.trend-panel {
  padding: 22px;
}

.trend-panel-header {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.trend-panel-header h2 {
  font-size: 26px;
  margin: 4px 0 0;
}

.trend-panel-header small {
  color: color-mix(in srgb, var(--default-color), transparent 34%);
  font-weight: 800;
  text-align: right;
}

.trend-table {
  display: grid;
  gap: 10px;
}

.trend-row {
  align-items: center;
  background: #f8fafc;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 12px 14px;
}

.trend-row strong {
  color: var(--heading-color);
  min-width: 0;
  overflow-wrap: anywhere;
}

.trend-row span,
.trend-row em {
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.trend-row em {
  color: #d97706;
}

.trend-link-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trend-link-grid a {
  align-items: center;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 86%);
  border-radius: 8px;
  color: var(--heading-color);
  display: flex;
  font-weight: 800;
  gap: 12px;
  justify-content: space-between;
  min-height: 58px;
  padding: 12px 14px;
}

.trend-link-grid a:hover {
  border-color: #0f766e;
  color: #0f766e;
}

.football-api-note {
  background: #f8fafc;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  padding: 20px;
}

.football-api-note a {
  color: #0f766e;
  display: inline-block;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.trend-story-card {
  display: grid;
  gap: 14px;
  grid-template-columns: 118px minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  padding: 12px;
}

.trend-story-card img {
  aspect-ratio: 4 / 3;
  border-radius: 7px;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.trend-story-card h3 {
  font-size: 17px;
  line-height: 1.3;
  margin: 4px 0 8px;
}

.trend-story-card time {
  color: color-mix(in srgb, var(--default-color), transparent 42%);
  font-size: 13px;
  font-weight: 700;
}

.app-download-strip {
  background: #f5f8fb;
  padding: 28px 0;
}

.app-download-inner {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.app-download-copy {
  max-width: 620px;
}

.app-status-pill {
  align-items: center;
  color: #0f766e;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.app-download-copy h2 {
  color: var(--heading-color);
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 8px;
}

.app-download-copy p {
  color: color-mix(in srgb, var(--default-color), transparent 28%);
  margin-bottom: 0;
}

.app-download-actions,
.app-download-buttons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.app-download-buttons-compact {
  align-items: stretch;
  flex-direction: column;
}

.app-store-button {
  align-items: center;
  background: #111827;
  border: 1px solid #111827;
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  gap: 10px;
  min-height: 52px;
  min-width: 174px;
  padding: 8px 14px;
}

.app-store-button:hover {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}

.app-store-button i {
  font-size: 23px;
  line-height: 1;
}

.app-store-button span {
  display: grid;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.05;
}

.app-store-button small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.static-page {
  --page-teal: #0f766e;
  --page-amber: #d97706;
}

.static-page-intro {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  margin-bottom: 28px;
  padding-bottom: 28px;
}

.page-kicker {
  color: var(--page-teal);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.static-page-intro h2 {
  color: var(--heading-color);
  font-size: 34px;
  line-height: 1.18;
  margin-bottom: 16px;
}

.static-page-intro p,
.page-copy-section p,
.page-feature p,
.page-side-panel p {
  color: color-mix(in srgb, var(--default-color), transparent 24%);
}

.page-updated {
  align-items: center;
  display: inline-flex;
  font-size: 14px;
  gap: 8px;
  margin-top: 4px;
}

.page-updated i {
  color: var(--page-amber);
}

.page-feature-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.page-feature {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  border-radius: 8px;
  padding: 22px;
}

.page-feature > i {
  align-items: center;
  background: color-mix(in srgb, var(--page-teal), transparent 88%);
  border-radius: 8px;
  color: var(--page-teal);
  display: inline-flex;
  font-size: 22px;
  height: 44px;
  justify-content: center;
  margin-bottom: 16px;
  width: 44px;
}

.page-feature h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.page-feature p {
  font-size: 15px;
  margin-bottom: 0;
}

.page-copy-section {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  padding: 26px 0;
}

.page-copy-section h3 {
  font-size: 23px;
  margin-bottom: 12px;
}

.page-copy-section ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.page-copy-section li {
  margin-bottom: 8px;
}

.page-side-panel {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 86%);
  border-radius: 8px;
  padding: 24px;
  position: sticky;
  top: 96px;
}

.page-side-panel h3 {
  font-size: 21px;
  margin-bottom: 10px;
}

.app-scope-note {
  align-items: flex-start;
  background: color-mix(in srgb, var(--page-amber), transparent 90%);
  border-radius: 8px;
  color: color-mix(in srgb, var(--default-color), transparent 16%);
  display: flex;
  gap: 10px;
  margin: 18px 0;
  padding: 12px;
}

.app-scope-note i {
  color: var(--page-amber);
  font-size: 20px;
}

.contact-methods {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
}

.contact-method {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.contact-method > i {
  color: var(--page-teal);
  font-size: 20px;
  margin-top: 2px;
}

.contact-method span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.contact-method a,
.contact-method strong {
  color: var(--heading-color);
  font-weight: 700;
}

.page-side-links {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  list-style: none;
  margin: 20px 0 0;
  padding: 14px 0 0;
}

.page-side-links li {
  margin: 0;
}

.page-side-links a {
  align-items: center;
  border-radius: 6px;
  color: var(--heading-color);
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.page-side-links a.active,
.page-side-links a:hover {
  color: var(--page-teal);
}

@media (max-width: 991px) {
  .static-page-intro h2 {
    font-size: 28px;
  }

  .page-feature-grid {
    grid-template-columns: 1fr;
  }

  .page-side-panel {
    position: static;
  }

  .app-download-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .app-download-actions {
    align-items: stretch;
    width: 100%;
  }

  .app-store-button {
    justify-content: center;
  }

  .trend-hub-grid,
  .football-fact-grid,
  .trend-link-grid {
    grid-template-columns: 1fr;
  }

  .trend-panel-header {
    display: block;
  }

  .trend-panel-header small {
    display: block;
    margin-top: 8px;
    text-align: left;
  }

  .trend-row {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .sports-scoreboard-header {
    display: block;
  }

  .sports-scoreboard-live {
    margin-top: 10px;
  }

  .sports-match-grid {
    grid-template-columns: 1fr;
  }

  .sports-match-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .sports-match-footer a {
    justify-content: center;
  }

  .trend-story-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

@media (max-width: 575px) {
  .trend-card {
    min-height: auto;
  }

  .trend-story-card {
    grid-template-columns: 1fr;
  }

  .trend-story-card img {
    height: auto;
  }
}