.system-page main { overflow: clip; }
.system-page .newsletter-form { display: none; }
.system-page .site-footer { padding-top: clamp(3rem,5vw,4.5rem); }
.system-page .section-grid { background-image: linear-gradient(90deg,transparent calc(100% - 1px),color-mix(in srgb,var(--color-primary) 8%,transparent) 1px); background-size: calc((100% - (var(--gutter) * 2))/6) 100%; }

.response-stage { min-height: clamp(650px,calc(100vh - 220px),760px); display: grid; align-items: stretch; border-bottom: 1px solid var(--color-border); }
.response-stage__inner { min-height: inherit; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); align-items: center; gap: clamp(3rem,8vw,9rem); padding-block: clamp(4rem,7vw,7rem); }
.response-copy { align-self: center; }
.response-code { margin: 0 0 .6rem; color: var(--color-text); font-size: clamp(9rem,17vw,16rem); font-weight: 800; line-height: .72; letter-spacing: -.1em; }
.response-copy h1 { margin: 0 0 1rem; font-size: clamp(3rem,4.7vw,5.2rem); line-height: .95; letter-spacing: -.06em; }
.response-copy > p:not(.response-code) { max-width: 660px; margin: 0; color: var(--color-muted); font-size: clamp(1rem,1.25vw,1.2rem); line-height: 1.7; }
.response-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.response-actions .button { min-width: 168px; border-radius: 4px; }
.response-route { position: relative; min-height: 520px; align-self: stretch; display: grid; align-content: center; padding: 2rem; }
.response-route svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-primary); overflow: visible; }
.response-route path { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-dasharray: 1; stroke-dashoffset: 1; animation: response-route-draw 1.2s .45s cubic-bezier(.22,1,.36,1) forwards; }
.response-route rect { fill: var(--color-bg); stroke: currentColor; stroke-width: 2; animation: response-node 2.5s ease-in-out infinite alternate; }
.response-route p,.response-route span { position: relative; z-index: 1; max-width: 190px; margin-left: 22%; color: var(--color-muted); font-size: .77rem; font-weight: 700; line-height: 1.45; letter-spacing: .1em; text-transform: uppercase; }
.response-route span { align-self: end; margin: 12rem 0 0 -4%; color: var(--color-muted-deep); }
@keyframes response-route-draw { to { stroke-dashoffset: 0; } }
@keyframes response-node { to { filter: drop-shadow(0 0 9px color-mix(in srgb,var(--color-primary) 55%,transparent)); } }

.sitemap-stage { min-height: 760px; border-bottom: 1px solid var(--color-border); }
.sitemap-stage__inner { padding-block: clamp(4.5rem,7vw,7rem); }
.sitemap-heading { text-align: center; }
.sitemap-heading h1 { margin: 0 0 1rem; font-size: clamp(3.4rem,5.2vw,5.8rem); line-height: .95; letter-spacing: -.065em; }
.sitemap-heading p { max-width: 760px; margin: 0 auto; color: var(--color-muted); font-size: clamp(1rem,1.25vw,1.2rem); line-height: 1.7; }
.sitemap-search { max-width: 900px; margin: clamp(2.8rem,4vw,4rem) auto clamp(3.4rem,5vw,5rem); }
.sitemap-search label { display: block; margin-bottom: .6rem; color: var(--color-text); font-size: .78rem; font-weight: 700; }
.sitemap-search > div { position: relative; }
.sitemap-search svg { position: absolute; top: 50%; left: 1.2rem; width: 22px; height: 22px; color: var(--color-muted); fill: none; stroke: currentColor; stroke-width: 1.7; transform: translateY(-50%); pointer-events: none; }
.sitemap-search input { width: 100%; min-height: 62px; padding: .85rem 1rem .85rem 3.35rem; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 4px; font: 500 .94rem/1.4 var(--font-sans); transition: border-color 160ms ease,box-shadow 160ms ease; }
.sitemap-search input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb,var(--color-primary) 20%,transparent); }
.sitemap-search > p { margin: .7rem 0 0; color: var(--color-muted-deep); font-size: .7rem; text-align: right; }
.sitemap-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(3rem,5vw,6rem) 0; border-top: 1px solid var(--color-border-strong); }
.sitemap-groups section { min-width: 0; padding: 2.3rem clamp(1.5rem,3vw,3rem) 0; border-right: 1px solid var(--color-border); }
.sitemap-groups section:nth-child(3n+1) { padding-left: 0; }
.sitemap-groups section:nth-child(3n) { padding-right: 0; border-right: 0; }
.sitemap-groups .sitemap-group--templates,.sitemap-groups .sitemap-group--articles { grid-column: 1/-1; padding-inline: 0; border-right: 0; border-top: 1px solid var(--color-border-strong); }
.sitemap-groups .sitemap-group--templates ul,.sitemap-groups .sitemap-group--articles ul { grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: clamp(2rem,5vw,6rem); }
.sitemap-groups h2 { margin: 0 0 1rem; font-size: clamp(1.25rem,1.6vw,1.55rem); }
.sitemap-groups ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sitemap-groups li[hidden],.sitemap-groups section[hidden] { display: none; }
.sitemap-groups a { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .58rem; color: var(--color-muted); border-bottom: 1px solid transparent; font-size: .84rem; line-height: 1.45; transition: color 160ms ease,border-color 160ms ease,padding 160ms ease; }
.sitemap-groups a svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; opacity: 0; transform: translateX(-8px); transition: opacity 160ms ease,transform 160ms ease; }
.sitemap-groups a:hover,.sitemap-groups a:focus-visible { padding-left: .45rem; color: var(--color-primary); border-bottom-color: color-mix(in srgb,var(--color-primary) 45%,transparent); }
.sitemap-groups a:hover svg,.sitemap-groups a:focus-visible svg { opacity: 1; transform: none; }
.sitemap-empty { padding: 4rem 0; color: var(--color-muted); text-align: center; }

.unsubscribe-stage { min-height: clamp(700px,calc(100vh - 220px),800px); border-bottom: 1px solid var(--color-border); }
.unsubscribe-stage__inner { padding-block: clamp(4.5rem,7vw,7rem); }
.unsubscribe-heading { max-width: 960px; margin: 0 auto clamp(3.5rem,5vw,5rem); text-align: center; }
.unsubscribe-heading h1 { margin: 0 0 1.2rem; font-size: clamp(3.5rem,5.3vw,5.8rem); line-height: .95; letter-spacing: -.065em; }
.unsubscribe-heading p { max-width: 720px; margin: 0 auto; color: var(--color-muted); font-size: clamp(1rem,1.25vw,1.2rem); line-height: 1.7; }
.unsubscribe-rail { position: relative; max-width: 980px; min-height: 340px; display: grid; place-items: center; margin: 0 auto; padding: clamp(3rem,5vw,5rem) clamp(1.5rem,5vw,5rem); border-top: 1px solid color-mix(in srgb,var(--color-primary) 65%,var(--color-border)); border-bottom: 1px solid var(--color-border); }
.unsubscribe-rail::before,.unsubscribe-rail::after { content: ""; position: absolute; top: -6px; width: 11px; height: 11px; background: var(--color-bg); border: 2px solid var(--color-primary); }
.unsubscribe-rail::before { left: 0; }.unsubscribe-rail::after { right: 0; }
.unsubscribe-confirm,.unsubscribe-success,.unsubscribe-invalid { width: min(100%,720px); }
.unsubscribe-confirm[hidden],.unsubscribe-success[hidden],.unsubscribe-invalid[hidden] { display: none; }
.unsubscribe-confirm h2,.unsubscribe-success h2,.unsubscribe-invalid h2 { margin: 0 0 .85rem; font-size: clamp(1.75rem,2.5vw,2.5rem); }
.unsubscribe-confirm > p,.unsubscribe-success p,.unsubscribe-invalid p { margin: 0; color: var(--color-muted); font-size: .94rem; line-height: 1.7; }
.unsubscribe-confirm dl { margin: 1.8rem 0 0; }
.unsubscribe-confirm dl div { display: flex; justify-content: space-between; gap: 2rem; padding-block: .9rem; border-block: 1px solid var(--color-border); }
.unsubscribe-confirm dt { color: var(--color-muted-deep); font-size: .73rem; }.unsubscribe-confirm dd { margin: 0; color: var(--color-text); font-size: .8rem; font-weight: 700; }
.unsubscribe-confirm form { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
.unsubscribe-confirm .button { min-width: 190px; border-radius: 4px; }
.unsubscribe-confirm form > a { color: var(--color-primary); font-size: .82rem; font-weight: 700; text-decoration: underline; text-underline-offset: .25rem; }
.unsubscribe-status { flex-basis: 100%; margin: 0 !important; color: #ff7a86 !important; font-size: .78rem !important; }
.unsubscribe-success,.unsubscribe-invalid { text-align: center; }
.unsubscribe-success > span { width: 92px; height: 92px; display: grid; place-items: center; margin: 0 auto 1.7rem; color: #fff; background: var(--color-primary); border-radius: 50%; animation: unsubscribe-pop 480ms cubic-bezier(.2,1.5,.4,1) both; }
.unsubscribe-success svg { width: 68px; height: 68px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }.unsubscribe-success svg circle { opacity: .3; }
.unsubscribe-success .button,.unsubscribe-invalid .button { margin-top: 1.8rem; border-radius: 4px; }
.unsubscribe-invalid > span { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 1.5rem; color: var(--color-primary); border: 1px solid var(--color-primary); font-size: 2rem; font-weight: 800; }
@keyframes unsubscribe-pop { from { opacity: 0; transform: scale(.7); } }

html[data-theme="light"] .system-page { --color-bg: #fff; --color-bg-elevated: #fff; --color-surface: #f7f8fb; --color-surface-strong: #f1f3f8; --color-text: #0f172a; --color-muted: #536078; --color-muted-deep: #78839a; --color-border: #e5e8ef; --color-border-strong: #cbd2df; }
html[data-theme="light"] .sitemap-search input { background: #fff; }

@media (max-width: 900px) {
    .response-stage__inner { grid-template-columns: 1fr; gap: 1rem; }.response-route { min-height: 260px; }.response-route p { margin-left: 40%; }.response-route span { margin-top: 6rem; }
    .sitemap-groups { grid-template-columns: repeat(2,minmax(0,1fr)); }.sitemap-groups section:nth-child(n) { padding-inline: 1.5rem; border-right: 1px solid var(--color-border); }.sitemap-groups section:nth-child(2n+1) { padding-left: 0; }.sitemap-groups section:nth-child(2n) { padding-right: 0; border-right: 0; }.sitemap-groups .sitemap-group--templates,.sitemap-groups .sitemap-group--articles { grid-column: 1/-1; padding-inline: 0; border-right: 0; }.sitemap-groups .sitemap-group--templates ul,.sitemap-groups .sitemap-group--articles ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
    .system-page .section-grid { background-size: calc((100% - (var(--gutter)*2))/3) 100%; }
    .response-stage { min-height: auto; }.response-stage__inner { padding-block: 4.5rem; }.response-code { font-size: clamp(8rem,39vw,12rem); }.response-copy h1 { font-size: clamp(2.55rem,12vw,3.7rem); }.response-route { min-height: 190px; margin-top: 1rem; padding: 1rem; }.response-route p { margin-left: 33%; }.response-route span { display: none; }.response-actions { display: grid; grid-template-columns: 1fr; }.response-actions .button { width: 100%; }
    .sitemap-stage__inner,.unsubscribe-stage__inner { padding-block: 4.5rem; }.sitemap-heading,.unsubscribe-heading { text-align: left; }.sitemap-heading h1,.unsubscribe-heading h1 { font-size: clamp(3rem,13vw,4.3rem); }.sitemap-groups { grid-template-columns: 1fr; }.sitemap-groups section:nth-child(n) { padding: 2rem 0 0; border-right: 0; }.sitemap-groups .sitemap-group--templates ul,.sitemap-groups .sitemap-group--articles ul { grid-template-columns: 1fr; }.sitemap-search > p { text-align: left; }
    .unsubscribe-heading { margin-bottom: 3rem; }.unsubscribe-rail { min-height: 420px; padding-inline: 0; }.unsubscribe-confirm form { display: grid; grid-template-columns: 1fr; }.unsubscribe-confirm .button { width: 100%; }.unsubscribe-confirm dl div { display: grid; gap: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
    .response-route path { stroke-dashoffset: 0; animation: none; }.response-route rect,.unsubscribe-success > span { animation: none; }
}