/* AFAS landing page: compact reading rhythm and native integration diagram.
 * Reuses the supplied library's numbered steps, swept corners and dark case
 * surface. All rules are scoped to this one pattern, with no global reset.
 */
.y-afas-story { --wp--style--block-gap: 0; }
.y-afas-story > .wp-block-group { margin-block: 0; }
.y-afas-story .y-section { padding-block: var(--y-section-space); }
.y-afas-story .y-afas-hero { padding-block: var(--y-section-space); }
.y-afas-story .y-afas-head { display: grid; gap: 16px; max-width: 850px; }
.y-afas-story .y-afas-head > * { margin: 0; }
.y-afas-story .y-afas-head > p:not(.y-eyebrow) { max-width: 76ch; color: var(--y-muted); font-size: var(--y-t-body); line-height: var(--y-lh-body); }
.y-afas-story .y-afas-head .y-actions { margin-top: 8px; }
.y-afas-story .y-section-title { font-size: var(--y-t-h2); line-height: var(--y-lh-heading); font-weight: 500; }
.y-afas-story .y-display { max-width: 850px; font-size: var(--y-t-h1); line-height: var(--y-lh-heading); }
.y-afas-story .y-case-breadcrumb { margin-bottom: 28px; }
.y-afas-story .y-afas-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.y-afas-story .y-afas-role { display: grid; align-content: start; gap: 12px; min-width: 0; }
.y-afas-story .y-afas-role > * { margin: 0; }
.y-afas-story :is(.y-afas-role, .y-afas-flow, .y-afas-ready, .y-afas-case-roles) h3 { margin: 0; font-size: var(--y-t-h3); font-weight: 500; line-height: var(--y-lh-subheading); letter-spacing: -.015em; }
.y-afas-story :is(.y-afas-role, .y-afas-flow, .y-afas-ready) p { margin: 0; color: var(--y-muted); font-size: var(--y-t-sm); line-height: var(--y-lh-body); }
.y-afas-story .y-afas-number { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--y-r-xs) var(--y-r-xs) var(--y-r-lg) var(--y-r-xs); background: var(--y-green-soft); color: var(--y-green-dark); font: 300 var(--y-t-xs)/var(--y-lh-body) var(--y-mono); }
.y-afas-story .y-afas-flow-panel { margin-top: 40px; padding: var(--y-panel-padding); border-radius: var(--y-card-radius); background: var(--y-green-soft); }
.y-afas-story .y-afas-flow-panel .y-section-title { font-size: var(--y-t-h2); }
.y-afas-story .y-afas-flow-panel .y-eyebrow { color: var(--y-green-dark); }
.y-afas-story .y-afas-flow { margin: 28px 0 0; }
.y-afas-story .y-afas-flow ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.y-afas-story .y-afas-flow li { position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; padding: 22px; border: 0; border-radius: var(--y-r-sm) var(--y-r-sm) var(--y-sweep-xs) var(--y-r-sm); background: var(--y-white); }
.y-afas-story .y-afas-flow li + li::before { content: ""; position: absolute; top: 50%; left: -23px; width: 16px; height: 16px; background: var(--y-green-dark); mask: url("../images/arrow-right.svg") center / contain no-repeat; }
.y-afas-story .y-afas-flow .is-connect { background: var(--y-green-dark); color: var(--y-white); }
.y-afas-story .y-afas-flow .is-connect :is(h3, p, .y-eyebrow) { color: var(--y-white); }
.y-afas-story .y-afas-flow figcaption { margin-top: 14px; color: var(--y-muted); font-size: var(--y-t-xs); line-height: var(--y-lh-body); }
.y-afas-story .y-afas-flow-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 22px; padding-right: 12px; }
.y-afas-story .y-afas-flow-links .y-text-link { font-size: var(--y-t-sm); font-weight: 500; }
.y-afas-story .y-afas-ready { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--y-gap); margin: 28px 0 0; padding: 0; list-style: none; }
.y-afas-story .y-afas-ready li { position: relative; min-width: 0; padding-left: 28px; }
.y-afas-story .y-afas-ready li::before { content: ""; position: absolute; top: 7px; left: 0; width: 11px; height: 6px; border-left: 2px solid var(--y-green-dark); border-bottom: 2px solid var(--y-green-dark); transform: rotate(-45deg); }
.y-afas-story .y-afas-ready p { margin-top: 7px; }
.y-afas-story .y-afas-note { max-width: 88ch; margin: 28px 0 0; color: var(--y-muted); font-size: var(--y-t-sm); line-height: var(--y-lh-body); }
.y-afas-story .y-afas-case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--y-gap); padding: var(--y-panel-padding); border-radius: var(--y-card-radius); background: var(--y-ink); color: var(--y-white); }
.y-afas-story .y-afas-case-copy { display: grid; gap: 18px; min-width: 0; }
.y-afas-story .y-afas-case-copy > * { margin: 0; }
.y-afas-story .y-afas-case-copy .y-section-title { color: var(--y-white); }
.y-afas-story .y-afas-case-copy .y-eyebrow { color: #a9d5b8; }
.y-afas-story .y-afas-case-copy > p:not(.y-eyebrow) { color: #e1dcde; font-size: var(--y-t-sm); line-height: var(--y-lh-body); }
.y-afas-story .y-afas-case .y-button-link { justify-self: start; margin-top: 2px; border-color: var(--y-white); background: var(--y-white); color: var(--y-ink); }
.y-afas-story .y-afas-case .y-button-link:hover { border-color: #e5e0e2; background: #e5e0e2; }
.y-afas-story .y-afas-case :is(a, button):focus-visible { outline-color: var(--y-white); }
.y-afas-story .y-afas-case-roles { display: grid; gap: 14px; min-width: 0; }
.y-afas-story .y-afas-case-roles > div { display: grid; gap: 10px; padding: var(--y-card-padding-sm); border-radius: var(--y-r-sm) var(--y-r-sm) var(--y-sweep-xs) var(--y-r-sm); background: var(--y-white); color: var(--y-ink); }
.y-afas-story .y-afas-case-roles .y-eyebrow { color: var(--y-green-dark); }
.y-afas-story .y-afas-case-roles p { margin: 0; color: var(--y-muted); font-size: var(--y-t-sm); line-height: var(--y-lh-body); }
.y-afas-story .y-afas-faq-section { padding-top: 0; }
.y-afas-story .y-afas-faq { display: grid; gap: 24px; }
.y-afas-story .y-afas-faq .y-faq-list { width: 100%; max-width: none; }
.y-afas-story .y-afas-faq .y-faq-list details { margin: 0; padding-block: 18px; }
.y-afas-story .y-afas-faq .y-faq-list summary { font-size: var(--y-t-body); font-weight: 500; }
.y-afas-story .y-afas-faq .y-faq-list p { max-width: 90ch; font-size: var(--y-t-sm); line-height: var(--y-lh-body); }
.y-afas-story .y-afas-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 36px; }
.y-afas-story .y-afas-contact .y-afas-head { flex: 1 1 440px; max-width: 700px; }
.y-afas-story .y-afas-contact > .y-button-link { flex-shrink: 0; }
@media (max-width: 62rem) {
    .y-afas-story .y-afas-roles { gap: 24px; }
    .y-afas-story .y-afas-case { grid-template-columns: 1fr; }
    .y-afas-story .y-afas-case-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
    .y-afas-story .y-afas-roles, .y-afas-story .y-afas-ready, .y-afas-story .y-afas-case-roles, .y-afas-story .y-afas-flow ol { grid-template-columns: 1fr; }
    .y-afas-story .y-afas-role { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 14px; }
    .y-afas-story .y-afas-role .y-afas-number { grid-row: span 2; }
    .y-afas-story .y-afas-role h3 { align-self: center; }
    .y-afas-story .y-afas-role p { grid-column: 2; }
    .y-afas-story .y-afas-flow-panel { margin-top: 32px; border-bottom-right-radius: var(--y-sweep-xs); }
    .y-afas-story .y-afas-flow li { padding: 20px; }
    .y-afas-story .y-afas-flow li + li::before { top: -23px; left: calc(50% - 8px); transform: rotate(90deg); }
    .y-afas-story .y-afas-case { border-bottom-right-radius: var(--y-sweep-xs); }
    .y-afas-story .y-afas-contact > .y-button-link { flex-shrink: 1; }
}
@media (forced-colors: active) {
    .y-afas-story .y-afas-flow li, .y-afas-story .y-afas-case, .y-afas-story .y-afas-case-roles > div { border: 1px solid CanvasText; }
    .y-afas-story .y-afas-flow li + li::before { background: CanvasText; }
}