/* Page composition only: shared homepage typography, colors, cards and motion. */
.explainer-brand{color:var(--blue)}
.explainer-hero{max-width:1200px;margin:auto;padding-bottom:48px}
.explainer-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:12px;text-align:left;margin-bottom:44px;color:var(--text-supporting);font-size:var(--type-caption)}
.explainer-breadcrumb a:hover{color:var(--blue)}
.explainer-hero .hero-copy{max-width:850px;margin:auto}
.explainer-hero .hero-description{max-width:800px;margin-inline:auto}
.explainer-hero-visual{max-width:800px;margin:40px auto 0;text-align:left}
.explainer-hero-visual .section-caption{text-align:center}
.explainer-toc{padding-block:24px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 24px;border-block:1px solid var(--line)}
.explainer-toc a{display:inline-flex;align-items:center;gap:8px;font-size:var(--type-card-body);color:var(--text-body)}
.explainer-toc a:hover{color:var(--blue)}
.explainer-toc .icon{width:16px;height:16px}
.explainer-section .section-heading{max-width:880px;margin-inline:auto}
.explainer-section .section-heading>p:last-child:not(.eyebrow){max-width:800px;margin-inline:auto}
.explainer-prose{max-width:800px;margin:32px auto 0;color:var(--text-body)}
.explainer-pains{grid-template-columns:repeat(2,minmax(0,1fr))}
.explainer-pains article{display:flex;flex-direction:column;gap:12px}
.explainer-pains article:last-child{grid-column:1/-1}
.explainer-pains article>p{flex:1}
.explainer-solution{display:flex;align-items:center;gap:10px;color:var(--blue);font-size:var(--type-card-body);font-weight:600;margin-top:18px}
.explainer-solution .icon{width:20px;height:20px;flex-shrink:0;margin:0}
.explainer-layers{grid-template-columns:repeat(4,minmax(0,1fr))}
.explainer-layers article>.eyebrow{display:block;margin-bottom:18px;color:var(--blue)}
.explainer-layers article>.icon{margin-bottom:18px}
.explainer-result{display:flex;justify-content:center;align-items:center;gap:12px;padding:24px;border-top:1px solid var(--line);color:var(--blue);font-size:var(--type-body);text-align:center}
.architecture-layers{grid-template-columns:repeat(2,minmax(0,1fr))}
.architecture-layers article{position:relative}
.architecture-layers article>.icon{position:absolute;right:28px;top:28px}
.explainer-note{padding-block:28px;color:var(--text-body);max-width:844px}
.explainer-comparison{max-width:800px;margin:auto;gap:24px}
.explainer-comparison .identity-column{padding:28px}
.explainer-comparison .identity-column p{font-size:var(--type-card-body);overflow-wrap:anywhere}
.explainer-comparison .identity-label{font-size:var(--type-card-body)}
.explainer-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.explainer-timeline{grid-template-columns:repeat(3,minmax(0,1fr))}
.explainer-timeline article>.eyebrow{display:block;color:var(--blue);margin-bottom:18px}
.explainer-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--card-radius);background:white}
.explainer-table{width:100%;border-collapse:collapse;font-size:var(--type-card-body);text-align:left;table-layout:fixed}
.explainer-table caption{padding:20px;color:var(--text-supporting);font-size:var(--type-caption);text-align:left}
.explainer-table th,.explainer-table td{padding:20px;vertical-align:top;border-top:1px solid var(--line);overflow-wrap:anywhere}
.explainer-table thead{color:var(--text-heading)}
.explainer-table tbody th{font-weight:600}
.explainer-table td{color:var(--text-body)}
.explainer-table :is(th,td):last-child{background:var(--status-info-bg);color:var(--blue)}
.explainer-faq{max-width:880px;margin:auto}
.explainer-flow{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px}
.explainer-flow li{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--card-radius-mini);background:white;font-size:var(--type-card-body)}
.explainer-flow li>strong{flex:1;font-weight:500;min-width:0}
.explainer-flow .eyebrow{color:var(--blue)}
.explainer-flow .icon{color:var(--blue);width:18px;height:18px;flex-shrink:0}
.explainer .value-words{justify-content:center;flex-wrap:wrap}
.explainer .value-words a{display:inline-flex;align-items:center;gap:8px}
.explainer .final-cta .hero-actions{justify-content:center}
.explainer :is(article,.identity-column){min-width:0;overflow-wrap:anywhere}
@media(max-width:1050px){.explainer-layers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .explainer-breadcrumb{margin-bottom:32px}
 .explainer-toc{justify-content:flex-start}
 .explainer-toc>.eyebrow{width:100%}
 .explainer-pains,.explainer-pair,.explainer-timeline{grid-template-columns:1fr}
 .explainer-table th,.explainer-table td{padding:12px}
 .explainer-comparison{gap:16px}
 .explainer-comparison .identity-column{padding:20px}
}
@media(max-width:560px){
 .explainer-layers,.explainer-comparison{grid-template-columns:1fr}
 .explainer .independent-profiles{display:grid;grid-template-columns:1fr;gap:24px}
 .explainer .independent-profile{display:grid;grid-template-columns:36px 20px minmax(0,1fr);align-items:center;gap:8px}
 .explainer .profile-connector{height:1px;width:20px}
 .explainer .isolated-box{text-align:left;padding:18px}
 .explainer .isolated-box>span{display:block}
 .explainer-table{min-width:600px}
 .explainer .hero-actions .button{max-width:100%;white-space:normal;text-align:center}
}