:root {
  --arc-blue: #294694;
  --arc-blue-light: #7694cf;
  --arc-line: rgba(255,255,255,.66);
  --arc-soft: rgba(255,255,255,.20);
  --arc-text: #fff;
  --arc-form: #f4f4f4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--arc-blue); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--arc-blue);
  color: var(--arc-text);
  font-family: Georgia, "Times New Roman", serif;
}
.prelaunch-hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(9rem, 1fr) auto minmax(5rem, .75fr);
  align-items: center;
  justify-items: center;
  padding: clamp(2rem, 5vw, 4.5rem) 1.5rem clamp(2.4rem, 6vw, 5rem);
  overflow: hidden;
}
.soon {
  align-self: start;
  margin: 0;
  padding-top: clamp(.7rem, 2vh, 1.8rem);
  color: rgba(255,255,255,.17);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 200;
  font-size: clamp(5.5rem, 15.5vw, 12rem);
  line-height: .9;
  letter-spacing: .035em;
  white-space: nowrap;
}
.brand-lockup {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  transform: translateY(-1vh);
}
.brand-mark { width: clamp(76px, 9vw, 112px); height: auto; display: block; }
.brand-wordmark { text-align: center; line-height: 1; }
.brand-name {
  display: block;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 300;
  letter-spacing: .015em;
}
.brand-name .vi { color: #7f9ed7; }
.brand-subtitle {
  display: block;
  margin-top: -.12rem;
  font-size: clamp(.82rem, 1.6vw, 1.15rem);
  color: #91a6d1;
  letter-spacing: .005em;
}
.brand-subtitle strong { color: #fff; font-weight: 400; }
.brand-program {
  display: block;
  margin-top: .45rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(.72rem, 1.4vw, .9rem);
  font-weight: 300;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #b0bde0;
}
.flag {
  align-self: end;
  width: 80px;
  height: 53px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  box-shadow: 0 0 0 1px rgba(255,255,255,.02);
}
.flag span:nth-child(1) { background:#002654; }
.flag span:nth-child(2) { background:#fff; }
.flag span:nth-child(3) { background:#ed2939; }
.story-shell {
  position: relative;
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(3.8rem, 8vw, 7rem) clamp(1.5rem, 6vw, 5.5rem) clamp(4rem, 8vw, 7rem) clamp(6rem, 12vw, 9.2rem);
}
.preview-key {
  position: absolute;
  left: clamp(2.2rem, 5vw, 4.5rem);
  top: clamp(3.8rem, 8vw, 7rem);
  bottom: clamp(4rem, 8vw, 7rem);
  width: 4px;
  background: var(--arc-line);
  text-decoration: none;
  outline: none;
  cursor: default;
}
.preview-key::before {
  content: "";
  position: absolute;
  inset: 0 -13px;
}
.preview-key:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,.45); }
.story-title {
  max-width: 10.8ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  font-size: clamp(3.2rem, 7vw, 5.8rem);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.story-copy {
  max-width: 44rem;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  line-height: 1.3;
  text-align: justify;
  text-justify: inter-word;
}
.story-copy p { margin: 0 0 2rem; }
.story-copy strong { font-weight: 700; }
.principles { margin: .3rem 0 2rem; }
.principles strong { display:block; }
.question {
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem) clamp(3.5rem, 8vw, 6.5rem);
}
.question h2 {
  margin: 0 0 2rem;
  font-size: clamp(3.3rem, 7.4vw, 5.7rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.025em;
}
.question-form { display: grid; gap: 1rem; }
.question-form label {
  display: grid;
  gap: .45rem;
  font-family: Arial, Helvetica, sans-serif;
  color: rgba(255,255,255,.58);
  font-size: .98rem;
  font-weight: 300;
}
.question-form input,
.question-form textarea {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: var(--arc-form);
  color: #1b2b4f;
  padding: .9rem 1rem;
  font: 1rem Arial, Helvetica, sans-serif;
  outline: 2px solid transparent;
  outline-offset: 1px;
}
.question-form input { min-height: 56px; }
.question-form textarea { min-height: 132px; resize: vertical; }
.question-form input:focus,
.question-form textarea:focus { outline-color: rgba(255,255,255,.6); }
.send-wrap { display: flex; justify-content: center; padding-top: .1rem; }
.send-button {
  min-width: 132px;
  min-height: 50px;
  border: 0;
  border-radius: 8px;
  background: #747a83;
  color: #fff;
  font: 400 .95rem Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.send-button:hover,
.send-button:focus-visible { background: #858b94; }
@media (max-width: 700px) {
  .prelaunch-hero { min-height: 100svh; grid-template-rows: auto 1fr auto; gap: 2rem; }
  .soon { font-size: clamp(4.4rem, 20vw, 7rem); white-space: normal; text-align: center; }
  .story-shell { padding-left: 4.6rem; padding-right: 1.5rem; }
  .preview-key { left: 2rem; }
  .story-title { font-size: clamp(2.7rem, 12vw, 4.1rem); }
  .story-copy { text-align: left; }
  .flag { width: 66px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }