@font-face {
  font-family: Montserrat;
  src: url("/brand/montserrat-latin.woff2") format("woff2");
  font-weight: 500 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  background: #070410;
  color: #fbfaff;
  font-family: Montserrat, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body, h1, p { margin: 0; }
button, input { font: inherit; }
[hidden] { display: none !important; }
.stage {
  --gutter: clamp(22px, 3vw, 72px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(16px, 3.6svh, 46px) var(--gutter);
  background: radial-gradient(ellipse at 26% 93%, #241238, transparent 49%), #06040c;
}
.wordmark { font-weight: 800; font-size: clamp(17px, 1.45vw, 25px); letter-spacing: -.045em; }
footer { font-size: clamp(12px, 1.05vw, 16px); font-weight: 600; }
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: clamp(12px, 2svh, 28px);
}
.heading, .details { width: min(43vw, 88svh); }
.heading { position: relative; }
.eyebrow { margin-bottom: clamp(12px, 3svh, 36px); font-size: clamp(15px, min(1.58vw, 2.5svh), 28px); font-weight: 720; letter-spacing: -.04em; }
h1 { font-size: clamp(34px, min(4.44vw, 8.4svh), 104px); line-height: .99; letter-spacing: -.052em; font-weight: 850; }
h1 span, h1 em { display: block; }
h1 em { font-style: normal; color: #dcabff; background: linear-gradient(110deg,#d8b4ff,#cc8cf7 75%); background-clip: text; -webkit-text-fill-color: transparent; }
.art {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.art img {
  display: block;
  position: absolute;
  height: 100%;
  width: auto;
  right: 0;
  top: 0;
  mask-image: linear-gradient(to right, transparent 0%, #000 18%);
}
.intro {
  margin-top: clamp(16px, 3.1svh, 38px);
  max-width: 29em;
  font-size: clamp(16px, min(1.42vw, 2.38svh), 26px);
  font-weight: 560;
  line-height: 1.42;
  letter-spacing: -.028em;
  color: #eeeaf5;
}
.intro strong { font-weight: 700; color: #fff; }
.capture { margin-top: clamp(15px, 3.9svh, 45px); }
form { display: flex; gap: clamp(7px, .75vw, 14px); }
input, button[type=submit] {
  min-height: clamp(44px, 6.6svh, 70px);
  border-radius: clamp(14px, 1.25vw, 22px);
  padding-inline: clamp(12px, 1.6vw, 28px);
  font-size: clamp(15px, min(1.46vw, 2.45svh), 25px);
}
input {
  min-width: 0;
  width: 0;
  flex: 1;
  color: #fff;
  border: 1px solid #d3b7f7;
  background: linear-gradient(150deg, #392e4eaa, #100d1acc 65%, #30223faa);
  box-shadow: inset 0 0 13px #c798fa24, 0 0 20px #9d49ff16;
}
input::placeholder { color: #f1eaf8; opacity: 1; }
button[type=submit] {
  font-weight: 770;
  letter-spacing: -.04em;
  cursor: pointer;
  color: #1c0c26;
  background: linear-gradient(125deg,#dda8ff,#cb94fc 80%);
  border: 1px solid #edcfff94;
  box-shadow: 0 0 18px #ad55ec50, 0 0 40px #a33cec26;
  transition: transform .2s, box-shadow .2s;
}
button[type=submit]:hover { transform: translateY(-1px); box-shadow: 0 0 28px #be70ff78; }
button:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.edit { padding: 8px 0; border: 0; background: none; color: #e0b2ff; text-decoration: underline; cursor: pointer; }
#reply { font-weight: 600; font-size: 15px; }
#reply:not(:empty) { padding-block: 5px; }
.status {
  display: table;
  margin-top: clamp(16px, 4.6svh, 52px);
  border-radius: 999px;
  padding: clamp(7px, 1.25svh, 14px) clamp(11px, 1.5vw, 25px);
  font-size: clamp(12px, min(1.21vw, 2.1svh), 21px);
  letter-spacing: -.035em;
  font-weight: 650;
  line-height: 1.35;
  border: 1px solid #cda1ed;
  background: linear-gradient(135deg,#352440b3,#150f22b3);
  box-shadow: inset 0 0 15px #e0b9ff13;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-aspect-ratio: 2/1) {
  .art img { right: 1%; }
}
@media (max-aspect-ratio: 7/5) and (min-aspect-ratio: 6/5) {
  .art { left: 31%; }
  .art img { mask-image: linear-gradient(90deg, transparent 28%, #000 48%); }
}
@media (max-aspect-ratio: 6/5), (max-width: 620px) and (orientation: portrait) {
  .stage { padding: clamp(12px, 2.5svh, 26px) clamp(16px, 4.4vw, 48px); }
  .hero {
    display: grid;
    grid-template-rows: auto minmax(65px, 1fr) auto;
    align-items: stretch;
    padding-block: clamp(9px, 1.8svh, 20px);
    gap: clamp(4px, 1svh, 10px);
  }
  .heading, .details { width: 100%; }
  .eyebrow { font-size: clamp(13px, 2.8vw, 19px); margin-bottom: clamp(7px, 1.25svh, 16px); }
  h1 { font-size: clamp(30px, min(6.95vw, 5.7svh), 62px); line-height: .99; }
  h1 span, h1 em { display: inline; }
  h1 { max-width: 18em; text-wrap: balance; }
  .art {
    position: relative;
    inset: auto;
    z-index: 0;
    margin-inline: calc(-1 * clamp(16px, 4.4vw, 48px));
    mask-image: linear-gradient(180deg, transparent, #000 4%, #000 94%, transparent);
  }
  .art img { right: auto; left: 50%; transform: translateX(-71%); mask-image: none; }
  .intro { margin: 0; font-size: clamp(15px, 2.65vw, 20px); line-height: 1.36; max-width: 49em; }
  .capture { margin-top: clamp(9px, 1.8svh, 22px); }
  input, button[type=submit] { font-size: 16px; min-height: 44px; padding-inline: clamp(10px, 2.6vw, 20px); }
  .status { margin-top: clamp(8px, 1.5svh, 18px); font-size: clamp(11px, 2.35vw, 16px); padding: 7px 12px; }
  footer { font-size: 12px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .stage { padding-block: 8px; }
  .hero { padding-block: 5px; }
  .heading, .details { width: 53%; }
  h1 { font-size: clamp(25px, 6.3svh, 34px); }
  .eyebrow { font-size: 13px; margin-bottom: 6px; }
  .intro { font-size: 13px; margin-top: 8px; line-height: 1.35; }
  .capture, .status { margin-top: 7px; }
  input, button[type=submit] { min-height: 38px; font-size: 14px; }
  .status { padding: 4px 9px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none !important; }
}


.wordmark { display:flex; align-items:center; gap:.52em; }
.wordmark img { width:1.45em; height:1.45em; }
.brand-name b { color:#dbb9fa; font-weight:inherit; }
#purpose { margin-bottom:8px; color:#f0ddff; font-size:clamp(13px,1.05vw,17px); font-weight:650; }
.trap { position:absolute; left:-10000px; width:1px; height:1px; opacity:0; }
button:disabled { opacity:.68; cursor:wait; }

h1 span:first-child { font-size:.82em; white-space:nowrap; }