/*
 * Panthers giveaway page styles. Built from the Figma "Panthers Landing Page" frames: desktop
 * "Current" (1440 wide), mobile "Frame 6106" (385 wide) and "Thank you Page".
 * Desktop-first: the base rules match the 1440 design, then two breakpoints adjust for tablets
 * (1100px and below) and phones (767px and below).
 * Created/updated with the assistance of Claude Code AI.
 */

:root {
  --navy: #0d1d2a;
  --light-gray: #eff5f6;
  --cpi-red: #b40006;
  --dark-night: #1f1e1e;
  --body-gray: #b4b4b4;
  --muted: #838280;
  --focus-blue: #0085ca;
  --field-fill: rgba(255, 255, 255, 0.06);
  --container: 1146px;
  --gutter: 24px;
  --radius-card: 20px;

  /* The design's signature heading treatment: white fading to steel blue across the text. */
  --text-gradient: linear-gradient(110deg, #fff 17.858%, #82b0c3 43.267%);
  --text-gradient-soft: linear-gradient(95deg, #fff 19.411%, #82b0c3 76.078%);
  --text-gradient-red: linear-gradient(149deg, #fff 27.073%, #793637 83.176%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--navy);
  color: #fff;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The photo collage deliberately runs off both screen edges on phones. overflow-x on body alone
   doesn't stop mobile browsers from widening the page to fit it, which makes the phone zoom out
   and shows every section narrow and off-center. Clipping here, on the full-width <main>, keeps the
   page exactly screen-wide. "hidden" is the fallback for browsers without "clip". */
main {
  overflow-x: hidden;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Gradient text. The text itself is transparent, so keep a solid fallback color for browsers
   (and Windows high-contrast mode) that don't paint background-clip: text. */
.gradient-text {
  color: var(--light-gray);
  background-image: var(--text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
  .gradient-text {
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

.gradient-text--soft {
  background-image: var(--text-gradient-soft);
}

.gradient-text--red {
  background-image: var(--text-gradient-red);
}

/* ---------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 0.75px solid var(--light-gray);
  background: transparent;
  color: var(--light-gray);
  font: 600 16px/1 'Roboto', sans-serif;
  text-transform: capitalize;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.btn:hover {
  background: var(--light-gray);
  color: var(--dark-night);
}

.btn:focus-visible,
.link:focus-visible,
.social a:focus-visible {
  outline: 2px solid var(--focus-blue);
  outline-offset: 3px;
}

.btn--outline {
  width: 206px;
}

.btn--red {
  min-height: 41px;
  width: 195px;
  padding: 12px 20px;
  border-color: var(--dark-night);
  background: var(--cpi-red);
  color: #fff;
  font-size: 16.1px;
}

.btn--red:hover {
  background: #8f0005;
  color: #fff;
}

.btn--white {
  width: 100%;
  border-color: var(--dark-night);
  background: #fff;
  color: #323232;
  font-size: 18.1px;
  text-transform: none;
}

.btn--white:hover {
  background: var(--light-gray);
}

.btn--white:disabled {
  opacity: 0.6;
  cursor: progress;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* ---------------------------------------------------------------- Header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1293px, 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding: 23px 0 25px;
}

/* CPI logo, a thin slanted divider, then the Panthers logo: one lockup used in the header and in
   the "Two defenses" section. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.lockup__cpi {
  width: 151px;
  height: auto;
}

.lockup__divider {
  height: 31px;
  width: auto;
  transform: rotate(15deg);
  margin-inline: 2px 6px;
}

.lockup__panthers {
  width: 60px;
  height: auto;
  transform: scaleY(-1);
}

/* ---------------------------------------------------------------- Hero */

/* One grid holds both the photo card and the form, so there's only ever one form in the page.
   On desktop the card spans every column and the form sits over its right side. On phones the
   grid collapses to one column and the form drops below the card (see the phone breakpoint).
   The outer columns are the design's padding inside the card: 105px left, 153px right. */
.hero {
  display: grid;
  grid-template-columns: [full-start] 105px [content-start] 1fr [form-start] 298px [form-end] 153px [full-end];
  width: min(1366px, 100% - 2 * 37px);
  margin: 0 auto;
}

.hero__card {
  position: relative;
  grid-column: full-start / full-end;
  grid-row: 1;
  min-height: 688px;
  border-radius: 40px;
  overflow: hidden;
  background: #000;
}

.hero__form-wrap {
  position: relative;
  z-index: 1;
  grid-column: form-start / form-end;
  grid-row: 1;
  padding: 29px 0 32px;
}

.hero__cta {
  display: none;
}

/* Cropped photos are placed with the same percentages Figma uses, so the crop matches the design
   at any size. object-fit stops the photo stretching if the box's shape differs. */
.crop {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.hero__bg {
  left: -20.38%;
  top: -51.45%;
  width: 140.76%;
  height: 155.99%;
}

.hero__intro {
  position: relative;
  padding: 151px 0 40px 105px;
}

.hero__headline {
  margin: 0;
  width: 468px;
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: -1.41px;
  line-height: 1;
}

.hero__headline-top {
  display: block;
  font-size: 59px;
  font-weight: 500;
}

.hero__headline-big {
  display: block;
  font-size: 111.7px;
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -3.35px;
}

.hero__headline-mid {
  display: block;
  font-size: 88.4px;
  font-weight: 600;
  line-height: 0.89;
}

.hero__date {
  display: none;
}

.hero__prizes {
  width: 319px;
  margin: 26px 0 0 33px;
  font: 400 16.95px/1.23 'Roboto Condensed', sans-serif;
  letter-spacing: -0.51px;
  text-transform: uppercase;
  text-align: center;
}

/* ---------------------------------------------------------------- Entry form */

.entry {
  scroll-margin-top: 24px;
}

.entry__title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -0.44px;
}

.entry__required-note {
  margin: 0 0 10px;
  color: var(--light-gray);
  font-size: 13px;
  line-height: 1.4;
}

.field {
  margin-bottom: 16px;
}

.field__label {
  display: block;
  margin-bottom: 2px;
  color: var(--light-gray);
  font-size: 14px;
  line-height: 1.4;
}

.field__hint {
  display: block;
  margin-bottom: 4px;
  color: var(--light-gray);
  font-size: 12px;
  line-height: 1.4;
}

/* The design draws the boxes as SVGs (field-outer / field-inner): a faint white fill with a white
   border, and a blue inset ring when the field is in use. Real inputs reproduce that in CSS. */
.field__input {
  width: 100%;
  height: 49px;
  padding: 0 20px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: var(--field-fill);
  color: #fff;
  font: 400 16px/1.4 'Roboto', sans-serif;
}

.field__input:focus {
  outline: 2px solid var(--focus-blue);
  outline-offset: -7px;
}

.field__input[aria-invalid='true'] {
  border-color: #ff8a8f;
}

.field__error {
  display: block;
  min-height: 0;
  margin-top: 4px;
  color: #ffb3b6;
  font-size: 12px;
  line-height: 1.3;
}

.field__error:empty {
  display: none;
}

/* "Are you a current CPI customer?" Yes / No, drawn as two boxes. Real radio buttons underneath
   keep it keyboard- and screen-reader-friendly. */
.choice {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.choice__legend {
  margin-bottom: 4px;
  padding: 0;
  color: var(--light-gray);
  font-size: 14px;
  line-height: 1.4;
}

.choice__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.choice__option input {
  position: absolute;
  opacity: 0;
}

.choice__option span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 49px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: var(--field-fill);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.choice__option input:checked + span {
  background: #fff;
  color: var(--dark-night);
}

.choice__option input:focus-visible + span {
  outline: 2px solid var(--focus-blue);
  outline-offset: 3px;
}

.agree {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 26px;
  font-size: 11px;
  line-height: 1.23;
}

.agree input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background: rgba(217, 217, 217, 0.22);
  accent-color: #fff;
}

.agree a {
  text-decoration: underline;
}

/* Bots fill every field they see; people never see this one. A value in it is rejected. */
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.entry__turnstile {
  margin: -10px 0 14px;
}

.entry__status {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

.entry__status:empty {
  display: none;
}

.entry__status--error {
  color: #ffb3b6;
}

.entry__closed {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  background: rgba(13, 29, 42, 0.7);
  font-size: 16px;
  line-height: 1.4;
}

/* ---------------------------------------------------------------- Marquee band */

.marquee {
  position: relative;
  overflow: hidden;
  margin: 37px 0 53px;
  padding: 24px 0;
}

.marquee__track {
  display: flex;
  gap: 50px;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.marquee__item {
  font: 500 25px/1 'Roboto Condensed', sans-serif;
  letter-spacing: -0.75px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Fade the band into the background at both edges, as in the design. */
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 294px;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--navy) 35.714%, rgba(13, 29, 42, 0) 86.735%);
}

.marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--navy) 35.714%, rgba(13, 29, 42, 0) 86.735%);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* ---------------------------------------------------------------- Shared section pieces */

.section-heading {
  margin: 0;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1.26px;
  text-transform: capitalize;
}

.section-heading--xl {
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -1.56px;
}

.body-copy {
  margin: 0;
  color: var(--body-gray);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.48px;
}

.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ---------------------------------------------------------------- Experience */

.experience__grid {
  display: grid;
  grid-template-columns: 572px 1fr;
  gap: 46px;
}

.experience__fan {
  height: 671px;
}

.experience__luke {
  position: relative;
  height: 313px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.experience__luke img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 29%;
}

.experience__luke .photo--mobile {
  display: none;
}

.experience__text {
  max-width: 495px;
  margin-top: 26px;
}

.experience__text .body-copy {
  max-width: 407px;
  margin: 24px 0 21px;
}

.prizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 28px 0 0;
  padding: 0 21px;
  list-style: none;
}

.prizes li {
  display: flex;
  align-items: center;
  gap: 16px;
}

.prizes__count {
  font-size: 48px;
  line-height: 1.13;
  letter-spacing: -0.96px;
}

.prizes__label {
  font-size: 18px;
  line-height: 1.13;
  letter-spacing: -0.36px;
}

/* ---------------------------------------------------------------- Best defense */

.defense {
  position: relative;
  min-height: 688px;
  margin-top: 95px;
}

/* The photo has its own box, so on phones the text can sit below it instead of under it. */
.defense__media {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #000;
}

.defense__bg {
  left: -9.84%;
  top: -12.99%;
  width: 109.84%;
  height: 112.96%;
}

.defense__text {
  position: absolute;
  left: 74px;
  top: 218px;
  width: 423px;
}

.defense__text p {
  margin: 6px 0 46px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.48px;
  text-transform: capitalize;
}

/* ---------------------------------------------------------------- Two defenses */

.two-defenses {
  display: grid;
  grid-template-columns: 1fr 542px;
  gap: 40px;
  margin-top: 138px;
}

.two-defenses__lockup {
  margin-top: 50px;
}

.rule {
  width: 512px;
  max-width: 100%;
  height: 1px;
  margin: 26px 0 32px;
}

.two-defenses .body-copy {
  max-width: 407px;
  margin: 43px 0 51px;
}

.two-defenses__photo {
  height: 647px;
}

/* ---------------------------------------------------------------- Partnership */

.partnership {
  margin-top: 156px;
  text-align: center;
}

.partnership__eyebrow {
  margin: 0 0 20px;
  color: var(--body-gray);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.48px;
}

.partnership .body-copy {
  max-width: 502px;
  margin: 22px auto 33px;
}

.partnership .btn-row {
  justify-content: center;
}

/* Photo collage. Positions are the design's, as percentages of a 993 × 512 box, so the
   arrangement scales as one piece. */
.collage {
  position: relative;
  width: min(993px, 100%);
  aspect-ratio: 993 / 512;
  margin: 53px auto 0;
}

.collage__photo {
  position: absolute;
  overflow: hidden;
  border-radius: 32.7px;
}

.collage__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage__photo img.crop {
  width: auto;
  height: auto;
}

.collage__photo--1 { left: 21.91%; top: 0;       width: 33.11%; height: 46.97%; }
.collage__photo--2 { left: 57.82%; top: 15.97%;  width: 15.16%; height: 30.99%; }
.collage__photo--3 { left: 40.2%;  top: 52.08%;  width: 32.78%; height: 47.92%; }
.collage__photo--4 { left: 21.91%; top: 52.08%;  width: 16.47%; height: 30.99%; }
.collage__photo--5 { left: 0;      top: 31.63%;  width: 19.6%;  height: 38.34%; }
.collage__photo--6 { left: 75.45%; top: 31.63%;  width: 24.55%; height: 49.2%;  }

.collage__photo--2 img.crop { left: 0; top: -5.78%; width: 113.48%; height: 118.86%; }
.collage__photo--4 img.crop { left: -21.33%; top: 0; width: 211.7%; height: 114.91%; }

.collage__note {
  position: absolute;
  margin: 0;
  font: 400 16px/15px 'Just Me Again Down Here', cursive;
  text-align: left;
}

.collage__note--1 { left: 9.77%;  top: 3.13%;  width: 13.2%; }
.collage__note--2 { left: 16.31%; top: 85.94%; width: 8.2%; }
.collage__note--3 { left: 76.23%; top: 89.65%; width: 11.7%; }

.collage__doodle {
  position: absolute;
  max-width: none;
  height: auto;
}

.collage__doodle--1a { left: 16.31%; top: 13.09%; width: 3.72%; }
.collage__doodle--1b { left: 19.56%; top: 14.76%; width: 0.82%; }
.collage__doodle--1c { left: 18.17%; top: 19.12%; width: 2.18%; }
.collage__doodle--2  { left: 78.95%; top: 82.45%; width: 2.29%; transform: rotate(75deg); }
.collage__doodle--3a { left: 28.78%; top: 84.6%;  width: 2.71%; }
.collage__doodle--3b { left: 25.42%; top: 84.81%; width: 5.5%; }

/* ---------------------------------------------------------------- Closing banner and footer */

.closing {
  position: relative;
  margin-top: 130px;
}

.closing__heading {
  position: relative;
  z-index: 1;
  width: min(752px, 100% - 2 * var(--gutter));
  margin: 0 auto;
  font-size: 93px;
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -1.86px;
  text-align: center;
}

.closing__photo {
  position: relative;
  height: 933px;
  margin-top: -100px;
}

.closing__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Navy fades over the top and bottom of the photo, as in the design. */
.closing__photo::before,
.closing__photo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
}

.closing__photo::before {
  top: 0;
  height: 466px;
  background: linear-gradient(to bottom, var(--navy) 35.714%, rgba(13, 29, 42, 0) 86.735%);
}

.closing__photo::after {
  bottom: 0;
  height: 520px;
  background: linear-gradient(to top, var(--navy) 35.714%, rgba(13, 29, 42, 0) 86.735%);
}

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: -242px;
  padding-bottom: 40px;
}

.site-footer__rule {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 220px 320px;
  gap: 69px;
  padding: 51px 0 60px;
}

/* height: auto keeps the logo's proportions when a narrower width is set; otherwise the height
   attribute holds it at 149px and it squashes on phones. */
.site-footer__partner {
  width: 401px;
  max-width: 100%;
  height: auto;
  margin-top: 60px;
}

.footer-label {
  margin: 0 0 27px;
  color: var(--muted);
  font-size: 15.4px;
  line-height: 1;
}

.social {
  display: flex;
  gap: 12px;
  margin: 0 0 27px;
  padding: 0;
  list-style: none;
}

.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 999px;
}

.social img {
  width: 14px;
  height: 14px;
}

.footer-links {
  display: grid;
  margin: -9px 0 0;
  padding: 0;
  list-style: none;
}

.link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.footer-links__sitemap {
  display: none;
}

.newsletter__title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -1px;
}

.newsletter__intro {
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -1px;
}

.newsletter__field {
  position: relative;
}

.newsletter__input {
  width: 100%;
  height: 56px;
  padding: 8px 56px 8px 26px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: #d9d9d9;
  color: #1d1d1f;
  font: 400 15.6px/24px 'Roboto', sans-serif;
}

.newsletter__input::placeholder {
  color: #1d1d1f;
}

.newsletter__input:focus {
  outline: 2px solid var(--focus-blue);
  outline-offset: 2px;
}

.newsletter__submit {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* The design's Font Awesome "angle-right", drawn with CSS so the page needs no icon font. */
.newsletter__submit::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  border-top: 1.5px solid #000;
  border-right: 1.5px solid #000;
  transform: rotate(45deg);
}

.newsletter__submit:focus-visible {
  outline: 2px solid var(--focus-blue);
  outline-offset: -4px;
}

.newsletter__fine {
  width: 263px;
  max-width: 100%;
  margin: 13px 0 0;
  color: #d9d9d9;
  font-size: 12px;
  line-height: 1.4;
}

.newsletter__status {
  margin: 10px 0 0;
  font-size: 14px;
}

.newsletter__status:empty {
  display: none;
}

.site-footer__disclaimer {
  width: min(818px, 100%);
  margin: 40px auto 0;
  color: var(--light-gray);
  font-size: 12px;
  font-weight: 300;
  line-height: 22.3px;
  text-align: center;
}

/* ---------------------------------------------------------------- Thank-you page */

.thanks {
  display: grid;
  grid-template-columns: 777px 301px;
  gap: 37px;
  margin-top: 107px;
}

.thanks__eyebrow {
  margin: 0 0 24px;
  font: 500 14px/1.2 'Inter', sans-serif;
  text-transform: uppercase;
}

.thanks__heading {
  margin: 0;
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2.16px;
}

.thanks__card {
  align-self: start;
  padding: 24px 26px 16px;
  border: 0.2px solid #c0c0c2;
  border-radius: 10px;
  background: var(--navy);
  font-family: 'Inter', sans-serif;
}

.thanks__card-label {
  margin: 0 0 7px;
  color: #c0c0c2;
  font-size: 12.5px;
}

.thanks__card-date {
  margin: 0 0 17px;
  font: 400 23px/1.02 'Roboto', sans-serif;
  letter-spacing: -0.69px;
}

.thanks__card hr {
  margin: 0 0 17px;
  border: 0;
  border-top: 0.2px solid #c0c0c2;
}

.thanks__card ul {
  display: grid;
  gap: 12px;
  margin: 18px 0 21px;
  padding: 0;
  list-style: none;
  font-size: 16px;
}

.thanks__tagline {
  margin: 119px 0 64px;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -1.56px;
  text-align: center;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 310px);
  justify-content: center;
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 514px;
  border: 0.5px solid #b9b9b6;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f3;
  color: #171717;
  font-family: 'Inter', sans-serif;
}

.card__media {
  position: relative;
  height: 178px;
  overflow: hidden;
}

.card__media--home .crop { left: -8.51%; top: -11.24%; width: 116.73%; height: 113.47%; }
.card__media--business .crop { left: -0.25%; top: 0; width: 119.6%; height: 116.25%; }
.card__media--partnership .crop { left: 0; top: -27.38%; width: 100%; height: 178.2%; }

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 26px 22px;
}

.card__eyebrow {
  margin: 0;
  color: #2a2a2a;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.card__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}

.card__text {
  margin: 0;
  color: #666;
  font-size: 15px;
  line-height: 1.45;
}

.card__actions {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 6px;
}

.card-btn {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 22px;
  border: 2px solid #2a2a2a;
  border-radius: 999px;
  background: #f5f5f3;
  color: #171717;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.card-btn--dark {
  background: #2a2a2a;
  color: #f5f5f3;
}

.card-btn:focus-visible {
  outline: 2px solid var(--focus-blue);
  outline-offset: 2px;
}

.thanks-closing .closing__heading {
  width: min(752px, 100% - 2 * var(--gutter));
}

/* ---------------------------------------------------------------- Simple pages (404) */

.simple {
  max-width: 760px;
  margin: 80px auto 120px;
  padding: 0 var(--gutter);
  line-height: 1.5;
}

.simple h1 {
  margin: 0 0 24px;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.05;
}

/* ================================================================ Tablet: 1100px and below */

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: [full-start] 40px [content-start] 1fr [form-start] 298px [form-end] 40px [full-end];
  }

  .hero__intro {
    padding: 110px 330px 40px 40px;
  }

  .hero__headline {
    width: auto;
  }

  .hero__headline-top { font-size: 44px; }
  .hero__headline-big { font-size: 84px; }
  .hero__headline-mid { font-size: 66px; }

  .hero__prizes {
    margin-left: 0;
    text-align: left;
  }

  .experience__grid,
  .two-defenses {
    grid-template-columns: 1fr 1fr;
  }

  .experience__fan,
  .two-defenses__photo {
    height: auto;
    aspect-ratio: 572 / 671;
  }

  .prizes {
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }

  .defense__text {
    left: 48px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .site-footer__partner {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .thanks {
    grid-template-columns: 1fr 301px;
  }

  .thanks__heading {
    font-size: 56px;
  }

  .cards {
    grid-template-columns: repeat(auto-fit, minmax(260px, 310px));
  }
}

/* ================================================================ Tablet portrait: 1023px and below */

/* Below 1024px the headline and the form no longer fit side by side, so the form drops below the
   photo card, as on phones. */
@media (max-width: 1023px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero__card {
    grid-column: 1;
    min-height: 560px;
  }

  .hero__intro {
    padding: 90px 48px 48px;
  }

  .hero__form-wrap {
    grid-column: 1;
    grid-row: 2;
    width: min(420px, 100%);
    margin: 40px auto 0;
    padding: 0;
  }

  .site-header .btn--red {
    display: inline-flex;
  }
}

/* ================================================================ Phone: 767px and below */

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
  }

  .site-header {
    justify-content: center;
    padding: 0;
    width: auto;
  }

  .site-header .lockup {
    position: absolute;
    top: 75px;
    left: 50%;
    transform: translateX(-50%);
  }

  .site-header .lockup__cpi { width: 121px; }
  .site-header .lockup__divider { height: 25px; }
  .site-header .lockup__panthers { width: 48px; }

  /* The header's red "Register to win" button moves into the hero card on phones. */
  .site-header .btn--red {
    display: none;
  }

  /* The thank-you page keeps its "Call for a free quote" button on phones, beside the logo. The
     404 page (--plain) has no button but uses the same in-flow logo, not the home page's overlay. */
  .site-header--thanks,
  .site-header--plain {
    justify-content: space-between;
    width: calc(100% - 2 * var(--gutter));
    padding: 20px 0;
  }

  .site-header--thanks .lockup,
  .site-header--plain .lockup {
    position: static;
    transform: none;
  }

  .site-header--thanks .btn--red {
    display: inline-flex;
    width: auto;
    padding-inline: 14px;
    font-size: 13px;
  }

  .hero {
    grid-template-columns: 1fr;
    width: calc(100% - 2 * 9px);
    margin-top: 135px;
  }

  .hero__card {
    grid-column: 1;
    min-height: 597px;
    border-radius: 30.8px;
  }

  .hero__bg {
    left: -20.18%;
    top: 10.48%;
    width: 146.07%;
    height: 111.88%;
  }

  .hero__intro {
    padding: 4px 0 40px;
  }

  .hero__form-wrap {
    grid-column: 1;
    grid-row: 2;
    width: min(298px, 100%);
    margin: 39px auto 0;
    padding: 0;
  }

  .hero__headline {
    width: 290px;
    margin: 0 auto;
    letter-spacing: -0.94px;
  }

  .hero__headline-top { font-size: 39px; }
  .hero__headline-big { font-size: 74px; letter-spacing: -2.22px; }
  .hero__headline-mid { font-size: 58.6px; }

  .hero__date {
    display: block;
    margin: 4px 0 0;
    font: 700 18.16px/1.23 'Roboto Condensed', sans-serif;
    letter-spacing: -0.54px;
    text-align: center;
    text-transform: uppercase;
  }

  .hero__prizes {
    width: 271px;
    margin: 8px auto 0;
    font-size: 14.55px;
    text-align: center;
  }

  .hero__cta {
    display: flex;
    width: 265px;
    margin: 18px auto 0;
  }

  .marquee {
    margin: 10px 0 20px;
  }

  .marquee::before,
  .marquee::after {
    width: 79px;
  }

  .experience__grid,
  .two-defenses {
    display: block;
  }

  .experience__fan {
    display: none;
  }

  .experience__luke {
    height: auto;
    aspect-ratio: 344 / 313;
  }

  .experience__luke .photo--desktop { display: none; }
  .experience__luke .photo--mobile { display: block; }

  .section-heading,
  .section-heading--xl {
    font-size: 28.8px;
    letter-spacing: -0.86px;
  }

  .body-copy {
    font-size: 15.4px;
  }

  .experience__text .body-copy {
    margin: 10px 0 26px;
  }

  .prizes {
    display: block;
    margin: 32px 0 0;
  }

  .prizes li {
    display: block;
    margin-bottom: 18px;
  }

  .prizes__count,
  .prizes__label {
    font-size: 13.4px;
  }

  .prizes__count::after {
    content: ' ';
  }

  /* Centered under left-aligned text, as in the mobile design. */
  .btn--outline {
    display: flex;
    width: min(324px, 100%);
    margin-inline: auto;
  }

  .experience .btn-row--after-prizes,
  .two-defenses .btn-row,
  .partnership .btn-row {
    flex-direction: column;
    gap: 25px;
  }

  .defense {
    min-height: 0;
    margin-top: 54px;
  }

  .defense__media {
    position: relative;
    height: 364px;
  }

  .defense__bg {
    left: -61.42%;
    top: 0;
    width: 169.19%;
    height: 100%;
  }

  /* On phones the text sits below the photo, not over it. */
  .defense__text {
    position: static;
    width: auto;
    margin-top: 26px;
  }

  .defense__text p {
    margin: 14px 0 24px;
  }

  .two-defenses {
    margin-top: 90px;
  }

  .two-defenses__photo {
    height: auto;
    aspect-ratio: 347 / 356;
  }

  .two-defenses__media {
    order: -1;
  }

  .two-defenses__lockup {
    margin-top: 30px;
  }

  .rule {
    margin: 12px 0 20px;
  }

  .two-defenses .body-copy {
    margin-bottom: 26px;
  }

  .partnership {
    margin-top: 100px;
  }

  /* The collage keeps its arrangement and runs off both edges on phones, as in the design. */
  .collage {
    width: 165%;
    margin-left: -32.5%;
  }

  .collage__note {
    font-size: 10.6px;
    line-height: 10px;
  }

  .closing {
    margin-top: 60px;
  }

  .closing__heading {
    font-size: 38.2px;
    letter-spacing: -0.76px;
  }

  .closing__photo {
    height: 303px;
    margin-top: -60px;
  }

  .closing__photo::before {
    height: 150px;
  }

  .closing__photo::after {
    height: 278px;
  }

  .site-footer {
    margin-top: -100px;
  }

  .site-footer__grid {
    display: block;
    padding-top: 30px;
  }

  .site-footer__partner {
    width: 245px;
    margin: 0 auto 24px;
  }

  .social {
    justify-content: center;
    gap: 16px;
  }

  .social a {
    width: 40px;
    height: 40px;
  }

  .social img {
    width: 18.5px;
    height: 18.5px;
  }

  .footer-label--social {
    display: none;
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 30px;
  }

  .footer-links__sitemap {
    display: list-item;
  }

  .site-footer__disclaimer {
    color: rgba(255, 255, 255, 0.5);
    line-height: 17.3px;
  }

  .thanks {
    display: block;
    margin-top: 40px;
  }

  .thanks__heading {
    font-size: 40px;
  }

  .thanks__card {
    margin-top: 32px;
  }

  .thanks__tagline {
    margin: 64px 0 32px;
    font-size: 32px;
  }

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