/* Zone Explorer — the interactive figure. */

/* Full-bleed background band behind the section. */
.srweb .srw-sec--band { padding-block: var(--sp-2xl); isolation: isolate; }
.srweb .srw-sec--band::before { content: ""; position: absolute; inset: 0 50% 0 50%; margin: 0 -50vw; width: 100vw; z-index: -1; background: linear-gradient(180deg, #f7fbfe 0%, #eef6fb 100%); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }

/* isolation: the image and pointers use z-index 10/60 to layer INSIDE the
   diagram. Without a stacking context of its own those values compete with the
   page — sloth's fixed header is z-index 10, later loses, and the diagram
   scrolls over it. Isolated, the internal layers stay internal. */
.srweb .srw-zones { display: flex; justify-content: center; width: 100%; position: relative; padding: 20px 0; isolation: isolate; }
.srweb .srw-zones-wrap { display: flex; width: 100%; max-width: 1000px; position: relative; }
.srweb .srw-zones-visual { display: flex; position: relative; z-index: 10; }

.srweb .srw-zones-ind { display: flex; align-items: center; gap: 8px; }
.srweb .srw-zones-ind span { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--c-ink); line-height: 1; }
.srweb .srw-zones-axis { position: relative; height: 100%; width: 2px; background: var(--c-ink); }
.srweb .srw-zones-axis::before, .srweb .srw-zones-axis::after { content: ''; position: absolute; left: 0; width: 10px; height: 2px; background: var(--c-ink); }
.srweb .srw-zones-axis::before { top: 0; }
.srweb .srw-zones-axis::after { bottom: 0; }

.srweb .srw-zones-img { width: 216px; height: 400px; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--c-border); box-shadow: var(--sh-card); position: relative; z-index: 10; }
.srweb .srw-zones-img img { width: 95%; height: 95%; object-fit: contain; display: block; margin: 2.5% auto; background: #fff; border: 0; border-radius: 0; box-shadow: none; }
.srweb .srw-zones-foot { margin-top: 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.srweb .srw-zones-foot p { font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: var(--c-ink); margin: 0; line-height: 1.2; }
.srweb .srw-zones-arrows { display: flex; gap: 8px; color: var(--c-glow); }
.srweb .srw-zones-arrows svg { width: 30px; height: 30px; stroke-width: 3; stroke: currentColor; animation: srwBounce 1.5s infinite ease-in-out; }

.srweb .srw-panel { position: relative; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 8px 32px rgba(36,67,120,.10); background: linear-gradient(135deg, rgba(255,255,255,.82) 0%, rgba(236,254,255,.55) 100%); }
.srweb .srw-panel :is(h2, h3) { font-family: var(--font-display); color: var(--c-ink-deep); font-weight: 700; letter-spacing: -.01em; margin: 0; }
.srweb .srw-panel ul { list-style: disc; padding-left: 25px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.srweb .srw-panel li { font-family: var(--font-body); font-size: 1.05rem; color: var(--c-text); line-height: 1.45; font-weight: 500; }
.srweb .srw-panel li::marker { color: var(--c-glow); }
.srweb .srw-pointer { display: none; }

@keyframes srwBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes srwPulseGlow { 0% { box-shadow: 0 8px 32px rgba(36,67,120,.04); } 100% { box-shadow: 0 8px 32px rgba(36,67,120,.13); } }
@keyframes srwFadeArrow { 0% { opacity: 0; } 100% { opacity: 1; } }

/* ---------- desktop ---------- */
@media (min-width: 992px) {
	.srweb .srw-zones-wrap { align-items: flex-start; justify-content: center; gap: 40px; }
	.srweb .srw-zones-visual { align-items: flex-start; gap: 8px; flex: none; }
	.srweb .srw-zones-ind { height: 260px; margin-top: 138px; }
	.srweb .srw-zones-card { margin-top: 13px; }
	.srweb .srw-zones-panels { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 5; }
	.srweb .srw-panel { width: 520px; max-width: 100%; border-radius: 16px; padding: 20px 35px 20px 25px; animation: srwPulseGlow 4s ease-in-out infinite alternate; }
	.srweb .srw-panel :is(h2, h3) { font-size: 1.5rem; margin: 0 0 12px; }
	.srweb .srw-zones-overlay { display: none; }
	.srweb .srw-pointer { display: block; position: absolute; left: -90px; top: 25px; z-index: 60; pointer-events: none; overflow: visible; opacity: 0; animation: srwFadeArrow 1s ease-out forwards; }
	.srweb .srw-panel:nth-child(1) .srw-pointer { animation-delay: .5s; }
	.srweb .srw-panel:nth-child(2) .srw-pointer { animation-delay: .8s; }
	.srweb .srw-panel:nth-child(3) .srw-pointer { animation-delay: 1.1s; }
}

/* ---------- mobile / tablet: pills that open a modal ---------- */
@media (max-width: 991px) {
	.srweb .srw-zones-wrap { flex-direction: column; align-items: center; padding-bottom: 40px; }
	.srweb .srw-zones-visual { gap: 15px; align-items: center; }
	.srweb .srw-zones-overlay { position: fixed; inset: 0; background: rgba(14,29,65,.35); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .3s; }
	.srweb .srw-zones.is-open .srw-zones-overlay { opacity: 1; pointer-events: auto; }
	.srweb .srw-zones-panels { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
	.srweb .srw-panel { pointer-events: auto; position: absolute; left: 58%; transform: translateX(-50%); border-radius: 30px; padding: 10px 20px; width: max-content; max-width: 90%; cursor: pointer; display: flex; flex-direction: column; align-items: center; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--c-border); background: rgba(236,254,255,.95); }
	.srweb .srw-zones-panels .srw-panel:nth-child(1) { top: 22%; }
	.srweb .srw-zones-panels .srw-panel:nth-child(2) { top: 46%; }
	.srweb .srw-zones-panels .srw-panel:nth-child(3) { top: 72%; }
	.srweb .srw-panel :is(h2, h3) { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: 10px; }
	.srweb .srw-panel :is(h2, h3)::after { content: '+'; font-size: 1.4rem; font-weight: 300; color: var(--c-glow); }
	.srweb .srw-panel ul { display: none; margin-top: 12px; }
	.srweb .srw-panel.is-active { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90vw; max-width: 400px; border-radius: 16px; padding: 25px 20px; z-index: 9999; box-shadow: 0 10px 40px rgba(20,29,55,.22); background: #fff; }
	.srweb .srw-panel.is-active :is(h2, h3) { font-size: 1.3rem; margin-bottom: 8px; width: 100%; justify-content: space-between; border-bottom: 1px solid var(--c-line); padding-bottom: 10px; }
	.srweb .srw-panel.is-active :is(h2, h3)::after { content: '\00d7'; color: var(--c-accent); }
	.srweb .srw-panel.is-active ul { display: flex; }
}

/* The diagram was built to sit alone across the page, where 520px panels always
   fit. Beside a column of text it has less room, and a flex child will not shrink
   below its content unless it is told it may — so it spilled over the text next
   to it instead. These let it give. */
.srweb .srw-zones-wrap,
.srweb .srw-zones-panels,
.srweb .srw-zones-visual { min-width: 0; }
.srweb .srw-zones-panels { flex: 1 1 auto; }

/* Standing alone the diagram centers itself under a 1000px cap. Inside a boxed
   row that cap and the centering leave a hole against the row's right edge, so
   there the diagram fills its column instead: panels grow to the edge the
   header ends at. */
.srw-row-boxed .srw-zones-wrap { max-width: none; gap: clamp(40px, 4vw, 64px); }
/* The cards give up their fixed 520px, but they do not swallow every free
   pixel either: capped, with room between them, so image and cards read as a
   composition instead of a block of boxes pressed together. */
.srw-row-boxed .srw-panel { width: auto; max-width: 600px; }
.srw-row-boxed .srw-zones-panels { gap: 24px; }