/* V5.7: a browsable capability directory and an editorial AI practice feature.
   Detailed explanations are progressively disclosed. Services and heroes remain unchanged. */
.v54 { --directory-rule: #42616c; --directory-accent: #a8d9c4; }

.application-directory { display: grid; grid-template-columns: .87fr 1.13fr; gap: 10%; align-items: start; }
.v54 .directory-intro h2 { color: #fff; font: 500 clamp(2.1rem,2.7vw,2.8rem)/1.45 var(--serif); letter-spacing: -.025em; margin-top: 24px; }
.directory-description { max-width: 28em; color: #bdcfd4; font-size: 1rem; line-height: 1.95; margin-top: 26px; }
.directory-connection { font-size: .875rem; line-height: 1.85; color: var(--directory-accent); margin-top: 28px; }
.system-section-more { margin-top: 32px; }
.directory-hint { display: flex; justify-content: space-between; gap: 16px; padding-block: 0 17px; color: #bfd3d9; font-size: .8125rem; line-height: 1.7; }
.directory-hint > span { color: #a5bcc4; }
.directory-entry { border-top: 1px solid var(--directory-rule); }
.directory-entry:last-child { border-bottom: 1px solid var(--directory-rule); }
.directory-entry summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 25px; list-style: none; cursor: pointer; }
.directory-entry summary::-webkit-details-marker { display: none; }
.directory-entry summary > span:first-child { min-width: 0; }
.directory-entry strong { display: block; font: 500 clamp(1.45rem,1.9vw,1.8rem)/1.5 var(--sans); color: #fff; transition: color 180ms; }
.directory-entry small { display: block; margin-top: 9px; font-size: .875rem; line-height: 1.7; color: #aec8d0; }
.directory-toggle { flex: 0 0 24px; text-align: center; font: 300 25px/1 Arial,sans-serif; color: var(--directory-accent); }
.directory-entry[open] .directory-toggle { font-size: 0; }
.directory-entry[open] .directory-toggle::after { content: "−"; font: 300 25px/1 Arial,sans-serif; }
.directory-entry[open] strong,.directory-entry summary:hover strong { color: var(--directory-accent); }
.directory-entry summary:focus-visible { outline-color: var(--directory-accent); outline-offset: 4px; }
.directory-body { padding: 0 52px 27px 0; }
.directory-body > p { max-width: 30em; font-size: 1rem; line-height: 1.9; color: #d3e1e5; }
.directory-body > .directory-question { color: #abc7c0; font-size: .875rem; margin-top: 16px; }
.v54 .system-scope { margin-top: 52px; border-color: var(--directory-rule); }

.v54 .practice-editorial { padding-block: 88px 68px; background: #f1f4f2; }
.practice-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: start; }
.practice-photo { min-width: 0; }
.practice-photo img { width: 100%; height: 490px; object-fit: cover; object-position: 88% center; }
.practice-photo figcaption { margin-top: 13px; font-size: .75rem; line-height: 1.8; color: #586b68; }
.practice-story { min-width: 0; padding-top: 2px; }
.practice-story .eyebrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.v54 .practice-story h2 { font: 500 clamp(2.1rem,2.8vw,2.8rem)/1.45 var(--serif); color: var(--ink); margin-top: 23px; }
.practice-description { max-width: 32em; margin-top: 24px; font-size: 1rem; line-height: 1.95; color: var(--muted); }
.practice-point { font: 500 1.2rem/1.75 var(--sans); color: #23564d; margin-top: 27px; }
.practice-point br { display: none; }
.practice-evidence-note { max-width: 35em; margin-top: 14px; font-size: .875rem; line-height: 1.85; color: var(--muted); }
.practice-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 27px; }
.v54 .practice-actions .inline-link { margin: 0; }
.practice-contact { display: flex; align-items: center; gap: 18px; padding: 11px 15px; color: #fff; background: var(--deep); font-size: .875rem; line-height: 1.7; transition: background 180ms; }
.practice-contact:hover { background: #185661; }
.practice-contact > span { font-size: 20px; }
.practice-reading { margin-top: 44px; }
.v54 .practice-reading > .application-detail { margin: 0; border-color: #c5d0cc; }
.v54 .practice-reading > .application-detail + .application-detail { border-top: 0; }
.v54 .practice-reading summary { padding-block: 19px; color: #355d55; }
.practice-method-content { display: grid; grid-template-columns: .75fr 1.25fr; gap: 10%; padding: 10px 0 34px; }
.v54 .practice-method-content h3 { font-size: 1rem; font-weight: 500; color: #23564d; margin-bottom: 22px; }
.practice-reading-steps { list-style: decimal; padding-left: 24px; display: grid; gap: 10px; }
.practice-reading-steps li { padding-left: 6px; font-size: .875rem; color: #688177; }
.practice-reading-steps h4 { display: inline; font-size: .9375rem; font-weight: 500; color: var(--ink); }
.practice-reading-steps p { display: inline; margin-left: 20px; font-size: .875rem; color: var(--muted); }
.practice-prerequisites dl { display: grid; gap: 18px; }
.practice-prerequisites dt { font-size: .9375rem; font-weight: 500; color: var(--ink); }
.practice-prerequisites dd { margin-top: 5px; font-size: .875rem; line-height: 1.9; color: var(--muted); }

@media (max-width:1320px) {
  .application-directory { gap: 7%; }
  .practice-feature { gap: 6%; }
  .practice-photo img { height: 505px; }
  .practice-actions { gap: 16px; }
  .practice-contact { padding-inline: 12px; gap: 12px; }
}
@media (max-width:1000px) {
  .application-directory { grid-template-columns: 1fr; gap: 40px; }
  .directory-description { max-width: 40em; }
  .practice-feature { grid-template-columns: .85fr 1.15fr; gap: 5%; }
  .practice-photo img { height: 480px; }
  .practice-point br { display: block; }
}
@media (max-width:700px) {
  .v54 .practice-editorial { padding-block: 64px 48px; }
  .practice-feature { grid-template-columns: 1fr; gap: 30px; }
  .practice-photo img { height: 300px; }
  .practice-point br { display: none; }
  .practice-method-content { grid-template-columns: 1fr; gap: 34px; }
  .directory-body { padding-right: 12px; }
  .v54 .system-scope { margin-top: 36px; }
}
@media (prefers-reduced-motion:reduce) {
  .directory-entry strong,.directory-toggle,.practice-contact { transition: none; }
}