/* ATLAS public site: the sky world every public page shares.
   One fixed sky behind the page (day by default; a page may move it toward
   night through the --st-* tokens), liquid glass on top, Montserrat only.
   Page-specific scenes live in their own stylesheet (home.css). */

:root {
  /* Live tokens: day values. The landing's script moves them toward their -night twins as you scroll. */
  --st-sky-1: #1A7FC0;
  --st-sky-2: #2B9BD8;
  --st-sky-3: #86CDEF;
  --st-ink: #0B0D10;
  --st-ink-2: rgba(11, 13, 16, 0.76);
  --st-em: #FFFFFF;
  --st-glass: rgba(255, 255, 255, 0.72);
  --st-solid: rgba(255, 255, 255, 0.88);
  --st-rim: rgba(255, 255, 255, 0.92);
  --st-glass-ink: #0B0D10;
  --st-glass-sub: #556272;
  --st-line: rgba(11, 13, 16, 0.08);
  --st-chip: rgba(11, 13, 16, 0.05);
  --st-btn: #0B0D10;
  --st-btn-ink: #FFFFFF;
  --st-shadow-c: rgba(6, 40, 80, 0.42);
  /* Their night twins, and the dusk the sky passes through on the way. */
  --st-sky-1-night: #030B18;
  --st-sky-2-night: #081B36;
  --st-sky-3-night: #12305A;
  --st-sky-1-dusk: #2D4F8E;
  --st-sky-2-dusk: #9C7BB0;
  --st-sky-3-dusk: #F4B59C;
  --st-ink-night: #FFFFFF;
  --st-ink-2-night: rgba(232, 241, 250, 0.80);
  --st-em-night: #6BC6F0;
  --st-glass-night: rgba(12, 30, 56, 0.66);
  --st-solid-night: rgba(14, 32, 58, 0.92);
  --st-rim-night: rgba(160, 205, 245, 0.24);
  --st-glass-ink-night: #EEF4FA;
  --st-glass-sub-night: #9DB2C7;
  --st-line-night: rgba(255, 255, 255, 0.10);
  --st-chip-night: rgba(255, 255, 255, 0.07);
  --st-btn-night: #FFFFFF;
  --st-btn-ink-night: #0B0D10;
  --st-shadow-c-night: rgba(0, 0, 0, 0.55);
  --st-branch-b: 1;
  --st-night: 0;
  /* Fixed */
  --st-good: #0E9F68;
  --st-good-soft: rgba(14, 159, 104, 0.14);
  --st-bad: #E0485C;
  --st-live: #2BD889;
  --st-sky-bright: #4FB8E8;
  --st-section: clamp(88px, 12vh, 136px);
  --st-wrap: 1200px;
  --st-nav-h: 64px;
  --st-nav-top: calc(env(safe-area-inset-top, 0px) + 14px);
  --st-slow: calc(var(--duration-slow) * 1.6);
}
/* Shadows built from --st-shadow-c resolve where it is set: on the root, which the landing moves toward
   night, and on a page that follows the reader's theme. */
:root, .st-themed {
  --st-shadow-glass: 0 40px 80px -36px var(--st-shadow-c), 0 2px 8px -2px var(--st-shadow-c);
  --st-shadow-btn: 0 14px 30px -14px var(--st-shadow-c);
  --st-shadow-btn-hover: 0 20px 40px -16px var(--st-shadow-c);
}

body.st {
  margin: 0;
  background: var(--st-sky-2);
  color: var(--st-ink);
  font-family: var(--font-head);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.st *, .st *::before, .st *::after { box-sizing: border-box; }
.st img { max-width: 100%; display: block; }
.st button, .st input { font-family: inherit; }
:where(.st) a { color: inherit; }
.st :focus-visible { outline: 3px solid var(--st-sky-bright); outline-offset: 3px; border-radius: 8px; }
.st [hidden] { display: none !important; }

/* the world */
.st-sky { position: fixed; inset: 0 0 auto; height: 100vh; height: 100lvh; z-index: var(--z-base); background: linear-gradient(180deg, var(--st-sky-1) 0%, var(--st-sky-2) 50%, var(--st-sky-3) 100%); }
.st-petals { position: fixed; inset: 0 0 auto; width: 100%; height: 100vh; height: 100lvh; z-index: var(--z-content); pointer-events: none; }
.st main { position: relative; z-index: calc(var(--z-content) + 1); }
/* A page that follows the reader's light or dark theme (the doc pages, sign-in) has the sky behind it at
   day or at night; the landing moves through both as you scroll instead. As tall as the screen without
   Safari's toolbars, so it never stretches when they come and go. */
html[data-theme="dark"] .st-themed {
  --st-sky-1: var(--st-sky-1-night); --st-sky-2: var(--st-sky-2-night); --st-sky-3: var(--st-sky-3-night);
  --st-ink: var(--st-ink-night); --st-ink-2: var(--st-ink-2-night); --st-em: var(--st-em-night);
  --st-glass: var(--st-glass-night); --st-solid: var(--st-solid-night); --st-rim: var(--st-rim-night);
  --st-glass-ink: var(--st-glass-ink-night); --st-glass-sub: var(--st-glass-sub-night); --st-line: var(--st-line-night);
  --st-chip: var(--st-chip-night); --st-btn: var(--st-btn-night); --st-btn-ink: var(--st-btn-ink-night);
  --st-shadow-c: var(--st-shadow-c-night);
}
.st-themed { background: var(--st-sky-2); color: var(--st-ink); }
/* The app's quiet buttons on these pages take the landing's glass; its main one is .st-btn below. */
.st-themed .button-ghost { background: var(--st-chip); color: var(--st-glass-ink); border-color: var(--st-line); border-radius: var(--radius-pill); font-weight: 700; }
.st-themed::before { content: ""; position: fixed; inset: 0 0 auto; height: 100vh; height: 100lvh; z-index: var(--z-base); background: linear-gradient(180deg, var(--st-sky-1) 0%, var(--st-sky-2) 50%, var(--st-sky-3) 100%); pointer-events: none; }
.st-wrap { max-width: var(--st-wrap); margin-inline: auto; padding-inline: max(16px, 3vw); }

/* type: Montserrat only; weight and size do the work */
.st-display { font-weight: 820; font-size: clamp(40px, min(8vw, 11.5vh), 112px); line-height: 1.02; letter-spacing: -0.045em; margin: 0; text-wrap: balance; }
.st-h2 { font-weight: 780; font-size: clamp(32px, min(5.2vw, 8vh), 72px); line-height: 1.06; letter-spacing: -0.038em; margin: 0; text-wrap: balance; }
/* A word longer than its line (German compounds) breaks with a hyphen instead of running into its neighbour. */
.st-display, .st-h2, .st-h3, .st :where(h3) { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
.st-h3 { font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.02em; margin: 0; }
.st-kicker { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-ink-2); }
.st-lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--st-ink-2); margin: 0; max-width: 34ch; text-wrap: pretty; }
.st-fine { font-size: 14px; color: var(--st-ink-2); margin: 0; }
.st .em { font-style: normal; color: var(--st-em); }
.st-on-sky { text-shadow: 0 2px 30px rgba(6, 40, 80, calc(0.16 + 0.2 * var(--st-night))); }

/* glass, buttons, pills, icons */
.st-glass { background: var(--st-glass); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border: 1px solid var(--st-rim); box-shadow: var(--st-shadow-glass); color: var(--st-glass-ink); }
/* The landing's button, and the app's main button on a page that follows the reader's theme. */
.st-btn, .st-themed :is(.button-primary, .button--primary) { display: inline-flex; align-items: center; justify-content: center; gap: var(--st-s-2); border: 0; border-radius: var(--radius-pill); background: var(--st-btn); color: var(--st-btn-ink); font-weight: 700; font-size: 16px; line-height: 1.15; padding: 15px 26px; text-decoration: none; cursor: pointer; transition: transform var(--duration-base) var(--ease-out-soft), box-shadow var(--duration-base) var(--ease-out-soft); box-shadow: var(--st-shadow-btn); text-align: center; text-wrap: balance; max-width: 100%; }
.st-btn:hover, .st-themed :is(.button-primary, .button--primary):hover { background: var(--st-btn); transform: translateY(-2px); box-shadow: var(--st-shadow-btn-hover); }
/* The app's controls keep their labels whole on these pages, wrapping as the landing's do (the app
   clips them to one line for its fixed-size controls), and the main button shows the landing's focus ring. */
.st-themed :where(.button, .button-primary, .button-ghost, .button-discord, .button-danger, .button--primary, .button--ghost, .button--discord, .button--danger, .badge, .pill, .chip),
.st-themed :where(.button, .button-primary, .button-ghost, .button-discord, .button-danger, .button--primary, .button--ghost, .button--discord, .button--danger, .badge, .pill, .chip) > :where(span, strong, em, small) { white-space: normal; overflow: visible; }
.st-themed :is(.button-primary, .button--primary):focus-visible { outline: 3px solid var(--st-sky-bright); outline-offset: 3px; }
.st-btn-sm { font-size: 14px; padding: 11px 18px; }
.st-btn-ghost { display: inline-flex; align-items: center; gap: var(--st-s-2); border-radius: var(--radius-pill); font-weight: 700; font-size: 16px; line-height: 1.15; padding: 14px 22px; cursor: pointer; text-decoration: none; text-align: center; text-wrap: balance; max-width: 100%; }
.st-len { font-weight: 600; color: var(--st-glass-sub); }
.st-pill { display: inline-flex; align-items: center; gap: var(--st-s-2); border-radius: var(--radius-pill); padding: 8px 14px 8px 8px; font-size: 13px; font-weight: 700; text-decoration: none; transition: transform var(--duration-base) var(--ease-out-soft); }
a.st-pill:hover { transform: translateY(-1px); }
.st-q { width: 22px; height: 22px; border-radius: 50%; background: var(--st-glass-ink); color: var(--st-glass); display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.st-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.st-ico-s { width: 16px; height: 16px; }
.st-solid { fill: currentColor; stroke: none; }

/* open vs full: a page marks <body data-spots>; full shows the waitlist */
.st [data-full] { display: none !important; }
body.st[data-spots="full"] [data-open] { display: none !important; }
body.st[data-spots="full"] [data-full]:not([hidden]) { display: revert !important; }
body.st[data-spots="full"] .st-btn[data-full], body.st[data-spots="full"] .st-pill[data-full], body.st[data-spots="full"] .st-wl[data-full] { display: flex !important; }

/* the waitlist form */
.st-wl { display: flex; flex-wrap: wrap; gap: var(--st-s-2); align-items: center; border-radius: var(--st-r-md); padding: 6px; max-width: 440px; width: 100%; }
.st-wl input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; padding: 10px 14px; color: var(--st-glass-ink); outline: none; }
.st-wl input::placeholder { color: var(--st-glass-sub); }
.st-wl-status { flex-basis: 100%; margin: 0; padding: 0 var(--st-s-3) var(--st-s-1); font-size: 14px; font-weight: 600; }

/* nav */
.st-nav { position: fixed; top: var(--st-nav-top); left: 0; right: 0; z-index: var(--z-sticky); padding-inline: 16px; pointer-events: none; }
.st-nav-in { pointer-events: auto; max-width: 1180px; margin: 0 auto; height: var(--st-nav-h); border-radius: var(--radius-pill); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: 22px 10px; }
.st-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: 0.02em; text-decoration: none; color: var(--st-glass-ink); }
.st-brand .st-mark { width: 28px; height: 28px; }
.st-links { display: flex; gap: var(--st-s-6); }
.st-links a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--st-glass-ink); opacity: 0.82; }
.st-links a:hover { opacity: 1; }
.st-act { justify-self: end; display: flex; align-items: center; gap: var(--st-s-1); }
.st-signin { text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 14px; color: var(--st-glass-ink); }

/* the live indicator: one design everywhere */
.st-livedot { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-ink); text-shadow: none; vertical-align: middle; white-space: nowrap; }
.st-livedot i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--st-live); box-shadow: 0 0 0 2px rgba(43, 216, 137, 0.25), 0 0 12px rgba(43, 216, 137, 0.7); }
.st-livedot i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--st-live); opacity: 0; animation: st-livering 2s var(--ease-out-soft) infinite; }
@keyframes st-livering { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
.st-livedot.st-in-glass { color: var(--st-glass-ink); }
.st-livedot.st-in-glass i { box-shadow: 0 0 0 2px rgba(43, 216, 137, 0.2); }

/* live numbers on the sky */
.st-stats { margin-top: var(--st-s-8); display: grid; justify-items: center; gap: var(--st-s-5); text-align: center; }
/* Equal columns, so the divider and the LIVE above it sit on the same centre line. */
.st-stats-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--st-s-5) 0; width: min(100%, 860px); }
.st-stats-row:has(> .st-stat:only-child), .st-stats-row:has(> .st-stat:not([hidden]):only-of-type) { width: auto; }
.st-stat { display: grid; gap: var(--st-s-2); justify-items: center; padding-inline: clamp(24px, 4vw, 64px); min-width: 0; }
.st-stat + .st-stat { border-left: 1px solid rgba(255, 255, 255, calc(0.35 - 0.2 * var(--st-night))); }
.st-stat b { font-size: clamp(44px, 5.4vw, 72px); font-weight: 820; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-stat span { font-size: 16px; font-weight: 600; color: var(--st-ink-2); max-width: 22ch; line-height: 1.35; }

/* tiles */
.st-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--st-s-4); }
.st-tile { border-radius: var(--st-r-md); padding: var(--st-s-5); display: grid; gap: var(--st-s-3); align-content: start; }
.st-tile .st-ico { width: 26px; height: 26px; color: var(--sky); }
.st-tile h3 { margin: 0; font-size: 18px; font-weight: 780; letter-spacing: -0.01em; }
.st-tile p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--st-glass-sub); }

/* section heads */
.st-sec-head { display: grid; gap: var(--st-s-4); justify-items: center; text-align: center; }

/* footer */
.st-foot-wrap { position: relative; z-index: calc(var(--z-content) + 1); padding: 0 16px var(--st-s-9); }
.st-foot { max-width: 1180px; margin: 0 auto; border-radius: var(--st-r-lg); padding: var(--st-s-6); display: grid; grid-template-columns: auto 1fr; gap: var(--st-s-5) var(--st-s-7); align-items: start; }
.st-foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: flex-end; font-size: 14px; font-weight: 600; }
.st-foot-links a { text-decoration: none; opacity: 0.85; }
.st-foot-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--st-glass-sub); border-top: 1px solid var(--st-line); padding-top: var(--st-s-4); }
.st-langs { display: flex; gap: 14px; flex-wrap: wrap; }
.st-langs a { text-decoration: none; }

/* the trial nudge */
.st-nudge { position: fixed; right: 18px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: var(--z-overlay); width: min(360px, calc(100vw - 32px)); border-radius: 22px; padding: var(--st-s-4) var(--st-s-4) var(--st-s-4) var(--st-s-5); display: grid; grid-template-columns: auto 1fr auto; gap: var(--st-s-3); align-items: start; transform: translateY(calc(100% + 180px)); transition: transform var(--st-slow) var(--ease-out-soft); }
.st-nudge.show { transform: none; }
.st-nudge-mark { width: 30px; height: 30px; color: var(--st-glass-ink); }
.st-nudge-h { margin: 0 0 2px; font-size: 16px; font-weight: 800; }
.st-nudge-p { margin: 0 0 var(--st-s-3); font-size: 13px; line-height: 1.45; color: var(--st-glass-sub); }
.st-x { border: 0; background: transparent; color: var(--st-glass-sub); cursor: pointer; padding: 2px; border-radius: 8px; }

/* the film */
.st-film { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(3, 10, 20, 0.82); display: grid; place-items: center; padding: 16px; }
.st-film video { width: min(1200px, 100%); max-height: 85vh; border-radius: 18px; background: #000; }
.st-film-x { position: absolute; top: 18px; right: 18px; border: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; display: grid; place-items: center; }

@media (max-width: 900px) {
  .st-links, .st-signin { display: none; }
  .st-nav-in { grid-template-columns: 1fr auto; padding-inline: 16px 8px; }
  .st-tiles { grid-template-columns: minmax(0, 1fr); }
  .st-foot { grid-template-columns: minmax(0, 1fr); }
  .st-foot-links { justify-content: flex-start; }
  .st-stat + .st-stat { border-left: 0; }
  .st-stats-row { grid-auto-flow: row; }
  .st-glass { -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .st *, .st *::before, .st *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}