/*
 * The Gamerfy landing (gamerfy.gg), on the "Roxo Twitch" design system —
 * the same tokens and the same Manrope the app draws with
 * (client/src/renderer/src/styles/tokens.css). Dark only: a brand decision.
 *
 * The page has one memorable element — the strip "A partida vira perfil",
 * three pieces of the app's own UI (a match row, a VOD with its instant, a
 * clip card) rebuilt in HTML at the app's sizes — and one moment of motion:
 * the highlight toast that lands on the hero window once, on load.
 * Everything else is quiet: a left rail, one measure, Manrope at 800 for the
 * headlines and 400/500 for the rest.
 *
 * The invite page (/invite) and the policy page (/policy) share this sheet;
 * their rules are at the end. The fonts are local — see site/build-fonts.mjs.
 */

/* Manrope, copied out of node_modules by site/build-fonts.mjs. The two ranges
   come straight from @fontsource-variable itself; without them the browser
   would download both files for any text at all. */
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* The brand kit's palette (docs/mediakit, "Cores", v1.1): Preto Gamerfy,
     Grafite, Off-white, Cinza névoa, Roxo Gamerfy with Roxo profundo for
     hover and Roxo claro for purple text. The steps in between, the red of
     "AO VIVO" and the green of "online" are the app's own tokens. */
  --bg-0: #0E0E10;
  --bg-1: #18181B;
  --bg-2: #1F1F23;
  --bg-3: #26262C;
  --line: #2A2A30;
  --line-2: #3A3A44;
  --fg-0: #EFEFF1;
  --fg-1: #ADADB8;
  --fg-2: #7A7A85;
  --signal: #9147FF;
  --signal-hover: #772CE8;
  --signal-text: #BF94FF;
  --signal-soft: rgba(145, 71, 255, .16);
  --signal-ink: #FFFFFF;
  --live: #EB0400;
  --ok: #00F593;
  --warning: #FFB31A;
  --overlay: rgba(0, 0, 0, .6);
  --overlay-strong: rgba(0, 0, 0, .75);
  --sans: "Manrope Variable", "Manrope", "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* The left rail every block starts from, and the one measure. */
  --rail: max(24px, calc((100vw - 1180px) / 2));
  --measure: 1180px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

svg { display: block; }
img { max-width: 100%; height: auto; }

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip {
  position: absolute;
  top: -100px;
  left: var(--rail);
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 12px; z-index: 10; }

/* ---------- header ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px var(--rail);
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--fg-0);
  text-decoration: none;
}
/* The kit's horizontal signature, at its own ratio. The protective area is
   drawn into the file (24 of 652 units on each side), so at 148 px the mark
   itself is 137 — over the kit's 120 px minimum. */
.brand img { display: block; width: 148px; height: auto; }

.topbar__nav { display: flex; align-items: center; gap: 28px; }
.topbar__nav a,
.topbar__link {
  color: var(--fg-1);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.topbar__nav a:hover,
.topbar__link:hover { color: var(--fg-0); border-bottom-color: var(--signal); }

.topbar__cta {
  padding: 8px 16px !important;
  border-radius: 6px;
  border-bottom: 0 !important;
  background: var(--signal);
  color: var(--signal-ink) !important;
}
.topbar__cta:hover { background: var(--signal-hover); }

/* ---------- shared: section heads ---------- */

h1, h2, h3 { margin: 0; color: var(--fg-0); text-wrap: balance; }

.section__head {
  padding: 0 var(--rail);
  max-width: calc(var(--measure) + 2 * var(--rail));
}
.section__head h2,
.clan__text h2,
.closing h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.section__head p,
.section__lead {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-1);
  text-wrap: pretty;
}

/* ---------- hero ---------- */

.hero {
  padding: 40px var(--rail) 0;
  max-width: calc(var(--measure) + 2 * var(--rail));
}

.hero__text { max-width: 640px; }

.hero__title {
  font-size: clamp(42px, 6vw, 76px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;
}

.hero__lead {
  margin: 22px 0 36px;
  max-width: 34em;
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-1);
  text-wrap: pretty;
}

/* ---------- download buttons ---------- */

.downloads { display: flex; flex-wrap: wrap; gap: 12px; }

.dl {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 212px;
  padding: 12px 20px 12px 16px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg-1);
  color: var(--fg-0);
  text-decoration: none;
}
.dl:hover { background: var(--bg-2); border-color: var(--fg-2); }

.dl--mine {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}
.dl--mine:hover { background: var(--signal-hover); border-color: var(--signal-hover); }

.dl__label { display: flex; flex-direction: column; }
.dl__os { font-size: 15px; font-weight: 700; line-height: 20px; }
.dl__meta { font-size: 12.5px; font-weight: 500; line-height: 16px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.dl--mine .dl__meta { color: var(--signal-ink); opacity: .85; }

/* The alternative to the store button: a line, not a button — it is the
   second choice and has to look like the second choice. */
.dl__alt {
  margin: 16px 0 0;
  max-width: 52ch;
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.6;
}
.dl__alt a { color: var(--fg-1); }
.dl__alt a:hover { color: var(--fg-0); }

/* ---------- the app window ---------- */

.window {
  position: relative;
  margin: 56px 0 0;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-1);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(145, 71, 255, .08),
    0 -1px 80px rgba(145, 71, 255, .12);
}
.window img { display: block; width: 100%; }

/* The toast is the app's own notification card, landing where the app puts
   it — under the bell, at the right. Drawn at the window's scale. */
.toast {
  position: absolute;
  top: 8.2%;
  right: 3.2%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 27%;
  min-width: 300px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg-2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  color: var(--fg-1);
  font-size: 13px;
  line-height: 18px;
}
.toast__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--signal-soft);
  color: var(--signal-text);
}
.toast__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.toast__text b { color: var(--fg-0); font-weight: 700; }
.toast__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast__action {
  flex: none;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  .toast {
    opacity: 0;
    transform: translateY(-14px);
    animation: toast-land 520ms cubic-bezier(.2, .8, .2, 1) 1400ms forwards;
  }
  @keyframes toast-land {
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- the strip: a partida vira perfil ---------- */

.pipeline { padding: 144px 0 0; }

.steps {
  list-style: none;
  margin: 48px 0 0;
  padding: 0 var(--rail);
  max-width: calc(var(--measure) + 2 * var(--rail));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  counter-reset: step;
}

.step { position: relative; counter-increment: step; }
.step::before {
  content: counter(step);
  display: block;
  margin-bottom: 14px;
  color: var(--signal-text);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-top: 20px; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; }
.step p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--fg-1); text-wrap: pretty; }

/* Each piece of UI sits on the app's ground, at the app's sizes. */
.step__ui {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 196px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-0);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
}

/* The app's match row (profile.css `.match-row`). */
.match-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--bg-1);
  font-size: 13px;
  line-height: 18px;
  color: var(--fg-1);
}
.match-row.is-muted { opacity: .55; }
.match-row__result {
  flex: none;
  width: 56px;
  font-weight: 800;
  color: var(--fg-1);
}
.match-row__result.is-win { color: var(--ok); }
.match-row__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.match-row__text b { color: var(--fg-0); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-row__when { flex: none; color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* A VOD on the Twitch, with the instant marked. */
.vod { display: flex; flex-direction: column; gap: 10px; }
.vod__screen {
  position: relative;
  height: 84px;
  border-radius: 6px;
  background:
    radial-gradient(120% 90% at 20% 110%, rgba(145, 71, 255, .35), transparent 60%),
    linear-gradient(160deg, #26262C, #121214 70%);
  overflow: hidden;
}
.live {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--live);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  letter-spacing: .02em;
}
.vod__channel {
  position: absolute;
  right: 8px;
  bottom: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--overlay-strong);
  color: var(--fg-0);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
}
.vod__bar {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-3);
  margin: 8px 0 16px;
}
.vod__progress { position: absolute; inset: 0 38% 0 0; border-radius: 2px; background: var(--fg-2); }
.vod__marker {
  position: absolute;
  top: -5px;
  left: 62%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-soft);
}
.vod__flag {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 6px;
  border-radius: 4px;
  background: var(--signal);
  color: var(--signal-ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vod__line { display: flex; flex-direction: column; font-size: 13px; line-height: 18px; color: var(--fg-2); }
.vod__line span:first-child { color: var(--fg-0); font-weight: 700; }

/* The app's clip card (profile.css `.clip`). */
.clip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}
.clip__thumb {
  position: relative;
  display: block;
  height: 100px;
  border-radius: 6px;
  background:
    radial-gradient(70% 120% at 80% 0%, rgba(145, 71, 255, .45), transparent 60%),
    radial-gradient(60% 80% at 10% 100%, rgba(0, 245, 147, .12), transparent 60%),
    linear-gradient(170deg, #1F1F23, #0E0E10);
}
.clip__game,
.clip__at {
  position: absolute;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: var(--fg-0);
}
.clip__game { top: 6px; left: 6px; background: var(--overlay); }
.clip__at { right: 6px; bottom: 6px; background: var(--overlay-strong); font-variant-numeric: tabular-nums; }
.clip__title { color: var(--fg-0); font-size: 13px; font-weight: 800; line-height: 18px; }
.clip__sub { color: var(--fg-2); font-size: 12px; line-height: 16px; }

/* ---------- o clã ---------- */

.clan {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
  padding: 144px var(--rail) 0;
  max-width: calc(var(--measure) + 2 * var(--rail));
}

.facts {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.facts li { display: flex; gap: 16px; font-size: 15.5px; line-height: 1.55; color: var(--fg-1); }
.facts li > span:last-child { display: block; }
.facts b { display: block; color: var(--fg-0); font-weight: 700; margin-bottom: 2px; }
.facts__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--signal-text);
}

/* ---------- framed screenshots ---------- */

.frame {
  margin: 0;
  min-width: 0;
}
.frame img {
  display: block;
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.frame figcaption {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 52ch;
}

.frame--wide {
  margin: 48px var(--rail) 0;
  max-width: var(--measure);
}

/* ---------- o perfil ---------- */

.profile { padding: 144px 0 0; }

.profile__facts {
  list-style: none;
  margin: 40px 0 0;
  padding: 0 var(--rail);
  max-width: calc(var(--measure) + 2 * var(--rail));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.profile__facts li { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--fg-1); }
.profile__facts b { color: var(--fg-0); font-weight: 700; font-size: 16px; }

/* ---------- o que vem ---------- */

.roadmap { padding: 144px 0 0; }

.roadmap__list {
  margin: 40px var(--rail) 0;
  max-width: var(--measure);
  border-top: 1px solid var(--line);
}
.roadmap__row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.roadmap__state {
  align-self: start;
  justify-self: start;
  padding: 0 10px;
  border-radius: 14px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 24px;
  white-space: nowrap;
}
.roadmap__state.is-now { background: var(--signal-soft); color: var(--signal-text); }
.roadmap__text { font-size: 15.5px; line-height: 1.55; color: var(--fg-1); max-width: 64ch; }
.roadmap__text b { display: block; color: var(--fg-0); font-weight: 700; font-size: 17px; margin-bottom: 2px; }

/* ---------- chame o squad ---------- */

.closing {
  margin: 144px var(--rail) 0;
  max-width: var(--measure);
  padding: 56px 48px;
  border-radius: 8px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(145, 71, 255, .28), transparent 60%),
    var(--bg-1);
  border: 1px solid var(--line-2);
}
.closing__text { max-width: 560px; }
.closing p { margin: 14px 0 0; font-size: 18px; color: var(--fg-1); }
.closing__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.closing__button {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 6px;
  background: var(--signal);
  color: var(--signal-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.closing__button:hover { background: var(--signal-hover); }
.closing__note { font-size: 14px; color: var(--fg-2); }

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

.footer {
  margin: 96px var(--rail) 0;
  max-width: var(--measure);
  padding: 20px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.6;
}
.footer p { margin: 0; }
.footer__note { margin-top: 6px !important; font-size: 13px; }
.footer a { color: var(--fg-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.footer a:hover { color: var(--fg-1); border-bottom-color: var(--fg-2); }

@media (prefers-reduced-motion: no-preference) {
  .dl, .topbar__nav a, .topbar__link, .footer a, .closing__button {
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- narrow ---------- */

@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .clan { grid-template-columns: 1fr; gap: 40px; }
  .profile__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline, .clan, .profile, .roadmap { padding-top: 104px; }
  .closing { margin-top: 104px; }
}

@media (max-width: 640px) {
  :root { --rail: 20px; }
  .topbar { padding: 20px var(--rail); }
  .topbar__nav { gap: 16px; }
  .topbar__nav a:not(.topbar__cta) { display: none; }
  .hero { padding-top: 16px; }
  .hero__lead { font-size: 17px; margin-bottom: 28px; }
  .downloads { flex-direction: column; align-items: stretch; }
  .dl { min-width: 0; }
  .dl__alt { max-width: none; }
  .window { margin-top: 40px; }
  .toast { display: none; }
  .profile__facts { grid-template-columns: 1fr; }
  .roadmap__row { grid-template-columns: 1fr; gap: 8px; }
  .closing { padding: 36px 24px; }
  .footer { margin-top: 64px; }
}

/* ---- invite page (transcribed from docs/mockups/2026-09-04-r4-site/02-convite.html) ---- */

.page {
  min-height: 100vh;
  padding: 64px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- brand + address ---------- */

.head { text-align: center; margin-bottom: 26px; }
.head__url { margin: 10px 0 0; color: var(--fg-2); font-size: 12.5px; }

/* ---------- card ---------- */

.card {
  width: 100%;
  max-width: 440px;
  padding: 26px 26px 20px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--bg-1);
}

.card__label {
  margin: 0 0 16px;
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.server { display: flex; align-items: center; gap: 16px; }

.initials {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #3f6df0, #8a4fd8);
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: .03em;
}

.server__icon {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
}

.server__name {
  margin: 0;
  color: var(--fg-0);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
}
.server__meta { margin: 4px 0 0; color: var(--fg-2); font-size: 13px; line-height: 1.4; }
.server__gate {
  margin: 5px 0 0;
  color: var(--warning);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.inviter { margin: 16px 0 20px; color: var(--fg-1); font-size: 14px; }
.inviter .mono { color: var(--fg-0); font-size: 13.5px; }

/* ---------- buttons ---------- */

.btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.btn--primary { background: var(--signal); color: var(--signal-ink); }
.btn--primary:hover { background: var(--signal-hover); }
.btn--ghost { background: var(--bg-2); border-color: var(--line-2); color: var(--fg-0); }
.btn--ghost:hover { background: var(--bg-3); border-color: var(--fg-2); }

/* ---------- click sub-views ---------- */

/* No animated dot: the status line just names what is happening. */
.opening { margin-top: 12px; font-family: var(--mono); font-size: 13px; color: var(--fg-2); }

/* The notice that appears 1.5 s after the click, when the app did not open —
   the same dashed block the mockup used for an annotation. */
.fallback {
  margin-top: 16px;
  padding: 13px 14px 14px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  font-size: 14px;
  color: var(--fg-1);
}
.fallback__links { margin: 5px 0 0; font-size: 13.5px; color: var(--fg-2); }

a.plain { color: var(--fg-1); text-decoration: none; border-bottom: 1px solid var(--line-2); }
a.plain:hover { color: var(--fg-0); border-bottom-color: var(--signal); }

/* ---------- tail ---------- */

.tail {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 13px;
}

/* ---------- gone / error ---------- */

.gone__mark { margin-bottom: 18px; }
.gone__title {
  margin: 0 0 8px;
  color: var(--fg-0);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
}
.gone__line { margin: 0 0 22px; color: var(--fg-2); font-size: 14px; }

.foot { margin-top: 56px; color: var(--fg-2); font-size: 12.5px; }

@media (prefers-reduced-motion: no-preference) {
  .btn, a.plain { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
}

@media (max-width: 900px) {
  .page { padding: 40px 20px 32px; }
  .server { gap: 14px; }
  .initials,
  .server__icon { width: 64px; height: 64px; border-radius: 14px; }
  .initials { font-size: 22px; }
  .server__name { font-size: 21px; }
}

/* ---- end invite page ---- */

/* ---------- policy page (/policy) ---------- */
/* A reading page: one measure, the landing's type scale, nothing else. */
.doc {
  max-width: 68ch;
  margin: 0 auto;
  padding: 24px var(--rail, 24px) 72px;
}
.doc__eyebrow { color: var(--fg-2); font-size: 13px; margin: 0 0 8px; }
.doc__title {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 32px;
  text-wrap: balance;
}
.doc section + section { margin-top: 28px; }
.doc h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
.doc p, .doc li { font-size: 16px; line-height: 1.6; color: var(--fg-1); margin: 0; }
.doc ul { padding-left: 20px; margin: 0; display: grid; gap: 10px; }
.doc a { color: var(--signal); }