/* Alibi — landing, privacy and support pages.
   Palette is taken from the game's own UI so the site and the app feel like
   one product. Type is Fraunces for display and Inter for text, loaded from
   Google Fonts; section 6 of the privacy policy discloses that request. */

:root {
  --bg: #17121e;
  --bg-2: #1e1829;
  --panel: #241d33;
  --panel-2: #2b2340;
  --line: #3a2f52;
  --ink: #f4eefb;
  --muted: #b3a6c9;
  --purple: #7861dc;
  --purple-2: #9c86f0;
  --yellow: #ffd290;
  --coral: #ff907f;
  --sage: #bce0a6;
  --blue: #adcbea;

  --serif: "Fraunces", ui-serif, Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1080px;
  --radius: 16px;
  --shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.85);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Subtle noir vignette so the dark background isn't a flat slab. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60rem 40rem at 15% -10%, rgba(120, 97, 220, 0.20), transparent 60%),
    radial-gradient(45rem 35rem at 95% 5%, rgba(255, 144, 127, 0.10), transparent 60%);
}

main, header, footer { position: relative; z-index: 1; }

a { color: var(--purple-2); }
a:hover { color: var(--yellow); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--yellow);
  color: #17121e;
  padding: 10px 16px;
  z-index: 50;
  border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

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

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

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

header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
  background: rgba(23, 18, 30, 0.82);
  border-bottom: 1px solid var(--line);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.brand span em { font-style: normal; color: var(--muted); font-weight: 500; }

nav.top { display: flex; gap: 22px; font-size: 15px; }
nav.top a { color: var(--muted); text-decoration: none; }
nav.top a:hover { color: var(--ink); }

@media (max-width: 560px) {
  nav.top { gap: 14px; font-size: 14px; }
  nav.top .hide-sm { display: none; }
}

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

.hero {
  padding: 74px 0 60px;
  text-align: center;
}

.hero .logo {
  width: 128px;
  height: 128px;
  border-radius: 26px;
  margin-bottom: 26px;
  filter: drop-shadow(0 14px 34px rgba(120, 97, 220, 0.45));
}

.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  font-weight: 700;
  margin-bottom: 18px;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 7vw, 4.3rem);
  line-height: 1.03;
  margin: 0 0 8px;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.hero h1 .sub {
  display: block;
  font-size: 0.44em;
  color: var(--muted);
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 12px;
}

.hero p.lede {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  color: var(--muted);
  max-width: 34rem;
  margin: 0 auto 34px;
}

.store-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 13px;
  padding: 11px 22px 11px 18px;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.store-btn:hover {
  transform: translateY(-2px);
  border-color: var(--purple);
  background: var(--panel-2);
  color: var(--ink);
}
.store-btn svg { width: 22px; height: 22px; flex: none; }
.store-btn .txt { display: block; text-align: left; line-height: 1.2; }
.store-btn .txt small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.store-btn .txt strong { font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; }

.hero .meta {
  margin-top: 26px;
  font-size: 14.5px;
  color: var(--muted);
}
.hero .meta b { color: var(--sage); font-weight: 600; }

.hero .pending {
  margin-top: 26px;
  font-size: 14px;
  color: var(--muted);
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 12px 18px;
  display: inline-block;
}

/* -------------------------------------------------------------- sections */

section.band { padding: 64px 0; }
section.band + section.band { border-top: 1px solid var(--line); }

h2.title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.6vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-align: center;
}

.kicker {
  text-align: center;
  color: var(--muted);
  max-width: 40rem;
  margin: 0 auto 46px;
  font-size: 1.03rem;
}

/* The hook: a single sentence set large, with the twist highlighted. */
.hook {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.2vw, 2.5rem);
  line-height: 1.28;
  text-align: center;
  max-width: 26ch;
  margin: 0 auto;
  letter-spacing: -0.02em;
}
.hook em { font-style: normal; color: var(--coral); }

/* A small CSS-only illustration of a case board. */
.board-demo {
  margin: 46px auto 0;
  max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  aspect-ratio: 1;
}

.cell {
  border-radius: 9px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: clamp(1rem, 4.4vw, 1.5rem);
  font-weight: 700;
  color: rgba(244, 238, 251, 0.28);
}
.cell.r-y { background: rgba(255, 210, 144, 0.13); border-color: rgba(255, 210, 144, 0.3); }
.cell.r-g { background: rgba(188, 224, 166, 0.13); border-color: rgba(188, 224, 166, 0.3); }
.cell.r-c { background: rgba(255, 144, 127, 0.14); border-color: rgba(255, 144, 127, 0.32); }
.cell.r-b { background: rgba(173, 203, 234, 0.13); border-color: rgba(173, 203, 234, 0.3); }
.cell.filled { color: var(--ink); border-color: transparent; }
.cell.blocked {
  background: repeating-linear-gradient(45deg, #1a1526, #1a1526 5px, #221b31 5px, #221b31 10px);
  color: transparent;
}
.cell.lied { box-shadow: 0 0 0 2px var(--coral) inset; color: var(--coral); }

.board-legend {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13.5px;
  color: var(--muted);
}
.board-legend span { display: inline-flex; align-items: center; gap: 7px; }
.board-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
}
.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 15px;
}
.step h3 { margin: 0 0 8px; font-size: 1.1rem; letter-spacing: -0.01em; }
.step p { margin: 0; color: var(--muted); font-size: 15.5px; }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
}

/* Feature tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.tile .ico { font-size: 26px; line-height: 1; margin-bottom: 12px; display: block; }
.tile h3 { margin: 0 0 7px; font-size: 1.03rem; letter-spacing: -0.01em; }
.tile p { margin: 0; color: var(--muted); font-size: 15px; }

@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }

/* What's inside list */
.files { display: grid; gap: 12px; max-width: 640px; margin: 0 auto; }
.file {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 15px 18px;
}
.file .tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  flex: none;
}
.tag.tut { background: rgba(173, 203, 234, 0.16); color: var(--blue); }
.tag.new { background: rgba(255, 210, 144, 0.16); color: var(--yellow); }
.tag.arc { background: rgba(179, 166, 201, 0.16); color: var(--muted); }
.file b { font-weight: 620; letter-spacing: -0.01em; }
.file small { display: block; color: var(--muted); font-size: 13.5px; }

/* Closing CTA */
.cta {
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 52px 28px;
  box-shadow: var(--shadow);
}
.cta h2 { margin: 0 0 10px; }

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

footer {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding: 40px 0 46px;
  font-size: 14.5px;
  color: var(--muted);
}
.foot { display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

/* --------------------------------------------------------- legal pages */

.legal { padding: 46px 0 10px; }
.legal .wrap { max-width: 760px; }

.crumbs { font-size: 14.5px; margin-bottom: 22px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.legal h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}

.legal .updated {
  color: var(--muted);
  font-size: 14.5px;
  margin: 0 0 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.legal h2 {
  font-family: var(--serif);
  font-size: 1.42rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 40px 0 12px;
  scroll-margin-top: 86px;
}

.legal h3 {
  font-size: 1.03rem;
  margin: 26px 0 8px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.legal p, .legal li { color: #ded5ee; }
.legal p { margin: 0 0 15px; }
.legal ul, .legal ol { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 9px; }
.legal li::marker { color: var(--purple-2); }

.legal strong { color: var(--ink); font-weight: 640; }

.callout {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--purple);
  border-radius: 0 12px 12px 0;
  padding: 18px 20px;
  margin: 0 0 24px;
}
.callout p:last-child { margin-bottom: 0; }
.callout.warn { border-left-color: var(--yellow); }

.toc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 0 0 12px;
}
.toc h2 { margin: 0 0 12px; font-size: 1.1rem; font-family: var(--sans); }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 30px; }
.toc li { margin-bottom: 7px; font-size: 15px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

@media (max-width: 560px) { .toc ol { columns: 1; } }

.tbl { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; }
.tbl th, .tbl td {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  vertical-align: top;
}
.tbl th { background: var(--panel); color: var(--ink); font-weight: 640; }
.tbl td { color: #ded5ee; }

.pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.pill.yes { background: rgba(255, 144, 127, 0.16); color: var(--coral); }
.pill.no { background: rgba(188, 224, 166, 0.16); color: var(--sage); }

@media print {
  header, footer, .crumbs, .toc, .store-btns { display: none; }
  body { background: #fff; color: #000; }
  .legal p, .legal li, .tbl td { color: #222; }
  a { color: #000; text-decoration: underline; }
}

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