/*
 * Orbitus website. Colours are the app's tokens (apps/mobile/src/theme/tokens.ts):
 * the watercolour page gradient, the blue family split by job (fills vs. ink), and
 * hairline-bordered cards instead of shadows. Dark mode follows the system, as the
 * app does. Body text uses the system font (it carries the Chinese); Lora is only
 * the wordmark, as in the app.
 */

@font-face {
  font-family: 'Lora';
  src: url('/assets/Lora-SemiBold.be01a85962.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  --g1: #e7f1fc;
  --g2: #eef2f6;
  --g3: #f2f1ec;
  --bg: #f5f8fb;
  --surface: #ffffff;
  --glass: rgba(255, 255, 255, 0.72);
  --border: #e4eaf1;
  --ink: #1b2733;
  --ink-2: #5a6472;
  --muted: #8a97a6;
  --primary: #a4d8fd;
  --primary-strong: #8ec5fc;
  --on-primary: #123152;
  --primary-ink: #1a5a8f;
  --info-bg: #edf2f8;
  --success-bg: #e9f5ee;
  --success: #1f8a4c;
  --warn-bg: #fdf3e4;
  --warn: #9a5b00;
  --wash-1: rgba(104, 116, 194, 0.34);
  --wash-2: rgba(150, 136, 209, 0.3);
  --wash-3: rgba(164, 216, 253, 0.55);
  --wash-sun: rgba(255, 224, 75, 0.22);
  /* The hero title's second line and the Orbitus masthead: blue → periwinkle,
     flowing (see "motion"). */
  --flow-1: #1a5a8f;
  --flow-2: #6874c2;
  --flow-3: #3d74c4;
  --frame: #0c1424;
  --radius: 28px;
  --wrap: 1140px;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --g1: #0e1424;
    --g2: #121a2e;
    --g3: #151428;
    --bg: #121a2e;
    --surface: #18203a;
    --glass: rgba(18, 26, 46, 0.72);
    --border: rgba(255, 255, 255, 0.1);
    --ink: #eef2fb;
    --ink-2: #9aa8c6;
    --muted: #6f7c99;
    --primary: #5790df;
    --primary-strong: #3d74c4;
    --on-primary: #ffffff;
    --primary-ink: #7fb0f0;
    --info-bg: #1e2745;
    --success-bg: rgba(50, 215, 75, 0.18);
    --success: #32d74b;
    --warn-bg: rgba(255, 214, 10, 0.18);
    --warn: #ffd60a;
    --wash-1: rgba(87, 144, 223, 0.22);
    --wash-2: rgba(150, 136, 209, 0.18);
    --wash-3: rgba(61, 116, 196, 0.25);
    --wash-sun: rgba(255, 224, 75, 0.08);
    --flow-1: #8ec5fc;
    --flow-2: #a2aadf;
    --flow-3: #7fb0f0;
    --frame: #05080f;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: linear-gradient(180deg, var(--g1) 0, var(--g2) 900px, var(--g3) 100%) var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--primary-ink);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
:focus-visible {
  outline: 3px solid var(--primary-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
:lang(zh-Hans) :is(h1, h2, h3) {
  letter-spacing: 0;
}
p {
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 12px;
  z-index: 20;
  background: var(--surface);
  padding: 8px 14px;
  border-radius: 12px;
}

.ic {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* —— buttons —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--primary-strong);
  color: var(--on-primary);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn:hover {
  text-decoration: none;
  filter: brightness(0.96) saturate(1.1);
}
.btn:active {
  transform: scale(0.97);
}
.btn-large {
  min-height: 54px;
  padding: 0 30px;
  font-size: 17px;
}
.btn-small {
  min-height: 36px;
  padding: 0 16px;
  font-size: 14px;
}
/* The second beta button: same shape, outlined, so the pair reads as two choices of
   equal weight rather than a primary and a footnote. */
.btn-outline {
  background: transparent;
  color: var(--primary-ink);
  box-shadow: inset 0 0 0 1.5px var(--primary-strong);
}
.btn-outline:hover {
  filter: none;
  background: var(--glass);
}
/* The header's 「加入内测」 lands here, below the sticky header. */
#join {
  scroll-margin-top: 96px;
}

.store {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
}
.store small {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
}
.store.is-soon {
  color: var(--ink-2);
  cursor: default;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.cta-row.center {
  justify-content: center;
}

/* —— header —— */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid var(--border);
}
.top-in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.brand:hover {
  text-decoration: none;
}
.brand img {
  border-radius: 8px;
}
.wordmark {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0;
}
.top-nav {
  display: flex;
  gap: 24px;
  margin-left: 12px;
  font-size: 15px;
}
.top-nav a {
  color: var(--ink-2);
}
.top-nav a:hover {
  color: var(--ink);
  text-decoration: none;
}
.top-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
}
.lang {
  color: var(--ink-2);
}

/* —— hero —— */
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 24px;
}
.hero-wash {
  position: absolute;
  inset: -20% -10% 0;
  background:
    radial-gradient(38% 42% at 78% 30%, var(--wash-1), transparent 70%),
    radial-gradient(30% 36% at 62% 62%, var(--wash-2), transparent 70%),
    radial-gradient(40% 40% at 18% 18%, var(--wash-3), transparent 70%),
    radial-gradient(24% 26% at 92% 78%, var(--wash-sun), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
.hero-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-bg);
}
.hero h1 {
  margin: 24px 0 20px;
  font-size: clamp(44px, 6.4vw, 84px);
  font-weight: 700;
  line-height: 1.04;
}
.hero h1 span {
  display: block;
}
/* The gradient line is painted with its background, which only covers the 1.04 line
   box: descenders (g) and the bottoms of Chinese glyphs hang below it and were cut
   off. Pad the painted box and take the padding back out of the layout. */
.hero h1 span + span {
  padding: 0.1em 0 0.2em;
  margin: -0.1em 0 -0.2em;
}
.hero h1 span + span,
.masthead span {
  /* Twice the line's width and ending on the colour it starts with, so sliding it
     by its own width (the "flow" animation) loops without a seam. */
  background: linear-gradient(100deg, var(--flow-1), var(--flow-2) 33%, var(--flow-3) 67%, var(--flow-1)) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34em;
}
.hero .lead {
  margin-bottom: 32px;
}
.fine {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-2);
}
.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 560px;
}
.hero-back {
  position: absolute;
  top: 48px;
  left: 2%;
  width: 236px;
  transform: rotate(-8deg);
  opacity: 0.9;
}
.hero-front {
  position: relative;
  width: 280px;
  margin-left: 30%;
}
.hero-front .push {
  position: absolute;
  top: 28px;
  left: -66%;
}
.mock-note {
  position: relative;
  margin-top: 28px;
  font-size: 13px;
  color: var(--muted);
  text-align: right;
}

/* —— phone mockup —— */
.phone {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  padding: 1.8%;
  border-radius: 14.5% / 6.7%;
  background: var(--frame);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 40px 80px -30px rgba(18, 49, 82, 0.45),
    0 18px 36px -18px rgba(18, 49, 82, 0.35);
}
.phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 13.2% / 6.1%;
  background: linear-gradient(180deg, #e7f1fc, #eef2f6 55%, #f2f1ec);
  color: #1b2733;
  font-size: 4.4cqw;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
}
.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 12cqw;
  padding: 0 8cqw;
  font-size: 4.6cqw;
  font-weight: 600;
}
.phone-island {
  width: 30cqw;
  height: 8.6cqw;
  border-radius: 99px;
  background: #05080f;
}
.phone-batt {
  width: 7.5cqw;
  height: 3.6cqw;
  border-radius: 1cqw;
  border: 0.5cqw solid #1b2733;
  background: linear-gradient(90deg, #1b2733 70%, transparent 70%);
  background-clip: content-box;
  padding: 0.4cqw;
}
.phone-body {
  flex: 1;
  overflow: hidden;
  padding: 1cqw 5cqw 0;
}
.phone-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 2.4cqw 2cqw 6cqw;
  background: rgba(255, 255, 255, 0.7);
  border-top: 1px solid #e4eaf1;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.phone-tabs span {
  display: grid;
  justify-items: center;
  gap: 0.6cqw;
  color: #8a97a6;
}
.phone-tabs .ic {
  font-size: 7cqw;
}
.phone-tabs i {
  font-style: normal;
  font-size: 3cqw;
}
.phone-tabs .on {
  color: #1a5a8f;
}
.m-title {
  font-size: 8.4cqw;
  font-weight: 700;
  margin: 1cqw 0 3.5cqw;
}

/* Match deck: 0.64 aspect cards, the one behind smaller and lower (DECK_STEP_*);
   square photo, score pill, badges, name + age, fact rows; the LIKE stamp */
.m-deck {
  position: relative;
  width: 84cqw;
  margin: 0 auto;
  aspect-ratio: 0.64;
  max-height: 128cqw;
}
.m-card {
  position: absolute;
  inset: 0;
  border-radius: 10cqw;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4eaf1;
  box-shadow: 0 6cqw 12cqw -8cqw rgba(18, 49, 82, 0.35);
  display: flex;
  flex-direction: column;
}
.m-photo {
  position: relative;
  flex: none;
  aspect-ratio: 1;
}
.m-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m-score {
  position: absolute;
  left: 4cqw;
  bottom: 4cqw;
  padding: 1cqw 3cqw;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.88);
  color: #1a5a8f;
  font-weight: 700;
  font-size: 3.8cqw;
}
/* The still picture: one card in front, one behind, the rest out of sight. */
.m-front {
  z-index: 4;
}
.m-back {
  transform: translateY(5.4cqw) scale(0.95);
  z-index: 3;
}
.m-hide {
  transform: translateY(10.8cqw) scale(0.9);
  opacity: 0;
  z-index: 1;
}
.m-badges {
  position: absolute;
  right: 3.4cqw;
  bottom: 3.4cqw;
  display: flex;
  gap: 1cqw;
}
.m-badges img {
  width: 9cqw;
  height: 9cqw;
}
.m-stamp {
  position: absolute;
  top: 8cqw;
  left: 6cqw;
  padding: 1.4cqw 3.4cqw;
  border-radius: 3cqw;
  border: 0.65cqw solid #34c759;
  background: #e9f5ee;
  color: #34c759;
  font-size: 5.6cqw;
  font-weight: 600;
  letter-spacing: 0.5cqw;
  transform: rotate(-12deg);
  opacity: 0;
}
.m-info {
  padding: 3.6cqw 5cqw;
}
.m-name {
  font-size: 6.6cqw;
  font-weight: 700;
  margin-bottom: 1.4cqw;
}
.m-name span {
  font-weight: 400;
  margin-left: 2.4cqw;
}
.m-fact {
  display: flex;
  align-items: center;
  gap: 2cqw;
  margin-top: 1.2cqw;
  color: #5a6472;
  font-size: 3.9cqw;
}
.m-fact .ic {
  font-size: 4.4cqw;
  color: #8a97a6;
}
.m-actions {
  display: flex;
  justify-content: center;
  gap: 10cqw;
  margin-top: 6cqw;
}
.m-btn {
  display: grid;
  place-items: center;
  width: 15cqw;
  height: 15cqw;
  border-radius: 50%;
  font-size: 6.6cqw;
}
.m-pass {
  background: #fff;
  border: 1px solid #e4eaf1;
  color: #5a6472;
}
.m-like {
  background: #8ec5fc;
  color: #123152;
}
.m-like .ic {
  fill: currentColor;
}

/* Opportunity cards: 28-radius feed cards with a hairline */
.m-opp {
  background: #fff;
  border: 1px solid #e4eaf1;
  border-radius: 7cqw;
  padding: 4.4cqw;
  margin-bottom: 3cqw;
}
.m-post-title {
  margin: 2.4cqw 0 1.2cqw;
  font-size: 4.6cqw;
  font-weight: 600;
  line-height: 1.3;
}
.m-foot {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  margin-top: 2.4cqw;
  padding-top: 2.4cqw;
  border-top: 1px solid #e4eaf1;
  font-size: 3.4cqw;
  color: #8a97a6;
}
.m-search {
  display: flex;
  align-items: center;
  gap: 2cqw;
  height: 9.5cqw;
  padding: 0 3.4cqw;
  border-radius: 99px;
  background: #fff;
  border: 1px solid #e4eaf1;
  color: #8a97a6;
  font-size: 3.8cqw;
}
.m-chips {
  display: flex;
  gap: 1.8cqw;
  margin: 3cqw 0;
  white-space: nowrap;
}
.m-chips span {
  padding: 1.2cqw 3.2cqw;
  border-radius: 99px;
  border: 1px solid #e4eaf1;
  background: #fff;
  font-size: 3.5cqw;
  color: #5a6472;
}
.m-chips .on {
  background: #8ec5fc;
  border-color: #8ec5fc;
  color: #123152;
  font-weight: 600;
}
.m-opp-head {
  display: flex;
  justify-content: space-between;
  gap: 2cqw;
  font-size: 3.4cqw;
  color: #8a97a6;
}
.m-opp-head .ic {
  font-size: 4.8cqw;
  color: #1a5a8f;
}
.m-pill {
  padding: 0.6cqw 2.2cqw;
  border-radius: 99px;
  background: #edf2f8;
  color: #002f6c;
  font-weight: 600;
}
.m-pill.warn {
  background: #fdf3e4;
  color: #9a5b00;
}
.m-count {
  margin-left: auto;
  color: #1a5a8f;
  font-weight: 600;
}

/* Group chat: header with the member count, the pinned 群 DDL card, bubbles (the
   sender's 分工 tag and chat badge), a poll, the composer instead of the tab bar */
.phone-group .phone-body {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.g-head {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 1cqw 4.5cqw 3cqw;
  border-bottom: 1px solid #e4eaf1;
}
.g-head > .ic {
  font-size: 6.4cqw;
  color: #1a5a8f;
}
.g-head img {
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
}
.g-head div {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
.g-head b {
  font-size: 4.1cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-head span {
  font-size: 3.2cqw;
  color: #8a97a6;
}
.g-ddl {
  margin: 3cqw 4.5cqw 0;
  padding: 2.8cqw 3.6cqw;
  border-radius: 5cqw;
  background: #fff;
  border: 1px solid #e4eaf1;
}
.g-ddl-head {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  font-size: 3.5cqw;
}
.g-ddl-head .ic {
  font-size: 4.2cqw;
  color: #1a5a8f;
}
.g-ddl-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2cqw;
  margin-top: 1.4cqw;
  font-size: 3.6cqw;
}
.g-ddl-row .m-pill {
  flex: none;
  font-size: 3.2cqw;
}
.g-thread {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
  padding: 3.6cqw 4.5cqw;
}
.g-system {
  align-self: center;
  max-width: 92%;
  padding: 1cqw 3cqw;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 3.1cqw;
  color: #5a6472;
  text-align: center;
}
.g-row {
  display: flex;
  align-items: flex-start;
  gap: 2cqw;
  max-width: 86%;
  transform-origin: left bottom;
}
.g-avatar {
  position: relative;
  flex: none;
  width: 8.6cqw;
  height: 8.6cqw;
}
.g-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
/* BadgeAvatar: ~46% of the avatar, overhanging the rim a little */
.g-avatar .g-badge {
  position: absolute;
  right: -0.8cqw;
  bottom: -0.8cqw;
  width: 4cqw;
  height: 4cqw;
  border-radius: 0;
}
.g-sender {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  margin: 0 1.4cqw 0.8cqw;
  font-size: 3cqw;
  color: #8a97a6;
}
.g-sender i {
  font-style: normal;
  font-weight: 500;
  padding: 0.2cqw 1.4cqw;
  border-radius: 1.2cqw;
  background: #edf2f8;
  color: #1a5a8f;
}
.g-bubble {
  padding: 2.2cqw 3.4cqw;
  border-radius: 4.6cqw 4.6cqw 4.6cqw 1.2cqw;
  background: #fff;
  border: 1px solid #e4eaf1;
  font-size: 3.8cqw;
  line-height: 1.45;
}
.g-bubble.g-mine {
  align-self: flex-end;
  max-width: 78%;
  border-radius: 4.6cqw 4.6cqw 1.2cqw 4.6cqw;
  background: #8ec5fc;
  border-color: #8ec5fc;
  color: #123152;
  transform-origin: right bottom;
}
.g-poll {
  display: grid;
  gap: 1.6cqw;
  width: 86%;
  margin-left: 10.6cqw;
  padding: 3cqw 3.6cqw;
  border-radius: 5cqw;
  background: #fff;
  border: 1px solid #e4eaf1;
  transform-origin: left bottom;
}
.g-poll-kind {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  font-size: 3cqw;
  font-weight: 600;
  color: #1a5a8f;
}
.g-poll b {
  font-size: 3.9cqw;
  line-height: 1.3;
}
.g-option {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 1.5cqw 2.6cqw;
  border-radius: 2.6cqw;
  overflow: hidden;
  background: #edf2f8;
  font-size: 3.4cqw;
}
.g-option span {
  position: relative;
}
.g-share {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.g-share rect {
  fill: #a4d8fd;
  transform-box: fill-box;
  transform-origin: left center;
}
.g-poll small {
  font-size: 3cqw;
  color: #8a97a6;
}
.g-compose {
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  padding: 2.4cqw 4.5cqw 6cqw;
  background: rgba(255, 255, 255, 0.7);
  border-top: 1px solid #e4eaf1;
}
.g-plus,
.g-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 8.4cqw;
  height: 8.4cqw;
  border-radius: 50%;
  font-size: 5cqw;
}
.g-plus {
  background: #fff;
  border: 1px solid #e4eaf1;
  color: #1a5a8f;
}
.g-send {
  background: #8ec5fc;
  color: #123152;
}
.g-input {
  flex: 1;
  height: 8.4cqw;
  border-radius: 99px;
  background: #fff;
  border: 1px solid #e4eaf1;
}

/* lock-screen notification */
.push {
  display: flex;
  gap: 12px;
  width: 300px;
  max-width: 82vw;
  padding: 12px 14px;
  border-radius: 22px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
  border: 1px solid var(--border);
  box-shadow: 0 24px 50px -24px rgba(18, 49, 82, 0.45);
  font-size: 14px;
  line-height: 1.35;
  z-index: 2;
}
.push img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
}
.push-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.push p {
  color: var(--ink-2);
}

/* —— features —— */
.anchor {
  position: relative;
  top: -40px;
}
/* The brand wordmark set as a magazine masthead above the three features: the
   Lora face in capitals at display size with open tracking, one line across the
   column. (Not stretched: scaling the glyphs blurs them.) At the 188px cap,
   ORBITUS (4.45em) plus 7 × 0.14em tracking is about 1020px, inside the 1092px
   column. Below that the size is 14vw (the word takes ~76% of the width), down to a
   44px floor that still fits a 320px phone; a higher floor (it was 72px) would push
   the capitals off a 375px screen. */
.masthead {
  --track: 0.14em;
  max-width: var(--wrap);
  margin: 104px auto 0;
  padding: 0 24px;
  text-align: center;
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-synthesis: none;
  font-size: clamp(44px, 14vw, 188px);
  line-height: 0.9;
  letter-spacing: var(--track);
  text-transform: uppercase;
}
.masthead span {
  display: inline-block;
  /* The text is painted with the background, so the box must cover the whole
     glyphs: the 0.9 line height would cut off the tops of the capitals. The left
     padding matches the letter spacing that trails the last letter, so the word
     stays centred; the margins take all of it back out of the layout. */
  padding: 0.12em 0 0.12em var(--track);
  margin: -0.12em calc(-1 * var(--track));
}
.feature {
  padding: 72px 0;
}
.feature-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.feature.flip .feature-text {
  order: 2;
}
.kicker {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-ink);
  margin-bottom: 14px;
}
.feature h2,
.safety h2,
.extras h2,
.steps h2,
.closing h2 {
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 700;
  margin-bottom: 20px;
}
.ticks {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 10px;
}
.ticks li {
  position: relative;
  padding-left: 30px;
  color: var(--ink);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.38em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='%23123152' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}
.feature-art {
  position: relative;
  display: flex;
  justify-content: center;
}
.feature-art .phone {
  width: 290px;
}
.feature-art .push {
  position: absolute;
  bottom: 18%;
  right: max(0px, calc(50% - 300px));
}

/* —— tiles —— */
.extras,
.safety,
.steps {
  padding: 96px 0;
}
.extras h2,
.steps h2 {
  text-align: center;
}
.extras-grid,
.safety-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.tile {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
/* A tile that is only a title (the safety list). */
.tile.tile-title {
  padding: 22px 28px;
}
.tile.tile-title h3 {
  margin: 0;
}
.tile h3 {
  font-size: 19px;
  margin-bottom: 8px;
}
.tile p {
  color: var(--ink-2);
  font-size: 16px;
}

/* —— story (film) —— */
.story {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0c1424;
  color: #fff;
}
.story-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.story-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 20, 36, 0.05) 30%, rgba(12, 20, 36, 0.78));
}
.story-in {
  position: relative;
  padding-bottom: 72px;
}
.story h2 {
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 700;
  max-width: 14em;
  margin-bottom: 16px;
}
.story p {
  font-size: clamp(17px, 1.6vw, 21px);
  max-width: 32em;
  color: rgba(255, 255, 255, 0.86);
}

/* —— safety —— */
.safety .lead {
  margin-bottom: 8px;
}
.more {
  display: inline-block;
  margin-top: 28px;
  font-weight: 600;
}
.more-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 28px;
}

/* —— steps —— */
.steps-list {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: none;
}
.num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  margin-bottom: 18px;
}
.steps-list h3 {
  font-size: 21px;
  margin-bottom: 8px;
}
.steps-list p {
  color: var(--ink-2);
}

/* —— closing —— */
.closing {
  padding: 40px 0 120px;
}
.closing-in {
  text-align: center;
  padding: 64px 24px;
  border-radius: 40px;
  background:
    radial-gradient(60% 80% at 20% 0%, var(--wash-3), transparent 70%),
    radial-gradient(50% 70% at 90% 100%, var(--wash-1), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
}
.closing-in img {
  margin: 0 auto 24px;
  border-radius: 20px;
}
.closing .lead {
  margin: 0 auto 32px;
}

/* —— footer —— */
.foot {
  border-top: 1px solid var(--border);
  background: var(--glass);
  padding: 48px 0 40px;
  font-size: 14px;
  color: var(--ink-2);
}
.foot-top {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.foot-brand p {
  margin-top: 10px;
}
.foot-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.foot-links a {
  color: var(--ink);
}
.foot-fine {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 6px;
  font-size: 13px;
}

/* —— text pages —— */
.doc {
  padding: 64px 0 96px;
}
.doc-head {
  max-width: 760px;
  margin-bottom: 48px;
}
.doc-head h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  margin-bottom: 14px;
}
.doc-meta {
  color: var(--ink-2);
  font-size: 15px;
  margin-bottom: 10px;
}
.lang-inline {
  font-size: 15px;
  font-weight: 600;
}
.doc-grid {
  display: grid;
  grid-template-columns: 230px minmax(0, 760px);
  gap: 56px;
  align-items: start;
}
.toc {
  position: sticky;
  top: 88px;
  font-size: 14px;
  max-height: calc(100vh - 110px);
  overflow: auto;
}
.toc p {
  font-weight: 700;
  margin-bottom: 10px;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  border-left: 1px solid var(--border);
}
.toc a {
  display: block;
  padding-left: 14px;
  color: var(--ink-2);
  line-height: 1.4;
}
.toc a:hover {
  color: var(--ink);
  text-decoration: none;
}
.prose {
  min-width: 0;
}
.prose h2 {
  font-size: 26px;
  margin: 56px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.prose h3 {
  font-size: 19px;
  margin: 32px 0 10px;
}
.prose p,
.prose ul,
.prose ol {
  margin: 0 0 16px;
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose li {
  margin-bottom: 8px;
}
.prose li::marker {
  color: var(--muted);
}
.prose strong {
  font-weight: 650;
}
.prose code {
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--info-bg);
}
.note {
  margin: 0 0 8px;
  padding: 22px 26px;
  border-radius: 22px;
  background:
    radial-gradient(80% 120% at 0% 0%, var(--wash-3), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
  font-size: 18px;
}
.note p:last-child {
  margin-bottom: 0;
}
.table {
  overflow-x: auto;
  margin: 8px 0 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
}
.table th,
.table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.table th {
  background: var(--info-bg);
  font-weight: 650;
}
.table tr:last-child td {
  border-bottom: 0;
}
.table td:first-child {
  font-weight: 600;
  min-width: 8em;
}
.to-top {
  margin-top: 48px;
  font-size: 14px;
}
.missing {
  padding: 96px 24px;
  display: grid;
  gap: 36px;
  justify-items: center;
  text-align: center;
}
.missing .big {
  font-size: 64px;
  color: var(--primary-ink);
}
.missing h1 {
  font-size: 32px;
  margin-bottom: 8px;
}
.missing p {
  color: var(--ink-2);
  margin-bottom: 14px;
}

/* —— scroll reveal (CSS only; content is never hidden where unsupported) —— */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* —— screen motion ——
   The hero title's second line and the Orbitus masthead flow on their own (6 s a
   round). The illustrative screens move only while `site.js` marks them `is-live`
   (on screen, motion allowed); without the script nothing here applies and each
   screen is a still picture.

   Match deck: five cards, 3.2 s each, 16 s round. Every card runs the same `deck`
   loop, started a slot apart (`m-c0`…`m-c4`), so they take turns: at rest in front
   → dragged to the decision line (LIKE stamp on) → thrown out, while the card behind
   grows into the front and the next one rises from out of sight to behind it (as
   `swipe-card.tsx` does with depth 0/1/2) → invisible until its turn comes round.
   The keyframes are in fifths: change the number of cards and they must change too.
   The hero's "New match" notice shows after the last swipe and into the next round,
   so the still picture and the loop's first frame are the same.

   Group chat, once each time it comes on screen: the "request approved" notice, then
   the thread one item at a time, then the poll's bars fill. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span + span,
  .masthead span {
    animation: flow 6s linear infinite;
  }
  .is-live .m-card {
    animation: deck 16s ease-in-out infinite;
  }
  .is-live .m-stamp {
    animation: deck-stamp 16s ease-out infinite;
  }
  .is-live :is(.m-c1, .m-c1 .m-stamp) {
    animation-delay: -12.8s;
  }
  .is-live :is(.m-c2, .m-c2 .m-stamp) {
    animation-delay: -9.6s;
  }
  .is-live :is(.m-c3, .m-c3 .m-stamp) {
    animation-delay: -6.4s;
  }
  .is-live :is(.m-c4, .m-c4 .m-stamp) {
    animation-delay: -3.2s;
  }
  .is-live .push-match {
    animation: push-match 16s ease-in-out infinite;
  }
  .motion [data-live]:not(.is-live) :is(.c-in, .push-approved) {
    opacity: 0;
  }
  .is-live .push-approved {
    animation: push-in 0.5s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .is-live .c-in {
    animation: chat-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .is-live .c-1 {
    animation-delay: 1.1s;
  }
  .is-live .c-2 {
    animation-delay: 1.9s;
  }
  .is-live .c-3 {
    animation-delay: 2.8s;
  }
  .is-live .c-4 {
    animation-delay: 3.7s;
  }
  .is-live .g-share rect {
    animation: share-grow 0.8s 4.2s ease-out both;
  }
}
@keyframes flow {
  to {
    background-position: -200% 0;
  }
}
/* One card's round, in fifths: 0–20% its turn in front; hidden; 72–80% rises from
   out of sight to behind the front card; 92–100% grows into the front. */
@keyframes deck {
  0%,
  12% {
    transform: none;
    opacity: 1;
    z-index: 4;
  }
  16% {
    transform: translateX(16cqw) rotate(4deg);
    opacity: 1;
    z-index: 4;
  }
  20% {
    transform: translateX(125cqw) rotate(10deg);
    opacity: 1;
    z-index: 4;
  }
  /* Invisible before it moves back: travelling back while still fading out shows
     as a flash across the screen. */
  20.2% {
    transform: translateX(125cqw) rotate(10deg);
    opacity: 0;
    z-index: 1;
  }
  20.4%,
  72% {
    transform: translateY(10.8cqw) scale(0.9);
    opacity: 0;
    z-index: 1;
  }
  72.1% {
    transform: translateY(10.8cqw) scale(0.9);
    opacity: 0;
    z-index: 2;
  }
  80% {
    transform: translateY(5.4cqw) scale(0.95);
    opacity: 1;
    z-index: 2;
  }
  80.1%,
  92% {
    transform: translateY(5.4cqw) scale(0.95);
    opacity: 1;
    z-index: 3;
  }
  96% {
    transform: translateY(2.7cqw) scale(0.975);
    opacity: 1;
    z-index: 3;
  }
  99.9% {
    transform: none;
    opacity: 1;
    z-index: 3;
  }
  100% {
    transform: none;
    opacity: 1;
    z-index: 4;
  }
}
@keyframes deck-stamp {
  0%,
  12.4% {
    opacity: 0;
    transform: rotate(-12deg);
  }
  14.4% {
    opacity: 0.55;
    transform: rotate(-12deg);
  }
  16%,
  20% {
    opacity: 1;
    transform: rotate(-12deg) scale(1.08);
  }
  20.2%,
  100% {
    opacity: 0;
    transform: rotate(-12deg);
  }
}
@keyframes push-match {
  0%,
  10% {
    opacity: 1;
    transform: none;
  }
  13%,
  97% {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes push-in {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
}
@keyframes chat-in {
  from {
    opacity: 0;
    transform: translateY(3cqw) scale(0.96);
  }
}
@keyframes share-grow {
  from {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn {
    transition: none;
  }
}

/* —— responsive —— */
@media (max-width: 960px) {
  .hero {
    padding-top: 48px;
  }
  .hero-in,
  .feature-in {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .feature.flip .feature-text {
    order: 0;
  }
  .hero-art {
    min-height: 0;
  }
  .hero-front {
    margin-left: 34%;
  }
  .doc-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .toc {
    position: static;
    max-height: none;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
  }
  .toc ol {
    border-left: 0;
  }
  .toc a {
    padding-left: 0;
  }
  .safety-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }
  .masthead {
    margin-top: 72px;
    padding: 0 16px;
  }
  .wrap {
    padding: 0 16px;
  }
  .top-nav {
    display: none;
  }
  .top-in {
    gap: 12px;
  }
  .hero-back {
    width: 190px;
    left: -4%;
    top: 36px;
  }
  .hero-front {
    width: 236px;
    margin-left: 28%;
  }
  .hero-front .push {
    left: -44%;
    top: 20px;
    width: 250px;
  }
  .feature {
    padding: 48px 0;
  }
  .feature-art .phone {
    width: 250px;
  }
  .feature-art .push {
    right: 0;
    width: 250px;
  }
  .extras-grid,
  .safety-grid,
  .steps-list {
    grid-template-columns: 1fr;
  }
  .extras,
  .safety,
  .steps {
    padding: 64px 0;
  }
  .story {
    min-height: 70vh;
  }
  .mock-note {
    text-align: left;
  }
  .note {
    padding: 18px 20px;
    font-size: 17px;
  }
  .table table {
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .top-end .btn {
    display: none;
  }
  .hero-front .push {
    display: none;
  }
}