/* Long-form guide pages and the cost calculator. Loaded after style.css; reuses the .legal-page text styles. */
.article { max-width: 760px; }
.article .lede { font-size: 1.05rem; color: var(--text-primary); }
.article .updated { color: var(--text-secondary); }
.article ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.article strong { color: var(--text-primary); }

.table-scroll { overflow-x: auto; margin-bottom: 1.5rem; }
.article table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.article th, .article td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary);
}
.article th { color: var(--text-primary); font-weight: 600; }
.article td.drawback { color: #f08787; }

.article blockquote {
  border-left: 3px solid var(--amber);
  padding: 0.75rem 1.25rem;
  margin: 0 0 1rem;
  background: rgba(255,255,255,0.03);
  border-radius: 0 8px 8px 0;
}
.article blockquote p { margin: 0; color: var(--text-primary); }

.cta-box {
  margin: 2.5rem 0 1rem;
  padding: 1.5rem;
  border: 1px solid var(--amber);
  border-radius: 12px;
  background: var(--amber-glow);
}
.cta-box p { color: var(--text-primary); }
.cta-box .btn { margin-top: 0.25rem; }

.sources li { font-size: 0.85rem; }

/* Cost calculator */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.calc .form-group { margin: 0; }
.calc .form-group.wide { grid-column: 1 / -1; }
.calc-results {
  padding: 1.5rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 1.5rem;
}
.calc-results .big { font-family: var(--font-display); font-size: 1.6rem; color: var(--amber); }

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