/* ═══════════════════════════════════════════════════════════════════════════
   marketing.css, the public site: home page, legal pages, sign-in.

   Shares tokens.css, base.css and components.css with the app, so the product
   someone signs up for looks like the page that sold it to them. The previous
   landing page carried 400 lines of its own inline CSS with a separate set of
   colours, spacing and type, this replaces all of it.
   ═══════════════════════════════════════════════════════════════════════════ */

.marketing { font-size: var(--fs-body-lg); }

/* In-page anchors are the one place smooth scrolling earns its keep. */
html:has(.marketing) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(.marketing) { scroll-behavior: auto; }
}

.wrap {
  width: min(var(--content-max), calc(100% - var(--sp-8)));
  margin-inline: auto;
}

@media (max-width: 640px) {
  .wrap { width: calc(100% - var(--sp-6)); }
}

/* ── Site header ──────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
/* color-mix and backdrop-filter are progressive: without them the bar is just
   opaque, which is fine. */
@supports not (backdrop-filter: blur(8px)) {
  .site-header { background: var(--canvas); }
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 60px;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-title-sm);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-decoration: none;
}
.site-brand svg { color: var(--brand); }

.site-nav { display: flex; gap: var(--sp-1); margin-left: auto; }
.site-nav a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.site-nav a:hover { background: var(--surface-hover); color: var(--text); }

.site-actions { display: flex; align-items: center; gap: var(--sp-2); }

@media (max-width: 760px) {
  .site-nav { display: none; }
  .site-actions { margin-left: auto; }
  .site-actions .btn-secondary { display: none; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero { padding: var(--sp-16) 0 var(--sp-12); }

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: center;
}

@media (min-width: 940px) {
  .hero { padding: var(--sp-20) 0 var(--sp-16); }
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-12); }
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 16ch;
}

.hero-lede {
  margin-top: var(--sp-4);
  font-size: var(--fs-title-sm);
  color: var(--text-secondary);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

.hero-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--sp-3);
}

/* ── Discord mock ─────────────────────────────────────────────────────────
   A static illustration of what the product does. Deliberately not animated:
   a typing animation on a landing page is a distraction that also churns the
   main thread on the low-end phones a lot of this audience uses. */

.mock {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
  font-size: var(--fs-small);
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.mock-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }

.mock-line { display: flex; gap: var(--sp-2); align-items: flex-start; }

.mock-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  background: var(--brand);
  color: var(--text-on-brand);
}
.mock-avatar-user { background: var(--surface-active); color: var(--text-secondary); }

.mock-author { font-weight: var(--fw-semibold); }
.mock-tag {
  margin-left: var(--sp-1);
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--text-on-brand);
  font-size: 10px;
  font-weight: var(--fw-bold);
  vertical-align: 1px;
}

.mock-embed {
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.mock-embed-title { font-weight: var(--fw-semibold); color: var(--success); }
.mock-embed-body { color: var(--text-secondary); margin-top: 2px; }

/* ── Sections ─────────────────────────────────────────────────────────── */

.section { padding: var(--sp-16) 0; }
.section-alt { background: var(--surface-sunken); border-block: 1px solid var(--border); }

.section-heading { max-width: 40rem; margin-bottom: var(--sp-10); }
.section-heading h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  letter-spacing: -0.02em;
}
.section-heading p {
  margin-top: var(--sp-3);
  color: var(--text-secondary);
}
.section-heading-center { margin-inline: auto; text-align: center; }

/* ── Steps ────────────────────────────────────────────────────────────── */

.how {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-6);
  counter-reset: step;
}

.how-step { counter-increment: step; }
.how-step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--brand-subtle);
  color: var(--brand-subtle-fg);
  border: 1px solid var(--brand-border);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.how-step h3 { margin-bottom: var(--sp-2); }
.how-step p { color: var(--text-secondary); font-size: var(--fs-body); }

/* ── Features ─────────────────────────────────────────────────────────── */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-6);
}

.feature h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.feature h3 svg { color: var(--brand); }
.feature p { color: var(--text-secondary); font-size: var(--fs-body); }

/* ── Pricing ──────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-4);
  align-items: start;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}
.plan-card-featured {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

.plan-badge {
  align-self: flex-start;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--brand);
  color: var(--text-on-brand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.plan-name { font-size: var(--fs-title-sm); font-weight: var(--fw-bold); }

.plan-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
}
.plan-price strong {
  font-size: var(--fs-display-sm);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.plan-price span { color: var(--text-muted); font-size: var(--fs-small); }

.plan-tagline { color: var(--text-secondary); font-size: var(--fs-body); }

.plan-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0;
  margin: 0;
  font-size: var(--fs-body);
  flex: 1;
}
.plan-perks li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.plan-perks svg { color: var(--success); margin-top: 3px; flex-shrink: 0; }

.plan-card .btn { width: 100%; }

/* ── Spotlights ───────────────────────────────────────────────────────── */

.spotlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-3);
}

.spotlight {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
}
.spotlight:hover { border-color: var(--border-control); color: inherit; }
.spotlight strong { display: block; }
.spotlight span { font-size: var(--fs-small); color: var(--text-muted); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  padding: var(--sp-10) 0 var(--sp-8);
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}

.footer-heading {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.footer-links { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-body); }
.footer-links a { color: var(--text-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ── Legal and prose pages ────────────────────────────────────────────── */

.legal { padding: var(--sp-10) 0 var(--sp-16); }

.legal-body {
  max-width: var(--prose-max);
  font-size: var(--fs-body-lg);
}
.legal-body h2 {
  margin: var(--sp-8) 0 var(--sp-3);
  font-size: var(--fs-title);
  scroll-margin-top: 5rem;
}
.legal-body h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-title-sm); }
.legal-body p  { margin-bottom: var(--sp-4); color: var(--text-secondary); }
.legal-body ul, .legal-body ol {
  margin: 0 0 var(--sp-4) 1.3rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--text-secondary);
}
.legal-body strong { color: var(--text); }

.legal-updated {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}

.legal-toc {
  padding: var(--sp-4);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-8);
}
.legal-toc ol {
  margin: var(--sp-2) 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-body);
}

/* ── Centred single-card pages: sign in, maintenance, banned ──────────── */

.centred {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--sp-6) var(--sp-4);
}

.centred-card {
  width: 100%;
  max-width: 26rem;
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.centred-card h1 {
  font-size: var(--fs-title);
  margin-bottom: var(--sp-2);
}
.centred-card > p { color: var(--text-secondary); margin-bottom: var(--sp-6); }

.provider-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  height: var(--control-height-lg);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  color: #fff;
}
.provider-discord { background: var(--discord); }
.provider-discord:hover { filter: brightness(0.93); color: #fff; }
.provider-roblox { background: var(--roblox); }
.provider-roblox:hover { filter: brightness(0.93); color: #fff; }
.provider-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}

/* Setup progress: which account is connected, which is still needed. */
.link-step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.link-step:last-of-type { border-bottom: none; }

.link-step-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}
.link-step-done { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.link-step-todo { background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border-strong); }

.link-step-title { font-weight: var(--fw-semibold); font-size: var(--fs-body); }
.link-step-detail { font-size: var(--fs-caption); color: var(--text-muted); }

/* ── Data rights: request-type shortcuts ──────────────────────────────────
   ARIA radios rather than buttons, so the choice is announced and arrow keys
   move between them. The <select> underneath stays the source of truth, which
   is what makes the form work with JavaScript disabled. */

.rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-6);
}

.rights-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.rights-card:hover { border-color: var(--border-control); background: var(--surface-hover); }
.rights-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.rights-card[aria-checked='true'] {
  border-color: var(--brand);
  background: var(--brand-subtle);
  box-shadow: inset 3px 0 0 var(--brand);
}

.rights-card strong { font-size: var(--fs-body); }
.rights-card span { font-size: var(--fs-small); color: var(--text-muted); }
.rights-card[aria-checked='true'] span { color: var(--brand-subtle-fg); }