/* App pages (strider/evermore/bookmarkd.transcendence.network) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.feature .inner { max-width: 1080px; margin: 0 auto; padding: 80px 24px 88px; }
.feature .inner.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.feature .logo { height: 56px; }
.feature .logo .word { font-size: 40px; }
.feature .logo-bookmarkd img { height: 38px; }

.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.launch { font-size: 14px; color: rgba(255, 255, 255, 0.75); }

.feature h1 { margin: 20px 0 0; max-width: 16ch; font-weight: 500; font-size: clamp(34px, 5.5vw, 56px); line-height: 1.05; letter-spacing: -0.02em; }
/* Two-column pages have a narrower text column, so the headline steps down a size. */
.feature .inner.split h1 { max-width: 20ch; font-size: clamp(34px, 4.4vw, 48px); }
.feature .lead { margin: 16px 0 0; font-size: clamp(16px, 2.2vw, 20px); color: rgba(255, 255, 255, 0.85); }
.feature .blurb { margin: 24px 0 0; max-width: 36em; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.85); }

/* ---------- waitlist ---------- */
.waitlist { display: flex; flex-wrap: wrap; gap: 10px; max-width: 460px; margin-top: 32px; }
.waitlist input {
  flex: 1 1 220px; min-width: 0; padding: 14px 16px; border: 0; border-radius: 10px;
  font: inherit; font-size: 16px; color: var(--black); background: var(--white);
}
.waitlist input::placeholder { color: #6B6A66; }
.waitlist button {
  flex: 0 0 auto; padding: 14px 20px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 500; color: var(--white); background: var(--black);
}
.waitlist button:disabled { opacity: 0.6; cursor: default; }
.waitlist input:focus-visible, .waitlist button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.status { min-height: 20px; margin: 12px 0 0; font-size: 14px; }
.status.ok { color: var(--white); font-weight: 500; }
.status.error { color: #FFD2C9; }
.fine { margin: 4px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.65); }
.fine a { color: inherit; text-decoration: underline; }
.fine a:hover { color: var(--white); }

/* ---------- screenshots + perks ---------- */
.visual { width: 100%; max-width: 480px; justify-self: end; margin-right: -24px; }
.visual .screens { display: block; width: 100%; height: auto; }
.perks { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.perk { border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill-strider { background: #FFD84D; color: #123D33; }
.pill-evermore { background: #2E2645; color: var(--white); }

/* evermore: three phones, the centre one in front */
.phones { position: relative; width: 100%; aspect-ratio: 960 / 880; }
.phone {
  position: absolute; width: 35%; padding: 6px; border-radius: 28px; background: var(--black);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.phone img, .phone .ph { display: block; width: 100%; aspect-ratio: 9 / 19.5; border-radius: 24px; object-fit: cover; }
.phone .ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: #7B6CA6; color: #DCD5EE; font-size: 13px; line-height: 1.4;
}
.phone-center { z-index: 2; left: 50%; top: 4%; width: 41%; transform: translateX(-50%); }
.phone-left { left: 6%; top: 13%; transform: rotate(-8deg); }
.phone-right { right: 6%; top: 13%; transform: rotate(8deg); }

/* ---------- legal pages ---------- */
.doc-page { max-width: 760px; margin: 0 auto; padding: 32px 24px 24px; }
.back { display: inline-block; margin-top: 48px; font-size: 14px; color: var(--muted); }
.back:hover { color: var(--white); }
/* Coloured "Back to …" band at the top of an app's legal pages; the colour comes from the page's .feature rule. */
.doc-band { background: var(--strider); }
.doc-band-inner { max-width: 760px; margin: 0 auto; padding: 16px 24px; font-size: 14px; }
.doc-band a { color: rgba(255, 255, 255, 0.85); }
.doc-band a:hover { color: var(--white); }
.doc { margin-top: 8px; }
.doc h1 { margin: 0; font-weight: 500; font-size: clamp(30px, 5vw, 40px); letter-spacing: -0.02em; }
.doc .updated { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.doc h2 { margin: 40px 0 0; font-weight: 500; font-size: 20px; }
.doc p, .doc li { font-size: 16px; line-height: 1.7; color: #CFCFCF; }
.doc .intro { margin-top: 24px; }
.doc a, .doc-links a { color: var(--white); text-decoration: underline; }
.doc-links { margin: 48px 0 0; font-size: 14px; color: var(--muted); }

.below { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

@media (max-width: 860px) {
  .feature .inner.split { grid-template-columns: 1fr; gap: 40px; }
  .visual { max-width: 380px; justify-self: center; margin-right: 0; }
}
@media (max-width: 640px) {
  .feature .inner { padding: 56px 16px 64px; }
  .below { padding: 0 16px; }
  .doc-page { padding: 24px 16px 16px; }
  .doc-band-inner { padding: 14px 16px; }
}

/* Perks stay on one row on wide screens, even if slightly wider than the screenshots above. */
@media (min-width: 861px) {
  .perks { flex-wrap: nowrap; width: max-content; position: relative; left: 50%; transform: translateX(-50%); }
}