/*
 * songOS.com home: the "Typewriter" variant of Final 6 FOMO, as static HTML.
 * Extracted from experiments' src/styles/features/_fomo6.scss (origin/main
 * 5ea9855b), with its songOS tokens resolved and only the dark theme, the
 * typewriter home, the apply flow, the confirm and Who we are kept.
 */

@font-face {
  font-family: "DM Sans Variable";
  src: url("fonts/dm-sans-variable.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0b0f12;
  --ink-warm: #252c28;
  --white: #ffffff;
  --offwhite: #fcfbfd;
  --dark: #2e2b2b;
  --char: #433f3f;
  --sky: #2a9ef2;
  --audit-blue: #c2ddf5;
  --orange: #ec6240;
  --royal: #3b6be0;
  --royal-hover: #2f5bc6;
  --field-border-warm: #5a5555;
  --placeholder-warm: #8a8689;
  --mist: #cfcaca;
  --foot-grey: #6d7174;
  --hairline-grey: #7f7f7f;

  /* The dark theme's accent button and inputs. */
  --fomo-accent: var(--royal);
  --fomo-accent-hover: var(--royal-hover);
  --fomo-accent-radius: 12px;
  --fomo-input-ink: var(--char);
  --fomo-input-border: var(--field-border-warm);
  --fomo-input-radius: 9999px;

  background: var(--dark);
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: var(--dark);
}

h1,
h2,
h3,
p {
  margin: 0;
}

.so-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fomo-page {
  font-family: "DM Sans Variable", sans-serif;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1, "ss05" 1, "ss06" 0, "ss07" 1, "ss08" 0;
  -webkit-font-smoothing: antialiased;

  container: fomo-page / inline-size;
  min-height: 100vh;
  background: var(--dark);
  color: var(--offwhite);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
}

:where(.fomo-page) a {
  color: inherit;
}

/* A screen's title takes focus as it arrives, for a screen reader; it draws no ring. */
:where(.fomo-page) h1:focus {
  outline: none;
}

/* A screen: a full-height column, nav at the top, footer at the foot. */
.fomo-view {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.fomo-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 48px;
}

.fomo-lockup-link {
  display: block;
  line-height: 0;
}

.fomo-lockup,
.fomo-team-logo {
  display: block;
  height: 28px;
  aspect-ratio: 1610 / 338;
  background: currentcolor;
  -webkit-mask: url("brand/songos-lockup.svg") center / contain no-repeat;
  mask: url("brand/songos-lockup.svg") center / contain no-repeat;
}

/* --- buttons and fields ----------------------------------------------------- */

.fomo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 32px;
  border: 0;
  border-radius: 9999px;
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.fomo-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.fomo-btn-accent {
  border-radius: var(--fomo-accent-radius);
  background: var(--fomo-accent);
}

.fomo-btn-accent:hover {
  background: var(--fomo-accent-hover);
}

/* The home screen's call to action. It keeps its size on a phone and only goes full width. */
.fomo-cta {
  height: 68px;
  padding: 0 40px;
  font-size: 20px;
}

/* "Apply now", which reads "To join the beta" while a pointer hovers it. */
.fomo-swap-a,
.fomo-swap-b {
  transition: opacity 0.15s;
}

.fomo-swap-b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

@media (hover: hover) {
  .fomo-swap:hover .fomo-swap-a {
    opacity: 0;
  }

  .fomo-swap:hover .fomo-swap-b {
    opacity: 1;
  }
}

.fomo-input {
  width: 100%;
  min-width: 0;
  height: 60px;
  padding: 0 20px;
  border: 1px solid var(--fomo-input-border);
  border-radius: var(--fomo-input-radius);
  background: var(--white);
  color: var(--fomo-input-ink);
  font: inherit;
  font-size: 18px;
}

.fomo-input::placeholder {
  color: var(--placeholder-warm);
}

.fomo-input:focus {
  outline: 2px solid var(--sky);
  outline-offset: 0;
}

/* --- a screen's body ---------------------------------------------------------- */

.fomo-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  padding: 32px 48px 80px;
}

.fomo-sub {
  max-width: 560px;
  font-size: clamp(18px, 1.7vw, 22px);
}

.fomo-qh {
  max-width: 900px;
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.fomo-step {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.7;
}

.fomo-back {
  margin-right: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The answers: a hairline in the text's colour above the first and below the last, grey between. */
.fomo-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
}

.fomo-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid currentcolor;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  text-decoration: none;
}

.fomo-list a:hover {
  opacity: 0.7;
}

.fomo-list a + a {
  border-top-color: color-mix(in srgb, var(--hairline-grey) 35%, transparent);
}

.fomo-list a:last-child {
  border-bottom: 1px solid currentcolor;
}

.fomo-list svg {
  flex: none;
}

.fomo-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 560px;
}

.fomo-fine {
  font-size: 15px;
  opacity: 0.7;
}

/* Not in the prototype, which had no server to fail: what a failed send says. */
.fomo-error {
  color: var(--orange);
  font-size: 15px;
  font-weight: 500;
}

/* Spam trap for Formspree; never shown. */
.fomo-gotcha {
  display: none;
}

/* --- Check your email. ---------------------------------------------------------- */

.fomo-done {
  gap: 24px;
}

.fomo-done .fomo-sub {
  opacity: 0.8;
}

.fomo-done-title {
  font-size: clamp(56px, 8vw, 112px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* --- the footer ------------------------------------------------------------------- */

.fomo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 24px 48px 32px;
  font-size: 14px;
}

.fomo-locas {
  display: block;
  height: 20px;
  aspect-ratio: 770 / 258;
  background: currentcolor;
  -webkit-mask: url("brand/locas-wordmark.svg") center / contain no-repeat;
  mask: url("brand/locas-wordmark.svg") center / contain no-repeat;
}

.fomo-foot-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.fomo-who {
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Typewriter ------------------------------------------------------------------ */

.fomo-typed {
  min-height: 1em;
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.fomo-caret {
  display: inline-block;
  width: 0.08em;
  height: 0.9em;
  margin-left: 0.06em;
  background: var(--orange);
  vertical-align: -0.08em;
  animation: fomo-blink 1s steps(1) infinite;
}

.fomo-caret.is-still {
  animation: none;
}

@keyframes fomo-blink {
  50% {
    opacity: 0;
  }
}

.fomo-typed-sub {
  color: var(--mist);
  transition: opacity 0.3s;
}

.fomo-typed-sub.is-hidden {
  opacity: 0;
}

/* The home screen's footer: mist, under a faint white rule. */
.fomo-home-typewriter .fomo-foot {
  border-top: 1px solid color-mix(in srgb, var(--white) 15%, transparent);
  color: var(--mist);
}

/* --- phone ------------------------------------------------------------------------- */

@container fomo-page (max-width: 720px) {
  .fomo-nav {
    padding: 20px;
  }

  .fomo-btn {
    width: 100%;
    height: 56px;
    padding: 0 24px;
    font-size: 17px;
  }

  .fomo-cta {
    height: 68px;
    padding: 0 40px;
    font-size: 20px;
  }

  .fomo-body {
    padding: 20px 20px 80px;
  }

  .fomo-foot {
    padding: 20px;
  }
}

/* --- the crazies: who is behind songOS ---------------------------------------------- */

.fomo-team {
  container: fomo-team / inline-size;
  width: 100%;
  min-height: 100vh;
  background: var(--white);
  color: var(--ink-warm);
}

.fomo-team-wrap {
  width: calc(100% - 128px);
  max-width: 1184px;
  margin: 0 auto;
}

.fomo-team-header,
.fomo-team-band {
  background: var(--audit-blue);
}

.fomo-team-header {
  padding-top: 40px;
}

.fomo-team-logo {
  width: 144px;
  height: auto;
}

.fomo-team-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 112px;
  padding: 76px 0;
}

.fomo-team-title {
  font-size: clamp(34px, 3cqw, 42px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.035em;
}

.fomo-team-title span {
  display: block;
  white-space: nowrap;
}

.fomo-team-story {
  max-width: 448px;
  padding-top: 2px;
  font-size: 18px;
  line-height: 1.55;
}

.fomo-team-story p + p {
  margin-top: 20px;
}

.fomo-team-people {
  padding: 60px 0 80px;
}

.fomo-team-label {
  margin-bottom: 36px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.fomo-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fomo-team-grid li {
  min-width: 0;
}

.fomo-team-grid img {
  display: block;
  width: 208px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  /* Rounded, softer than the About page's square (experiments #329, 4 Nov). */
  border-radius: 20px;
}

.fomo-team-grid h3 {
  margin: 14px 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.fomo-team-foot {
  padding-bottom: 36px;
  color: var(--foot-grey);
}

.fomo-team-foot p {
  margin: 0;
  font-size: 11px;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

@container fomo-team (max-width: 1100px) {
  .fomo-team-wrap {
    width: calc(100% - 96px);
  }

  .fomo-team-hero {
    display: block;
    padding: 64px 0;
  }

  .fomo-team-title {
    font-size: 40px;
  }

  .fomo-team-story {
    max-width: 640px;
    margin-top: 32px;
    padding-top: 0;
    font-size: 17px;
  }

  .fomo-team-people {
    padding: 52px 0 64px;
  }

  .fomo-team-grid {
    gap: 40px 28px;
  }

  .fomo-team-grid img {
    width: 192px;
  }

  .fomo-team-grid h3 {
    font-size: 17px;
  }
}

@container fomo-team (max-width: 800px) {
  .fomo-team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container fomo-team (max-width: 700px) {
  .fomo-team-wrap {
    width: calc(100% - 56px);
  }

  .fomo-team-header {
    padding-top: 28px;
  }

  .fomo-team-logo {
    width: 132px;
  }

  .fomo-team-hero {
    padding: 44px 0;
  }

  .fomo-team-title {
    font-size: min(6.15cqw, 28px);
    line-height: 1.2;
  }

  .fomo-team-story {
    max-width: none;
    margin-top: 28px;
  }

  .fomo-team-people {
    padding: 36px 0 48px;
  }

  .fomo-team-label {
    margin-bottom: 28px;
    font-size: 20px;
  }

  .fomo-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }

  .fomo-team-grid img {
    width: 100%;
  }

  .fomo-team-grid h3 {
    margin-top: 12px;
    line-height: 1.3;
  }

  .fomo-team-foot {
    padding-bottom: 28px;
  }

  .fomo-team-foot p {
    font-size: 10px;
  }
}

@container fomo-team (max-width: 360px) {
  .fomo-team-wrap {
    width: calc(100% - 48px);
  }

  .fomo-team-header {
    padding-top: 24px;
  }

  .fomo-team-logo {
    width: 124px;
  }

  .fomo-team-hero {
    padding-top: 36px;
  }

  .fomo-team-story {
    font-size: 16px;
  }

  .fomo-team-label {
    font-size: 19px;
  }

  .fomo-team-grid {
    column-gap: 16px;
  }

  .fomo-team-grid h3 {
    font-size: 16px;
  }
}