/* Keep display text bold if the external web font is temporarily unavailable.
   These are local browser fallbacks only; no font binaries are bundled. */
@font-face {
  font-family: "FlyFuture Display Fallback";
  src: local("Arial Black"), local("DejaVu Sans Bold");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --ink: #0b1010;
  --surface: #101614;
  --text: #f4f3e9;
  --muted: #b4bbb3;
  --faint: #8b9489;
  --accent: #c4f36a;
  --line: rgba(220, 230, 211, .16);
  --body: "Barlow", "Segoe UI", Arial, sans-serif;
  --display: "Gasoek One", "FlyFuture Display Fallback", "Arial Black", sans-serif;
  color-scheme: dark;
  font-family: var(--body);
  color: var(--text);
  background: var(--ink);
  font-synthesis: none;
}
* {box-sizing: border-box;}
html {scroll-behavior: smooth; scroll-padding-top: 36px;}
body {margin: 0; min-width: 280px; font-size: 16px; -webkit-font-smoothing: antialiased;}
button, input {font: inherit;}
button, a, input {-webkit-tap-highlight-color: transparent;}
button, a {touch-action: manipulation;}
a {color: inherit; text-decoration: none;}
button {cursor: pointer;}
svg {display: block; flex-shrink: 0;}
button svg, a svg {width: 21px; height: 21px;}
[hidden] {display: none !important;}
::selection {background: var(--accent); color: var(--ink);}
:focus-visible {outline: 2px solid var(--accent); outline-offset: 6px;}
input:focus-visible {outline: none;}
.container {width: min(100% - 120px, 1536px); margin-inline: auto;}
.site-shell {overflow: hidden;}
.hero-stage {position: relative; isolation: isolate; background: #111815;}
/* Cover the entire hero so no uncovered strip is exposed on the left.
   Overscan the artwork on the right to keep the aircraft beside the text. */
.scene {position: absolute; z-index: -3; inset: 0; overflow: hidden;}
.scene picture {display: block; width: 130%; height: 100%;}
.scene img {display: block; width: 100%; height: 100%;}
.scene img {object-fit: cover; object-position: 50% 46%; animation: arrive 1.8s cubic-bezier(.16, 1, .3, 1) both;}
.scene-shade {position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(11, 16, 16, .68) 0%, rgba(11, 16, 16, .56) 26%, rgba(11, 16, 16, .24) 49%, rgba(11, 16, 16, 0) 71%), linear-gradient(0deg, #0b1010 0%, rgba(11, 16, 16, .65) 12%, transparent 42%, rgba(11, 16, 16, .07) 68%, rgba(11, 16, 16, .58) 100%);}
.site-header {height: 100px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid rgba(234, 238, 215, .14);}
.brand {display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; color: #fff;}
.brand-mark {width: 33px; height: 30px; color: inherit;}
.brand span {font-family: var(--display); font-size: 21px; font-weight: 400; letter-spacing: .025em;}
.cta-short {display: none;}
.header-cta {display: flex; align-items: center; justify-content: center; gap: 28px; min-height: 44px; border: 1px solid rgba(243, 243, 222, .4); padding: 10px 17px; font-size: 11px; font-weight: 800; letter-spacing: .075em; transition: background .18s, border-color .18s, color .18s;}
.header-cta:hover {background: var(--accent); border-color: var(--accent); color: var(--ink);}
/* The headline has real line and word gaps. No negative tracking or tight
   inherited line heights; its layout remains stable when web fonts arrive. */
.hero {position: relative; min-height: calc(100svh - 100px); padding-block: 96px 88px; display: flex; align-items: center;}
.hero-content {width: 760px; max-width: 68%; position: relative; z-index: 2; animation: reveal .9s .12s both;}
.eyebrow {display: flex; align-items: center; margin-bottom: 40px;}
.platform {display: flex; align-items: center; gap: 12px; color: #c0c7bb; font-size: 11px; letter-spacing: .15em; font-weight: 600;}
.platform svg {height: 18px; width: 18px;}
h1 {font-family: var(--display); font-size: clamp(60px, 6vw, 92px); font-weight: 400; line-height: 1.24; letter-spacing: .025em; margin: 0;}
#hero-title {display: flex; flex-direction: column; align-items: flex-start; gap: 16px;}
.title-line {display: block; white-space: nowrap; margin: 0; font-kerning: none;}
#hero-title .second-line {display: flex; align-items: baseline; column-gap: .3em; font-size: .66em; line-height: 1.3; letter-spacing: .03em; margin: 0;}
h1 em {font-style: normal; color: var(--accent);}
.hero-description {display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin: 44px 0 0; max-width: 100%;}
.hero-kicker {font-family: var(--display); font-size: 28px; font-weight: 400; line-height: 1.35; letter-spacing: .035em; color: var(--text);}
.hero-subkicker {font-family: var(--body); font-size: 15px; line-height: 1.5; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 700;}
.waitlist {width: 560px; max-width: 100%; margin-top: 56px; scroll-margin-top: 48px;}
.waitlist-heading {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 20px;}
.waitlist-heading h2 {margin: 0; font-size: 12px; line-height: 1.6; letter-spacing: .09em; font-weight: 700;}
.waitlist-heading > span {color: var(--accent); font-size: 10px; line-height: 1.6; letter-spacing: .12em; font-weight: 600; white-space: nowrap;}
.input-row {display: flex; min-height: 64px; border: 1px solid rgba(234, 244, 218, .25); background: rgba(14, 20, 18, .86); padding: 4px; transition: border-color .2s, box-shadow .2s;}
.input-row:focus-within {border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196, 243, 106, .09);}
.email-wrap {display: flex; align-items: center; flex: 1; min-width: 0;}
.mail-icon {height: 19px; width: 19px; color: #9ba48f; margin: 0 12px 0 12px;}
.email-wrap input {display: block; width: 100%; min-width: 0; background: transparent; color: var(--text); border: 0; border-radius: 0; padding: 13px 10px 13px 0; font-size: 16px; line-height: 1.5;}
.email-wrap input::placeholder {color: #a3ac9e; opacity: 1;}
.email-wrap input:-webkit-autofill {-webkit-box-shadow: 0 0 0 60px #121a14 inset; -webkit-text-fill-color: var(--text); caret-color: var(--text);}
.button {border: 1px solid transparent; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 12px 17px; border-radius: 0; font-size: 11px; letter-spacing: .06em; font-weight: 800; line-height: 1.3; flex-shrink: 0; transition: background .18s, color .18s, opacity .18s;}
.button-primary {background: var(--accent); color: #18200c;}
.button-primary:hover {background: #d6ff8e;}
.button svg {transition: transform .2s; height: 19px; width: 19px;}
.button:hover svg {transform: translateX(3px);}
.button:disabled {opacity: .65; cursor: wait;}
.button:disabled svg {transform: none;}
.consent {display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: #b8c0b0; cursor: pointer; width: fit-content; padding-block: 3px;}
.consent input {flex-shrink: 0; accent-color: var(--accent); width: 14px; height: 14px; margin: 2px 0 0; cursor: pointer;}
.consent input:focus-visible {outline: 2px solid var(--accent); outline-offset: 3px;}
.form-help {font-size: 12px; line-height: 1.75; margin: 12px 0 0; color: #99a38f;}
.form-help a {color: #b5bea9; text-decoration: underline; text-underline-offset: 3px; margin-left: 7px;}
.form-help a:hover {color: var(--accent);}
.form-error {font-size: 13px; line-height: 1.5; color: #ffbdab; margin: 12px 0 0; padding: 10px 12px; background: #34211d; border-left: 2px solid #ffad95;}
.form-success {display: flex; align-items: flex-start; gap: 15px; border: 1px solid rgba(196,243,106,.35); background: #152016; padding: 20px;}
.success-icon {display: grid; place-items: center; color: var(--accent); height: 32px; width: 32px; border: 1px solid rgba(196,243,106,.3); flex-shrink: 0;}
.success-icon svg {width: 21px; height: 21px;}
.form-success h3 {font-size: 15px; font-weight: 800; letter-spacing: .02em; margin: 0 0 7px; color: var(--accent);}
.form-success p {font-size: 14px; line-height: 1.5; margin: 0; color: #c2cbb7;}
.honeypot {display: none;}
.flight-details {position: absolute; inset: 0; pointer-events: none;}
.heading-scale {position: absolute; top: 74px; right: 8%; width: 265px; display: flex; align-items: center; gap: 16px; color: rgba(246,244,218,.58); font-family: var(--body); font-size: 9px; font-weight: 600; letter-spacing: .12em;}
.heading-scale i {height: 10px; flex: 1; border-bottom: 1px solid rgba(246,244,218,.25); background: repeating-linear-gradient(90deg, rgba(246,244,218,.25) 0 1px, transparent 1px 13px);}
.viewfinder {width: 90px; height: 90px; position: absolute; left: 73%; top: 40%; opacity: .28;}
.viewfinder span {position: absolute; width: 12px; height: 12px; border-color: #f0ebd4; border-style: solid;}
.viewfinder span:nth-child(1) {top: 0; left: 0; border-width: 1px 0 0 1px;}
.viewfinder span:nth-child(2) {top: 0; right: 0; border-width: 1px 1px 0 0;}
.viewfinder span:nth-child(3) {bottom: 0; left: 0; border-width: 0 0 1px 1px;}
.viewfinder span:nth-child(4) {bottom: 0; right: 0; border-width: 0 1px 1px 0;}
.vertical-note {position: absolute; right: -15px; top: 34%; writing-mode: vertical-rl; font-size: 9px; font-weight: 600; letter-spacing: .18em; color: rgba(246,244,218,.58);}
.experience-strip {border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0d1311;}
.experience-grid {display: grid; grid-template-columns: repeat(3, 1fr);}
.experience {display: flex; align-items: center; gap: 20px; padding: 36px 32px; position: relative; min-width: 0;}
.experience:first-child {padding-left: 0;}
.experience:last-child {padding-right: 0;}
.experience + .experience {border-left: 1px solid var(--line);}
.experience-number {color: #8a987b; font-size: 10px; align-self: flex-start; margin-top: 4px; letter-spacing: .05em;}
.experience h2 {font-size: 12px; letter-spacing: .075em; font-weight: 800; margin: 0 0 7px;}
.experience p {margin: 0; font-size: 12px; color: #9aa68e; line-height: 1.5;}
.experience > svg {width: 30px; height: 30px; margin-left: auto; color: #879975;}
.support-section {border-bottom: 1px solid var(--line); background: #101714;}
.support-inner {display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 44px;}
.support-copy {min-width: 0;}
.support-eyebrow {display: block; color: #a4b296; font-size: 10px; line-height: 1.7; letter-spacing: .13em; font-weight: 600;}
.support-copy h2 {font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: .01em; margin: 10px 0;}
.support-copy p {color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; max-width: 530px;}
.support-button {display: inline-flex; justify-content: center; align-items: center; gap: 14px; flex-shrink: 0; min-height: 56px; padding: 16px 22px; border: 1px solid #768b59; color: var(--text); font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; transition: border-color .18s, background .18s, color .18s;}
.support-button:hover {background: #1b2817; border-color: var(--accent); color: var(--accent);}
.support-button .coffee-icon {width: 23px; height: 23px; color: var(--accent);}
.support-button .external-arrow {width: 18px; height: 18px; margin-left: 8px;}
.site-footer {min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #8e9985; font-size: 9px; letter-spacing: .09em; font-weight: 600;}
.site-footer a {display: inline-flex; align-items: center; gap: 8px; min-height: 44px;}
.site-footer a:hover {color: var(--accent);}
.site-footer svg {height: 15px; width: 15px;}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.skip-link {position: fixed; z-index: 50; top: -80px; left: 15px; background: var(--accent); color: #101810; padding: 14px 20px; font-weight: 700;}
.skip-link:focus {top: 15px;}
.privacy-dialog {width: min(650px, calc(100% - 32px)); max-height: min(90svh, 900px); padding: 30px; border: 1px solid #455037; background: #111814; color: var(--text); margin: auto; overscroll-behavior: contain;}
.privacy-dialog::backdrop {background: rgba(0, 0, 0, .75); backdrop-filter: blur(6px);}
body.dialog-open {overflow: hidden;}
.dialog-top {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px;}
.dialog-brand {font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--accent);}
.dialog-close {width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--text); background: transparent;}
.dialog-close:hover {border-color: var(--accent); color: var(--accent);}
.privacy-dialog h2 {font-family: var(--display); font-size: clamp(24px, 5vw, 34px); line-height: 1.1; letter-spacing: -.02em; font-weight: 400; margin: 0 0 20px;}
.privacy-copy p {font-size: 14px; color: #b9c3ae; line-height: 1.65; margin: 0 0 20px;}
.privacy-copy h3, .removal-region > h3 {font-size: 15px; font-weight: 700; margin: 22px 0 9px;}
.privacy-copy p.privacy-intro {color: var(--text); font-size: 16px;}
.removal-region {border-top: 1px solid var(--line); padding-top: 6px; margin-top: 26px;}
.small-copy {font-size: 13px; color: #b1bca5; line-height: 1.6;}
.field-label {display: block; font-size: 12px; margin-bottom: 10px; color: #ced6c4;}
.button-secondary {background: #273322; border-color: #455439; color: var(--text); letter-spacing: 0; font-size: 12px;}
.button-secondary:hover {background: #34472b;}
.utility-page {min-height: 100svh; background: radial-gradient(ellipse at 100% 0, #263523 0, transparent 50%), var(--ink);}
.utility-page .site-header {max-width: 1000px;}
.utility-main {width: min(650px, calc(100% - 40px)); margin: 80px auto;}
.utility-main h1 {font-size: clamp(35px, 6vw, 56px); line-height: 1.1; margin-bottom: 24px;}
.utility-main > p {font-size: 17px; line-height: 1.6; color: #c1ccb5;}
.utility-main .button {margin-top: 24px; width: fit-content;}
.utility-main .removal-region .button {margin-top: 0;}
.utility-kicker {font-size: 11px !important; letter-spacing: .12em; color: var(--accent) !important; font-weight: 700; margin-bottom: 25px;}
@keyframes reveal {from {opacity: 0; transform: translateY(13px);} to {opacity: 1; transform: none;}}
@keyframes arrive {from {transform: scale(1.025); opacity: .8;} to {transform: scale(1); opacity: 1;}}
@media (min-width: 1800px) {
  .hero {padding-block: 120px 104px;}
  .scene picture {width: 122%;}
}
@media (max-width: 1160px) {
  .container {width: calc(100% - 80px);}
  .hero {padding-block: 88px 80px;}
  .hero-content {max-width: 78%;}
  h1 {font-size: clamp(54px, 6.8vw, 76px);}
  .scene picture {width: 148%;}
  .heading-scale {right: 3%; width: 210px;}
  .viewfinder, .vertical-note {display: none;}
  .experience {padding: 32px 22px; gap: 16px;}
  .experience > svg {display: none;}
  .experience h2 {font-size: 11px; line-height: 1.5;}
  .experience p {font-size: 12px;}
}
@media (max-width: 760px) {
  .container {width: calc(100% - 56px);}
  .site-header {height: 88px; gap: 20px;}
  .brand {gap: 10px;}
  .brand span {font-size: 17px; letter-spacing: .015em;}
  .brand-mark {height: 25px; width: 27px;}
  .header-cta {font-size: 10px; gap: 12px; padding: 10px 12px; min-height: 44px;}
  .header-cta svg {height: 16px; width: 16px;}
  .scene {bottom: auto; height: 560px;}
  .scene picture {width: 100%;}
  .scene img {object-position: 53% 35%;}
  .hero-stage {background: var(--ink);}
  /* Anchor the fade to the artwork height, not the growing form section. */
  .scene-shade {height: 565px; bottom: auto; background: linear-gradient(180deg, rgba(11,16,16,.55) 0%, rgba(11,16,16,.08) 34%, rgba(11,16,16,.3) 56%, rgba(11,16,16,.88) 80%, #0b1010 100%);}
  .hero {display: block; padding-top: 290px; padding-bottom: 64px; min-height: 0;}
  .hero-content {width: 100%; max-width: 100%;}
  .eyebrow {margin-bottom: 32px;}
  .platform {font-size: 10px; gap: 10px;}
  .platform svg {width: 17px; height: 17px;}
  h1 {font-size: clamp(32px, 10vw, 64px); line-height: 1.24;}
  #hero-title {gap: 16px;}
  #hero-title .second-line {font-size: .7em; line-height: 1.35; column-gap: .32em;}
  .hero-description {margin-top: 40px; gap: 16px;}
  .hero-kicker {font-size: 24px; line-height: 1.4;}
  .hero-subkicker {font-size: 13px; line-height: 1.6;}
  .waitlist {width: 100%; margin-top: 48px;}
  .waitlist-heading {margin-bottom: 20px; gap: 8px 20px;}
  .waitlist-heading h2 {font-size: 11px; letter-spacing: .065em;}
  .waitlist-heading > span {font-size: 9px;}
  .waitlist .input-row {display: flex; flex-direction: column; gap: 12px; border: 0; background: none; padding: 0; box-shadow: none;}
  .waitlist .email-wrap {min-height: 60px; border: 1px solid rgba(234,244,218,.3); background: #101814; padding: 0 6px;}
  .waitlist .email-wrap:focus-within {border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,243,106,.09);}
  .waitlist .input-row .button {min-height: 58px; width: 100%; font-size: 11px; letter-spacing: .09em; gap: 18px; padding: 16px;}
  .mail-icon {margin-left: 10px; margin-right: 12px; width: 19px; height: 19px;}
  .email-wrap input {font-size: 16px; padding-right: 12px;}
  .consent {font-size: 13px; margin-top: 20px; gap: 10px;}
  .form-help {font-size: 12px; line-height: 1.8; margin-top: 16px;}
  .form-help a {display: inline-block;}
  .flight-details {display: none;}
  .experience-grid {grid-template-columns: 1fr; padding-block: 12px;}
  .experience, .experience:first-child, .experience:last-child {padding: 28px 0; gap: 20px;}
  .experience + .experience {border-left: 0; border-top: 1px solid var(--line);}
  .experience-number {font-size: 10px;}
  .experience h2 {font-size: 12px; margin-bottom: 8px; line-height: 1.5;}
  .experience p {font-size: 13px; line-height: 1.6;}
  .experience > svg {display: block; height: 27px; width: 27px; margin-right: 2px;}
  .support-inner {flex-direction: column; align-items: stretch; gap: 28px; padding-block: 40px;}
  .support-eyebrow {font-size: 9px; line-height: 1.8;}
  .support-copy h2 {font-size: 23px; margin-block: 12px;}
  .support-copy p {font-size: 14px;}
  .support-button {width: 100%; min-height: 60px;}
  .site-footer {min-height: 84px; font-size: 9px; gap: 12px; flex-wrap: wrap; padding-block: 16px;}
  .privacy-dialog {padding: 24px;}
  .removal-input-row {flex-direction: column; gap: 6px;}
  .removal-input-row .button {font-size: 11px;}
}
@media (max-width: 540px) {
  .cta-full {display: none;}
  .cta-short {display: inline;}
}
@media (max-width: 380px) {
  .container {width: calc(100% - 40px);}
  .brand {gap: 8px;}
  .brand span {font-size: 14px;}
  .brand-mark {width: 22px; height: 24px;}
  .site-header {gap: 12px;}
  .header-cta {font-size: 9px; gap: 8px; padding-inline: 10px;}
  .hero {padding-top: 270px;}
  h1 {font-size: 9.8vw;}
  .hero-kicker {font-size: 22px;}
  .form-help a {margin-left: 0;}
  .experience {gap: 16px;}
  .support-button {gap: 12px; padding-inline: 16px;}
  .support-button .external-arrow {margin-left: 0;}
}
@media (max-width: 340px) {
  .site-header {gap: 8px;}
  .brand span {font-size: 12px;}
  .header-cta svg {display: none;}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  *, *::before, *::after {animation: none !important; transition: none !important;}
}

/* v7 — Discord. Keep the v6 hero, whitespace, artwork and white logo unchanged. */
.header-actions {display: flex; align-items: center; gap: 28px;}
.header-discord {display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 11px; line-height: 1.5; letter-spacing: .08em; font-weight: 700; color: var(--text);}
.header-discord > .external-arrow {width: 15px; height: 15px; opacity: .65;}
.header-discord:hover {color: var(--accent);}
.discord-icon {width: 23px; height: 23px;}
.community-section {border-bottom: 1px solid var(--line); background: #0d1413;}
.community-inner {display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-block: 72px;}
.community-copy {max-width: 670px;}
.community-eyebrow {display: block; color: var(--accent); font-size: 10px; font-weight: 700; line-height: 1.6; letter-spacing: .2em; margin-bottom: 18px;}
.community-copy h2 {font-family: var(--body); font-weight: 700; font-size: clamp(25px, 2.4vw, 35px); line-height: 1.3; margin: 0 0 18px; letter-spacing: .005em;}
.community-copy p {font-size: 16px; line-height: 1.8; color: var(--muted); max-width: 590px; margin: 0;}
.community-action {display: flex; flex-direction: column; align-items: center; gap: 15px; flex-shrink: 0;}
.community-action > span {font-size: 12px; line-height: 1.6; color: var(--muted);}
.community-button {display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 58px; padding: 17px 24px; border: 1px solid var(--accent); background: var(--accent); color: #17200b; font-size: 12px; font-weight: 800; line-height: 1.5; letter-spacing: .065em; transition: background .18s, border-color .18s;}
.community-button:hover {background: #d6ff8e; border-color: #d6ff8e;}
.success-discord {display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--accent); font-size: 12px; line-height: 1.6; font-weight: 700; margin-top: 16px; text-underline-offset: 5px;}
.success-discord:hover {text-decoration: underline;}
.confirmation-actions {display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px;}
.confirmation-actions a {margin: 0;}
@media (max-width: 1000px) {
  .community-inner {align-items: flex-start; flex-direction: column; gap: 32px;}
  .community-action {align-items: flex-start;}
}
@media (max-width: 760px) {
  .header-actions {gap: 18px;}
  .header-discord {font-size: 10px; gap: 8px;}
  .header-discord > .external-arrow {display: none;}
  .community-inner {padding-block: 48px;}
  .community-copy p {font-size: 15px;}
  .community-action {width: 100%;}
  .community-button {width: 100%;}
  .confirmation-actions {flex-direction: column;}
}
@media (max-width: 400px) {
  .header-actions {gap: 12px;}
  .header-discord {gap: 6px; font-size: 9px;}
  .header-discord > .discord-icon {width: 18px; height: 18px;}
}