/* Shared dark editorial treatment for Talvo's guides, comparisons and legal pages. */

:root {
  --void: #060705;
  --abyss: #0a0b09;
  --canvas: #0e0f0d;
  --panel: #161714;
  --panel-2: #1d1e1a;
  --pure: #f4f3ef;
  --cloud: #e6e4dc;
  --ash: #a3a29a;
  --fog: #77766e;
  --hairline: rgba(244, 243, 239, 0.1);
  --hairline-strong: rgba(244, 243, 239, 0.17);
  --green-bright: #2fc584;
  --c-green: #0e3b27;
  --c-blue: #16283f;
  --c-violet: #251e3e;
  --c-amber: #3a2c12;
  --c-rose: #3a1b24;

  /* Keep the existing page templates wired to the new palette. */
  --paper: var(--canvas);
  --paper-deep: var(--panel-2);
  --card: var(--panel);
  --ink: var(--pure);
  --ink-soft: var(--ash);
  --muted: var(--fog);
  --faint: #62625b;
  --line: var(--hairline);
  --green: var(--green-bright);
  --green-soft: rgba(14, 159, 99, 0.16);
  --red: #e06a4f;
}

html { background: var(--void); }
body {
  background:
    radial-gradient(900px 500px at 50% -160px, rgba(14, 159, 99, 0.08), transparent 70%),
    var(--canvas);
  color: var(--pure);
}
::selection { background: var(--green); color: var(--void); }

.nav {
  position: sticky;
  top: 0;
  inset: auto 0 auto 0;
  background: rgba(6, 7, 5, 0.78);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav.scrolled {
  background: rgba(6, 7, 5, 0.88);
  box-shadow: 0 1px 0 var(--hairline);
}
.logo { color: var(--pure); }
.nav .logo { gap: 2px; margin-right: 18px; }
.nav .logo .tick {
  width: 8px;
  height: 8px;
  margin-top: 11px;
  border-radius: 50%;
  background: var(--green);
}
.nav-links { color: var(--ash); }
.nav-links a::after { background: var(--green-bright); }
.nav-links a:hover { color: var(--pure); }
.nav-cta-group { gap: 14px; }
.btn {
  background: var(--pure);
  color: var(--void);
  border-radius: 9px;
  box-shadow: none;
}
.btn:hover { background: var(--cloud); }
.btn.ghost {
  color: var(--pure);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
.btn.ghost:hover { background: rgba(244, 243, 239, 0.08); color: var(--pure); }

.page-hero {
  padding: clamp(82px, 11vw, 142px) 0 66px;
  border-bottom: 1px solid var(--hairline);
  background: radial-gradient(650px 360px at 78% 15%, rgba(14, 159, 99, 0.1), transparent 70%);
}
.hero-grid-bg {
  background-image:
    linear-gradient(rgba(244, 243, 239, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 243, 239, 0.07) 1px, transparent 1px);
  opacity: 0.5;
}
.kicker { color: var(--green-bright); }
.kicker::before { background: var(--green-bright); }
.page-hero h1 {
  color: var(--pure);
  font-family: var(--font-sans);
  font-weight: 650;
}
.page-hero h1 .serif.it { color: var(--green-bright); }
.page-hero .lede { color: var(--ash); }
.page-meta { color: var(--fog); }
.page-meta .dot { background: var(--green-bright); }

.article { padding: 68px 0 108px; }
.article .inner { margin-inline: auto; }
.article h2, .article h3 { color: var(--pure); }
.article p, .article ul, .article ol { color: var(--ash); }
.article p b, .article li b { color: var(--cloud); }
.article a.inline { text-decoration-color: var(--green); }
.article a.inline:hover { color: var(--green-bright); text-decoration-color: var(--green-bright); }

.callout {
  background: linear-gradient(135deg, rgba(14, 159, 99, 0.14), rgba(22, 23, 20, 0.92));
  border-color: rgba(47, 197, 132, 0.32);
  box-shadow: 0 20px 60px -40px rgba(14, 159, 99, 0.6);
}
.callout .ico { background: var(--green-soft); color: var(--green-bright); }
.callout p { color: var(--ash); }
.step-num { background: var(--green); color: var(--void); }

.mock, .compare-table {
  background: linear-gradient(145deg, rgba(29, 30, 26, 0.96), rgba(17, 18, 15, 0.98));
  border-color: var(--hairline-strong);
  box-shadow: 0 25px 80px -46px rgba(0, 0, 0, 0.9);
}
.mock-label, .mock-cap, .mock-note { color: var(--fog); }
.mock-row { border-top-color: var(--hairline); }
.mock-amt, .cmp-cell .val { color: var(--cloud); }
.mock-bar { background: var(--panel-2); }
.field { background: var(--panel-2); border-color: var(--hairline-strong); color: var(--cloud); }
.field .cur { color: var(--fog); }
.toggle { background: var(--green); }
.toggle.off { background: var(--panel-2); }
.pill.green { background: rgba(14, 159, 99, 0.18); color: var(--green-bright); }
.pill.red { background: rgba(224, 106, 79, 0.16); color: #f18a72; }
.pill.neutral { background: var(--panel-2); color: var(--ash); }
.strike { color: var(--fog); }
.gain { color: var(--green-bright); }
.loss { color: #f18a72; }

/* Re-map the remaining chart literals from the former light theme. */
.cf .in { background: var(--green-bright) !important; }
.cf .out, .hbar .tr i { background: var(--red) !important; }

.cmp-row { border-top-color: var(--hairline); }
.cmp-row:first-child { background: rgba(244, 243, 239, 0.04); }
.cmp-cell.head, .cmp-feature small, .cmp-cell .note { color: var(--fog); }
.cmp-cell.head.tallo, .cmp-feature { color: var(--pure); }
.cmp-yes { background: rgba(14, 159, 99, 0.18); color: var(--green-bright); }
.cmp-no { background: rgba(244, 243, 239, 0.06); color: var(--fog); }
.cmp-row .cmp-cell:nth-child(2) { background: linear-gradient(180deg, rgba(14, 159, 99, 0.11), rgba(14, 159, 99, 0.04)); }

.faq-section {
  padding: 76px 0 94px;
  background: var(--abyss);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.faq-section h2 { color: var(--pure); }
.faq-section .inner { margin-inline: auto; }
.faq-item { border-top-color: var(--hairline); }
.faq-item:last-child { border-bottom-color: var(--hairline); }
.faq-q { color: var(--cloud); }
.faq-q .ic { border-color: var(--hairline-strong); }
.faq-item.open .ic { background: var(--green); }
.faq-item.open .ic svg path { stroke: var(--void); }
.faq-a p { color: var(--ash); }

.bigcta {
  background: linear-gradient(145deg, #171914, #0d0e0c);
  color: var(--pure);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 30px 90px -55px rgba(14, 159, 99, 0.55);
}
.bigcta h2 { color: var(--pure); }
.bigcta p { color: var(--ash); }
.bigcta .btn { background: var(--pure); color: var(--void); }
.bigcta .btn.ghost { color: var(--pure); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.bigcta .btn.ghost:hover { background: rgba(244, 243, 239, 0.08); }
.bigcta .fine { color: var(--fog); }

.footer {
  padding: 86px 0 40px;
  background: var(--void);
  border-top: 1px solid var(--hairline);
}
.footer-tag, .footer-eu, .footer-links, .footer-bottom { color: var(--ash); }
.footer h5 { color: var(--fog); }
.footer-links a:hover, .footer-bottom a:hover { color: var(--pure); }
.footer-eu { border-color: var(--hairline-strong); background: var(--panel); }
.footer-bottom { border-top-color: var(--hairline); }
.footer-mark span { color: var(--panel-2); }

.legal-hero {
  padding: clamp(76px, 10vw, 126px) 0 54px;
  border-bottom: 1px solid var(--hairline);
  background: radial-gradient(620px 330px at 78% 10%, rgba(14, 159, 99, 0.1), transparent 70%);
}
.legal-hero h1 { color: var(--pure); }
.legal-hero h1 .serif.it { color: var(--green-bright); }
.legal-updated { color: var(--fog); }
.legal-wrap { padding: 60px 0 112px; }
.legal-body h2 { color: var(--pure); border-top-color: var(--hairline); }
.legal-body h3 { color: var(--cloud); }
.legal-body p, .legal-body li, .legal-body td { color: var(--ash); }
.legal-body strong { color: var(--cloud); }
.legal-body a { color: var(--green-bright); text-decoration-color: rgba(47, 197, 132, 0.5); }
.legal-body a:hover { color: var(--pure); }
.legal-body th { color: var(--fog); border-bottom-color: var(--hairline-strong); }
.legal-body td { border-bottom-color: var(--hairline); }
.legal-crossnav { border-top-color: var(--hairline); }
.legal-crossnav a { color: var(--ash); }
.legal-crossnav a:hover { color: var(--pure); }
.danger-card {
  background: rgba(224, 106, 79, 0.1);
  border-color: rgba(224, 106, 79, 0.36);
}
.danger-icon { background: rgba(224, 106, 79, 0.2); color: #f18a72; }
.danger-text h4 { color: var(--cloud); }
.danger-text p { color: var(--ash); }
.danger-btn { background: #b94e3a; color: var(--pure); }

/* Gentle reveal keeps the long pages feeling like part of the same product. */
.content-motion .article .inner > *,
.content-motion .legal-body > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
}
.content-motion .article .inner > *.is-visible,
.content-motion .legal-body > *.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 860px) {
  .nav-inner { padding: 14px 0; }
  .nav-cta-group .btn, .nav > .wrap > .btn { padding: 11px 16px; font-size: 13px; }
  .article { padding-top: 48px; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 40px); }
  .page-hero { padding-top: 72px; padding-bottom: 48px; }
  .page-hero h1 { font-size: clamp(38px, 12vw, 56px); }
  .page-hero .lede { font-size: 16px; }
  .legal-hero { padding-top: 68px; padding-bottom: 42px; }
  .legal-wrap { padding-top: 42px; }
  .legal-body table { display: block; overflow-x: auto; white-space: normal; }
  .compare-table { margin-inline: -4px; }
  .cmp-cell { min-width: 0; overflow-wrap: anywhere; }
  .bigcta { border-radius: 24px; }
  .footer { padding-top: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .content-motion .article .inner > *,
  .content-motion .legal-body > * { opacity: 1; transform: none; transition: none; }
}