/* Content pages (policies, terms, about, contact). */
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

.cp-hero { padding-block: var(--space-5) var(--space-6); margin-block-end: var(--space-6); border-block-end: 1px solid var(--border); }
.cp-hero nav { color: var(--muted); margin-block-end: var(--space-3); }
.cp-hero nav a { color: inherit; }
.cp-hero h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.375rem); font-weight: 800; margin-block-end: var(--space-2); }
.cp-lead { font-size: 1.0625rem; color: var(--muted); max-inline-size: 62ch; margin: 0; }
.cp-updated { color: var(--muted); margin: var(--space-3) 0 0; }

.cp-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 960px) { .cp-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-7); } }

.cp-body { max-inline-size: 72ch; font-size: 1.0625rem; line-height: 1.9; }
.cp-body h2 { font-size: 1.25rem; font-weight: 700; margin: var(--space-6) 0 var(--space-3); padding-block-start: var(--space-2); scroll-margin-block-start: 96px; }
.cp-body h2:first-child { margin-block-start: 0; }
.cp-body h3 { font-size: 1.0625rem; margin: var(--space-5) 0 var(--space-2); }
.cp-body p { margin-block-end: var(--space-4); }
.cp-body ul, .cp-body ol { margin: 0 0 var(--space-4); padding-inline-start: var(--space-5); }
.cp-body li { margin-block-end: var(--space-2); }
.cp-body li::marker { color: var(--accent); font-weight: 700; }
.cp-body strong { font-weight: 700; color: var(--foreground); }
.cp-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); margin: 0 0 var(--space-4); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-inline-start: 4px solid var(--accent); }
.cp-note svg { flex: none; inline-size: 22px; block-size: 22px; margin-block-start: 3px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.cp-note p { margin: 0; }

.cp-aside { display: grid; gap: var(--space-4); align-content: start; }
@media (min-width: 960px) { .cp-aside { position: sticky; inset-block-start: 96px; } }
.cp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.cp-card h2 { font-size: 1rem; margin-block-end: var(--space-3); }
.cp-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: var(--space-1); }
.cp-toc li { counter-increment: toc; }
.cp-toc a { display: flex; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); text-decoration: none; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.cp-toc a::before { content: counter(toc); flex: none; inline-size: 22px; block-size: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--steel-100); color: var(--foreground); font-size: .75rem; font-weight: 700; }
.cp-toc a:hover { background: var(--steel-50); color: var(--foreground); }
.cp-contact, .cp-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cp-contact a { display: flex; align-items: center; gap: var(--space-3); min-block-size: 44px; padding-inline: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; font-weight: 600; }
.cp-contact a:hover { border-color: var(--accent); }
.cp-contact svg { inline-size: 20px; block-size: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-links a { display: block; padding-block: var(--space-1); color: var(--muted); }
.cp-links a:hover { color: var(--foreground); }

.cp-group { margin-block-end: var(--space-6); }
.cp-group h2 { font-size: 1.125rem; }
.cp-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cp-tile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: 64px; padding-inline: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; font-weight: 600; transition: border-color .15s, box-shadow .15s; }
.cp-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-3); }
.cp-tile svg { inline-size: 20px; block-size: 20px; fill: none; stroke: var(--muted); stroke-width: 2; }