/*
 * Content pages
 * -------------
 * Shared component classes for long-form, non-app pages: legal documents
 * (terms, privacy, security), the developer/API reference pages, marketing
 * comparison pages, and blog articles. Loaded after tokens.css and style.css.
 *
 * Built on the token layer (tokens.css) rather than hardcoded hex, per
 * project convention. A handful of literal rem values remain where no
 * token on the 8px spacing scale or type scale matches cleanly (2.5rem
 * section gaps, 1.1rem/1.2rem sub-headings) — those are plain CSS values,
 * not the hardcoded-hex/inline-style pattern this file replaces.
 */
/* ============================================================
   Legal documents (terms.html, privacy.html, security.html)
   ============================================================ */
.legal-doc {
  padding: 120px 0 80px;
  background: var(--zh-bg-subtle);
}
.legal-card {
  max-width: 800px;
  margin: 0 auto;
  background: var(--zh-surface);
  border-radius: var(--zh-radius-card);
  padding: var(--zh-space-7);
  box-shadow: var(--zh-shadow-md);
}
.legal-card > header {
  text-align: center;
  margin-bottom: var(--zh-space-7);
}
.legal-card > header h1 {
  font-size: var(--zh-text-h1);
  font-weight: 700;
  margin-bottom: var(--zh-space-4);
  color: var(--text-color);
}
.legal-card > header > p {
  color: var(--zh-muted);
  font-size: 1.1rem;
}
.legal-callout {
  border-radius: var(--zh-radius-ctl);
  padding: var(--zh-space-4);
  margin-top: var(--zh-space-6);
  border: 1px solid;
}
.legal-callout--brand {
  background: linear-gradient(135deg, rgba(79, 117, 255, 0.1) 0%, rgba(123, 154, 255, 0.1) 100%);
  border-color: rgba(79, 117, 255, 0.2);
}
.legal-callout--success {
  background: linear-gradient(135deg, rgba(56, 161, 105, 0.1) 0%, rgba(79, 117, 255, 0.1) 100%);
  border-color: #9ae6b4;
}
.legal-callout p {
  margin: 0;
  font-weight: 600;
  color: var(--text-color);
}
.legal-body {
  line-height: 1.7;
  color: var(--text-color);
}
.legal-body section {
  margin-bottom: 2.5rem;
}
.legal-body h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--zh-space-4);
  color: var(--zh-brand-strong);
}
.legal-body h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: var(--zh-space-5) 0 var(--zh-space-2);
  color: var(--text-color);
}
.legal-body ul {
  padding-left: var(--zh-space-5);
  margin-bottom: var(--zh-space-4);
}
.legal-alert {
  border-radius: var(--zh-radius-ctl);
  padding: var(--zh-space-5);
  margin-bottom: var(--zh-space-4);
  border: 1px solid;
}
.legal-alert--danger {
  background: var(--zh-danger-tint);
  border-color: var(--zh-danger);
}
.legal-alert p {
  margin: 0;
  font-weight: 600;
  color: var(--text-color);
}
.legal-summary {
  border-radius: var(--zh-radius-ctl);
  padding: var(--zh-space-5);
  margin-top: var(--zh-space-7);
  border: 1px solid;
}
.legal-summary--brand {
  background: #f0f4ff;
  border-color: rgba(79, 117, 255, 0.2);
}
.legal-summary--success {
  background: var(--zh-success-tint);
  border-color: #9ae6b4;
}
.legal-summary h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--zh-space-4);
  color: var(--text-color);
}
.legal-summary p {
  margin: 0;
  color: var(--text-color);
}
/* ============================================================
   Shared utilities (content pages only)
   ============================================================ */
.u-text-center {
  text-align: center;
}
.u-mt-6 {
  margin-top: var(--zh-space-6);
}
/* ============================================================
   Content grids
   A .blog-listing wrapper around a grid of .blog-post cards, used on
   developers.html, pastebin-alternative.html and similar pages.
   ============================================================ */
.content-grid {
  display: grid;
  margin-bottom: var(--zh-space-6);
}
.content-grid--single {
  grid-template-columns: 1fr;
}
.content-grid--single-tight {
  grid-template-columns: 1fr;
  gap: var(--zh-space-1);
}
.content-grid--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--zh-space-6);
}
.content-grid--responsive {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.content-grid--triple {
  grid-template-columns: 1fr 1fr 1fr;
}
.blog-post--bordered {
  border: 1px solid var(--zh-border);
  padding: var(--zh-space-5);
  border-radius: var(--zh-radius-ctl);
  text-align: center;
}
.blog-post--bordered.blog-post--tight {
  min-width: 0;
}
.blog-post--spaced {
  margin-bottom: var(--zh-space-6);
}
.plain-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.u-opacity-muted {
  opacity: 0.6;
}
.u-relative {
  position: relative;
}
/* ============================================================
   Comparison pages (pastebin-alternative.html, blog comparisons)
   ============================================================ */
.features-grid--narrow {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.table-scroll {
  overflow-x: auto;
  margin: var(--zh-space-6) 0;
}
.compare-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  background: var(--zh-surface);
  border-radius: var(--zh-radius-ctl);
  overflow: hidden;
}
.compare-table th {
  background: var(--zh-brand);
  color: var(--zh-on-brand);
  padding: var(--zh-space-4);
  text-align: left;
  font-weight: 600;
}
.compare-table td {
  padding: var(--zh-space-4);
  border-bottom: 1px solid var(--zh-border);
}
.compare-table tbody tr:nth-child(odd) {
  background: var(--zh-bg-subtle);
}
.compare-table tbody tr:last-child td {
  border-bottom: none;
}
.icon-good {
  color: var(--zh-success);
}
.icon-warn {
  color: var(--zh-warn);
}
.icon-bad {
  color: var(--zh-danger);
}
.compare-alternatives {
  max-width: 860px;
  margin: var(--zh-space-6) auto;
  display: flex;
  flex-direction: column;
  gap: var(--zh-space-6);
}
.process-steps {
  display: flex;
  gap: var(--zh-space-6);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--zh-space-6);
}
.migration-guide {
  max-width: 800px;
  margin: var(--zh-space-6) auto;
}
.migration-guide > div:not(:last-child) {
  margin-bottom: var(--zh-space-6);
}
.migration-guide h3 {
  color: var(--zh-brand-strong);
  margin-bottom: var(--zh-space-4);
}
.migration-guide ol {
  line-height: 1.8;
}
.pricing-lead {
  text-align: center;
  margin-bottom: var(--zh-space-4);
}
.pricing-lead + p {
  text-align: center;
  color: var(--zh-muted);
  margin-bottom: 3rem;
}
.pricing-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--zh-on-brand);
  padding: 5px 20px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}
.pricing-badge--primary {
  background: var(--zh-brand-strong);
}
.pricing-badge--muted {
  background: #6c757d;
}
.pricing-card--muted h3,
.pricing-card--muted .price,
.pricing-card--muted .plan-description,
.pricing-card--muted .pricing-features {
  color: #6c757d;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: var(--zh-space-6) 0;
}
a.feature-card {
  text-decoration: none;
  color: inherit;
}
.hero h2 {
  color: var(--zh-brand-strong);
  margin-bottom: var(--zh-space-4);
}
.btn--large {
  font-size: 1.25rem;
  padding: 1rem 2rem;
}
.hero-note {
  margin-top: var(--zh-space-4);
  opacity: 0.9;
}
.faq-list {
  max-width: 800px;
  margin: var(--zh-space-6) auto;
  display: flex;
  flex-direction: column;
  gap: var(--zh-space-5);
}
/* ============================================================
   about.html "Why Privacy-First Matters" (dark section)
   ============================================================ */
.citation-link {
  color: rgba(255, 255, 255, 0.7);
}
.section-lead-dark {
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: var(--zh-space-6) auto;
  font-size: 1.1rem;
}
/* ============================================================
   contact.html
   ============================================================ */
.contact-option p.contact-note {
  margin-top: var(--zh-space-4);
}
.contact-before-support {
  margin-top: var(--zh-space-5);
}
.contact-before-support ul {
  list-style: none;
}
/* ============================================================
   api-docs.html
   ============================================================ */
.endpoint-section--plain {
  padding: 20px;
}
.endpoint-section--plain h3 {
  margin-top: var(--zh-space-6);
  margin-bottom: var(--zh-space-4);
}
.endpoint-intro {
  margin-bottom: var(--zh-space-6);
}
.doc-list {
  margin-left: var(--zh-space-6);
  margin-bottom: var(--zh-space-6);
}
.doc-toc-sublist {
  margin-left: var(--zh-space-5);
  margin-top: var(--zh-space-2);
}
.code-block--spaced {
  margin-bottom: var(--zh-space-6);
}
.doc-callout--warn {
  background: var(--zh-warn-tint);
  border: 1px solid var(--zh-warn);
  border-radius: var(--zh-radius-ctl);
  padding: var(--zh-space-5);
  margin-bottom: var(--zh-space-6);
}
.endpoint-header p {
  margin: 0.5rem 0 0 0;
  opacity: 0.9;
}
.field-note {
  margin-top: var(--zh-space-2);
  font-size: 0.875rem;
  color: var(--zh-muted);
}
/* ============================================================
   checkout.html / checkout-success.html
   ============================================================ */
.checkout-loading {
  text-align: center;
  padding: var(--zh-space-7);
}
.checkout-loading .spinner {
  margin: 0 auto var(--zh-space-4);
  width: 40px;
  height: 40px;
}
.account-section--spaced {
  margin-bottom: var(--zh-space-6);
}
.logout-btn {
  background: none;
  border: 1px solid var(--zh-border);
  color: var(--zh-muted);
  padding: var(--zh-space-2) var(--zh-space-4);
  border-radius: 6px;
  cursor: pointer;
}
.plan-summary {
  background: var(--zh-bg-subtle);
  padding: var(--zh-space-5);
  border-radius: var(--zh-radius-btn);
  border: 2px solid var(--zh-border);
}
.plan-summary-note {
  margin-top: var(--zh-space-4);
  color: var(--zh-muted);
  text-align: center;
}
.success-icon {
  text-align: center;
  margin-bottom: var(--zh-space-6);
}
.success-icon svg {
  margin: 0 auto;
}
.success-actions {
  margin-top: var(--zh-space-6);
}
.loading-block {
  text-align: center;
  padding: var(--zh-space-6);
}
/* ============================================================
   Blog article comparison tables (vs-pastebin, vs-github-gist, ...)
   ============================================================ */
.article-table {
  width: 100%;
}
.article-table thead tr {
  background: var(--zh-bg-subtle);
}
.article-table th {
  padding: var(--zh-space-4);
  text-align: left;
  border-bottom: 2px solid var(--zh-border);
}
.article-table td {
  padding: var(--zh-space-4);
  border-bottom: 1px solid var(--zh-border);
}
.icon-brand {
  color: var(--zh-brand);
}
.list-unstyled {
  list-style: none;
}
.article-cta-box {
  background: var(--zh-bg-subtle);
  padding: var(--zh-space-6);
  border-radius: var(--zh-radius-ctl);
  margin: var(--zh-space-6) 0;
  text-align: center;
}
.article-cta-box h3 {
  margin-top: 0;
}
.article-cta-box p {
  text-align: center;
}
.article-cta-box .btn {
  margin: var(--zh-space-2);
}
/* ============================================================
   zerohost-cli-launch blog post
   ============================================================ */
.terminal-promo {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: var(--zh-on-brand);
  padding: var(--zh-space-6);
  border-radius: var(--zh-radius-ctl);
  text-align: center;
}
.terminal-promo--spaced {
  margin: var(--zh-space-6) 0;
}
.terminal-promo__icon {
  font-size: 3rem;
  margin-bottom: var(--zh-space-4);
}
.terminal-promo__heading {
  color: var(--zh-on-brand);
  margin-top: var(--zh-space-2);
  margin-bottom: var(--zh-space-2);
}
.terminal-promo__heading--tight {
  margin-top: 0;
  margin-bottom: var(--zh-space-4);
}
.terminal-promo__text {
  color: #e2e8f0;
  margin-bottom: var(--zh-space-4);
  text-align: center;
}
.terminal-promo__text--footer {
  color: #e2e8f0;
  margin-top: var(--zh-space-4);
  margin-bottom: var(--zh-space-5);
  text-align: center;
}
.terminal-promo__command {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 1.1rem;
  margin: 0;
  display: inline-block;
}
.pricing-card--cli {
  position: relative;
  background: var(--zh-surface);
  border: 2px solid var(--zh-brand);
  border-radius: var(--zh-radius-btn);
  padding: var(--zh-space-6);
  margin: var(--zh-space-6) 0;
  margin-top: var(--zh-space-7);
  box-shadow: 0 10px 30px rgba(79, 117, 255, 0.15);
  text-align: center;
}
.pricing-card--cli h3 {
  margin-top: 0;
  margin-bottom: var(--zh-space-2);
}
.pricing-card--cli .price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--zh-brand);
  margin-bottom: var(--zh-space-2);
}
.pricing-card--cli .price-period {
  font-weight: normal;
}
.pricing-card--cli .plan-description {
  margin-bottom: var(--zh-space-5);
  text-align: center;
}
.pricing-features--tight {
  margin: 0 0 var(--zh-space-6) 0;
}
/* ============================================================
   share-counter-without-tracking blog post
   ============================================================ */
.article-update-note {
  background: var(--zh-bg-subtle);
  border-left: 4px solid var(--zh-brand);
  border-radius: var(--zh-radius-ctl);
  padding: 1.25rem 1.5rem;
  margin: var(--zh-space-6) 0;
}
.article-update-note p {
  margin: 0 0 0.75rem;
}
.article-update-note p:first-child {
  font-weight: 600;
  color: var(--text-color);
}
.article-update-note p:last-child {
  margin: 0;
}
.blog-post--bordered .card-icon {
  font-size: 2rem;
  margin-bottom: var(--zh-space-4);
}
.step-number {
  background: var(--zh-brand);
  color: var(--zh-on-brand);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--zh-space-4);
  font-weight: bold;
}
.blog-post pre,
.blog-listing pre {
  margin: var(--zh-space-4) 0;
  text-align: left;
  overflow-x: auto;
}
/* ============================================================
   Problem/solution showcase panels (developers.html "Why ZeroHost")
   ============================================================ */
.showcase-panel {
  padding: var(--zh-space-6);
  border-radius: var(--zh-radius-btn);
  position: relative;
  overflow: hidden;
  border: 1px solid;
}
.showcase-panel--danger {
  border-color: #fed7e2;
  background: linear-gradient(135deg, var(--zh-danger-tint) 0%, #fed7e2 100%);
}
.showcase-panel--success {
  border-color: #c6f6d5;
  background: linear-gradient(135deg, var(--zh-success-tint) 0%, #c6f6d5 100%);
}
.showcase-panel__decor {
  position: absolute;
  border-radius: 50%;
}
.showcase-panel__decor--tr {
  top: -10px;
  right: -10px;
  width: 60px;
  height: 60px;
  opacity: 0.1;
}
.showcase-panel__decor--bl {
  bottom: -20px;
  left: -20px;
  width: 80px;
  height: 80px;
  opacity: 0.05;
}
.showcase-panel--danger .showcase-panel__decor {
  background: var(--zh-danger);
}
.showcase-panel--success .showcase-panel__decor {
  background: var(--zh-success);
}
.showcase-panel__head {
  display: flex;
  align-items: center;
  margin-bottom: var(--zh-space-5);
}
.showcase-panel__icon {
  color: var(--zh-on-brand);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--zh-space-4);
  font-size: 1.5rem;
}
.showcase-panel--danger .showcase-panel__icon {
  background: var(--zh-danger);
  box-shadow: 0 4px 15px rgba(229, 62, 62, 0.3);
}
.showcase-panel--success .showcase-panel__icon {
  background: linear-gradient(135deg, var(--zh-success) 0%, #48bb78 100%);
  box-shadow: 0 4px 15px rgba(56, 161, 105, 0.3);
}
.showcase-panel__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}
.showcase-panel--danger .showcase-panel__title {
  color: #c53030;
}
.showcase-panel--success .showcase-panel__title {
  color: #2f855a;
}
.showcase-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.showcase-panel__list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--zh-space-4);
  padding: var(--zh-space-3);
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--zh-radius-ctl);
  border-left: 4px solid;
}
.showcase-panel__list li:last-child {
  margin-bottom: 0;
}
.showcase-panel--danger .showcase-panel__list li {
  border-left-color: var(--zh-danger);
}
.showcase-panel--success .showcase-panel__list li {
  border-left-color: var(--zh-success);
}
.showcase-panel__marker {
  font-weight: bold;
  margin-right: var(--zh-space-2);
  font-size: 1.1rem;
}
.showcase-panel--danger .showcase-panel__marker {
  color: var(--zh-danger);
}
.showcase-panel--success .showcase-panel__marker {
  color: var(--zh-success);
}
.showcase-panel__item-title {
  color: #2f855a;
}
.showcase-panel__item-desc {
  color: var(--zh-muted);
  font-size: 0.9rem;
}
/* ============================================================
   Brand-inverse CTA section (dark/blue band with a centred CTA)
   ============================================================ */
.share-section--brand {
  background: var(--zh-brand-strong);
  color: var(--zh-on-brand);
}
.share-section--brand .share-header h2,
.share-section--brand .share-header > p {
  color: var(--zh-on-brand);
}
.share-section--brand .share-header > p {
  color: rgba(255, 255, 255, 0.9);
}
.share-container--center {
  text-align: center;
}
.cta-actions {
  margin: var(--zh-space-6) 0;
}
.cta-actions .btn-primary--inverse {
  background: var(--zh-on-brand);
  color: var(--zh-brand-strong);
  margin: 0 var(--zh-space-2);
}
.cta-actions .btn-outline--inverse {
  border-color: var(--zh-on-brand);
  color: var(--zh-on-brand);
  margin: 0 var(--zh-space-2);
}
.cta-checklist {
  display: flex;
  justify-content: center;
  gap: var(--zh-space-6);
  flex-wrap: wrap;
  margin-top: var(--zh-space-4);
}