/* ==========================================================================
   AivoPlay — shared styles for the secondary pages
   (support, privacy, terms, dmca).

   The landing page (index.html) keeps its own inline styles
   because it is one self-contained marketing artefact. These pages are
   a family of four, so the tokens, nav, footer and document layout live
   here once instead of four times over.

   Tokens are copied from the landing page so the two never drift in
   appearance; only the page-level components below are new.
   ========================================================================== */

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background 0.4s ease, color 0.4s ease;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ==================== LIGHT THEME (default) ==================== */
:root {
  --bg: #ffffff;
  --bg-soft: #f7f6fb;
  --card: #ffffff;

  --blue: #0A84FF;
  --purple: #7B61FF;
  --teal: #00C2A8;
  --amber: #F5A524;
  --red: #FF4D4F;
  --brand-grad: linear-gradient(135deg, #0A84FF 0%, #7B61FF 100%);

  --ink: #0B0F1A;
  --ink-soft: #2b2d42;
  --ink-dim: #6b6e8a;
  --ink-faint: #9ca0bf;
  --line: #eae6f5;
  --line-soft: #f2eefa;

  --blue-soft: #e0ebff;
  --mint-soft: #d9f5e5;
  --amber-soft: #fdf0d5;
  --red-soft: #ffe3e3;
  --purple-pale: #e4dfff;
  --purple-soft: #a89eff;

  --maxw: 1320px;
  --maxw-doc: 860px;
  --pad-x: clamp(20px, 4vw, 56px);
  --radius: 24px;
}

/* ==================== DARK THEME ==================== */
body.dark {
  --bg: #07080f;
  --bg-soft: #0f1020;
  --card: #12132a;

  --ink: #f5f7fb;
  --ink-soft: #e0e3ee;
  --ink-dim: #8a93b0;
  --ink-faint: #5a6182;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);

  --blue-soft: rgba(10, 132, 255, 0.14);
  --mint-soft: rgba(46, 204, 113, 0.14);
  --amber-soft: rgba(245, 165, 36, 0.14);
  --red-soft: rgba(255, 77, 79, 0.14);
  --purple-pale: rgba(123, 97, 255, 0.15);
}

/* ============ NAV ============ */
nav {
  position: sticky; top: 0; z-index: 50;
  padding: 18px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line-soft);
  gap: 24px;
  transition: background 0.4s;
}
body.dark nav { background: rgba(7, 8, 15, 0.85); }

.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--ink);
  flex-shrink: 0;
}
.nav-brand .brand-ai { font-weight: 600; }
.nav-brand .brand-play { font-weight: 400; }
.aivo-mark { width: 32px; height: 32px; flex-shrink: 0; }

.nav-pill {
  display: flex; align-items: center;
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 4px; gap: 2px;
}
.nav-pill a {
  padding: 10px 20px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-dim);
  border-radius: 999px;
  transition: all 0.2s;
  white-space: nowrap;
}
.nav-pill a:hover { color: var(--ink); }
.nav-pill a.active { background: var(--blue); color: white; }
@media (max-width: 1000px) { .nav-pill { display: none; } }

.nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.theme-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--purple);
  color: var(--purple);
  border-radius: 12px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em;
  transition: all 0.25s;
  background: transparent;
}
.theme-toggle:hover { background: var(--purple-pale); }
.theme-toggle svg { width: 14px; height: 14px; }

.nav-signup {
  padding: 12px 22px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: transform 0.2s, background 0.2s;
}
.nav-signup:hover { background: var(--brand-grad); color: white; transform: translateY(-1px); }

/* ============ LAYOUT ============ */
section { position: relative; padding: 0 var(--pad-x); }
.container { max-width: var(--maxw); margin: 0 auto; }
.container-doc { max-width: var(--maxw-doc); margin: 0 auto; }

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: var(--blue); margin-bottom: 20px;
}
.section-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
}
.section-title {
  font-weight: 500;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 0.98; letter-spacing: -0.035em;
  color: var(--ink); margin-bottom: 20px;
}
.serif {
  font-family: 'Instrument Serif', serif;
  font-weight: 400; font-style: italic;
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; font-size: 1.08em;
}
.section-desc {
  color: var(--ink-dim);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  max-width: 56ch;
}

/* ============ PAGE HERO ============ */
.page-hero { padding-top: 72px; padding-bottom: 56px; }
.page-hero .section-desc { margin-bottom: 0; }
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-faint);
  margin-bottom: 22px;
}
.breadcrumb a { color: var(--ink-dim); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--blue); }

/* ============ CARDS ============ */
.card-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.help-card {
  display: block;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.help-card:hover {
  transform: translateY(-3px);
  border-color: var(--purple-soft);
  box-shadow: 0 18px 36px rgba(15, 16, 32, 0.08);
}
body.dark .help-card:hover { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45); }
.help-ico {
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  background: var(--purple-pale); color: var(--purple);
}
.help-ico svg { width: 20px; height: 20px; }
.help-ico.blue { background: var(--blue-soft); color: var(--blue); }
.help-ico.mint { background: var(--mint-soft); color: var(--teal); }
.help-card h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 8px; color: var(--ink);
}
.help-card p { font-size: 14.5px; color: var(--ink-dim); line-height: 1.55; }
.help-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--blue);
}

/* ============ STEPS ============ */
.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.step {
  padding: 26px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.step-num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 500;
  color: var(--purple);
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.step h4 { font-size: 16px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.015em; }
.step p { font-size: 14px; color: var(--ink-dim); line-height: 1.55; }

/* ============ ERROR CODE TABLE ============ */
.code-table-wrap {
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow-x: auto;
  background: var(--card);
}
table.code-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.code-table th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  white-space: nowrap;
}
.code-table td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px; color: var(--ink-dim);
  vertical-align: top; line-height: 1.55;
}
.code-table tr:last-child td { border-bottom: none; }
.code-chip {
  display: inline-block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12.5px; font-weight: 500;
  padding: 5px 10px; border-radius: 8px;
  white-space: nowrap;
  background: var(--blue-soft); color: var(--blue);
}
.code-chip.amber { background: var(--amber-soft); color: #B8791A; }
body.dark .code-chip.amber { color: var(--amber); }
.code-chip.red { background: var(--red-soft); color: #C2333A; }
body.dark .code-chip.red { color: var(--red); }
.code-chip.mint { background: var(--mint-soft); color: #0E8F6F; }
body.dark .code-chip.mint { color: var(--teal); }
.code-table td strong { color: var(--ink); font-weight: 600; }

/* ============ ACCORDION ============ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.faq-item:hover { border-color: var(--purple-soft); }
.faq-item.open { border-color: var(--purple); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 15.5px; font-weight: 500; color: var(--ink);
  letter-spacing: -0.015em;
}
.faq-toggle {
  flex-shrink: 0; width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--bg-soft);
  color: var(--purple); font-size: 16px; line-height: 1;
  transition: transform 0.25s;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  font-size: 14.5px; color: var(--ink-dim); line-height: 1.6;
  transition: max-height 0.3s ease, margin-top 0.3s ease;
}
.faq-item.open .faq-a { max-height: 420px; margin-top: 14px; }

/* ============ CONTACT ============ */
.contact-box {
  padding: clamp(30px, 5vw, 52px);
  border-radius: var(--radius);
  background: var(--brand-grad);
  color: white;
  display: grid; gap: 34px;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
}
@media (max-width: 800px) { .contact-box { grid-template-columns: 1fr; } }
.contact-box h2 {
  font-weight: 500; font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 14px;
}
.contact-box h2 .serif {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: rgba(255, 255, 255, 0.92);
}
.contact-box p { color: rgba(255, 255, 255, 0.82); font-size: 15.5px; line-height: 1.6; }
.contact-methods { display: flex; flex-direction: column; gap: 12px; }
.contact-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  transition: background 0.2s;
}
.contact-row:hover { background: rgba(255, 255, 255, 0.24); }
.contact-row svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }
.contact-row-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); margin-bottom: 2px;
}
.contact-row-value { font-size: 15px; font-weight: 500; }

/* ============ CALLOUT ============ */
.callout {
  display: flex; gap: 14px;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-dim); line-height: 1.6;
}
.callout svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--purple); }
.callout strong { color: var(--ink); font-weight: 600; }

/* ============ LEGAL DOCUMENT LAYOUT ============ */
.doc-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 60px;
  max-width: 1120px; margin: 0 auto;
  padding-bottom: 100px;
}
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; gap: 32px; } }
.doc-toc { position: sticky; top: 104px; align-self: start; }
@media (max-width: 900px) { .doc-toc { position: static; } }
.doc-toc h5 {
  font-size: 11px; font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 16px;
}
.doc-toc ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.doc-toc a {
  font-size: 14px; color: var(--ink-dim);
  transition: color 0.2s; line-height: 1.4;
  display: block;
}
.doc-toc a:hover { color: var(--blue); }

.doc-body h2 {
  font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink);
  margin: 44px 0 14px;
  scroll-margin-top: 100px;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 {
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink); margin: 26px 0 10px;
}
.doc-body p { color: var(--ink-dim); font-size: 15.5px; line-height: 1.68; margin-bottom: 14px; }
.doc-body ul, .doc-body ol { color: var(--ink-dim); font-size: 15.5px; line-height: 1.68; margin: 0 0 16px 20px; }
.doc-body li { margin-bottom: 9px; }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body a { color: var(--blue); }
.doc-body a:hover { text-decoration: underline; }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  font-size: 13px; color: var(--ink-faint);
  padding-bottom: 26px; margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
/* Marks a value the operator must replace before publishing. */
.fillme {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.92em;
  padding: 2px 7px; border-radius: 6px;
  background: var(--amber-soft); color: #8A5B10;
}
body.dark .fillme { color: var(--amber); }

/* ============ FOOTER ============ */
footer { padding: 80px var(--pad-x) 40px; border-top: 1px solid var(--line); }
.foot-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px; margin-bottom: 60px;
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.foot-brand-block .nav-brand { font-size: 24px; margin-bottom: 16px; }
.foot-tag { color: var(--ink-dim); font-size: 15px; max-width: 30ch; line-height: 1.5; }
.foot-col h5 {
  font-size: 11px; font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 20px;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.foot-col a { color: var(--ink-dim); font-size: 14px; transition: color 0.2s; }
.foot-col a:hover { color: var(--blue); }
.foot-bottom {
  max-width: var(--maxw); margin: 0 auto;
  padding-top: 30px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--ink-faint); flex-wrap: wrap; gap: 16px;
}
.foot-bottom-tag {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; font-size: 16px;
}

/* ============ SPACING HELPERS ============ */
.block { padding: 64px 0; }
.block-soft { background: var(--bg-soft); transition: background 0.4s; }
.block-head { margin-bottom: 36px; }
.block-head h2 {
  font-weight: 500; font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -0.03em; line-height: 1.05;
  color: var(--ink); margin-bottom: 12px;
}
.block-head p { color: var(--ink-dim); font-size: 16px; max-width: 60ch; line-height: 1.6; }

/* ============================================================
   MOBILE
   ============================================================
   Two problems this fixes, both verified at 375 px:

   1. The nav overflowed. Brand + theme toggle + Download on one
      row measured 382 px against a 375 px viewport, so every page
      scrolled sideways by 7 px.
   2. Below 1000 px the link pill was simply hidden, and nothing
      replaced it — a phone visitor had no way to reach Features,
      FAQ, Support or the legal pages at all.

   The pill now moves to its own row and scrolls horizontally
   instead of disappearing. That keeps navigation reachable with
   no JavaScript and no menu state to get stuck open.
   ------------------------------------------------------------ */

@media (max-width: 1000px) {
  nav {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px var(--pad-x);
  }
  .nav-brand { font-size: 17px; }
  .nav-right { margin-left: auto; }

  /* Was display:none — restored as a scrollable row. */
  .nav-pill {
    display: flex;
    order: 3;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-pill::-webkit-scrollbar { display: none; }
  .nav-pill a { padding: 9px 15px; font-size: 13px; }
}

@media (max-width: 620px) {
  .nav-signup { padding: 10px 16px; font-size: 13px; }
  .theme-toggle { padding: 9px 11px; font-size: 11px; letter-spacing: 0.06em; }
  .theme-toggle svg { width: 12px; height: 12px; }
}

@media (max-width: 560px) {
  .page-hero { padding-top: 46px; padding-bottom: 38px; }
  .block { padding: 46px 0; }
  .block-head { margin-bottom: 26px; }
  .section-desc { font-size: 15px; }

  /* Cards and steps get their own row; tighter padding buys back
     horizontal space on a 375 px screen. */
  .card-grid { grid-template-columns: 1fr; gap: 14px; }
  .help-card { padding: 22px; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .step { padding: 20px; }

  .contact-box { padding: 26px 22px; gap: 24px; }
  .contact-row { padding: 14px 16px; }
  .contact-row-value { font-size: 14px; word-break: break-word; }

  .callout { padding: 16px 18px; font-size: 14px; }

  /* The checksum is 64 characters — let it wrap under its button
     rather than forcing the card wider than the screen. */
  .dl-hash { flex-wrap: wrap; }

  .faq-item { padding: 16px 18px; }
  .faq-q { font-size: 14.5px; }
  .faq-a { font-size: 14px; }

  .doc-body h2 { font-size: 19px; margin-top: 34px; }
  .doc-body p, .doc-body ul, .doc-body ol { font-size: 15px; }
  .doc-meta { gap: 6px 14px; font-size: 12.5px; }

  footer { padding: 52px var(--pad-x) 30px; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; margin-bottom: 36px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* The code table keeps its own horizontal scroll — it is a real
   three-column table and squashing it would make it unreadable.
   Signal that it scrolls, since on a phone the right edge is the
   only clue. */
@media (max-width: 700px) {
  .code-table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .code-table-wrap::after {
    content: "Scroll sideways for the full table →";
    display: block;
    padding: 10px 16px 12px;
    font-size: 11.5px;
    color: var(--ink-faint);
    border-top: 1px solid var(--line-soft);
    position: sticky;
    left: 0;
  }
}

/* Touch targets: a 24 px chevron is fine with a mouse and awkward
   with a thumb. */
@media (pointer: coarse) {
  .nav-pill a, .foot-col a, .doc-toc a, .help-link { min-height: 34px; display: flex; align-items: center; }
  .foot-col ul { gap: 6px; }
  .dl-copy { min-height: 40px; }
}