main:has(> .training-intro)>.page-hero{border-bottom-color:transparent}
/* Training topics only: clean surfaces and the existing mobile disclosures. */
#training-topics{scroll-margin-top:104px}
#training-topics .section-head{margin-bottom:28px}
#training-topics .section-title{font-size:clamp(28px,3vw,40px);text-wrap:balance}
#training-topics .card-grid{gap:18px;align-items:stretch}
/* Outlined instrument tiles, quiet indexing and a separated reading area. */
#training-topics .card{position:relative;min-width:0;min-height:282px;padding:26px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 3px 0 var(--surface-muted);overflow:hidden;transform:none;transition:border-color .15s,box-shadow .15s,transform .18s ease-out}
#training-topics .card:nth-child(3n + 2){background:var(--surface-raised)}
#training-topics .card::before{content:"";position:absolute;inset-inline-end:26px;top:61px;width:18px;height:2px;background:var(--brand-border);border-radius:1px;pointer-events:none}
#training-topics .card-number{align-self:stretch;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px;padding:0;color:var(--text-muted);font:500 12px/1 ui-monospace,monospace;letter-spacing:.04em}
#training-topics .card-number svg{flex-shrink:0;box-sizing:content-box;width:28px;height:28px;padding:12px;border:1px solid var(--brand-border);border-radius:14px;background:var(--brand-soft);color:var(--brand-text-strong);box-shadow:0 3px 0 var(--surface-muted)}
#training-topics .card:nth-child(3n + 2) .card-number svg{background:var(--surface);border-color:var(--border);box-shadow:inset 0 -3px 0 var(--brand-soft)}
#training-topics .card h3{font-size:22px;font-weight:700;line-height:1.4;letter-spacing:-.03em;min-height:2.8em;margin:0 0 18px;color:var(--text);text-wrap:balance}
#training-topics .card p{font-size:14.5px;line-height:1.8;color:var(--text-muted);margin: auto 0 0;padding-top:16px;border-top:1px solid var(--border-subtle)}
#training-topics .card:focus-within{border-color:var(--focus-ring);outline:2px solid var(--focus-ring);outline-offset:3px;transform:translateY(-2px)}
html[dir="rtl"] #training-topics .card h3{letter-spacing:0;line-height:1.5;min-height:3em}
html[dir="rtl"] #training-topics .card p{line-height:1.9}
@media(hover:hover) and (pointer:fine){
  #training-topics .card:hover{border-color:var(--brand-text);box-shadow:var(--shadow-soft);transform:translateY(-2px)}
}
@media(max-width:1000px) and (min-width:769px){
  #training-topics .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  #training-topics .section-head{margin-bottom:22px}
  #training-topics .section-title{font-size:28px}
  #training-topics .card-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  #training-topics .card{padding:0;min-height:0;border-radius:16px}
  #training-topics .card::before{display:none}
  #training-topics .mobile-disclosure>summary{display:grid;grid-template-columns:48px minmax(0,1fr) 10px;align-items:center;gap:16px;min-height:100px;padding:18px 20px;background:transparent;color:var(--text)}
  #training-topics .mobile-disclosure>summary .card-number{display:flex;flex-direction:column-reverse;gap:8px;align-items:center;justify-content:center;width:48px;margin:0;padding:0;color:var(--text-muted);font-size:10px}
  #training-topics .mobile-disclosure>summary .card-number svg{width:26px;height:26px;padding:10px;border-radius:12px}
  #training-topics .mobile-disclosure>summary h3{color:var(--text);min-height:0;font-size:19px;line-height:1.45;margin:0;text-wrap:initial}
  #training-topics .mobile-disclosure>summary::after{width:7px;height:7px;flex:none;margin:0;justify-self:end;border-color:var(--brand-text)}
  /* The card's focus-within outline marks this control without a second ring. */
  #training-topics .mobile-disclosure>summary:focus-visible{outline:none}
  #training-topics .mobile-detail-content{padding:18px 20px 22px;border-top:1px solid var(--border-subtle)}
  #training-topics .card p{border:0;padding-top:0;margin:0}
  html[dir="rtl"] #training-topics .mobile-disclosure>summary h3{min-height:0}
  /* Readable fallback when progressive mobile composition is unavailable. */
  #training-topics .card>.card-number{margin:20px 20px 18px;padding:0}
  #training-topics .card>h3{min-height:0;margin:0 20px 16px}
  #training-topics .card>p{margin:0 20px 22px;padding-top:16px;border-top:1px solid var(--border-subtle)}
}
@media(hover:hover) and (pointer:fine) and (max-width:768px){
  #training-topics .mobile-disclosure>summary:hover{background:var(--surface-muted)}
}
/* Reveal only paints opacity/transform; the original card boxes stay in flow. */
#training-topics.topics-pending .card{opacity:0;transform:translateY(8px)}
#training-topics.topics-entering .card{animation:topicReveal 500ms ease-out both;animation-delay:var(--topic-delay,0ms)}
@keyframes topicReveal{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  #training-topics .card{transition:none;animation:none!important;transform:none!important;opacity:1!important}
}
/* Organization request panel: brand surface only; its existing composition stays intact. */
main:has(> .training-intro) .cta-panel{background-color:var(--brand);background-image:linear-gradient(90deg,color-mix(in srgb,var(--on-brand) 3%,transparent) 1px,transparent 1px),linear-gradient(0deg,color-mix(in srgb,var(--on-brand) 3%,transparent) 1px,transparent 1px);background-size:48px 48px;background-position:0 0;box-shadow:none;color:var(--on-brand)}
main:has(> .training-intro) .cta-panel :is(.eyebrow,h2,p){color:var(--on-brand)}
main:has(> .training-intro) .cta-panel .btn.primary{background:var(--on-brand);border-color:var(--on-brand);color:var(--brand-hover)}
main:has(> .training-intro) .cta-panel .btn.ghost{background:transparent;border-color:var(--on-brand);color:var(--on-brand)}
main:has(> .training-intro) .cta-panel .btn.primary:hover{background:var(--on-brand-muted);border-color:var(--on-brand-muted);color:var(--brand-hover)}
main:has(> .training-intro) .cta-panel .btn.ghost:hover{background:var(--brand-hover);border-color:var(--on-brand);color:var(--on-brand)}
main:has(> .training-intro) .cta-panel .btn:focus-visible{outline:3px solid var(--on-brand);outline-offset:4px}