/* ===================================================================
   TIER PAGE STYLES
   =================================================================== */

.tier-hero { padding: 100px 5vw 80px; }
.tier-hero h1 .m { color: var(--magenta); text-shadow: 6px 6px 0 var(--yellow); }
.tier-hero-cyan .eyebrow { box-shadow: 5px 5px 0 var(--cyan); }
.tier-hero-yellow .eyebrow { box-shadow: 5px 5px 0 var(--yellow); }
.tier-hero-lime .eyebrow { box-shadow: 5px 5px 0 var(--lime); }

.tier-hero-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 48px 0 40px;
  padding: 32px;
  background: var(--off-white);
  border: 3px solid var(--black);
  box-shadow: var(--shadow);
}

.tier-hero-price, .tier-hero-time {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tier-hero-price { border-right: 3px dashed var(--black); padding-right: 24px; }

.tier-hero-meta .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #555;
  font-weight: 700;
}

.tier-hero-meta .amount {
  font-family: 'Archivo Black', sans-serif;
  font-size: 48px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--black);
}

.tier-hero-meta .vat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #6a6a6a;  /* #777 was 4.25:1 on off-white */
  letter-spacing: 0.05em;
}

.tier-hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* .tier-detail moved to styles.css so non-tier pages can use it too */

@media (max-width: 640px) {
  .tier-hero { padding: 60px 5vw 50px; }
  .tier-hero-meta { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .tier-hero-price { border-right: none; border-bottom: 3px dashed var(--black); padding-right: 0; padding-bottom: 20px; }
  .tier-hero-meta .amount { font-size: 36px; }
  .tier-hero-ctas { flex-direction: column; }
  .tier-hero-ctas .btn { justify-content: center; }
}