:root {
  --green: #173f2b;
  --deep: #0d2619;
  --lime: #b9d45c;
  --paper: #f7f4ec;
  --ink: #142219;
  --muted: #69736c;
  --line: #d9ddd4;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }

.site-header { height: 84px; padding: 0 clamp(24px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; background: var(--deep); border-bottom: 1px solid #ffffff18; color: #fff; }
.site-header img, footer img { width: 132px; height: auto; display: block; }
.site-header span { text-transform: uppercase; letter-spacing: 2px; font-size: 9px; color: #b4c2b8; }

.hero { min-height: calc(100svh - 84px); padding: clamp(64px, 8vw, 120px) clamp(24px, 7vw, 110px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr); gap: clamp(50px, 7vw, 110px); align-items: center; background: var(--deep); color: #fff; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 620px; height: 620px; border: 1px solid #ffffff0d; border-radius: 50%; right: -180px; top: -260px; box-shadow: 0 0 0 90px #ffffff05, 0 0 0 180px #ffffff03; }
.hero-copy, .hero-prize { position: relative; z-index: 1; min-width: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: 2.1px; font-size: 10px; font-weight: 700; color: var(--lime); }
.eyebrow::before { content: ""; display: inline-block; width: 27px; height: 1px; background: currentColor; margin: 0 12px 3px 0; }
.eyebrow.green { color: var(--green); }
h1, h2 { font: 600 clamp(48px, 6vw, 88px)/.98 "Playfair Display", serif; letter-spacing: -3px; margin: 28px 0; }
em { font-weight: 600; color: var(--lime); }
.hero-copy > p { max-width: 620px; margin: 0; color: #c2cec6; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.75; }
.hero-copy > p strong { color: #fff; }
.hero-summary { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 580px; margin-top: 48px; border-top: 1px solid #ffffff26; border-bottom: 1px solid #ffffff26; }
.hero-summary div { padding: 21px 15px 20px 0; border-right: 1px solid #ffffff26; }
.hero-summary div + div { padding-left: 22px; }
.hero-summary div:last-child { border: 0; }
.hero-summary strong { display: block; color: var(--lime); font: 600 27px "Playfair Display", serif; }
.hero-summary span { display: block; margin-top: 4px; color: #9fb0a5; font-size: 10px; }

.hero-prize { background: var(--paper); color: var(--ink); box-shadow: 0 45px 90px #0006; }
.hero-prize-image { height: clamp(240px, 28vw, 390px); position: relative; overflow: hidden; }
.hero-prize-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #07150e75, transparent 45%); }
.hero-prize-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-prize-image > span { position: absolute; left: 22px; bottom: 17px; z-index: 1; color: #fff; text-transform: uppercase; letter-spacing: 1.4px; font-size: 7px; }
.hero-prize-copy { padding: 26px 30px 31px; }
.hero-prize-copy > div { display: flex; justify-content: space-between; gap: 20px; }
.hero-prize-copy > div span, .hero-prize-copy > div small { text-transform: uppercase; letter-spacing: 1.4px; font-size: 8px; }
.hero-prize-copy > div span { color: var(--green); font-weight: 700; }
.hero-prize-copy > div small { color: #89948c; }
.hero-prize-copy h2 { margin: 17px 0 13px; font-size: clamp(32px, 3vw, 46px); letter-spacing: -1.8px; color: var(--green); }
.hero-prize-copy h2 em { color: var(--green); }
.hero-prize-copy p { margin: 0; max-width: 440px; color: var(--muted); font-size: 12px; line-height: 1.65; }

.content-section { padding: clamp(80px, 10vw, 150px) clamp(24px, 7vw, 110px); }
.rules { background: #ede9df; }
.rules-intro { display: grid; grid-template-columns: 1fr 1.35fr; gap: 40px; align-items: end; margin-bottom: clamp(45px, 6vw, 80px); }
.rules-intro .eyebrow { grid-column: 1 / -1; }
.rules-intro h2 { margin: 0; font-size: clamp(45px, 5vw, 70px); }
.rules-intro h2 em { color: var(--green); }
.rules-intro p { max-width: 430px; margin: 0 0 6px auto; color: var(--muted); font-size: 15px; line-height: 1.75; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #cdd2c9; border-left: 1px solid #cdd2c9; }
.rules-grid article { min-height: 205px; padding: 30px; display: grid; grid-template-columns: 42px 1fr; gap: 18px; background: var(--paper); border-right: 1px solid #cdd2c9; border-bottom: 1px solid #cdd2c9; }
.rules-grid article > span { color: #94a098; font-size: 10px; letter-spacing: 1.4px; padding-top: 5px; }
.rules-grid h3 { margin: 0 0 13px; color: var(--green); font: 600 clamp(22px, 2vw, 28px)/1.15 "Playfair Display", serif; }
.rules-grid p { max-width: 500px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.rules-grid .featured-rule { background: var(--green); color: #fff; }
.rules-grid .featured-rule > span { color: var(--lime); }
.rules-grid .featured-rule h3 { color: #fff; }
.rules-grid .featured-rule p { color: #bdcbc1; }
.rules-grid .wide-rule { grid-column: 1 / -1; min-height: 160px; background: #e5e8dc; }
.rules-grid .wide-rule p { max-width: 850px; }

.how-it-works { background: var(--paper); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 60px; }
.section-heading h2 { font-size: clamp(45px, 5vw, 70px); margin: 22px 0 0; }
.section-heading h2 em { color: var(--green); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.steps article { min-height: 245px; padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps article:first-child { background: var(--green); color: #fff; }
.steps article > span { font-size: 9px; letter-spacing: 1.5px; color: #8b988f; }
.steps article:first-child > span { color: var(--lime); }
.steps h3 { font: 600 26px/1.15 "Playfair Display", serif; margin: 52px 0 13px; }
.steps p { max-width: 330px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.steps article:first-child p { color: #bac8be; }

footer { min-height: 190px; padding: 45px clamp(24px, 5vw, 76px); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; background: var(--deep); color: #fff; border-top: 1px solid #ffffff16; }
footer div { text-align: center; }
footer div span { text-transform: uppercase; letter-spacing: 1.7px; color: var(--lime); font-size: 9px; }
footer div p { margin: 9px 0 0; font: italic 600 20px "Playfair Display", serif; }
footer small { text-align: right; color: #819489; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 85px; }
  .hero-copy { max-width: 720px; }
  .hero-prize { width: min(100%, 620px); margin: auto; }
  .rules-intro { grid-template-columns: 1fr; gap: 22px; }
  .rules-intro p { margin-left: 0; }
}

@media (max-width: 620px) {
  .site-header { height: 70px; }
  .site-header img, footer img { width: 108px; }
  .site-header span { font-size: 7px; }
  .hero { min-height: auto; padding: 70px 22px 80px; gap: 58px; }
  h1 { font-size: 48px; letter-spacing: -2px; }
  .hero-summary { margin-top: 38px; }
  .hero-summary div { padding: 17px 6px; }
  .hero-summary div + div { padding-left: 12px; }
  .hero-summary strong { font-size: 22px; }
  .hero-prize-image { height: 260px; }
  .hero-prize-copy { padding: 23px 22px 26px; }
  .hero-prize-copy > div { display: block; }
  .hero-prize-copy > div small { display: block; margin-top: 7px; }
  .hero-prize-copy h2 { font-size: 36px; }
  .content-section { padding: 78px 22px; }
  .rules-intro { margin-bottom: 38px; }
  .rules-intro h2, .section-heading h2 { font-size: 42px; letter-spacing: -2px; }
  .rules-grid { grid-template-columns: 1fr; }
  .rules-grid article, .rules-grid .wide-rule { grid-column: auto; min-height: 0; padding: 26px 22px; grid-template-columns: 34px 1fr; gap: 10px; }
  .rules-grid h3 { font-size: 22px; }
  .section-heading { display: block; margin-bottom: 35px; }
  .steps { grid-template-columns: 1fr; }
  .steps article { min-height: 220px; }
  .steps h3 { margin-top: 42px; }
  footer { grid-template-columns: 1fr; text-align: center; gap: 32px; }
  footer img { margin: auto; }
  footer small { text-align: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-prize { animation: card-in .85s cubic-bezier(.2, .8, .2, 1) both; }
  .hero-copy { animation: copy-in .7s .12s ease both; }
  @keyframes card-in { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: none; } }
  @keyframes copy-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
}