/* Terms & Conditions page-specific styles */
.page-hero {
  background: linear-gradient(180deg, var(--gray-50), transparent);
  padding-block: var(--space-32) var(--space-20);
  border-bottom: 1px solid var(--gray-200);
}
.page-hero .lead { color: var(--gray-600); max-width: 72ch; }
.page-hero .meta-row { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; margin-top: var(--space-12); }
.badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-round); background: var(--gray-100); color: var(--gray-700); font-size: var(--text-sm); }

.breadcrumbs ol { display: flex; gap: 8px; align-items: center; font-size: var(--text-sm); color: var(--gray-600); }
.breadcrumbs li+li::before { content: "/"; color: var(--gray-400); margin-inline: 6px; }
.breadcrumbs a { color: var(--gray-600); }
.breadcrumbs a:hover { color: var(--color-primary); }

.legal-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-24); align-items: start; }
@media (max-width: 980px) { .legal-layout { grid-template-columns: 1fr; } }

.toc { position: sticky; top: 84px; align-self: start; background: var(--color-surface); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-20); }
.toc h2 { font-size: var(--h5-size); margin-block: 0 var(--space-12); }
.toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.toc a { color: var(--color-text); text-decoration: none; font-size: var(--text-base); }
.toc a:hover { color: var(--color-primary); text-decoration: underline; }

.legal-content { display: grid; gap: var(--space-20); }
.legal-section { scroll-margin-top: 96px; }
.legal-section p { margin-block: var(--space-12); }

.defs { display: grid; grid-template-columns: 1fr; gap: 8px 16px; }
.defs dt { font-weight: 700; color: var(--gray-800); }
.defs dd { margin: 0 0 var(--space-8) 0; color: var(--gray-700); }

.list { padding-left: 1.1rem; }
.list li { margin-bottom: 8px; }
.numbered { list-style: decimal; padding-left: 1.25rem; }

.note { color: var(--gray-600); font-size: var(--text-sm); }
.update-notice { background: var(--gray-100); border: 1px solid var(--gray-200); padding: var(--space-12); border-radius: var(--radius-md); }

.cta-row { display: flex; gap: var(--space-12); flex-wrap: wrap; margin-top: var(--space-12); }