/*
 * rolequest.app marketing site — one stylesheet, no build step.
 *
 * Colour values are copied from packages/ui-tokens/src/tokens.css (the single
 * source of look and feel). That file is not imported directly because this
 * site deploys as a standalone asset directory; if the tokens change, update
 * the two blocks below to match. Light = tokens `:root`, dark = tokens `.dark`,
 * selected here by prefers-color-scheme instead of a class (no JS).
 *
 * Fonts are system stacks on purpose: no third-party font requests, so the
 * site makes no requests outside rolequest.app and sets no cookies.
 */

:root {
  color-scheme: light dark;

  --background: oklch(0.967 0.001 286.375);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --primary: oklch(0.541 0.281 293.009);
  --primary-foreground: oklch(1 0 0);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --secondary: oklch(0.967 0.001 286.375);
  --border: oklch(0.141 0.005 285.823 / 8%);
  --input: oklch(0.141 0.005 285.823 / 12%);
  --ring: oklch(0.541 0.281 293.009);
  --score-good: oklch(0.696 0.17 162.48);
  --score-warning: oklch(0.769 0.188 70.08);

  --radius: 0.625rem;
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 6%);
  --shadow-lg: 0 8px 24px oklch(0 0 0 / 10%);

  --font-sans: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --page: min(72rem, 100% - 2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.141 0.005 285.823);
    --foreground: oklch(1 0 0);
    --card: oklch(0.21 0.006 285.885);
    --primary: oklch(0.702 0.183 293.541);
    --primary-foreground: oklch(0.141 0.005 285.823);
    --muted: oklch(0.274 0.006 286.033);
    --muted-foreground: oklch(0.705 0.015 286.067);
    --secondary: oklch(0.274 0.006 286.033);
    --border: oklch(0.274 0.006 286.033);
    --input: oklch(0.274 0.006 286.033);
    --ring: oklch(0.702 0.183 293.541);
    --score-good: oklch(0.765 0.177 163.223);
    --score-warning: oklch(0.828 0.189 84.429);
    --shadow-lg: 0 8px 24px oklch(0 0 0 / 40%);
  }
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

a { color: inherit; }
a:focus-visible, .button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.wrap { width: var(--page); margin-inline: auto; }

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header { border-bottom: 1px solid var(--border); }
.site-header .wrap {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.site-nav a:not(.button) {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  text-decoration: none;
}
.site-nav a:not(.button):hover, .site-nav a[aria-current="page"] { color: var(--foreground); }

.brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.brand__mark {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.brand__name { font-weight: 800; letter-spacing: -0.04em; font-size: 1.05rem; }
.brand__name span { color: var(--primary); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.button:hover { transform: translateY(-1px); }
.button--primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-sm); }
.button--primary:hover { background: color-mix(in oklch, var(--primary) 88%, var(--foreground)); }
.button--outline { border-color: var(--input); background: var(--card); color: var(--foreground); }
.button--outline:hover { border-color: var(--primary); }
.button--small { min-height: 2.25rem; padding: 0 0.875rem; font-size: 0.85rem; }
.button--full { width: 100%; }

/* ── Landing ────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 3rem;
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--score-good);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--score-good) 20%, transparent);
}
.hero h1, .page-head h1 {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  font-weight: 800;
}
.hero h1 em, .page-head h1 em {
  color: var(--primary);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lede {
  max-width: 36rem;
  margin: 1.5rem 0 0;
  color: var(--muted-foreground);
  font-size: 1.125rem;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.meta li { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Decorative journey preview, ported from the app's landing orbit. */
.orbit {
  position: relative;
  width: min(100%, 24rem);
  aspect-ratio: 1;
  justify-self: center;
}
.orbit__ring {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in oklch, var(--primary) 22%, transparent);
  border-radius: 50%;
  transform: rotate(-18deg) scaleY(0.55);
}
.orbit__ring--inner { inset: 14%; transform: rotate(37deg) scaleY(0.7); }
.orbit__core {
  position: absolute;
  inset: 34%;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid color-mix(in oklch, var(--primary) 55%, transparent);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 0 0 1rem color-mix(in oklch, var(--primary) 6%, transparent), var(--shadow-lg);
  text-align: center;
}
.orbit__core::before {
  content: "";
  position: absolute;
  inset: -0.5rem;
  border: 1px dashed color-mix(in oklch, var(--primary) 45%, transparent);
  border-radius: 50%;
  animation: spin 22s linear infinite;
}
.orbit__core b { font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: 0.16em; }
.orbit__core small {
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  line-height: 1.4;
  text-transform: uppercase;
}
.orbit__card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 9.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
.orbit__card--top { top: 4%; left: 0; }
.orbit__card--right { top: 42%; right: -4%; }
.orbit__card--bottom { bottom: 3%; left: 16%; }
.orbit__icon {
  width: 1.625rem;
  height: 1.625rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--primary) 14%, transparent);
  color: var(--primary);
  font-size: 0.8rem;
}
.orbit__card small {
  display: block;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
}
.orbit__card strong { display: block; font-size: 0.8rem; }

@keyframes spin { to { transform: rotate(360deg); } }

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.section__intro { max-width: 40rem; margin: 0 0 2rem; color: var(--muted-foreground); }
.kicker {
  margin: 0 0 0.75rem;
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.steps li { display: flex; gap: 1rem; padding: 1.5rem 1.5rem 0.5rem 0; }
.steps li + li { padding-left: 1.5rem; border-left: 1px solid var(--border); }
.steps span { color: var(--primary); font-family: var(--font-mono); font-size: 0.8rem; padding-top: 0.2rem; }
.steps h3 { margin: 0 0 0.375rem; font-size: 1.05rem; letter-spacing: -0.02em; }
.steps p { margin: 0; color: var(--muted-foreground); font-size: 0.95rem; }

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.card {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; letter-spacing: -0.02em; }
.card p { margin: 0; color: var(--muted-foreground); font-size: 0.95rem; }

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid color-mix(in oklch, var(--primary) 35%, var(--border));
  border-radius: calc(var(--radius) * 1.6);
  background: color-mix(in oklch, var(--primary) 7%, var(--card));
}
.cta h2 { margin: 0; }
.cta p { margin: 0.375rem 0 0; color: var(--muted-foreground); }

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

.page-head { max-width: 46rem; margin-inline: auto; padding-block: clamp(3rem, 8vw, 5rem) 2.5rem; text-align: center; }
.page-head h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); }
.page-head .lede { margin-inline: auto; }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.plan--recommended {
  border-color: color-mix(in oklch, var(--primary) 60%, transparent);
  box-shadow: 0 18px 60px color-mix(in oklch, var(--primary) 14%, transparent);
}
.plan__badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 700;
}
.plan h2 { margin: 0; font-size: 1.25rem; letter-spacing: -0.02em; }
.plan > .plan__price { margin: 0; color: var(--foreground); }
.plan__price b { font-size: 3rem; letter-spacing: -0.04em; line-height: 1; }
.plan__price span { color: var(--muted-foreground); font-size: 0.9rem; }
.plan > p { margin: 0; color: var(--muted-foreground); font-size: 0.95rem; }
.plan ul { flex: 1; margin: 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; align-content: start; }
.plan li { display: flex; gap: 0.5rem; font-size: 0.95rem; }
.plan li::before { content: "✓"; color: var(--primary); font-weight: 700; }
.fine-print { max-width: 42rem; margin: 2.5rem auto 0; color: var(--muted-foreground); font-size: 0.85rem; text-align: center; }

/* ── Legal ──────────────────────────────────────────────────────────────── */

.legal { max-width: 46rem; margin-inline: auto; padding-block: 3rem 4rem; }
.legal h1 { margin: 0 0 0.5rem; font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: -0.04em; line-height: 1.1; }
.legal h2 { margin: 2.5rem 0 0.75rem; font-size: 1.35rem; letter-spacing: -0.02em; }
.legal h3 { margin: 1.5rem 0 0.5rem; font-size: 1.05rem; }
.legal p, .legal li { color: color-mix(in oklch, var(--foreground) 85%, var(--muted-foreground)); }
.legal li + li { margin-top: 0.375rem; }
.legal .updated { color: var(--muted-foreground); font-size: 0.9rem; }
.legal a { color: var(--primary); }
.table-scroll { overflow-x: auto; margin-block: 1rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.legal th, .legal td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.legal th { font-weight: 700; }
html:has(meta[name="robots"][content="noindex"]) .legal::before {
  content: "Early access: RoleQuest is being tested with a small group of users. This document may change before general release, and we will tell you about significant changes.";
  display: block;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in oklch, var(--score-warning) 60%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--score-warning) 12%, var(--card));
  color: var(--foreground);
}

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

.site-footer { margin-top: 3rem; border-top: 1px solid var(--border); }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem;
  color: var(--muted-foreground);
  font-size: 0.85rem;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--foreground); text-decoration: underline; }

/* ── Small screens ──────────────────────────────────────────────────────── */

@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; }
  .orbit { width: min(100%, 20rem); }
  .steps { grid-template-columns: 1fr; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li, .steps li + li { padding: 1.25rem 0; border-left: 0; }
  .steps li + li { border-top: 1px solid var(--border); }
}
@media (max-width: 30rem) {
  .site-nav { gap: 0.875rem; }
  .features { grid-template-columns: 1fr; }
  .site-nav .hide-sm { display: none; }
  .orbit__card { min-width: 0; }
  .orbit__card--right { right: 0; }
}
.actions--flush { margin-top: 0; }
.actions--center { justify-content: center; }