/* Every page except the homepage: the homepage's worlds, applied to the
   shared components in site.css.

   Each page opens at night, like the homepage: a dark header with the two
   voices (violet microphone, teal meeting audio) running along its lower
   edge, drawn by /js/pages.js and wound by the scroll. The body is the
   homepage's cool paper. The closing call to action returns to night, and
   the footer stays there. The source colours keep their meaning: violet is
   your microphone, teal is the meeting audio, forest is your own computer.

   Loaded after site.css on every page but the homepage. */

:root {
  --night: #120f2e;
  --night-2: #1b1740;
  --night-ink: #f5f3ff;
  --night-ink-2: #d3cfea;
  --night-ink-3: #aaa6c9;
  --night-line: rgba(255, 255, 255, 0.13);
  --forest: #063f2b;
  --pale-ink: #f0efa9;
  --mic-light: #b8a1ff;
  --sys-light: #64d6d0;
}

body { background: var(--bg); }

/* ---------- Navigation over night and paper ----------
   Dark by default, because every page opens at night. pages.js sets
   html[data-tone="light"] while the nav is over paper. Without JavaScript
   it stays dark, which reads over both. */

.nav-wrap {
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  transition: background-color .25s ease, border-color .25s ease;
}
html:not([data-tone="light"]) .nav-wrap { background: rgba(18, 15, 46, 0.88); border-bottom-color: var(--night-line); }
html:not([data-tone="light"]) .nav-brand-name { color: var(--night-ink); }
html:not([data-tone="light"]) .nav-links a { color: var(--night-ink-2); }
html:not([data-tone="light"]) .nav-links a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
html:not([data-tone="light"]) .nav-links a.current { color: var(--pale-ink); background: rgba(240, 239, 169, 0.12); }
html:not([data-tone="light"]) .nav-cta { background: var(--pale-ink); color: #10101f; }
html:not([data-tone="light"]) .nav-cta:hover { background: #fff; }
html:not([data-tone="light"]) .nav-toggle { color: var(--night-ink-2); }
html:not([data-tone="light"]) .nav :focus-visible { outline-color: var(--pale-ink); }
html[data-tone="light"] .nav-wrap { background: rgba(237, 245, 247, 0.9); }

/* Reading progress on long guides and posts: the two tracks, filling. */
.read-progress {
  position: fixed; left: 0; right: 0; top: 80px; z-index: 49; height: 3px;
  background: linear-gradient(90deg, #7138ed, #087e87);
  transform: scaleX(var(--read, 0)); transform-origin: 0 50%; pointer-events: none;
}
@media (max-width: 540px) { .read-progress { top: 72px; } }

/* ---------- The night header ---------- */

.page-header {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 150px 0 168px; background: var(--night); color: var(--night-ink);
}
.page-header > .container, .page-header > .container-narrow { position: relative; z-index: 1; }
.page-waves {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  width: 100%; height: 150px; display: block; pointer-events: none;
}
.page-header .display-lg {
  color: var(--night-ink); font-size: clamp(38px, 5.4vw, 74px); line-height: .96; letter-spacing: -0.05em;
  max-width: 17ch; text-wrap: balance;
}
.page-header .lead { color: var(--night-ink-2); max-width: 60ch; }
.page-header .kicker {
  color: var(--mic-light); font-family: var(--sans); text-transform: none;
  letter-spacing: 0; font-size: 14px; font-weight: 500;
}
.page-header .kicker::after { background: var(--night-line); }
.page-header .crumbs, .page-header .crumbs a { color: var(--night-ink-3); }
.page-header .crumbs a:hover { color: #fff; }
.page-header .article-meta, .page-header .hero-note { color: var(--night-ink-3); }
.page-header .answer {
  background: rgba(255, 255, 255, 0.06); border-color: var(--night-line); border-left-color: var(--sys-light);
  color: var(--night-ink-2);
}
.page-header .answer b, .page-header .answer strong { color: #fff; }
.page-header .release-notice { background: rgba(255, 255, 255, 0.06); border-color: var(--night-line); color: var(--night-ink-2); }
.page-header a:not(.btn) { color: inherit; text-decoration-color: rgba(255, 255, 255, 0.4); }
.page-header .btn { background: var(--pale-ink); color: #10101f; }
.page-header .btn:hover { background: #fff; }
.page-header .btn-secondary { background: transparent; color: var(--night-ink); border: 1px solid rgba(255, 255, 255, 0.3); }
.page-header .btn-secondary:hover { background: rgba(255, 255, 255, 0.08); }
.page-header :focus-visible { outline-color: var(--pale-ink); }
@media (max-width: 780px) {
  .page-header { padding: 118px 0 132px; }
  .page-waves { height: 110px; }
}

/* ---------- Section headings ---------- */

.section-heading .display-lg, .section-heading-left .display-lg, .section .display-lg, .section-tight .display-lg {
  letter-spacing: -0.045em; text-wrap: balance;
}
.display-md { font-family: var(--serif); font-weight: 650; letter-spacing: -0.03em; }
.section-heading .kicker, .section-heading-left .kicker, .section .kicker, .section-tight .kicker {
  font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--accent);
}
.section-deep { background: #e5eff2; }

/* ---------- Cards ---------- */

.card {
  background: #fff; border: 1px solid #d5dde7; border-radius: 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card h3 { font-family: var(--serif); font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
a.card:hover, .card-link:hover {
  transform: translateY(-3px); border-color: #b8c3d3;
  box-shadow: 0 22px 44px -26px rgba(17, 16, 32, 0.4);
}
.card-icon { background: #f3eeff; color: #7138ed; border-radius: 10px; }
.card-grid > .card:nth-child(even) .card-icon,
.card-grid-2 > .card:nth-child(even) .card-icon,
.card-grid-4 > .card:nth-child(even) .card-icon { background: #e6f6f6; color: #087e87; }
.card-cta { color: var(--accent); font-weight: 600; }
.card-cta::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; vertical-align: 2px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
  transition: transform .2s ease;
}
a.card:hover .card-cta::after, .card-link:hover .card-cta::after { transform: translate(3px, 0) rotate(45deg); }

/* Notes and answer-first summaries: the note-yellow card from the homepage. */
.info-card, .answer {
  background: #fbfbe6; border: 1px solid #d4d9b9; border-left: 3px solid #b3a34a; border-radius: 12px;
}
.answer { border-radius: 0 12px 12px 0; }

/* ---------- Steps: a real sequence, drawn as a track ---------- */

.steps { position: relative; }
.step { background: #fff; border: 1px solid #d5dde7; border-radius: 14px; }
.step::before {
  color: #7138ed; font-size: 12px; letter-spacing: 0.02em;
  border-bottom: 2px solid; border-image: linear-gradient(90deg, #7138ed, #087e87) 1;
}

/* ---------- Comparison tables ---------- */

.compare-wrap { border-radius: 16px; border-color: #d5dde7; background: #fff; }
.compare thead th { font-family: var(--serif); font-weight: 650; font-size: 16px; letter-spacing: -0.01em; }
.compare .us { background: var(--forest); color: #fff; box-shadow: none; }
.compare thead .us { color: var(--pale-ink); }
.compare td.us { border-top-color: rgba(255, 255, 255, 0.12); }
.compare .us .yes, .compare .us .win { color: #9ff0c4; }
.compare .us .no { color: #c8dcd3; }
.compare tbody tr:hover td:not(.us), .compare tbody tr:hover th { background: #f4f8fa; }

/* On a phone three columns don't fit: the table scrolls sideways and the
   row labels stay pinned on the left. */
@media (max-width: 620px) {
  .compare { min-width: 600px; font-size: 14px; }
  .compare th, .compare td { padding: 12px 14px; }
  .compare tbody th, .compare thead th:first-child {
    position: sticky; left: 0; z-index: 1; background: #fff; min-width: 132px;
    box-shadow: 1px 0 0 #e3e8ee;
  }
}

/* ---------- FAQ as a quiet list ---------- */

.faq { gap: 0; }
.faq details { background: transparent; border: 0; border-bottom: 1px solid #cdd6e1; border-radius: 0; padding: 0; }
.faq details:first-child { border-top: 1px solid #cdd6e1; }
.faq summary { padding: 20px 0; font-size: 17px; }
.faq summary::after { color: #7138ed; }
.faq details[open] summary { color: #111020; }

/* ---------- Badges ---------- */

.badge { border-color: #d5dde7; background: #fff; font-weight: 500; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7138ed; }
.badge:nth-child(even)::before { background: #087e87; }

/* ---------- The closing call to action: night again ---------- */

.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--night); border-radius: 20px; padding: 72px 32px 150px;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band .page-waves { z-index: 0; height: 130px; }
.cta-band h2 { color: var(--night-ink); font-size: clamp(32px, 4.6vw, 56px); line-height: 1; letter-spacing: -0.05em; }
.cta-band p { color: var(--night-ink-2); }
.cta-band .btn { background: var(--pale-ink); color: #10101f; }
.cta-band .btn:hover { background: #fff; }
.cta-band .btn-secondary { background: transparent; color: var(--night-ink); border-color: rgba(255, 255, 255, 0.3); }
.cta-band .kicker { color: var(--mic-light) !important; font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.cta-band .hero-note { color: var(--night-ink-3); }
.cta-band :focus-visible { outline-color: var(--pale-ink); }

/* ---------- Long-form reading ---------- */

.prose { font-size: 17px; line-height: 1.72; }
.prose p, .prose ul, .prose ol { color: #2b3445; }
.prose h2 { font-family: var(--serif); font-weight: 650; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.035em; line-height: 1.1; margin: 56px 0 16px; }
.prose h3 { font-family: var(--serif); font-weight: 650; font-size: 21px; letter-spacing: -0.02em; margin: 36px 0 10px; }
.prose a { color: #7138ed; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: #5a22d6; }
.prose blockquote { background: #fbfbe6; border-left-color: #b3a34a; }
.prose li::marker { color: #087e87; }
.prose table { border-radius: 12px; overflow: hidden; border: 1px solid #d5dde7; border-collapse: separate; border-spacing: 0; }
.prose th, .prose td { border: 0; border-bottom: 1px solid #e3e8ee; }
.prose tr:last-child td { border-bottom: 0; }
.prose th { background: #f4f8fa; font-weight: 600; }
.prose code { background: #eef1f6; }

/* ---------- Footer at night, as on the homepage ---------- */

.footer { background: #0c0a22; border-top-color: rgba(255, 255, 255, 0.1); color: var(--night-ink); }
.footer h4 { color: #8f8bb0; }
.footer-col a, .footer-tagline, .footer-bottom { color: #c4c0de; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.1); }
.footer :focus-visible { outline-color: var(--pale-ink); }

/* ---------- Motion ----------
   Under html.motion pages.js moves the header copy slower than the page and
   drifts card grids gently with the scroll. Nothing here fades in on a
   threshold; the movement is continuous and small. */
html.motion .page-header > .container,
html.motion .page-header > .container-narrow { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .card, .card-cta::after { transition: none; }
}