/* Cinematic accent: depth and light, without changing the product's scope. */
:root {
  --ink: #0c100b;
  --paper: #f5f8ef;
  --line: #ffffff14;
  --surface: #1a2118;
  --glow: #c8f54222;
}
body { background: var(--ink); }
.site-header {
  position: relative;
  z-index: 10;
  height: 86px;
  margin: 18px auto 0;
  width: calc(100% - 48px);
  max-width: 1504px;
  padding: 0 28px;
  border: 1px solid #ffffff12;
  border-radius: 26px;
  background: linear-gradient(115deg, #ffffff09, #ffffff03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px #00000020, inset 0 1px #ffffff05;
}
.nav-cta {
  padding: 10px 18px;
  border: 1px solid #c8f5424a;
  border-radius: 999px;
  background: #c8f5420b;
}
.hero {
  min-height: 660px;
  border: 0;
  gap: clamp(24px, 4vw, 65px);
  padding-top: 56px;
  padding-bottom: 90px;
  background: radial-gradient(ellipse at 78% 35%, #c8f54217, transparent 62%),
              radial-gradient(ellipse at 5% 95%, #627b171a, transparent 55%);
}
.hero .eyebrow { color: #cbd7b9; font-size: 12px; letter-spacing: .11em; }
.status-dot { box-shadow: 0 0 14px #c8f54280; }
.hero h1 { letter-spacing: -.025em; }
.hero h1 span { text-shadow: 0 0 65px #c8f54220; }
.hero-copy { color: #c3c9b9; font-size: 20px; }
.hero .button {
  border-radius: 999px;
  background: linear-gradient(110deg, #defa94, #c8f542);
  box-shadow: 0 8px 32px #c8f54222, inset 0 1px #ffffff70;
  min-height: 60px;
  padding-inline: 27px;
}
.hero .button:hover { box-shadow: 0 10px 40px #c8f54236; }
.hero .micro { color: #a4af9b; font-size: 13px; }
.film-frame {
  border-radius: 30px;
  box-shadow: 0 25px 90px #00000065, 0 0 50px #c8f54215, 0 0 0 1px #ffffff12;
  /* Do not crop, cover, or obscure the publisher's video or attribution. */
}
.hero-film figcaption { font-size: 12px; line-height: 1.6; gap: 16px; }
.film-note { font-size: 12px; }
.hero-foot { border-color: #ffffff0f; font-size: 12px; letter-spacing: .09em; }
.principles { gap: 20px; }
.principles article {
  border: 1px solid #ffffff12;
  border-radius: 26px;
  padding: 28px;
  background: linear-gradient(145deg, #ffffff06, #ffffff01);
}
.principles .number { font-size: 48px; margin-bottom: 25px; }
.feature-label { color: #cdd9b5; font-size: 12px; letter-spacing: .06em; }
.map-section {
  color: var(--paper);
  background: radial-gradient(ellipse at 80% 70%, #c8f54210, transparent 60%), #141a11;
  border-top: 1px solid #ffffff09;
  border-bottom: 1px solid #ffffff09;
}
.map-copy .eyebrow, .map-copy h2 span { color: var(--accent); }
.map-copy > p:not(.eyebrow) { color: #c5cdbe; }
.map-copy .small-copy { color: #9ca892; }
.route-preview {
  transform: none;
  border: 1px solid #ffffff18;
  border-radius: 28px;
  background: #1c2518;
  box-shadow: 0 24px 80px #00000040, 0 0 60px #c8f5420a;
}
.preview-top { font-size: 12px; padding: 22px; }
.preview-tag { font-size: 12px; letter-spacing: 0; }
.willy-photo { border-radius: 26px; border: 1px solid #ffffff12; }
.willy-photo > span, .nameplate { font-size: 12px; }
.signup form {
  padding: 30px;
  border: 1px solid #c8f54229;
  border-radius: 28px;
  background: linear-gradient(135deg, #c8f54208, #ffffff03);
  box-shadow: 0 20px 65px #00000020;
}
.field input { background: #0d14099c; border-color: #ffffff28; min-height: 56px; }
.field input:focus { box-shadow: 0 0 0 3px #c8f54213; }
.role-options span { background: #ffffff03; }
.role-options input:checked + span { background: #c8f54217; }
.signup .button { border-radius: 999px; }
.consent { color: #b0baa7; font-size: 14px; }
.site-footer { background: #090e07; }
.site-footer > p { color: #647452; }
.site-footer > small { font-size: 12px; }

@media (max-width: 1050px) and (min-width: 761px) {
  .hero { grid-template-columns: .9fr 1.1fr; }
  .hero h1 { font-size: clamp(76px, 8.5vw, 89px); }
  .principles article { padding: 23px; }
  .signup { gap: 35px; }
  .signup form { padding: 24px; }
}

@media (max-width: 760px) {
  :root { --gutter: 22px; }
  .site-header { height: 70px; width: calc(100% - 24px); margin-top: 12px; padding: 0 18px; border-radius: 22px; gap: 15px; }
  .logo { width: clamp(158px, 47vw, 202px); }
  .menu-toggle { min-height: 44px; padding-left: 8px; font-size: 14px; }
  .site-header nav { top: 80px; left: 0; right: 0; border: 1px solid #ffffff20; border-radius: 22px; background: #1b2516f5; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 16px 23px; }
  .site-header nav .nav-cta { padding-inline: 18px; font-size: 16px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 29px 18px 26px; min-height: 0; }
  .hero-content { display: contents; }
  .hero .eyebrow { order: 0; text-align: center; font-size: 12px; letter-spacing: .07em; }
  .hero h1 { order: 1; font-size: clamp(72px, 18vw, 112px); line-height: .89; text-align: center; margin: 0; max-width: none; }
  .hero-film { order: 2; width: 100%; margin: 7px 0 0; }
  .film-frame { border-radius: 24px; min-height: 200px; }
  .hero-film figcaption { padding: 13px 4px 4px; font-size: 12px; flex-wrap: wrap; gap: 4px 14px; }
  .film-note { padding: 0 4px; font-size: 12px; }
  .hero-copy { order: 3; text-align: center; font-size: 18px; line-height: 1.45; margin: 0 auto; max-width: 420px; }
  .hero .button { order: 4; width: 100%; max-width: 460px; align-self: center; min-height: 60px; font-size: 18px; padding-inline: 26px; }
  .hero .micro { order: 5; text-align: center; max-width: none; font-size: 12px; margin: -7px 0 0; }
  .hero-foot { order: 6; position: static; margin-top: 10px; padding: 21px 2px 0; font-size: 12px; letter-spacing: .02em; flex-wrap: wrap; gap: 9px 16px; }
  .hero-foot i { display: none; }
  .section { padding-top: 58px; padding-bottom: 58px; }
  .eyebrow { font-size: 12px; }
  h2 { font-size: clamp(49px, 12vw, 76px); }
  .section-heading { margin-top: 22px; }
  .principles { gap: 14px; }
  .principles article { grid-template-columns: 42px 1fr; column-gap: 16px; padding: 23px 20px; border-radius: 24px; }
  .principles .number { font-size: 37px; margin-bottom: 0; padding-top: 3px; }
  .principles h3 { font-size: 23px; }
  .principles p { font-size: 17px; }
  .feature-label { font-size: 12px; letter-spacing: .03em; }
  .map-copy h2 { font-size: clamp(68px, 16vw, 90px); }
  .route-preview { border-radius: 24px; transform: none; }
  .preview-top { padding: 17px; flex-wrap: wrap; gap: 6px; }
  .preview-bottom { font-size: 13px; padding: 16px; }
  .willy-photo { border-radius: 24px; margin-top: 25px; }
  .willy-photo > span { line-height: 1.5; gap: 14px; }
  .signup { gap: 29px; }
  .signup h2 { font-size: clamp(68px, 16vw, 88px); }
  .signup form { padding: 24px 18px; border-radius: 25px; }
  .role-options { gap: 7px; }
  .role-options span { font-size: 15px; padding: 14px 6px; }
  .consent { font-size: 14px; }
  .faq summary { min-height: 60px; }
  .footer-bottom { font-size: 14px; }
  .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 359px) {
  .hero h1 { font-size: 68px; }
  .site-header { padding-inline: 14px; }
  .hero { padding-inline: 14px; }
  .signup form { padding-inline: 14px; }
  .hero-film figcaption { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .button:hover { transform: none; }
}