/* ═══════════════════════════════════════════════
   W3bkit Solutions: Terms of Service
   A reading page: one comfortable column with a sticky contents list.
   ═══════════════════════════════════════════════ */

.terms { background: var(--offwhite); }
.terms-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }

/* Contents */
.terms-toc { position: sticky; top: 96px; }
.terms-toc-title { font-size: .86rem; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.terms-toc ol { list-style: none; display: grid; gap: 2px; border-left: 2px solid var(--gray-200); }
.terms-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: .9rem; color: var(--gray-700); line-height: 1.4; }
.terms-toc a:hover { color: var(--blue); border-left-color: var(--blue); }

/* Body */
.terms-body { max-width: 70ch; }
.terms-updated { font-size: .88rem; color: var(--gray-500); margin-bottom: 8px; }
.terms-intro { font-size: 1.08rem; color: var(--navy); line-height: 1.7; padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--gray-200); }
.terms-body section { padding-top: 32px; scroll-margin-top: 96px; }
.terms-body h2 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--navy); line-height: 1.25; margin-bottom: 12px; }
.terms-body p, .terms-body li { font-size: 1rem; color: var(--gray-700); line-height: 1.75; }
.terms-body p + p, .terms-body p + ul { margin-top: 12px; }
.terms-body ul { list-style: none; display: grid; gap: 12px; }
.terms-body li { position: relative; padding-left: 20px; }
.terms-body li::before { content: ''; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.terms-body strong { color: var(--navy); }
.terms-body a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .terms-layout { grid-template-columns: 1fr; gap: 32px; }
  .terms-toc { position: static; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 18px 20px; }
  .terms-toc ol { columns: 2; column-gap: 24px; display: block; border-left: 0; }
  .terms-toc a { padding-left: 0; border-left: 0; margin-left: 0; }
}
@media (max-width: 480px) {
  .terms-toc ol { columns: 1; }
}