/* content.css: the reading pages in the brand (blog, about, privacy, terms).
   Their words and SEO are locked by tests/seo/contentPages.test.ts; this is the look only.
   Tokens from site.css (light and dark), motion from motion.css. */

/* ── an article ─────────────────────────────────────────────────────── */
.prose{max-width:760px;margin-inline:auto;padding:22px var(--gut) 56px}
.prose .crumbs{padding-top:0;margin-bottom:10px;align-items:center}
.prose .crumbs a,.blog-index .crumbs a{display:inline-block;padding:10px 2px}
.prose .eyebrow,.blog-index .eyebrow{display:inline-block;padding:5px 14px;border-radius:999px;background:var(--surface);color:var(--accent-ink);font-size:13px;font-weight:800;letter-spacing:.04em;margin-bottom:12px}
.prose h1,.blog-index h1{font-size:clamp(30px,5.4vw,48px);font-weight:800;line-height:1.3;color:var(--head);margin:0 0 12px;text-wrap:balance}
.prose .tagline,.blog-index .tagline{font-size:clamp(16px,2.4vw,20px);color:var(--ink-2);margin:0 0 14px}
.prose .meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--ink-2);font-size:13.5px;margin-bottom:24px}
.prose .intro{font-size:clamp(16.5px,2vw,18.5px);color:var(--ink);line-height:1.95;border-inline-start:3px solid var(--cyan);padding-inline-start:16px;margin:0 0 8px}
.prose h2{font-size:clamp(21px,2.8vw,26px);font-weight:800;color:var(--head);margin:40px 0 12px;text-wrap:balance}
.prose p,.prose li{color:var(--ink-2);font-size:16.5px;line-height:1.95}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px;padding-inline-start:22px;display:grid;gap:6px}
.prose strong{color:var(--ink)}
.prose a{color:var(--accent-ink)}
.prose .cta{margin:40px 0 0;padding:28px 24px;border-radius:var(--r-lg);background:var(--navy);text-align:center;display:grid;justify-items:center;gap:14px}
.prose .cta h3{margin:0;font-size:clamp(19px,2.6vw,24px);font-weight:800;color:oklch(100% 0 0);text-wrap:balance}
.prose .cta .btn{color:var(--on-cyan)}
:root[data-theme="dark"] .prose .cta{background:oklch(24% .08 271)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .prose .cta{background:oklch(24% .08 271)}}
.prose .related{margin-top:36px;display:grid;gap:8px}
.prose .related .lbl{font-weight:800;color:var(--head);font-size:15px}
.prose .related a{display:block;padding:13px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-weight:700;text-decoration:none}
.prose .related a:hover{border-color:var(--cyan);color:var(--accent-ink)}

/* ── the blog index ──────────────────────────────────────────────────── */
.blog-index{max-width:1000px;margin-inline:auto;padding:22px var(--gut) 56px}
.blog-index .crumbs{padding-top:0;margin-bottom:10px;align-items:center}
.posts{display:grid;gap:14px;margin-top:22px}
@media (min-width:720px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post{display:grid;align-content:start;gap:8px;padding:22px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg);color:inherit;text-decoration:none}
.post .eyebrow{justify-self:start;margin:0}
.post h2{margin:0;font-size:20px;font-weight:800;color:var(--head);line-height:1.5}
.post p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.8}
.post .more{color:var(--accent-ink);font-weight:800;font-size:14px;margin-top:auto}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .post{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
  .post:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:var(--shadow)}
}

/* ── privacy and terms: both languages are in the page, the visitor's one shows ── */
[data-lang="en"]{display:none}
html[lang="en"] [data-lang="ar"]{display:none}
html[lang="en"] [data-lang="en"]{display:block}
.legal h1 .accent{color:var(--accent-ink)}
.legal .legal-lead{font-size:clamp(16.5px,2vw,18.5px);color:var(--ink);line-height:1.95;margin:0 0 12px}
.legal .legal-updated{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:700;margin-bottom:18px}
.legal .legal-back{display:inline-block;margin-top:18px;padding:10px 0;font-weight:800;text-decoration:none}
.legal table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 14px}
.legal th,.legal td{border:1px solid var(--line);padding:8px 10px;text-align:start;vertical-align:top}
.legal th{background:var(--surface);color:var(--head)}
.legal .tbl,.legal .table-wrap{overflow-x:auto}

/* ── about ────────────────────────────────────────────────────────────── */
.about{max-width:1000px;margin-inline:auto;padding:22px var(--gut) 56px;display:grid;gap:48px}
.about .gradient{color:var(--accent-ink)}
.about-hero{display:grid;gap:14px;justify-items:start;padding-top:18px}
.about-hero .badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;background:var(--surface);color:var(--accent-ink);font-size:13px;font-weight:800}
.about-hero .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.about-hero h1{font-size:clamp(36px,7vw,64px);font-weight:800;line-height:1.2;color:var(--head);margin:0}
.about-hero p{font-size:clamp(16px,2.2vw,19px);color:var(--ink-2);line-height:1.9;max-width:62ch;margin:0}
.about .stats{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.about .stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.about .stat{background:var(--surface);border-radius:var(--r);padding:18px 16px;display:grid;gap:10px;align-content:start}
.about .stat-value{width:34px;height:4px;border-radius:2px;background:var(--cyan)}
.about .stat-label{font-weight:800;color:var(--head);line-height:1.6}
.about .section-title{display:grid;gap:4px;margin-bottom:18px}
.about .section-title h2,.about .cta-section h2{font-size:clamp(24px,3.6vw,36px);font-weight:800;color:var(--head);margin:0}
.about .section-title p{color:var(--ink-2);margin:0}
.about .mission{display:grid;gap:12px}
@media (min-width:720px){.about .mission{grid-template-columns:repeat(2,minmax(0,1fr))}}
.about .mission-card{border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:8px;align-content:start;background:var(--bg)}
.about .mission-card .icon{width:40px;height:40px;border-radius:12px;background:var(--surface);position:relative}
.about .mission-card .icon::after{content:"";position:absolute;inset:13px;border-radius:4px;background:var(--cyan)}
.about .mission-card h3{margin:0;font-size:18px;font-weight:800;color:var(--head)}
.about .mission-card p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.85}
.about .values{display:grid;gap:10px}
@media (min-width:720px){.about .values{grid-template-columns:repeat(2,minmax(0,1fr))}}
.about .value{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border-radius:var(--r);padding:18px}
.about .value .emoji{flex:none;width:10px;height:10px;margin-top:9px;border-radius:50%;background:var(--cyan)}
.about .value h4{margin:0 0 2px;font-size:16.5px;font-weight:800;color:var(--head)}
.about .value p{margin:0;color:var(--ink-2);font-size:14.5px}
.about .cta-section{background:var(--navy);border-radius:var(--r-lg);padding:36px 24px;text-align:center;display:grid;justify-items:center;gap:10px}
.about .cta-section h2{color:oklch(100% 0 0)}
.about .cta-section .gradient{color:var(--cyan)}
.about .cta-section p{color:oklch(86% .03 260);margin:0}
.about .cta-btn{display:inline-grid;place-items:center;min-height:50px;margin-top:8px;padding:0 30px;border-radius:12px;background:var(--cyan);color:var(--on-cyan);font-weight:800;text-decoration:none}
:root[data-theme="dark"] .about .cta-section{background:oklch(24% .08 271)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .about .cta-section{background:oklch(24% .08 271)}}