/* ========== Tonmya Brand Colors ========== */
:root {
  /* Core palette */
  --tm-dark-purple: #2C0078;        /* Dark Purple */
  --tm-vibrant-lavender: #7C2BFF;   /* Vibrant Lavender */
  --tm-periwinkle: #B5B2FF;         /* Periwinkle */
  --tm-coral: #FD6A5A;              /* Coral */
  --tm-sunny-yellow: #FFC46F;       /* Sunny Yellow */
  --tm-soft-taupe: #EEE5D5;         /* Soft Taupe */
  --tm-cream: #F9F7F2;              /* Cream */

  /* Gradient AA-adjusted colors */
  --tm-aa-lavender: #746EFF;        /* AA Vibrant Lavender */
  --tm-aa-yellow: #FB9A10;          /* AA Sunny Yellow */

  /* App-level aliases */
  --brand-primary: var(--tm-vibrant-lavender);
  --brand-secondary: var(--tm-coral);
  --brand-accent: var(--tm-periwinkle);
  --brand-dark: var(--tm-dark-purple);
  --brand-surface: var(--tm-cream);

  --brand-font: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Global typography */
body {
  font-family: var(--brand-font);
  color: var(--brand-dark);
  background-color: var(--brand-surface);
  line-height: 1.6;
}

/* superscript on main header */ 
sup.tm {
  font-size: 0.25em;
  position: relative;
  top: -2.5em;
  line-height: 1;
}

/* Buttons */
.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

/* Header Border: Tonmya gradient */
.header-border {
  border-bottom: none;
  position: relative;
}
.header-border::after {
  content: "";
  display: block;
  height: 30px;
  background: linear-gradient(
    40deg,
    var(--tm-aa-lavender) 0%,
    var(--tm-coral) 50%,
    var(--tm-aa-yellow) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 30px;
  background-position: bottom;
  padding-bottom: 30px;
}

@media (max-width: 576px) {
  .header-border::after {
    height: 15px;
    background: linear-gradient(
      40deg,
      var(--tm-aa-lavender) 0%,
      var(--tm-coral) 50%,
      var(--tm-aa-yellow) 100%
    );
  }

  .page-title {
    text-align: center;
    flex-basis: 100%;
    font-size: 1rem;
    margin-top: 0.5rem;
  }
}

/* Hero section */
.hero {
  color: var(--brand-dark);
  padding: 4rem 1rem;
}
.hero-eyebrow {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.offer-statement {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--brand-dark);
}

/* Footer */
footer {
  color: #fff;
}
footer a.footer-link {
  color: var(--brand-primary);
  text-decoration: none;
}
footer a.footer-link:hover,
footer a.footer-link:focus {
  color: var(--brand-secondary);
  text-decoration: underline;
}
footer .small {
  color: #ccc;
}
.footer-brand img {
  max-height: 50px;
  width: auto;
  margin-top: 1rem;
}
.footer-legal {
  text-align: left;
}
@media (min-width: 992px) {
  .footer-legal { text-align: left; }
}
.footer-legal-text p {
  max-width: 48rem;
}
.footer-pill {
  display: inline-block;
  /* padding: 0 .35rem; 
  margin-left: .25rem;*/
  font-weight: 600;
  border-radius: .2rem;
  background-color: rgba(44, 0, 120, .08);
  color: var(--brand-dark);
}

/* Form control emphasis */
.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 .2rem rgba(253,106,90,.15);
}

/* Copay card and print */
.copay-card-img {
  width: min(840px, 100%);
  height: auto;
  display: block;
  border-radius: 14px;
}
@media print {
  header, footer, .btn { display: none !important; }
  .copay-card-img { width: 100%; }
  @page { margin: 0.5in; }
}

/* Accessibility */
.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: .5rem 1rem;
  background: #fff;
  border: 2px solid var(--brand-primary);
}