/* CMS content pages (blog, landing pages, FAQ, Tadamer stories). Ours, not
   vendored. Uses tokens.css variables; direction follows <html dir>. */
.join-content-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;margin-top:24px;font-size:15px}
.join-content-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:5px}
.content-page{background:var(--paper);color:var(--ink);min-height:100vh;font-family:var(--font)}
.content-page .header{position:relative}
/* The vendored header rules (updates.css: white logo + white nav; languages.css:
   white chip) assume the pink hero. On the paper background they are invisible,
   so content pages set the header back to ink. */
.content-page .header .brand img{filter:brightness(0) saturate(100%) invert(8%) sepia(28%) saturate(1751%) hue-rotate(195deg) brightness(94%) contrast(99%)} /* = styles.css .brand img */
.content-page .header nav a{color:var(--ink)}
.content-page .language-switch{border-color:#14132e33;background:#14132e0d}
.content-page .language-switch a{color:var(--ink)}
.content-page .language-switch a:focus-visible{outline-color:#7751ec}
.content-main{width:min(760px,calc(100% - 40px));margin:0 auto;padding:24px 0 96px}
.content-header{margin-bottom:32px}
.content-header h1{font-family:var(--font-display);font-size:clamp(32px,5.5vw,52px);line-height:1.08;letter-spacing:-.02em;margin:0 0 16px}
.content-eyebrow,.content-back{display:inline-block;font-size:14px;margin-bottom:14px;color:#14132ea6}
.content-back:hover{text-decoration:underline;text-underline-offset:5px}
.content-lead{font-size:20px;line-height:1.45;margin:0 0 18px}
blockquote.content-lead{border-inline-start:4px solid var(--brand-pink);padding-inline-start:16px;font-style:normal}
.content-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:#14132ea6;margin:0 0 20px}
.content-cover img,.content-figure img{width:100%;height:auto;border-radius:22px;display:block}
.content-figure{margin:28px 0}
.content-figure figcaption{font-size:13px;color:#14132ea6;margin-top:8px}
.content-body{font-size:18px;line-height:1.65}
.content-body h2{font-family:var(--font-display);font-size:clamp(24px,3.2vw,32px);line-height:1.2;margin:40px 0 12px}
.content-body h3{font-size:22px;line-height:1.3;margin:30px 0 10px}
.content-body h4{font-size:18px;margin:24px 0 8px}
.content-body p{margin:0 0 18px}
.content-body ul,.content-body ol{padding-inline-start:24px;margin:0 0 18px}
.content-body li{margin-bottom:8px}
.content-body a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--brand-pink)}
.content-body blockquote{margin:24px 0;padding:16px 20px;border-radius:18px;background:#fff1f9;border-inline-start:4px solid var(--brand-pink)}
.content-faq{margin-top:48px}
.content-faq h2{font-family:var(--font-display);font-size:clamp(24px,3.2vw,32px);margin:0 0 16px}
.content-faq details{border-top:1px solid #14132e22;padding:14px 0}
.content-faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.content-faq summary::-webkit-details-marker{display:none}
.content-faq summary::after{content:'+';font-size:22px;line-height:1;color:#14132ea6}
.content-faq details[open] summary::after{content:'–'}
.content-faq summary h3{font-size:19px;line-height:1.3;margin:0;font-weight:600}
.content-faq .content-body{font-size:17px;margin-top:10px}
.content-faq{interpolate-size:allow-keywords}
.content-faq details::details-content{block-size:0;overflow-y:clip;opacity:0;transition:block-size 200ms var(--ease-out),opacity 200ms var(--ease-out),content-visibility 200ms allow-discrete}
.content-faq details[open]::details-content{block-size:auto;opacity:1}
.content-cta{margin:40px 0}
.content-cta .button{display:inline-block;padding:14px 26px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;position:relative;isolation:isolate;overflow:hidden;transition:transform 160ms var(--ease-out)}
.content-cta .button:active{transform:scale(.97)}
.content-related{margin-top:48px;border-top:1px solid #14132e22;padding-top:24px}
.content-related h2{font-size:22px;margin:0 0 12px}
.content-related ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.content-related a{text-decoration:underline;text-underline-offset:4px}
.content-list{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.content-list li a{display:block;position:relative;isolation:isolate;padding:22px 24px;border-radius:22px;background:#fff;border:1px solid #14132e14;box-shadow:0 8px 24px #14132e0d;transition:transform 200ms ease}
.content-list li a::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 14px 34px #14132e1a;opacity:0;transition:opacity 200ms ease;z-index:-1;pointer-events:none}
@media (hover:hover) and (pointer:fine){.content-list li a:hover{transform:translateY(-2px)}.content-list li a:hover::after{opacity:1}}
.content-list li a:active{transform:scale(.98);transition:transform 160ms var(--ease-out)}
.content-list h2{font-size:22px;line-height:1.25;margin:0 0 8px}
.content-list p{margin:0 0 10px;color:#14132ecc}
.content-list time{font-size:13px;color:#14132ea6}
.content-empty{font-size:18px;line-height:1.5}
.content-empty a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.content-main{padding-top:8px}.content-body{font-size:17px}}