.discover-graphic { --graphic-bg: var(--paper); --graphic-fg: var(--ink); --graphic-surface: var(--white); color: var(--graphic-fg); }
.network-section:has(.discover-network) { background: var(--graphic-bg, var(--paper)); color: var(--graphic-fg, var(--ink)); }
.discover-network { position: relative; width: 100%; max-width: 1000px; aspect-ratio: 5 / 4; margin: 44px auto; }
.network-lines { width: 100%; height: 100%; }
.network-lines line { stroke: var(--gold); stroke-width: 1.5; }
.network-shield { fill: var(--navy); stroke: var(--gold); stroke-width: 2; }
.network-hub { position: absolute; inset-inline-start: 50%; top: 50%; transform: translate(-50%,-50%); width: 20%; color: var(--paper); display: grid; gap: 8px; text-align: center; font-family: Georgia,serif; }
[dir=rtl] .network-hub { transform: translate(50%,-50%); }
.network-hub b { font-size: clamp(22px,3vw,38px); }
.network-hub strong { font-size: 22px; }
.planned-label { font-size: 12px; }
.network-roles a { position: absolute; left: var(--node-x); top: var(--node-y); transform: translate(-50%,-50%); width: 155px; display: grid; justify-items: center; gap: 8px; text-align: center; font: 18px/1.2 Georgia,serif; overflow-wrap: anywhere; }
.network-point { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--graphic-surface); border: 1px solid var(--gold); color: var(--gold); font-size: 25px; }
.network-roles a:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; border-radius: 4px; }
@media(max-width:767px) {
 .discover-network { aspect-ratio: auto; }
 .network-lines { display: none; }
 .network-hub, [dir=rtl] .network-hub { position: static; transform: none; width: min(230px,100%); min-height: 240px; margin: 0 auto 28px; padding: 36px 28px; background: var(--navy); clip-path: polygon(50% 0,92% 15%,86% 75%,50% 100%,14% 75%,8% 15%); }
 .network-roles { display: grid; gap: 12px; position: relative; border-inline-start: 1px solid var(--gold); padding-inline-start: 16px; }
 .network-roles a { position: static; transform: none; width: 100%; display: flex; text-align: start; justify-items: start; gap: 16px; padding: 8px 0; font-size: 18px; }
 .network-point { width: 42px; height: 42px; flex: 0 0 auto; font-size: 22px; }
}

.trust-badge { display: block; width: 48px; height: 54px; padding: 4px; border-radius: 4px; background: var(--paper); margin: 12px 0; }
.technical-status { display: block; margin-top: 6px; color: var(--gold-light); }

.discover-timeline { grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; }
.discover-timeline li { position: relative; padding: 14px 8px; min-width: 0; }
.discover-timeline li::after { top: 40px; }
.discover-timeline .lifecycle-icon { width: 52px; height: 52px; padding: 9px; position: relative; z-index: 2; }
.lifecycle-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--gold-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.discover-timeline .lifecycle-number { display: block; background: none; color: inherit; width: auto; height: auto; margin-top: 12px; border-radius: 0; font-size: 12px; }
.discover-timeline strong, .discover-timeline small { overflow-wrap: anywhere; }
@media(max-width:767px) {
 .discover-timeline { grid-template-columns: minmax(0,1fr); border-inline-start: 1px solid var(--gold); padding-inline-start: 18px; gap: 12px; }
 .discover-timeline li { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 4px 16px; border: 0; padding: 8px 0; }
 .discover-timeline .lifecycle-icon { grid-row: 1 / 4; }
 .discover-timeline .lifecycle-number, .discover-timeline strong, .discover-timeline small { margin: 0; }
 .discover-timeline li::after { display: none; }
 .discover-timeline small { font-size: 14px; }
}


.app-illustrations { background: var(--graphic-bg); padding: 44px clamp(18px,6vw,90px) 60px; }
.app-illustrations h2 { font: clamp(28px,3vw,42px) Georgia,serif; margin: 12px 0 30px; }
.mock-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; max-width: 1100px; margin: 0 auto; align-items: start; }
.mock-grid figure { margin: 0; min-width: 0; }
.mock-phone { max-width: 320px; margin: 0 auto; padding: 14px 10px; border: 2px solid var(--gold); border-radius: 28px; background: var(--navy); }
.mock-phone::before { content: ''; display: block; width: 55px; height: 5px; border-radius: 4px; background: var(--gold); margin: 0 auto 12px; }
.mock-screen { min-height: 475px; padding: 20px 16px; border-radius: 16px; background: var(--graphic-surface); color: var(--graphic-fg); overflow-wrap: anywhere; }
.mock-screen h3 { font: 23px/1.25 Georgia,serif; margin: 12px 0 20px; }
.mock-screen h4 { font: 17px Georgia,serif; }
.mock-kicker { font-size: 11px; margin: 0; }
.mock-identity { padding: 14px 0; border-block: 1px solid var(--line); font: 23px Georgia,serif; }
.mock-identity small { display: block; margin-top: 8px; font: 13px Arial,sans-serif; }
.mock-credentials, .mock-share { list-style: none; margin: 16px 0; padding: 0; }
.mock-credentials li, .mock-share li { border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 14px; }
.mock-credentials small { display: block; margin-top: 6px; line-height: 1.4; }
.mock-status { font: 18px Georgia,serif; }
.mock-history { list-style: none; padding: 0; margin: 0; }
.mock-history li { border-inline-start: 1px solid var(--gold); padding: 0 0 14px 10px; padding-inline: 10px 0; display: grid; gap: 5px; font-size: 13px; line-height: 1.4; }
.mock-history small { font-size: 12px; }
.mock-days { padding: 14px; border: 1px solid var(--gold); font: 22px Georgia,serif; }
.mock-grid figcaption { text-align: center; font-size: 13px; margin: 16px 0; line-height: 1.5; }
@media(max-width:767px) { .mock-grid { grid-template-columns: minmax(0,1fr); } .mock-screen { min-height: 0; } }

.credential-flow { background: var(--graphic-bg); padding: 36px clamp(18px,6vw,90px) 44px; }
.credential-flow h2 { font: clamp(28px,3vw,42px) Georgia,serif; margin: 0 0 10px; }
.credential-flow-svg { display: block; width: 100%; max-width: 1000px; margin: 20px auto 0; }
.flow-line { fill: none; stroke: var(--gold); stroke-width: 2; }
.flow-stop { fill: var(--graphic-surface); stroke: var(--gold); stroke-width: 2; }
.flow-number { fill: var(--graphic-fg); font: 22px Georgia,serif; }
.flow-token { transform: translateX(0); animation: credential-journey 12s linear infinite; animation-play-state: paused; }
.flow-token rect { fill: var(--paper); stroke: var(--gold); stroke-width: 3; }
.flow-token path { fill: none; stroke: var(--navy); stroke-width: 3; }
.flow-visible .flow-token { animation-play-state: running; }
.flow-labels { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0; margin: 0 auto; max-width: 1000px; list-style: none; text-align: center; font: 18px/1.5 Georgia,serif; gap: 8px; }
.flow-labels li { min-width: 0; overflow-wrap: anywhere; }
@keyframes credential-journey { 0%,12% { transform: translateX(0); } 28%,40% { transform: translateX(267px); } 56%,68% { transform: translateX(533px); } 84%,100% { transform: translateX(800px); } }
@media(max-width:767px) { .flow-labels { font-size: 15px; } .credential-flow-svg { min-height: 80px; } }
@media(prefers-reduced-motion:reduce) { .flow-token { animation: none; transform: translateX(800px); } }


[dir=rtl] .credential-flow-svg { transform: scaleX(-1); }
[dir=rtl] .flow-number { transform-box: fill-box; transform-origin: center; transform: scaleX(-1); }

.network-point svg { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-illustrations > .eyebrow { color: var(--graphic-fg); }
.network-section:has(.discover-network) .eyebrow, .journey-section:has(.discover-timeline) .eyebrow { color: var(--ink); }
.network-section:has(.discover-network) h2 em { color: var(--gold-readable); }


@media(max-width:767px) {
 .network-hub, [dir=rtl] .network-hub { position: relative; top: auto; inset-inline-start: auto; background: var(--gold); isolation: isolate; }
 .network-hub::before { content: ''; position: absolute; inset: 1px; z-index: -1; background: var(--navy); clip-path: polygon(50% 0,92% 15%,86% 75%,50% 100%,14% 75%,8% 15%); }
}

.discover-timeline .planned-label { grid-column: 2; font-size: 12px; }