:root {
  --font-display: Georgia, "Times New Roman", serif;
  --font-sans: Inter, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #030806; color: #f8efda; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.page {
  --cream: #f8efda;
  --muted: #b6b4aa;
  --green: #9bffc2;
  --gold: #e0bd6f;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #030806;
  color: var(--cream);
}

.aurora {
  position: absolute;
  inset: 0 0 auto;
  height: 980px;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 29%, rgba(58, 234, 134, .2), transparent 28%),
    radial-gradient(circle at 18% 18%, rgba(215, 173, 83, .12), transparent 30%),
    linear-gradient(145deg, #0c1d16 0%, #030806 66%);
}

.nav {
  position: relative;
  z-index: 3;
  width: min(1240px, calc(100% - 56px));
  height: 98px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.13);
  color: #aaa99f;
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.wordmark {
  color: var(--cream);
  font-family: var(--font-display), Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  text-transform: none;
}

.hero {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 56px));
  min-height: 860px;
  margin: auto;
  padding: 72px 0 105px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 490px);
  align-items: center;
  gap: clamp(70px, 10vw, 150px);
}

.eyebrow {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.copy h1 {
  max-width: 740px;
  margin: 24px 0 30px;
  font-family: var(--font-display), Georgia, serif;
  font-size: clamp(82px, 9vw, 132px);
  font-weight: 600;
  letter-spacing: -.065em;
  line-height: .76;
}

.copy h1 em,
.sectionHeading em,
.character h2 em { color: var(--green); font-weight: inherit; }

.lede {
  max-width: 570px;
  margin: 0;
  color: #c2c0b7;
  font-size: 19px;
  line-height: 1.7;
}

.quote {
  max-width: 560px;
  margin-top: 52px;
  padding: 18px 0 18px 26px;
  border-left: 2px solid rgba(155,255,194,.55);
}

.quote span { color: #777f79; font: 9px var(--font-mono), monospace; letter-spacing: .15em; text-transform: uppercase; }
.quote blockquote { margin: 10px 0 0; font-family: var(--font-display), Georgia, serif; font-size: 27px; line-height: 1.16; }

.screening { position: relative; display: grid; justify-items: center; }
.phoneGlow { position: absolute; inset: 12% -35% 8%; background: radial-gradient(circle, rgba(67,239,139,.22), transparent 64%); filter: blur(12px); }
.phone { position: relative; width: min(100%, 390px); padding: 9px; overflow: hidden; border: 1px solid rgba(224,189,111,.45); border-radius: 31px; background: #020403; box-shadow: 0 42px 110px rgba(0,0,0,.58), 0 0 50px rgba(56,219,128,.1); }
.phone video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 23px; background: #020403; }
.download { margin-top: 25px; color: var(--green); font: 10px var(--font-mono), monospace; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }

.breakdown {
  position: relative;
  z-index: 2;
  padding: 125px max(28px, calc((100vw - 1240px) / 2));
  background: linear-gradient(180deg, #07110d, #040906);
  border-block: 1px solid rgba(255,255,255,.1);
}

.sectionHeading { display: grid; grid-template-columns: .65fr 1.35fr; gap: 70px; align-items: start; }
.sectionHeading h2 { margin: 0; font-family: var(--font-display), Georgia, serif; font-size: clamp(54px, 6vw, 86px); font-weight: 600; letter-spacing: -.045em; line-height: .86; }
.beats { margin: 80px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.13); }
.beats li { min-height: 138px; display: grid; grid-template-columns: 145px 220px 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.13); }
.beats li > span { color: var(--gold); font: 11px var(--font-mono), monospace; letter-spacing: .1em; }
.beats li div { display: contents; }
.beats strong { font-family: var(--font-display), Georgia, serif; font-size: 27px; }
.beats p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

.character { display: grid; grid-template-columns: minmax(340px, .8fr) minmax(420px, 1.2fr); min-height: 780px; background: #0c1712; }
.character img { width: 100%; height: 100%; max-height: 900px; object-fit: cover; object-position: 50% 20%; }
.character > div { padding: clamp(70px, 10vw, 150px); align-self: center; }
.character h2 { margin: 25px 0 30px; font-family: var(--font-display), Georgia, serif; font-size: clamp(60px, 7vw, 100px); font-weight: 600; line-height: .82; letter-spacing: -.05em; }
.character > div > p:last-child { max-width: 460px; color: var(--muted); font-size: 17px; line-height: 1.7; }

.footer { min-height: 140px; padding: 30px max(28px, calc((100vw - 1240px) / 2)); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; color: #737b74; font-size: 11px; }
.footer span { color: var(--cream); font: 700 23px var(--font-display), Georgia, serif; }
.footer p { text-align: center; }
.footer a { color: #9da39e; text-align: right; text-decoration: none; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 68px; }
  .copy { text-align: center; }
  .lede, .quote { margin-inline: auto; }
  .quote { text-align: left; }
  .sectionHeading { grid-template-columns: 1fr; gap: 30px; }
  .beats li { grid-template-columns: 90px 180px 1fr; }
  .character { grid-template-columns: 1fr; }
  .character img { max-height: 760px; object-position: 50% 16%; }
}

@media (max-width: 620px) {
  .nav, .hero { width: min(100% - 28px, 1240px); }
  .nav { height: 78px; }
  .nav > span { display: none; }
  .hero { gap: 58px; padding-bottom: 78px; }
  .copy h1 { font-size: clamp(72px, 25vw, 104px); }
  .lede { font-size: 16px; }
  .phone { width: min(100%, 345px); }
  .breakdown { padding-block: 85px; }
  .beats { margin-top: 55px; }
  .beats li { grid-template-columns: 70px 1fr; gap: 7px 12px; padding: 22px 0; }
  .beats strong { font-size: 22px; }
  .beats p { grid-column: 2; }
  .character > div { padding: 70px 26px 80px; }
  .character h2 { font-size: 63px; }
  .footer { grid-template-columns: 1fr; gap: 15px; padding-block: 42px; }
  .footer p, .footer a { margin: 0; text-align: left; }
}