/* Page-level styles shared by the content pages (rich text bodies, sidebars, tables). Tokens come from /ds. */

/* ---- rich text / prose bodies (CMS RICH_TEXT is an HTML string) ---- */
.cl-prose{display:flex;flex-direction:column;gap:var(--space-5);max-width:760px}
.cl-prose p{font:var(--weight-regular) 17px/var(--leading-relaxed) var(--font-sans);color:var(--text-body);text-wrap:pretty}
.cl-prose a{color:var(--link)}
.cl-prose strong{color:var(--text-strong)}
.cl-prose ul,.cl-prose ol{margin:0;padding-left:var(--space-7);display:flex;flex-direction:column;gap:var(--space-2);font:var(--weight-regular) 17px/var(--leading-relaxed) var(--font-sans);color:var(--text-body)}
.cl-prose h2{font:var(--weight-regular) var(--text-h3)/var(--leading-snug) var(--font-display);color:var(--text-strong);text-wrap:balance}
.cl-prose h3{font:var(--weight-regular) 20px/1.3 var(--font-display);color:var(--text-strong)}
.cl-prose--wide{max-width:none}

/* article body: sections with a number, h3 terms as a definition list, two-column table */
.cl-article-sec{scroll-margin-top:110px;padding-bottom:var(--space-10)}
.cl-article-sec .cl-sec-head{display:flex;gap:var(--space-5);align-items:baseline}
.cl-article-sec .cl-sec-body{margin-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.cl-article-sec .cl-sec-body p{font:var(--weight-regular) 17px/var(--leading-relaxed) var(--font-sans);color:var(--text-body);text-wrap:pretty}
.cl-article-sec .cl-sec-body ul{margin:0;padding-left:var(--space-7);display:flex;flex-direction:column;gap:var(--space-2);font:var(--weight-regular) 17px/var(--leading-relaxed) var(--font-sans);color:var(--text-body)}
.cl-article-sec .cl-terms{display:flex;flex-direction:column;border-top:1px solid var(--border-subtle)}
.cl-article-sec .cl-term{padding:var(--space-6) 0;border-bottom:1px solid var(--border-subtle)}
.cl-article-sec .cl-term h3{font:var(--weight-regular) 20px/1.3 var(--font-display);color:var(--text-strong)}
.cl-article-sec .cl-term p{margin:var(--space-3) 0 0;font:var(--weight-regular) 16px/var(--leading-relaxed) var(--font-sans);color:var(--text-body);text-wrap:pretty}
.cl-article-sec .cl-sec-body table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden;background:var(--surface-card)}
.cl-article-sec .cl-sec-body th{background:var(--surface-brand);color:var(--text-invert);text-align:left;padding:14px var(--space-6);font:var(--weight-medium) 13px/1.4 var(--font-sans);letter-spacing:var(--track-eyebrow);text-transform:uppercase}
.cl-article-sec .cl-sec-body th + th{border-left:1px solid var(--border-invert)}
.cl-article-sec .cl-sec-body td{padding:var(--space-5) var(--space-6);border-top:1px solid var(--border-subtle);vertical-align:top;width:50%;font:var(--weight-regular) 15px/1.55 var(--font-sans);color:var(--text-body)}
.cl-article-sec .cl-sec-body td + td{border-left:1px solid var(--border-subtle)}

/* sticky "On this page" sidebars: hidden under 1000px, like the designs */
.cl-side{position:sticky;top:110px;display:flex;flex-direction:column}
@media (max-width:999px){ .cl-side{display:none} }
.cl-toc-btn{text-align:left;cursor:pointer;border:none;background:transparent;transition:var(--transition-control)}
.cl-toc-btn:hover{background:var(--purple-50);color:var(--brand-primary)}
.cl-toc-btn[aria-current="true"]{background:var(--purple-50);color:var(--brand-primary);border-left-color:var(--brand-primary)!important}
.cl-toc-art[aria-current="true"]{color:var(--brand-primary)!important;border-left-color:var(--brand-primary)!important}

/* form controls (contact) */
.cl-field{display:flex;flex-direction:column;gap:var(--space-2);font:var(--weight-medium) 12.5px/1.4 var(--font-sans);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--text-strong)}
.cl-input{font:var(--weight-regular) 16px/1.4 var(--font-sans);letter-spacing:normal;text-transform:none;color:var(--text-strong);background:var(--surface-card);border:1px solid var(--border-default, var(--grey-300));border-radius:var(--radius-control);padding:13px 14px;width:100%;box-sizing:border-box;transition:var(--transition-control)}
.cl-input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(65,6,148,.36);outline:none}

/* article page: sidebar + text column */
.cl-article-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-11);align-items:start}
@media (max-width:999px){ .cl-article-grid{grid-template-columns:minmax(0,1fr)} }

/* contact form: two columns from 560px up */
.cl-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
@media (max-width:559px){ .cl-form-grid{grid-template-columns:minmax(0,1fr)} }

/* contact form submit button: same sliding fill as the design's primary buttons */
.cl-submit{align-self:flex-start;cursor:pointer;border:none;white-space:nowrap;font:var(--weight-medium) 13px/1.2 var(--font-sans);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-invert);background-color:var(--brand-primary);padding:15px 28px;border-radius:var(--radius-control);background-image:linear-gradient(var(--surface-brand-deep),var(--surface-brand-deep));background-repeat:no-repeat;background-position:left center;background-size:0% 100%;transition:background-size 320ms cubic-bezier(.2,.6,.2,1)}
.cl-submit:hover:not(:disabled){background-size:100% 100%}
.cl-submit:active{transform:translateY(1px)}
.cl-submit:disabled{opacity:.6;cursor:progress}