/* Content pages (platform, AI, roles, resources, implementation, data & access, legal, demo, 404).
   Builds on site-base.css, home.css (shared components) and module.css (hero, steps, FAQ, frame). */

.cp-hero-solo{max-width:820px;margin-top:var(--s-7)}
.cp-note{margin-top:var(--s-4);font-size:var(--fs-14);color:var(--c-muted);line-height:1.55}
.cp-note-wide{max-width:760px;margin-top:var(--s-6)}
.cp-split{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s-9);align-items:center}
.cp-split .h-head{margin-bottom:0}

/* Numbered cards */
.cp-cards{display:grid;gap:var(--s-5)}
.cp-cols-3{grid-template-columns:repeat(3,1fr)}
.cp-cols-4{grid-template-columns:repeat(4,1fr)}
.cp-card{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-6);border-radius:var(--r-card);background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line)}
.cp-card-n{font-size:var(--fs-14);font-weight:650;color:var(--c-primary);font-variant-numeric:tabular-nums}
.cp-card h3{margin-top:var(--s-2);font-size:var(--fs-18);line-height:1.3}
.cp-card p{font-size:var(--fs-16);line-height:1.6;color:var(--c-muted)}
.cp-card-meta{margin-top:auto;padding-top:var(--s-3);font-size:var(--fs-14)!important;color:var(--c-text)!important}

/* Check list with title + line */
.cp-list{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-6);border-radius:var(--r-card);background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line)}
.cp-list li{display:flex;gap:var(--s-3);align-items:flex-start}
.cp-list svg{flex:none;width:20px;height:20px;padding:2px;margin-top:2px;border-radius:50%;background:var(--c-ok-soft);color:var(--c-ok)}
.cp-list b{display:block;font-size:var(--fs-16);font-weight:600;color:var(--c-text)}
.cp-list span{display:block;font-size:var(--fs-16);color:var(--c-muted);line-height:1.5}
.cp-list b+span{font-size:var(--fs-14)}

/* Platform: record hub */
.cp-hub{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:repeat(3,auto);gap:var(--s-4) var(--s-3);align-items:center}
.cp-hub svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.cp-hub line{stroke:var(--c-primary);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;opacity:.45}
.cp-hub-node,.cp-hub-core{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;padding:var(--s-3);border-radius:var(--r-control);background:var(--c-surface);box-shadow:var(--shadow-card),inset 0 0 0 1px var(--c-line);opacity:0;transform:scale(.94);transition:opacity .5s,transform .6s var(--ease-spring)}
.is-in .cp-hub-node,.is-in .cp-hub-core{opacity:1;transform:none}
.cp-hub-node .bt-tag{align-self:flex-start;margin-bottom:4px}
.cp-hub-node b,.cp-hub-core b{font-size:var(--fs-14);font-weight:650;color:var(--c-text);font-variant-numeric:tabular-nums}
.cp-hub-node>span:last-child,.cp-hub-core>span:last-child{font-size:var(--fs-12);color:var(--c-muted)}
.cp-hub-core{grid-column:2;grid-row:2;align-items:center;text-align:center;padding:var(--s-4);background:var(--c-primary);box-shadow:var(--glow)}
.cp-hub-core *{color:var(--c-on-primary)!important}
.cp-hub-core b{font-size:var(--fs-18)}
.n0{grid-column:1;grid-row:1}.n1{grid-column:3;grid-row:1}.n2{grid-column:1;grid-row:2}.n3{grid-column:3;grid-row:2}.n4{grid-column:1;grid-row:3}
.cp-hub-node{transition-delay:calc(.4s + var(--i,0) * 100ms)}
.cp-hub-foot{grid-column:2/4;grid-row:3;display:flex;gap:var(--s-2);justify-content:flex-end;position:relative;z-index:1}
.cp-hub-foot span{padding:4px 10px;border-radius:999px;background:var(--c-subtle);box-shadow:inset 0 0 0 1px var(--c-line);font-size:var(--fs-12);font-weight:600;color:var(--c-muted)}
.cp-map{height:220px}

/* AI */
.cp-chat{display:flex;flex-direction:column;gap:var(--s-4)}
.cp-chat .sp-graph{grid-template-columns:repeat(3,1fr)}
.cp-tabs .rl-panel{min-height:320px}
.cp-case{padding:var(--s-7);border-radius:var(--r-panel);background:var(--c-surface);box-shadow:var(--shadow-card),inset 0 0 0 1px var(--c-line);animation:rl-in .5s var(--ease)}
.cp-case h3{font-size:var(--fs-24);line-height:1.3}
.cp-case-steps{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-5)}
.cp-case-steps li{display:grid;grid-template-columns:36px 1fr;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-control);background:var(--c-subtle);animation:rl-in .5s var(--ease) both}
.cp-case-steps li:nth-child(2){animation-delay:.08s}.cp-case-steps li:nth-child(3){animation-delay:.16s}
.cp-case-steps li>span{font-size:var(--fs-14);font-weight:650;color:var(--c-muted);font-variant-numeric:tabular-nums}
.cp-case-steps li.ok>span{color:var(--c-ok)}
.cp-case-steps li.warn{background:var(--c-warn-soft)}
.cp-case-steps li.warn>span{color:var(--c-warn)}
.cp-case-steps b{font-size:var(--fs-14);font-weight:650;color:var(--c-text)}
.cp-case-steps p{margin-top:2px;font-size:var(--fs-16);color:var(--c-text);line-height:1.55}
.cp-case-src{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-5)}
.cp-case-src .sp-label{width:100%}
.cp-case-src code,.cp-scope-codes code{padding:4px 10px;border-radius:var(--r-chip);background:var(--c-subtle);box-shadow:inset 0 0 0 1px var(--c-line);font:600 var(--fs-14)/1.4 var(--font);color:var(--c-text)}
.cp-case-src i,.cp-scope-codes i{font-style:normal;color:var(--c-muted)}

/* Roles: handover */
.cp-handover{display:flex;flex-direction:column;gap:var(--s-3)}
.cp-handover li{position:relative;display:flex;gap:var(--s-4);align-items:center;padding:var(--s-3) var(--s-4);border-radius:var(--r-control);background:var(--c-subtle);opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .5s var(--ease);transition-delay:calc(.4s + var(--r) * 140ms)}
.is-in .cp-handover li{opacity:1;transform:none}
.cp-handover li+li::before{content:"";position:absolute;left:29px;top:-12px;height:12px;width:2px;background:var(--c-primary);opacity:.4}
.cp-handover-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c-primary);color:var(--c-on-primary);font-size:var(--fs-14);font-weight:650}
.cp-handover div{display:flex;flex-direction:column;gap:1px}
.cp-handover b{font-size:var(--fs-16);font-weight:650;color:var(--c-text);font-variant-numeric:tabular-nums}
.cp-handover div>span:last-child{font-size:var(--fs-14);color:var(--c-muted)}

/* Resources and articles */
.cp-articles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.cp-articles-2{grid-template-columns:repeat(2,1fr)}
.cp-article{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6);border-radius:var(--r-panel);background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line);transition:transform .3s var(--ease),box-shadow .3s}
.cp-article:hover{transform:translateY(-3px);box-shadow:var(--shadow-card),inset 0 0 0 1px var(--c-primary)}
.cp-article .bt-tag{align-self:flex-start}
.cp-article h2{font-size:var(--fs-24);line-height:1.25;letter-spacing:-.02em}
.cp-article p{font-size:var(--fs-16);line-height:1.6;color:var(--c-muted)}
.cp-article-meta{font-size:var(--fs-14);color:var(--c-muted)}
.cp-article b{margin-top:auto;padding-top:var(--s-2);font-size:var(--fs-14);font-weight:600;color:var(--c-primary)}
.cp-codes{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-3);margin:0}
.cp-codes a{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-5);border-radius:var(--r-card);background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line);transition:box-shadow .2s}
.cp-codes a:hover{box-shadow:inset 0 0 0 1px var(--c-primary)}
.cp-codes dt{font-size:var(--fs-24);font-weight:650;color:var(--c-primary)}
.cp-codes dd{margin:0;font-size:var(--fs-14);color:var(--c-muted)}
.cp-article-head{max-width:820px;margin-top:var(--s-7)}
.cp-article-head h1{margin-top:var(--s-3);font-size:clamp(var(--fs-32),4vw,var(--fs-44));line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.cp-article-body{padding-top:var(--s-6)}
.cp-article-grid{display:grid;grid-template-columns:240px minmax(0,720px);gap:var(--s-9);align-items:start}
.cp-toc{position:sticky;top:100px;display:flex;flex-direction:column;gap:var(--s-3)}
.cp-toc ol{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--c-line)}
.cp-toc a:not(.blue-link){display:block;padding:6px var(--s-3);margin-left:-1px;border-left:2px solid transparent;font-size:var(--fs-14);color:var(--c-muted);line-height:1.4}
.cp-toc a:not(.blue-link):hover{color:var(--c-text);border-left-color:var(--c-primary)}
.cp-toc .blue-link{margin-top:var(--s-3);font-size:var(--fs-14)}
.cp-prose section+section{margin-top:var(--s-7)}
.cp-prose section{scroll-margin-top:100px}
.cp-prose h2{font-size:var(--fs-24);line-height:1.3;letter-spacing:-.02em}
.cp-prose p{margin-top:var(--s-3);font-size:var(--fs-18);line-height:1.7;color:var(--c-text)}
.cp-prose-foot{margin-top:var(--s-7)!important}
.cp-checklist{margin-top:var(--s-8);padding:var(--s-6);border-radius:var(--r-card);background:var(--c-subtle);box-shadow:inset 0 0 0 1px var(--c-line);scroll-margin-top:100px}
.cp-checklist ul{display:flex;flex-direction:column;gap:var(--s-3);margin:var(--s-4) 0 var(--s-5)}
.cp-checklist li{display:flex;gap:var(--s-3);font-size:var(--fs-16);color:var(--c-text)}
.cp-checklist svg{flex:none;width:20px;height:20px;padding:2px;margin-top:2px;border-radius:50%;background:var(--c-ok-soft);color:var(--c-ok)}

/* Implementation */
.cp-scope-codes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.cp-scope ol{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-5)}
.cp-scope li{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4);border-radius:var(--r-control);background:var(--c-subtle);font-size:var(--fs-16);font-weight:600;color:var(--c-text);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease);transition-delay:calc(.4s + var(--r) * 120ms)}
.is-in .cp-scope li{opacity:1;transform:none}
.cp-scope li span{font-size:var(--fs-12);font-weight:650;color:var(--c-primary)}
.cp-result{display:flex;flex-direction:column;gap:2px;margin-top:var(--s-4)!important;padding:var(--s-3);border-radius:var(--r-control);background:var(--c-ok-soft);font-size:var(--fs-14)!important;color:var(--c-text)!important;line-height:1.45}
.cp-result .sp-label{color:var(--c-ok)}

/* Data & access */
.cp-checks{display:flex;flex-direction:column;gap:var(--s-3)}
.cp-checks li{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-radius:var(--r-control);background:var(--c-subtle);opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .5s var(--ease);transition-delay:calc(.4s + var(--r) * 140ms)}
.is-in .cp-checks li{opacity:1;transform:none}
.cp-checks svg{flex:none;width:20px;height:20px;padding:2px;border-radius:50%;background:var(--c-ok-soft);color:var(--c-ok)}
.cp-checks b{display:block;font-size:var(--fs-14);font-weight:650;color:var(--c-text)}
.cp-checks span{font-size:var(--fs-14);color:var(--c-muted)}

/* Demo form page: breadcrumb sits in the intro column */
.cp .cf-intro .mp-crumbs{margin-bottom:var(--s-6)}
.cp .cf-intro h1{margin-top:0}

@media (max-width:1000px){
  .cp-split{grid-template-columns:1fr;gap:var(--s-6)}
  .cp-cols-4{grid-template-columns:1fr 1fr}
  .cp-articles{grid-template-columns:1fr 1fr}
  .cp-codes{grid-template-columns:repeat(3,1fr)}
  .cp-article-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .cp-toc{position:static}
}
@media (max-width:760px){
  .cp-cols-3,.cp-cols-4,.cp-articles,.cp-articles-2{grid-template-columns:1fr}
  .cp-codes{grid-template-columns:1fr 1fr}
  .cp-hub{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .cp-hub svg{display:none}
  .cp-hub-core{grid-column:1/3;grid-row:1}
  .n0,.n1,.n2,.n3,.n4{grid-column:auto;grid-row:auto}
  .cp-hub-foot{grid-column:1/3;grid-row:auto;justify-content:flex-start}
  .cp-chat .sp-graph{grid-template-columns:1fr}
  .cp-case{padding:var(--s-5)}
  .cp-scope ol{grid-template-columns:1fr}
  .cp-prose p{font-size:var(--fs-16)}
}

.cp-article-art{display:grid;place-items:center;height:150px;margin:calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-2);border-radius:var(--r-panel) var(--r-panel) 0 0;background:linear-gradient(var(--c-subtle),var(--c-surface))}
.cp-article-art .il{width:auto;height:120px;max-width:240px}