/* Artwork and desktop proportions follow triple-threat-landing-page.pdf.
   The copy remains HTML; small screens use the original individual portraits. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.tt-landing.container {
  padding: 0;
  max-width: 1170px;
  margin-inline: auto;
  container-type: inline-size;
}

.tt-campaign {
  color: #fff;
  background: #003355;
  font-family: Avenir, "Century Gothic", Arial, sans-serif;
  text-align: center;
}

.tt-campaign *, .tt-rules * { box-sizing: border-box; }
.tt-campaign img { display: block; max-width: 100%; height: auto; border: 0; }
.tt-campaign p, .tt-campaign h2, .tt-campaign figure {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
}
.tt-hero img, .tt-students-desktop { width: 100%; }
.tt-copy-action {
  margin: max(16px, 1.5cqw) 20px 0;
}
.tt-copy-action .tt-rules-button {
  max-width: 100%;
  border-color: #6dcff6;
  border-radius: 999px;
  line-height: 1.4;
}

.tt-copy {
  padding: 2.08cqw 0;
  background: #4796c7 url('/img/promotions/2026/triplethreat/copy-background.webp?v=20260909') center / 100% 100% no-repeat;
}
.tt-copy > p, .tt-details {
  width: 100%;
  font-size: 2.444cqw;
  line-height: 1.2;
  font-weight: 500;
}
.tt-copy .tt-intro {
  font-size: 2.831cqw;
  line-height: 1.205;
  font-weight: 800;
}
.tt-categories {
  margin: 1cqw auto 0;
  width: 88%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4.7%;
}
.tt-category {
  position: relative;
  min-height: 16cqw;
  padding: 1.5cqw 1cqw 3cqw;
  background: url('/img/promotions/2026/triplethreat/smudge-single.webp') center / 100% 100% no-repeat;
  color: #6dcff6;
}
.tt-category + .tt-category::before {
  content: '';
  position: absolute;
  top: 1.3cqw;
  left: -2.1cqw;
  width: .72cqw;
  height: 9.63cqw;
  background: #6dcff6;
  border: .17cqw solid #001e44;
}
.tt-category h2 {
  font-size: 3.908cqw;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.04em;
}
.tt-category p {
  font-size: 2.487cqw;
  line-height: 1.2;
  margin-top: .25cqw;
  -webkit-text-stroke: .12em #003355;
  paint-order: stroke fill;
}
.tt-camera {
  margin: 3.6cqw auto .9cqw;
  width: 17.4%;
}
.tt-photo-copy u { text-underline-offset: .12em; }
.tt-rule {
  width: 67%;
  height: 1px;
  margin: 2.5cqw auto;
  border: 0;
  background: #fff;
}
.tt-scholarship strong { font-family: inherit; font-weight: 900; }
.tt-details {
  display: inline-block;
  margin-top: .7cqw;
  font-size: 1.955cqw;
  color: #fff;
  text-decoration: none;
}
.tt-details:hover { color: #fff; text-decoration: underline; }
.tt-details:focus-visible { color: #fff; outline: 2px solid #fff; outline-offset: 3px; }
.tt-students-mobile { display: none; }
.tt-rules {
  min-height: 22cqw;
  padding: 4.5cqw 7%;
  background: #eef7fb;
  color: #000;
  text-align: left;
  scroll-margin-top: 24px;
}
.tt-rules h2, .tt-rules h3 {
  margin: 0;
  font-family: Avenir, "Century Gothic", Arial, sans-serif;
  font-size: max(14px, 1.955cqw);
  font-weight: 500;
  line-height: 1.4;
  color: #000;
}
.tt-rules p { margin: 12px 0 20px; font-size: 17px; line-height: 1.5; color: #333; }
.tt-preparation h3 { color: #003355; font-size: clamp(26px, 3cqw, 36px); font-weight: 800; }
.tt-preparation .tt-scholarship-heading {
  max-width: 850px;
  margin: 0 0 28px;
  color: #003355;
  font-size: clamp(32px, 4.2cqw, 50px);
  font-weight: 800;
  line-height: 1.15;
}
.tt-preparation-card {
  padding: clamp(24px, 3cqw, 36px);
  border: 1px solid #dce8ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(0 51 85 / 6%);
  scroll-margin-top: 24px;
}
.tt-preparation-header, .tt-preparation-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.tt-preparation .tt-application-button {
  max-width: 100%;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.tt-checklist { list-style: none; margin: 24px 0 28px; padding: 0; }
.tt-checklist li { margin: 0; padding: 0; border-bottom: 1px solid #e1eaf0; }
.tt-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 14px 0;
  color: #263442;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  cursor: pointer;
}
.tt-checklist input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 4px 0 0;
  accent-color: #003355;
  cursor: pointer;
}
.tt-checklist input:focus-visible { outline: 3px solid #0877ab; outline-offset: 4px; }
.tt-checklist label span { color: inherit; }
.tt-deadlines { padding: 18px 22px; margin-bottom: 24px; background: #eef7fb; border-left: 4px solid #6dcff6; }
.tt-deadlines p { margin: 0; }
.tt-deadlines p + p { margin-top: 12px; }
.tt-deadlines strong { color: #003355; }
.tt-rules-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 48px;
  padding: 13px 26px;
  border: 2px solid #003355;
  border-radius: 999px;
  background: #003355;
  color: #fff;
  font-family: Avenir, "Century Gothic", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}
.tt-rules-button:hover { background: #6dcff6; color: #003355; text-decoration: none; }
.tt-rules-button:focus-visible { outline: 3px solid #0877ab; outline-offset: 4px; }

@media (max-width: 600px) {
  .tt-copy {
    aspect-ratio: auto;
    padding: 14px 16px 22px;
  }
  .tt-copy > p, .tt-details, .tt-categories, .tt-camera, .tt-rule {
    position: static;
    width: auto;
  }
  .tt-copy .tt-intro {
    font-size: 18px;
    line-height: 1.3;
    max-width: 440px;
    margin: 0 auto 18px;
  }
  .tt-desktop-break { display: none; }
  .tt-categories { gap: 10px; }
  .tt-category {
    min-height: 100px;
    padding: 14px 5px 22px;
  }
  .tt-category h2 { font-size: clamp(16px, 4.2vw, 24px); }
  .tt-category p { font-size: clamp(11px, 2.9vw, 16px); margin-top: 4px; }
  .tt-category + .tt-category::before { left: -6px; top: 12px; height: 58px; width: 3px; border-width: 1px; }
  .tt-camera { width: 100px; margin: 12px auto 8px; }
  .tt-copy .tt-photo-copy, .tt-copy .tt-scholarship { font-size: 16px; line-height: 1.3; }
  .tt-rule { width: 80%; margin: 16px auto; }
  .tt-details { display: inline-block; margin-top: 6px; padding: 8px; font-size: 14px; }
  .tt-students-desktop { display: none !important; }
  .tt-students-mobile { display: grid; }
  .tt-student {
    position: relative;
    overflow: hidden;
    padding: 16px 16px 0 !important;
    background: linear-gradient(to bottom, transparent 46%, #001e44 46%), url('/img/promotions/2026/triplethreat/copy-background.webp?v=20260909') center / cover;
  }
  .tt-student figcaption { color: #fff; font-size: 20px; text-align: left; padding-left: 11%; }
  .tt-student img {
    width: 100%;
    filter: drop-shadow(2px 0 #c5dce5) drop-shadow(-2px 0 #c5dce5) drop-shadow(0 -2px #c5dce5);
  }
  .tt-activities {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 14%;
    display: flex;
    justify-content: space-around;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .tt-activities li {
    padding: 3px 7px;
    border: 1px solid #fff;
    border-radius: 20px;
    background: #001e44;
    color: #fff;
    font-size: clamp(8px, 2.2vw, 12px);
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .tt-rules { min-height: 120px; padding: 32px 16px; }
  .tt-preparation-card { padding: 24px 20px; }
}