:root {
  --color-black: #0a0a0a;
  --color-black-soft: #141414;
  --color-white: #ffffff;
  --color-gold: #d4af37;
  --color-gold-light: #f4d675;
  --color-gold-dark: #b8901f;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-black);
  background-image: url("../assets/diamond-plate.png");
  background-repeat: repeat;
  background-attachment: fixed;
  color: var(--color-white);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  z-index: 10;
}

.header-logo {
  height: 44px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav a,
.nav-link-btn {
  color: var(--color-white);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.site-nav a:hover,
.nav-link-btn:hover {
  color: var(--color-gold-light);
}

.nav-cta {
  padding: 0.5rem 1.1rem;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
  color: var(--color-black) !important;
  border-radius: 6px;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.site-nav a.nav-email {
  color: var(--color-gold-light);
  font-size: 0.9rem;
}

.site-nav a.nav-email:hover {
  color: var(--color-white);
}

.nav-link-btn {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.12), transparent 60%),
    rgba(10, 10, 10, 0.8);
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 640px;
}

.hero-logo {
  height: 200px;
  width: auto;
  margin-bottom: 0.5rem;
}

.hero-headline {
  font-size: clamp(2rem, 6vw, 3.75rem);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-white);
  text-transform: uppercase;
}

.hero-subheading {
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  color: var(--color-gold-light);
  font-weight: 400;
  letter-spacing: 0.5px;
}

.pitch-lines {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pitch-line {
  font-size: clamp(1.25rem, 3.5vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-gold-light);
  line-height: 1.4;
}

.pitch-cta {
  display: flex;
  justify-content: center;
}

.pitch-signup-btn {
  display: inline-block;
  padding: 1rem 2.75rem;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
  color: var(--color-black);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 8px;
  transition: filter 0.2s ease;
}

.pitch-signup-btn:hover {
  filter: brightness(1.1);
}

.pricing {
  min-height: 100vh;
  padding: 8rem 2rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.12), transparent 60%),
    rgba(10, 10, 10, 0.8);
}

.pricing-header {
  text-align: center;
  max-width: 640px;
  margin-bottom: 3.5rem;
}

.pricing-headline {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 0.75rem;
}

.pricing-subheading {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--color-gold-light);
  letter-spacing: 0.3px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 300px));
  gap: 2rem;
  width: 100%;
  max-width: 1040px;
  justify-content: center;
  align-items: center;
}

.price-card {
  position: relative;
  background: var(--color-black-soft);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.price-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold);
}

.price-card.featured {
  border: 2px solid var(--color-gold);
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.25);
  transform: scale(1.08);
  z-index: 1;
}

.price-card.featured:hover {
  transform: scale(1.08) translateY(-4px);
}

.price-badge {
  position: absolute;
  top: -14px;
  padding: 0.3rem 0.9rem;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
  color: var(--color-black);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 999px;
}

.price-tier {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 1rem;
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  margin-bottom: 1.75rem;
  color: var(--color-white);
}

.price-currency {
  font-size: 1.25rem;
  font-weight: 600;
  align-self: flex-start;
}

.price-value {
  font-size: 3rem;
  font-weight: 700;
}

.price-period {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 0.2rem;
}

.price-features {
  list-style: none;
  margin-bottom: 2rem;
  width: 100%;
}

.price-features li {
  padding: 0.5rem 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.price-features li:first-child {
  border-top: none;
}

.price-cta {
  display: inline-block;
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
  color: var(--color-black);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.price-cta:hover {
  filter: brightness(1.1);
}

.price-cta:disabled {
  cursor: wait;
  opacity: 0.7;
}

.pricing-error {
  margin-top: 2rem;
  color: #ff8080;
  font-size: 0.9rem;
  text-align: center;
}

@media (max-width: 620px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }

  .price-card.featured {
    transform: none;
  }

  .price-card.featured:hover {
    transform: translateY(-4px);
  }
}

.picks {
  min-height: 100vh;
  padding: 8rem 2rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.12), transparent 60%),
    rgba(10, 10, 10, 0.8);
}

.picks-header {
  text-align: center;
  max-width: 640px;
  margin-bottom: 2.5rem;
}

.picks-headline {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 0.75rem;
}

.picks-subheading {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  color: var(--color-gold-light);
  letter-spacing: 0.3px;
}

/* Sport selector above the prop-type cards. No existing tab styling in this
   file, so this is new -- kept to the same gold-on-black vocabulary as
   .nav-cta / .price-cta rather than introducing a second visual language. */
.sport-tabs {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.sport-tab {
  padding: 0.6rem 1.5rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sport-tab:hover {
  color: var(--color-gold-light);
  border-color: rgba(212, 175, 55, 0.7);
}

.sport-tab.is-active {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
  color: var(--color-black);
  border-color: transparent;
}

/* .picks is a centering flex column, so this container needs an explicit
   width or it shrinks to its content and the cards inside collapse to a
   fraction of their max-width. The old markup didn't need this because
   .picks-table-wrap was itself the flex child. */
.picks-groups {
  width: 100%;
}

/* One card per prop type. Deliberately reuses .picks-table-wrap's border,
   radius and background for the table inside, so this reads as the same
   component it always was rather than a new card style. */
.picks-group {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 2rem;
}

.picks-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 0.75rem;
}

.picks-group-count {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.45);
}

/* The run date, stated once per sport instead of on every row -- every pick
   within a sport shares one date (see server.js's latestForSport). */
.picks-group-date {
  max-width: 800px;
  margin: 0 auto 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

.picks-empty {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
}

.picks-table-wrap {
  width: 100%;
  max-width: 800px;
  overflow-x: auto;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
}

.picks-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-black-soft);
}

.picks-table th,
.picks-table td {
  padding: 1rem 1.5rem;
  text-align: left;
  white-space: nowrap;
}

.picks-disclaimer {
  width: 100%;
  max-width: 800px;
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

.picks-table thead th {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-black);
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
}

.picks-table thead th:first-child {
  border-top-left-radius: 11px;
}

.picks-table thead th:last-child {
  border-top-right-radius: 11px;
}

.picks-table tbody tr {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease;
}

.picks-table tbody tr:hover {
  background: rgba(212, 175, 55, 0.06);
}

.picks-table tbody td {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

.picks-table td.pick-over,
.picks-table td.pick-under {
  font-weight: 700;
  letter-spacing: 0.3px;
}

.picks-table td.pick-over {
  color: var(--color-gold-light);
}

.picks-table td.pick-under {
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 620px) {
  .picks-table th,
  .picks-table td {
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
  }
}

.auth-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.12), transparent 60%),
    rgba(10, 10, 10, 0.8);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--color-black-soft);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  text-align: center;
}

.auth-headline {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 0.5rem;
}

.auth-subheading {
  font-size: 0.95rem;
  color: var(--color-gold-light);
  margin-bottom: 2rem;
}

.auth-field {
  text-align: left;
  margin-bottom: 1.25rem;
}

.auth-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.4rem;
}

.auth-field input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--color-black);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--color-white);
  font-family: inherit;
  font-size: 0.95rem;
}

.auth-field input:focus {
  outline: none;
  border-color: var(--color-gold);
}

.auth-error {
  color: #ff8080;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  text-align: left;
}

.auth-submit {
  width: 100%;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-dark));
  color: var(--color-black);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.9rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.auth-submit:hover {
  filter: brightness(1.1);
}

.auth-submit:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* .auth-submit is written for <button>, which is inline-block (so it honors
   width: 100%) and centers its label with no underline. An <a> carrying the
   same class is plain inline, so it ignores the width, sits on the same line
   as whatever precedes it, and renders underlined. These three declarations
   make the link version render identically to the buttons beside it -- used
   by #account-view-picks on the account card. */
a.auth-submit {
  text-align: center;
  text-decoration: none;
}

/* :not([hidden]) is load-bearing, not stylistic. `display: block` here is an
   AUTHOR rule, which outranks the browser's own `[hidden] { display: none }`
   -- so an unqualified rule would make the hidden attribute stop working and
   leak this link to users it's gated away from (caught in testing: an
   inactive subscriber could see View Picks). The <button>s beside it are
   unaffected because nothing overrides their display. */
a.auth-submit:not([hidden]) {
  display: block;
}

.auth-switch {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.auth-switch a {
  color: var(--color-gold-light);
  font-weight: 600;
}

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

.account-row:first-of-type {
  border-top: none;
  margin-top: 1.5rem;
}

.account-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.account-value {
  font-size: 0.95rem;
  color: var(--color-white);
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.status-badge.status-active {
  background: rgba(212, 175, 55, 0.15);
  color: var(--color-gold-light);
  border: 1px solid rgba(212, 175, 55, 0.5);
}

.status-badge.status-inactive {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

#account-card .auth-submit {
  margin-top: 2rem;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding: 0.5rem 1.1rem;
  background: var(--color-black-soft);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 999px;
  color: var(--color-gold-light);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.trust-badge-icon {
  width: 16px;
  height: 16px;
  color: var(--color-gold-light);
  flex-shrink: 0;
}

.methodology {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2rem 4rem;
  background:
    radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.1), transparent 60%),
    rgba(10, 10, 10, 0.8);
}

.methodology-content {
  max-width: 680px;
}

.methodology-headline {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 1.25rem;
}

.methodology-text {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.methodology-text + .methodology-text {
  margin-top: 0.5rem;
}

.site-footer {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: rgba(10, 10, 10, 0.9);
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}

.site-footer p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.5rem;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-gold-light);
}

.legal {
  min-height: 100vh;
  padding: 7rem 1.5rem 4rem;
  display: flex;
  justify-content: center;
  background: rgba(10, 10, 10, 0.9);
}

.legal-content {
  width: 100%;
  max-width: 760px;
}

.legal-title {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 0.5rem;
}

.legal-updated {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2.5rem;
}

.legal-content h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--color-white);
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.legal-content a {
  color: var(--color-gold-light);
}