:root {
  --bg: #000;
  --text: #eef2f6;
  --text-soft: #c9d3de;
  --blue-gray: #7f99bf;
  --eyebrow: #a7bbd4;
  --struck: #8b9199;
  --sky-light: #d2ecff;
  --sky: #7fc2f6;
  --button-top: #aadeff;
  --button-bottom: #68b4f1;
  --button-text: #07121d;
  --field-bg: rgba(6, 10, 15, 0.62);
  --field-border: rgba(170, 196, 224, 0.42);
  --field-border-focus: rgba(150, 210, 255, 0.85);
  --rule: rgba(132, 160, 196, 0.32);
  --glow: rgba(94, 170, 255, 0.85);
  --error: #ff9a9a;

  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 5vw, 48px);
  --content: 960px;

  /* One design pixel for the parts that can shrink, so the whole page fits
     the screen height. Measured page height: 248px + 876 × k, or
     421px + 530 × k once text hits its minimum sizes (8px kept spare).
     Re-measure if sections are added or removed. Only very short windows
     (under ~600px) end up scrolling. */
  --k: clamp(
    0.3px,
    min(calc((100svh - 256px) / 876), calc((100svh - 429px) / 530)),
    1px
  );
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
}

p {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Background art ----------
   One composition per screen shape, cropped (never stretched). The art frames
   the edges; the centre stays black for the copy.
   With a mouse, the page fits one screen, so the art is pinned to it. On touch
   devices the page scrolls, and mobile browsers resize the screen area as their
   toolbars show and hide, which makes pinned art jump (iOS Safari especially).
   There the art is part of the page instead, covering its full length, and
   scrolls with it like an image. */

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg);
  background-image: url("assets/bg/desktop.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

@media (hover: none) {
  .backdrop {
    position: absolute;
    bottom: 0;
    height: auto;
  }
}

/* Keeps the reading column calm whichever crop of the art is showing. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 46% 58% at 50% 50%,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.5) 55%,
    transparent 100%
  );
}

@media (min-aspect-ratio: 3/2) and (max-aspect-ratio: 5/3) {
  .backdrop {
    background-image: url("assets/bg/laptop.webp");
  }
}

@media (orientation: landscape) and (max-aspect-ratio: 3/2) {
  .backdrop {
    background-image: url("assets/bg/tablet-landscape.webp");
  }
}

/* Halfway between desktop (16:9) and ultrawide (21:9). */
@media (min-aspect-ratio: 21/10) {
  .backdrop {
    background-image: url("assets/bg/ultrawide.webp");
  }
}

@media (orientation: portrait) {
  .backdrop {
    background-image: url("assets/bg/tablet-portrait.webp");
  }
  /* Portrait art already keeps its centre dark; only soften behind the copy. */
  .backdrop::after {
    background: radial-gradient(ellipse 38% 50% at 50% 50%, rgba(0, 0, 0, 0.45) 0%, transparent 100%);
  }
}

@media (orientation: portrait) and (max-width: 600px) {
  .backdrop {
    background-image: url("assets/bg/mobile.webp");
  }
  /* On a phone the copy spans nearly edge to edge, over the art. */
  .backdrop::after {
    background: radial-gradient(ellipse 62% 48% at 50% 50%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
  }
}

/* Half-size art is plenty on small, low-density screens. */
@media (max-width: 900px) and (max-resolution: 1.5dppx) and (orientation: landscape) {
  .backdrop {
    background-image: url("assets/bg/laptop-small.webp");
  }
}

@media (max-width: 900px) and (max-resolution: 1.5dppx) and (orientation: portrait) {
  .backdrop {
    background-image: url("assets/bg/tablet-portrait-small.webp");
  }
}

@media (max-width: 600px) and (max-resolution: 1.5dppx) and (orientation: portrait) {
  .backdrop {
    background-image: url("assets/bg/mobile-small.webp");
  }
}

/* ---------- Layout ---------- */

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin: 0 auto;
  padding: calc(68 * var(--k)) var(--gutter) calc(80 * var(--k));
  text-align: center;
}

/* ---------- Brand ---------- */

.brand {
  /* Shares any spare height with the footer, keeping the content centred. */
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-lockup {
  width: clamp(220px, min(32vw, calc(470 * var(--k))), 470px);
  height: auto;
  /* The artwork's optical centre sits right of the canvas centre. */
  transform: translateX(-1.5%);
}

.brand-wordmark {
  display: none;
}

/* ---------- Eyebrows ---------- */

.eyebrow {
  margin-top: calc(52 * var(--k));
  color: var(--eyebrow);
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  /* Letter-spacing trails the last glyph; pull it back so the label centres. */
  margin-right: -0.5em;
}

.eyebrow-small {
  margin-top: 0;
  font-size: clamp(10px, 0.8vw, 11px);
  letter-spacing: 0.55em;
  margin-right: -0.55em;
}

/* ---------- Headline ---------- */

.headline {
  margin: calc(34 * var(--k)) 0 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.6em;
  font-size: max(34px, min(3.9vw, calc(58 * var(--k))));
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text);
}

.word {
  white-space: nowrap;
}

/* The middle word cycles (see main.js). Words fade and slide up through a
   brief blur, then sit perfectly still; nothing repaints between switches. */
.rotator {
  display: inline-grid;
  justify-content: center;
  justify-items: center;
  filter: drop-shadow(0 0 18px rgba(110, 180, 255, 0.28));
}

/* main.js sets the slot's width to the word showing; this eases the change. */
.rotator.is-fitted {
  transition: width 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rotator-word {
  grid-area: 1 / 1;
  padding-bottom: 0.04em;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--sky-light) 0%, var(--sky) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(0.32em);
  filter: blur(8px);
  transition:
    opacity 480ms ease,
    transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 480ms ease;
}

.rotator-word.is-active {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.rotator-word.is-leaving {
  transform: translateY(-0.32em);
}

/* No motion: just the destination word. */
@media (prefers-reduced-motion: reduce) {
  .rotator-word {
    transition: none;
  }
  .rotator-word.is-active {
    opacity: 0;
  }
  .rotator-word[data-final] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ---------- Supporting copy ---------- */

.lede {
  margin-top: calc(48 * var(--k));
  color: var(--text);
  font-size: max(19px, min(2vw, calc(29 * var(--k))));
  font-weight: 300;
  line-height: 1.25;
}

.sublede {
  margin-top: calc(8 * var(--k));
  color: var(--blue-gray);
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 300;
  letter-spacing: 0.01em;
}

.br-mobile {
  display: none;
}

/* ---------- Waitlist form ---------- */

.waitlist {
  --field-height: max(46px, calc(56 * var(--k)));
  margin-top: calc(40 * var(--k));
  display: flex;
  gap: 10px;
  width: min(100%, 616px);
}

.waitlist .trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.waitlist input:not(.trap) {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--field-height);
  padding: 0 24px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--field-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 300;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.waitlist input::placeholder {
  color: #7c8794;
  opacity: 1;
}

.waitlist input:focus-visible {
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 3px rgba(110, 180, 255, 0.16);
}

.waitlist input[aria-invalid="true"] {
  border-color: rgba(255, 150, 150, 0.7);
}

.waitlist button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: var(--field-height);
  padding: 0 28px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--button-top) 0%, var(--button-bottom) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 22px rgba(100, 175, 255, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.4);
  color: var(--button-text);
  font: inherit;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  transition: filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.waitlist button:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 30px rgba(100, 175, 255, 0.5),
    0 6px 18px rgba(0, 0, 0, 0.4);
}

.waitlist button:hover svg {
  transform: translateX(2px);
}

.waitlist button svg {
  transition: transform 160ms ease;
}

.waitlist button:active {
  transform: translateY(1px);
}

.waitlist button:focus-visible {
  outline: 2px solid var(--sky-light);
  outline-offset: 3px;
}

.waitlist button[disabled] {
  cursor: progress;
  filter: saturate(0.7) brightness(0.92);
}

.form-status {
  color: var(--sky);
  font-size: 15px;
}

.form-status:not(:empty) {
  margin-top: 14px;
}

.form-status[data-tone="error"] {
  color: var(--error);
}

.waitlist.is-done {
  display: none;
}

.form-status[data-tone="success"] {
  margin-top: calc(40 * var(--k));
  padding: 16px 24px;
  border: 1px solid rgba(127, 194, 246, 0.35);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--text);
  font-size: 17px;
}

/* ---------- Offer ---------- */

.offer {
  margin-top: calc(34 * var(--k));
  color: var(--text);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
}

.offer-detail {
  margin-top: calc(8 * var(--k));
  color: var(--blue-gray);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 300;
}

/* ---------- Divider ---------- */

.divider {
  width: min(100%, 540px);
  height: 1px;
  margin: calc(38 * var(--k)) 0 calc(30 * var(--k));
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(90, 130, 180, 0.35) 22%,
    var(--glow) 50%,
    rgba(90, 130, 180, 0.35) 78%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(80, 160, 255, 0.35);
}

/* ---------- Coming soon ---------- */

.soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* With .brand's auto top margin, centres the content in any spare height. */
  margin-bottom: auto;
}

.platforms {
  margin: calc(28 * var(--k)) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(28px, 3.6vw, 52px);
}

.platform + .platform {
  border-left: 1px solid var(--rule);
}

.platform-icons {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 32px;
  color: #dfe5ec;
}

.platform-icons svg {
  width: 29px;
  height: 29px;
  fill: currentColor;
}

.platform-icons svg.tux {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.platform-icons svg.tux .fill {
  fill: currentColor;
  stroke: none;
}

.platform-name {
  margin-top: calc(14 * var(--k));
  color: var(--text);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 300;
}

.platform-detail {
  margin-top: 4px;
  color: var(--text-soft);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 300;
  white-space: nowrap;
}

.platform-detail .dot {
  margin: 0 0.4em;
}

/* ---------- Footer ---------- */

.footer {
  margin-top: auto;
  padding-top: calc(56 * var(--k));
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-mark {
  display: flex;
  align-items: center;
  gap: 22px;
  width: min(100%, 1180px);
}

.footer-mark img {
  flex: 0 0 auto;
  width: 96px;
  height: auto;
  opacity: 0.9;
}

.footer-rule {
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule));
}

.footer-rule:last-child {
  background: linear-gradient(90deg, var(--rule), transparent);
}

.tagline {
  margin-top: calc(12 * var(--k));
  margin-right: -0.32em;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.32em;
}

/* ---------- Entrance (runs once; skipped when motion is reduced) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .page > * {
    animation: rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .page > :nth-child(2) { animation-delay: 60ms; }
  .page > :nth-child(3) { animation-delay: 120ms; }
  .page > :nth-child(n + 4) { animation-delay: 180ms; }
  .page > :nth-child(n + 6) { animation-delay: 240ms; }
  .page > :nth-child(n + 9) { animation-delay: 300ms; }

  .backdrop {
    animation: fade 900ms ease-out both;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- Narrow: stack the headline ---------- */

@media (max-width: 760px) {
  .headline {
    flex-direction: column;
    align-items: center;
    font-size: clamp(38px, 10.4vw, 64px);
    line-height: 1.12;
  }

  .br-mobile {
    display: inline;
  }
}

/* ---------- Phone: a scrolling page, as in the mobile design ---------- */

@media (max-width: 600px) {
  .page {
    padding-top: clamp(28px, 6vh, 56px);
    padding-bottom: 40px;
  }

  .brand-lockup {
    width: clamp(120px, 34vw, 170px);
    transform: translateX(4%);
  }

  .brand-wordmark {
    display: block;
    width: clamp(170px, 46vw, 230px);
    height: auto;
    margin-top: 18px;
  }

  .eyebrow {
    margin-top: 36px;
    font-size: 12px;
    letter-spacing: 0.42em;
    margin-right: -0.42em;
  }

  .headline {
    margin-top: 28px;
  }

  .lede {
    margin-top: 26px;
    font-size: clamp(22px, 7vw, 30px);
  }

  .sublede {
    margin-top: 10px;
    font-size: clamp(15px, 4.4vw, 18px);
  }

  .waitlist {
    --field-height: 54px;
    margin-top: 36px;
    flex-direction: column;
    gap: 14px;
  }

  .waitlist input:not(.trap),
  .waitlist button {
    width: 100%;
  }

  .offer {
    margin-top: 32px;
    font-size: clamp(17px, 5vw, 20px);
    line-height: 1.3;
  }

  .offer-detail {
    margin-top: 10px;
    font-size: clamp(15px, 4.4vw, 18px);
    text-wrap: balance;
  }

  .divider {
    margin: 36px 0 32px;
  }

  .eyebrow-small {
    font-size: 11px;
    margin-top: 0;
  }

  .platforms {
    margin-top: 28px;
  }

  .platform {
    padding: 0 clamp(14px, 5vw, 28px);
  }

  .platform-icons {
    gap: 12px;
  }

  .platform-icons svg {
    width: 26px;
    height: 26px;
  }

  .platform-name {
    margin-top: 14px;
  }

  .platform-detail {
    font-size: 13px;
    color: var(--blue-gray);
  }

  .footer {
    padding-top: 56px;
  }

  .footer-mark {
    gap: 18px;
  }

  .footer-mark img {
    width: 84px;
  }
}

@media (max-width: 360px) {
  .platform-detail {
    white-space: normal;
  }
}