/* ============================================
   SEAMHEADS — Redesign Overlay
   Loaded AFTER style.css to upgrade the design
   Navy / Gold Premium Enhancement Layer
   ============================================ */

/* ──────────────────────────────────────────────
   1. TYPOGRAPHY SCALE BOOST
   ────────────────────────────────────────────── */

html {
  font-size: 18px;
}

body {
  line-height: 1.6;
}

/* Navigation links */
.nav__link {
  font-size: 0.85rem;
  padding: 0.6rem 1.4rem;
}

/* Page header */
.page-header__title {
  font-size: clamp(3rem, 9vw, 6.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.page-header__sub {
  font-size: 0.9rem;
  letter-spacing: 0.2em;
}

/* Stat labels — boost from 0.55-0.65rem to 0.72-0.78rem */
.stat-card__label {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
}

.mu-stat__label {
  font-size: 0.72rem;
}

.mu-card__gqi {
  font-size: 0.75rem;
}

.mu-card__loc {
  font-size: 0.72rem;
}

.mu-card__conf {
  font-size: 0.68rem;
}

.trend__stat-label {
  font-size: 0.74rem;
}

.trend__footer {
  font-size: 0.75rem;
}

.trend__score {
  font-size: 0.72rem;
}

.trend__score strong {
  font-size: 0.82rem;
}

.featured__label {
  font-size: 0.76rem;
}

.archive-hero__stat-lbl {
  font-size: 0.68rem;
}

.archive-hero__label {
  font-size: 0.72rem;
}

.mm__label {
  font-size: 0.68rem;
}

.mm__hist-badge-label {
  font-size: 0.65rem;
}

.odds-card__market-label {
  font-size: 0.64rem;
}

.score-card__state {
  font-size: 0.75rem;
}

.score-card__conf {
  font-size: 0.72rem;
}

/* Table font */
.s-table {
  font-size: 0.88rem;
}

.s-table th {
  font-size: 0.78rem;
  padding: 0.7rem 0.9rem;
}

.s-table td {
  padding: 0.65rem 0.9rem;
}

/* Body copy / analysis */
.pick-card__analysis {
  font-size: 0.92rem;
  line-height: 1.65;
}

.trend__narrative {
  font-size: 0.92rem;
}

.trend-explainer {
  font-size: 0.95rem;
}

.article-card__excerpt {
  font-size: 1rem;
}

/* Button font */
.btn {
  font-size: 0.95rem;
  padding: 0.95rem 2.4rem;
  border-radius: 6px;
}

.btn--sm {
  font-size: 0.8rem;
  padding: 0.55rem 1.6rem;
  border-radius: 5px;
}

/* Loading text */
.scores-loading,
.hp-loading {
  font-size: 1rem;
}

/* HP header titles ~15% bump */
.hp-header__title {
  font-size: clamp(1.72rem, 3.45vw, 2.88rem);
}

.hp-explore__heading {
  font-size: clamp(1.72rem, 3.45vw, 2.88rem);
}

.hp-header__sub {
  font-size: 0.82rem;
}

/* Filter buttons */
.filter-btn {
  font-size: 0.82rem;
  padding: 0.55rem 1.2rem;
}

/* Footer text */
.footer__text {
  font-size: 0.78rem;
}

.footer__brand {
  font-size: 1.05rem;
}

/* Score card team names */
.score-card__name {
  font-size: 1rem;
}

.score-card__team-cell {
  font-size: 0.85rem;
}

.hp-score__name {
  font-size: 0.9rem;
}

/* Ticker items */
.ticker__item {
  font-size: 0.88rem;
}

/* Trend section titles bump */
.trend-section__title {
  font-size: clamp(1.5rem, 3.45vw, 2.3rem);
}

.trend-section__subtitle {
  font-size: 0.82rem;
}

.trend-section__count {
  font-size: 0.82rem;
}

/* Hero title bump */
.hero__title {
  font-size: clamp(5.2rem, 16vw, 15rem);
}

.hero__sub {
  font-size: clamp(0.92rem, 1.38vw, 1.21rem);
}

.hero__tagline {
  font-size: clamp(1.32rem, 2.88vw, 2.42rem);
}

/* Featured title bump */
.featured__title {
  font-size: clamp(1.72rem, 3.45vw, 2.65rem);
}

/* Skewed section bump */
.skewed__title {
  font-size: clamp(1.72rem, 4.6vw, 3.45rem);
}

.skewed__sub {
  font-size: 0.95rem;
}

/* Table info */
.table-info {
  font-size: 0.82rem;
}

/* Date nav */
.date-nav__btn {
  font-size: 0.78rem;
  padding: 0.5rem 1rem;
}

/* Game card names */
.game-card__name {
  font-size: 0.95rem;
}

.game-card__record {
  font-size: 0.8rem;
}

.game-card__time {
  font-size: 0.78rem;
}

/* Game count */
.game-count {
  font-size: 0.78rem;
}

/* Pick card teams */
.pick-card__teams {
  font-size: 1.15rem;
}

.pick-card__pick {
  font-size: 0.95rem;
}

/* Portal form */
.portal-gate__sub {
  font-size: 0.88rem;
}

.portal-form__label {
  font-size: 0.78rem;
}

/* Portal tabs */
.portal-tab {
  font-size: 0.85rem;
}

/* SEC tabs */
.sec-tabs__btn {
  font-size: 0.82rem;
}

/* Rank table entries */
.rank-table__name {
  font-size: 0.82rem;
}

.rank-table__val {
  font-size: 0.82rem;
}

/* Odds card name */
.odds-card__name {
  font-size: 1rem;
}

/* Modal team name */
.mm__team-name {
  font-size: 1.2rem;
}

/* Matchup card name */
.mu-card__name {
  font-size: 1.05rem;
}

/* Pick labels */
.hp-pick__label {
  font-size: 0.8rem;
}

.hp-pick__team {
  font-size: 0.95rem;
}

.hp-pick__matchup {
  font-size: 0.98rem;
}


/* ──────────────────────────────────────────────
   2. SPACING IMPROVEMENTS
   ────────────────────────────────────────────── */

.section {
  padding: 4.5rem 0;
}

.section--lg {
  padding: 6rem 0;
}

.page {
  padding-top: 64px;
}

.nav__inner {
  padding: 1rem 2rem;
}

/* Card padding global increase ~20% */
.stat-card {
  padding: 2.1rem 1.8rem;
}

.trend {
  padding: 2.1rem;
}

.trend-explainer {
  padding: 1.8rem;
  margin-bottom: 2.5rem;
}

.pick-card {
  padding: 1.8rem;
  margin-bottom: 1.2rem;
}

.article-card {
  padding: 2.1rem;
  margin-bottom: 1.2rem;
}

.game-card {
  padding: 1.2rem 1.5rem;
}

.hp-pick {
  padding: 1.45rem 1.5rem;
}

.hp-explore-card {
  padding: 1.45rem 1.8rem;
}

.hp-score {
  padding: 1rem 1.2rem;
}

.portal-gate__box {
  padding: 3.5rem;
}

.featured__left {
  padding: 3.5rem;
}

.featured__right {
  padding: 3.5rem;
}

/* Table cell padding */
.s-table td {
  padding: 0.7rem 0.95rem;
}

.s-table th {
  padding: 0.75rem 0.95rem;
}

/* Section divider margins */
.divider {
  margin: 3.5rem 0;
}

.divider--thin {
  margin: 2.5rem 0;
}

/* Page header spacing */
.page-header {
  padding: 5.5rem 0 3rem;
}

/* HP header spacing */
.hp-header {
  margin-bottom: 1.8rem;
}

/* Score grid gap */
.scores-grid {
  gap: 4px;
}

.hp-scores {
  gap: 1rem;
}

.hp-picks-grid {
  gap: 1rem;
}

.hp-explore {
  gap: 1rem;
}

/* Matchup list gap */
.matchup-list {
  gap: 1rem;
}

.game-list {
  gap: 1rem;
}

.odds-grid {
  gap: 1rem;
}

.trend-grid {
  gap: 1.8rem;
}

/* Footer spacing */
.footer {
  padding: 3rem 2rem;
  margin-top: 5rem;
}

/* Rank power gap */
.rank-power {
  gap: 0.45rem;
  margin-bottom: 2.5rem;
}

/* Filter bar */
.filter-bar {
  gap: 0.75rem;
  margin-bottom: 1.8rem;
}


/* ──────────────────────────────────────────────
   3. CARD UPGRADES
   ────────────────────────────────────────────── */

/* Universal subtle shadow for all card types */
.stat-card,
.mu-card,
.game-card,
.trend,
.pick-card,
.article-card,
.score-card,
.odds-card,
.hp-score,
.hp-pick,
.hp-explore-card,
.archive-day,
.archive-hero,
.mm__hist-badge {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Hover shadow enhancement */
.stat-card:hover,
.mu-card:hover,
.game-card:hover,
.trend:hover,
.pick-card:hover,
.article-card:hover,
.score-card:hover,
.odds-card:hover,
.hp-score:hover,
.hp-pick:hover,
.hp-explore-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Border-radius upgrades: 0 -> 6px, 6px -> 8px */
.stat-card {
  border-radius: 6px;
}

.mu-card {
  border-radius: 6px;
  overflow: hidden;
}

.game-card {
  border-radius: 8px;
}

.trend {
  border-radius: 6px;
  overflow: hidden;
}

.trend-explainer {
  border-radius: 6px;
}

.pick-card {
  border-radius: 6px;
}

.article-card {
  border-radius: 6px;
}

.score-card {
  border-radius: 6px;
  overflow: hidden;
}

.odds-card {
  border-radius: 6px;
  overflow: hidden;
}

.hp-score {
  border-radius: 8px;
}

.hp-pick {
  border-radius: 8px;
}

.hp-explore-card {
  border-radius: 8px;
}

.archive-day {
  border-radius: 6px;
  overflow: hidden;
}

.archive-hero {
  border-radius: 8px;
}

.mm__hist-badge {
  border-radius: 8px;
}

.portal-gate__box {
  border-radius: 8px;
}

.filter-btn {
  border-radius: 5px;
}

.date-nav__btn {
  border-radius: 5px;
}

/* Table wrap border-radius */
.table-wrap {
  border-radius: 6px;
  overflow: hidden;
}

/* Trend badge adjusts to border-radius */
.trend__badge {
  border-radius: 0 5px 0 6px;
}

/* Subtle transition for transforms */
.stat-card,
.game-card,
.trend,
.pick-card,
.article-card,
.hp-score,
.hp-pick,
.hp-explore-card {
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.15s;
}

.stat-card:hover {
  transform: translateY(-1px);
}

.game-card:hover {
  transform: translateY(-1px);
}

.trend:hover {
  transform: translateY(-1px);
}

.pick-card:hover {
  transform: translateY(-1px);
}

.article-card:hover {
  transform: translateY(-1px);
}

/* Game card stat row radius fix */
.game-card .mu-stats-row {
  margin: 0.75rem -1.5rem -1.2rem;
  border-radius: 0 0 7px 7px;
}


/* ──────────────────────────────────────────────
   4. BUTTON HIERARCHY
   ────────────────────────────────────────────── */

.btn {
  font-weight: 700;
  letter-spacing: 0.14em;
  transition: all 0.15s ease;
  position: relative;
}

/* Primary (gold) button — subtle glow on hover */
.btn--red {
  box-shadow: 0 2px 6px rgba(255, 183, 27, 0.15);
}

.btn--red:hover {
  box-shadow: 0 4px 18px rgba(255, 183, 27, 0.35);
  transform: translateY(-1px);
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

/* Ghost (secondary) — clearly distinct from primary */
.btn--ghost {
  border-width: 2px;
  font-weight: 600;
  letter-spacing: 0.12em;
  box-shadow: none;
}

.btn--ghost:hover {
  box-shadow: 0 4px 14px rgba(255, 183, 27, 0.2);
  transform: translateY(-1px);
}

/* Default btn hover */
.btn:hover {
  transform: translateY(-1px);
}

/* Small button */
.btn--sm {
  border-radius: 5px;
  font-weight: 700;
}

/* Full-width button */
.btn--full {
  border-radius: 6px;
}


/* ──────────────────────────────────────────────
   5. NAV UPGRADE
   ────────────────────────────────────────────── */

.nav {
  border-bottom-width: 3px;
  background: linear-gradient(180deg, var(--dark) 0%, rgba(8, 16, 32, 0.98) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav__brand {
  font-size: 1.35rem;
  letter-spacing: 0.18em;
}

.nav__links {
  gap: 0;
}

.nav__link {
  padding: 0.65rem 1.4rem;
  transition: all 0.15s ease;
  position: relative;
}

/* Active link - more prominent underline effect */
.nav__link--active {
  color: var(--black);
  background: var(--red);
  font-weight: 700;
}

/* Hamburger menu button */
.nav__toggle {
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
  border-radius: 4px;
  transition: all 0.15s;
}

.nav__toggle:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--black);
}


/* ──────────────────────────────────────────────
   6. SKELETON LOADERS
   ────────────────────────────────────────────── */

@keyframes skeleton-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--g800) 0%,
    var(--g700) 40%,
    var(--g800) 80%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-line {
  height: 0.85rem;
  margin-bottom: 0.65rem;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--g800) 0%,
    var(--g700) 40%,
    var(--g800) 80%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-line:last-child {
  width: 60%;
  margin-bottom: 0;
}

.skeleton-card {
  background: linear-gradient(
    90deg,
    var(--g800) 0%,
    var(--g700) 40%,
    var(--g800) 80%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
  border: 1px solid var(--g700);
  min-height: 160px;
}

.skeleton-score {
  background: linear-gradient(
    90deg,
    var(--g800) 0%,
    var(--g700) 40%,
    var(--g800) 80%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
  border: 1px solid var(--g700);
  min-height: 100px;
}


/* ──────────────────────────────────────────────
   7. PROOF BAR (homepage trust signals)
   ────────────────────────────────────────────── */

.proof-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  padding: 1.5rem 2rem;
  background: var(--g900);
  border-top: 1px solid var(--g700);
  border-bottom: 1px solid var(--g700);
}

.proof-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.proof-bar__value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--red);
  line-height: 1;
  text-transform: uppercase;
}

.proof-bar__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--g400);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

@media (max-width: 600px) {
  .proof-bar {
    gap: 1.5rem;
    padding: 1.2rem 1rem;
  }
  .proof-bar__value {
    font-size: 1.2rem;
  }
  .proof-bar__label {
    font-size: 0.6rem;
  }
}


/* ──────────────────────────────────────────────
   8. PREMIUM CARD VARIANT
   ────────────────────────────────────────────── */

.card--premium {
  background: linear-gradient(
    135deg,
    var(--g900) 0%,
    rgba(255, 183, 27, 0.04) 50%,
    var(--g900) 100%
  );
  border: 2px solid rgba(255, 183, 27, 0.3);
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  box-shadow: 0 4px 16px rgba(255, 183, 27, 0.08);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.15s;
}

.card--premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--red) 20%,
    var(--red) 80%,
    transparent 100%
  );
}

.card--premium:hover {
  border-color: rgba(255, 183, 27, 0.55);
  box-shadow: 0 8px 28px rgba(255, 183, 27, 0.14);
  transform: translateY(-2px);
}


/* ──────────────────────────────────────────────
   9. TRUST BADGES
   ────────────────────────────────────────────── */

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  white-space: nowrap;
}

.trust-badge--method {
  background: rgba(255, 183, 27, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 183, 27, 0.25);
}

.trust-badge--updated {
  background: rgba(74, 222, 128, 0.08);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.2);
}


/* ──────────────────────────────────────────────
   10. IMPROVED LOADING STATES
   ────────────────────────────────────────────── */

.state--loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.state--loading::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--g700);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: mu-spin 0.7s linear infinite;
}

.state--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  gap: 0.75rem;
}

.state--empty::before {
  content: '\2014';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--g800);
  border: 2px solid var(--g700);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--g500);
}

.state--error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.state--error::before {
  content: '!';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  border: 2px solid rgba(239, 68, 68, 0.3);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #ef4444;
}


/* ──────────────────────────────────────────────
   11. BETTER TABLE STYLING
   ────────────────────────────────────────────── */

/* More padding (already set above in typography section) */

/* Better alternating row contrast */
.s-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.035);
}

.s-table tbody tr:nth-child(even):hover {
  background: var(--g800);
}

/* Sticky header shadow when scrolled */
.s-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Team name column slightly larger */
.s-table .col-team {
  font-size: 0.92rem;
  min-width: 160px;
}

/* Better rank column styling */
.s-table .col-rank {
  font-size: 0.82rem;
}

/* SEC table improvements */
.sec-table__th {
  font-size: 0.72rem;
  padding: 0.7rem 0.85rem;
}

.sec-table__name {
  font-size: 0.88rem;
  padding: 0.65rem 0.85rem;
}

.sec-table__val {
  font-size: 0.88rem;
  padding: 0.65rem 0.85rem;
}

.sec-table__pos {
  font-size: 0.82rem;
  padding: 0.65rem 0.6rem;
}

.sec-table__row:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Rank table improvements */
.rank-table__th {
  font-size: 0.72rem;
  padding: 0.7rem 0.7rem;
}

.rank-table__pos {
  font-size: 0.8rem;
  padding: 0.6rem 0.5rem;
}

.rank-table__num {
  font-size: 0.8rem;
}

.rank-table__rec {
  font-size: 0.76rem;
}

.rank-table__row:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Table controls */
.table-controls__search {
  font-size: 0.9rem;
  padding: 0.7rem 1.1rem;
  border-radius: 5px;
}

.table-controls__select {
  font-size: 0.9rem;
  padding: 0.7rem 1.1rem;
  border-radius: 5px;
}


/* ──────────────────────────────────────────────
   12. MOBILE IMPROVEMENTS
   ────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Larger nav links + better touch targets */
  .nav__link {
    font-size: 0.9rem;
    padding: 1.1rem 2rem;
  }

  .nav__toggle {
    padding: 0.5rem 0.7rem;
    font-size: 1.15rem;
  }

  .nav__brand {
    font-size: 1.15rem;
  }

  /* Container padding */
  .container {
    padding: 0 1.5rem;
  }

  /* Page padding top matches larger nav */
  .page {
    padding-top: 64px;
  }

  /* Section padding scales down slightly */
  .section {
    padding: 3.5rem 0;
  }

  .section--lg {
    padding: 4.5rem 0;
  }

  /* Button touch targets */
  .btn {
    padding: 1rem 2rem;
    font-size: 0.9rem;
  }

  .btn--sm {
    padding: 0.6rem 1.4rem;
    font-size: 0.78rem;
  }

  /* Filter buttons touch targets */
  .filter-btn {
    padding: 0.65rem 1.1rem;
    font-size: 0.78rem;
  }

  /* Date nav */
  .date-nav__btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.72rem;
  }

  /* HP header */
  .hp-header__title {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }

  /* Hero */
  .hero {
    padding: 5rem 1.5rem;
  }

  .hero__cta-row {
    gap: 1rem;
  }

  .hero__cta-row .btn {
    width: 100%;
    text-align: center;
  }

  /* Score card name */
  .score-card__name {
    font-size: 0.88rem;
  }

  /* Rank power bars */
  .rank-power__row {
    grid-template-columns: 2rem 7rem 1fr 2.5rem;
    gap: 0.35rem;
  }

  .rank-power__name {
    font-size: 0.65rem;
  }

  /* Footer */
  .footer {
    padding: 2.5rem 1.5rem;
  }

  /* Proof bar */
  .proof-bar {
    gap: 1.5rem;
    padding: 1.2rem 1.5rem;
  }
}

@media (max-width: 600px) {
  /* Card grid to 1 column earlier with better text */
  .matchup-list {
    grid-template-columns: 1fr;
  }

  .game-list {
    grid-template-columns: 1fr;
  }

  .odds-grid {
    grid-template-columns: 1fr;
  }

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

  .scores-grid {
    grid-template-columns: 1fr;
  }

  /* Slightly larger base text */
  html {
    font-size: 17px;
  }

  /* Hero readable text */
  .hero__title {
    font-size: clamp(3.5rem, 14vw, 8rem);
  }

  .hero__tagline {
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    margin-top: 1.5rem;
  }

  .hero__sub {
    font-size: clamp(0.78rem, 2.5vw, 0.9rem);
  }

  /* CTAs tappable */
  .hero__cta-row {
    flex-direction: column;
    gap: 0.8rem;
  }

  .hero__cta-row .btn {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 0.88rem;
    text-align: center;
  }

  /* Cards padding on small screens */
  .stat-card {
    padding: 1.5rem 1.2rem;
  }

  .trend {
    padding: 1.5rem;
  }

  .pick-card {
    padding: 1.4rem;
  }

  .article-card {
    padding: 1.5rem;
  }

  .hp-pick {
    padding: 1.1rem 1.2rem;
  }

  .hp-explore-card {
    padding: 1.1rem 1.2rem;
  }

  /* Table on mobile */
  .s-table {
    font-size: 0.82rem;
  }

  .s-table th {
    font-size: 0.72rem;
    padding: 0.55rem 0.6rem;
  }

  .s-table td {
    padding: 0.5rem 0.6rem;
  }

  /* Portal */
  .portal-gate__box {
    padding: 2.5rem 1.5rem;
  }

  .portal-gate__title {
    font-size: 1.6rem;
  }

  /* Modal on mobile */
  .mm__dialog {
    width: 96%;
    max-height: 90vh;
  }

  .mm__team-name {
    font-size: 0.92rem;
  }

  /* Game card name */
  .game-card__name {
    font-size: 0.82rem;
  }

  /* Stat labels */
  .stat-card__label {
    font-size: 0.68rem;
  }

  /* Score card mobile */
  .score-card__team-cell {
    font-size: 0.7rem;
  }

  /* Proof bar */
  .proof-bar {
    gap: 1rem;
    padding: 1rem;
  }

  .proof-bar__value {
    font-size: 1.1rem;
  }

  .proof-bar__label {
    font-size: 0.58rem;
  }
}

@media (max-width: 400px) {
  .hp-scores {
    grid-template-columns: 1fr;
  }

  /* Compact cards further */
  .hp-score {
    padding: 0.8rem 1rem;
  }

  .stat-card {
    padding: 1.2rem 1rem;
  }

  .stat-card__value {
    font-size: 2.4rem;
  }

  .nav__brand {
    font-size: 1rem;
    letter-spacing: 0.12em;
  }
}


/* ──────────────────────────────────────────────
   EXTRA REFINEMENTS
   ────────────────────────────────────────────── */

/* Smooth focus rings */
.table-controls__search:focus,
.table-controls__select:focus,
.portal-form__input:focus,
.rank-controls__search:focus,
.rank-controls__select:focus,
.sec-controls__select:focus,
.mu-search__input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 183, 27, 0.12);
}

/* Improved score card - give linescore box subtle rounding inside */
.score-card__box-wrap {
  border-radius: 0 0 5px 5px;
}

/* Score card status bar polish */
.score-card__status {
  padding: 0.6rem 1rem;
}

/* Odds card best lines grid border-radius */
.odds-card__best {
  border-radius: 0 0 5px 5px;
}

/* Scroll hint gradient for horizontal scroll tables */
.table-wrap {
  position: relative;
}

/* Picker / input radius */
.date-nav__picker {
  border-radius: 5px;
  font-size: 0.75rem;
}

/* Portal form input radius */
.portal-form__input {
  border-radius: 5px;
}

/* Select inputs radius */
.rank-controls__select,
.rank-controls__search,
.sec-controls__select {
  border-radius: 5px;
}

/* Matchup card - subtle inner content gap */
.mu-card__top {
  padding: 0.75rem 1.1rem 0;
}

.mu-card__teams {
  padding: 0.7rem 1.1rem 0.6rem;
}

.mu-card__prob {
  padding: 0.35rem 1.1rem 0.75rem;
}

.mu-stats-row {
  padding: 0.65rem 1.1rem;
}

/* Score card row */
.score-card__row {
  padding: 0.75rem 1rem;
}

/* Odds card teams padding */
.odds-card__teams {
  padding: 0.75rem 1rem;
}

.odds-card__header {
  padding: 0.6rem 1rem;
}

/* Archive day header */
.archive-day__header {
  padding: 0.9rem 1.1rem;
}

/* Archive pick */
.archive-pick {
  padding: 0.7rem 1.1rem;
}

/* HP explore card icon */
.hp-explore-card__icon {
  border-radius: 10px;
}

/* Modal dialog radius */
.mm__dialog {
  border-radius: 10px;
}

/* Rank toggle button */
.rank-toggle {
  border-radius: 5px;
  font-size: 0.78rem;
}

/* SEC tabs radius */
.sec-tabs__btn:first-child {
  border-radius: 5px 0 0 5px;
}

.sec-tabs__btn:last-child {
  border-radius: 0 5px 5px 0;
}

/* ============================================
   SECTION 13 — TESTIMONIALS
   ============================================ */

.testimonials {
  padding: 4rem 0 2rem;
}

.testimonials__heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  margin-bottom: 0.4rem;
}

.testimonials__sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--g400);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2.5rem;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  background: linear-gradient(165deg, rgba(15, 32, 68, 0.85) 0%, rgba(8, 16, 32, 0.95) 100%);
  border: 1px solid rgba(255, 183, 27, 0.12);
  border-radius: 10px;
  padding: 2rem 1.8rem 1.6rem;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 183, 27, 0.06);
  border-color: rgba(255, 183, 27, 0.25);
}

.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 0.6rem;
  left: 1.4rem;
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: rgba(255, 183, 27, 0.18);
  pointer-events: none;
}

.testimonial-card__stars {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 1rem;
}

.testimonial-card__star {
  width: 16px;
  height: 16px;
  background: var(--red);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.testimonial-card__quote {
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--g200);
  line-height: 1.7;
  margin-bottom: 1.4rem;
  position: relative;
  z-index: 1;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.testimonial-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g700), var(--g900));
  border: 2px solid rgba(255, 183, 27, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--red);
  text-transform: uppercase;
  flex-shrink: 0;
}

.testimonial-card__name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--white);
  text-transform: uppercase;
}

.testimonial-card__tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--g500);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.testimonials__disclaimer {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--g600);
  text-align: center;
  margin-top: 1.8rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

/* Condensed variant for portal */
.testimonials--condensed {
  padding: 2.5rem 0 1rem;
}

.testimonials--condensed .testimonials__heading {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}

.testimonials--condensed .testimonial-card {
  padding: 1.4rem 1.4rem 1.2rem;
}

.testimonials--condensed .testimonial-card__quote {
  font-size: 0.92rem;
}

.testimonials--condensed .testimonial-card::before {
  font-size: 3rem;
  top: 0.4rem;
  left: 1rem;
}

@media (max-width: 900px) {
  .testimonials__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .testimonials__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .testimonial-card {
    padding: 1.6rem 1.4rem 1.3rem;
  }

  .testimonials--condensed .testimonials__grid {
    grid-template-columns: 1fr;
  }
}

/* Print: remove unnecessary shadows */
@media print {
  * {
    box-shadow: none !important;
  }
}