/* ==========================================================================
   css/pa.css: shared design for the main pages (body.pa-page).
   Warm charcoal hero, dark / light chapters with the head alternating left and right,
   one infographic per chapter, logo marquee, curved closing card.
   Motion comes from css/chapters.css + js/chapters.js and only runs under
   prefers-reduced-motion: no-preference. Brand tokens only (css/style.css :root).
   ========================================================================== */

/* hero base (pages whose own CSS does not define .tech-hero) */
body.pa-page .tech-hero { position: relative; overflow: hidden; }
body.pa-page .tech-hero .container { position: relative; z-index: 2; }
body.pa-page .tech-hero-title { font-size: clamp(2.8rem, 5vw, 5.4rem); line-height: 0.97; letter-spacing: -0.03em; margin-bottom: 0.95rem; }
body.pa-page .tech-hero-title .title-line { display: block; }
body.pa-page .tech-hero-title em { font-style: italic; }

/* =====================================================================
   PA DESIGN SYSTEM (technology, energy, solutions, about, contact)
   One dark canvas, one section pattern: orange rule + eyebrow, large left-aligned
   H2 with one accent phrase, one supporting line, then content. One card style.
   Motion comes from css/chapters.css + js/chapters.js.
   ===================================================================== */
body.pa-page .pa-main { background: var(--charcoal-800); color: var(--on-dark); }
.pa-sec { padding: clamp(4.5rem, 8vw, 7.5rem) 0; background: var(--charcoal-800); border-top: 1px solid var(--charcoal-700); }
.pa-sec .container { max-width: 1200px; }

.pa-head { max-width: 780px; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.pa-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.pa-head--split > div { max-width: 780px; }
.pa-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; color: var(--brand-orange); font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.pa-eyebrow::before { content: ""; width: 36px; height: 2px; background: var(--brand-orange); }
.pa-h2 { margin: 0; color: var(--on-dark); font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.pa-h2 em { font-style: normal; color: var(--brand-orange); }
.pa-lead { margin: 1.1rem 0 0; max-width: 60ch; color: var(--grey-400); font-size: 1.1rem; line-height: 1.65; }
.pa-more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border: 1px solid var(--brand-orange); border-radius: 999px; color: var(--on-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
.pa-more:hover, .pa-more:focus-visible { background: var(--brand-orange); color: var(--on-orange); }
.pa-card { background: var(--charcoal-700); border: 1px solid var(--charcoal-600); border-radius: 16px; }
.pa-caption { margin: 1.25rem 0 0; color: var(--grey-500); font-size: 0.9rem; }

/* section bar, dark on this page */
body.pa-page .tech-anchor-nav { background: color-mix(in srgb, var(--charcoal-900) 95%, transparent); border-top: 1px solid color-mix(in srgb, var(--brand-orange) 28%, transparent); border-bottom-color: var(--charcoal-700); }
/* links sit on the same 1200 px grid as the hero and section headings */
@media (min-width: 576px) {
  body.pa-page .tech-anchor-nav > .container { max-width: 1200px; padding: 0 12px; }
  body.pa-page .tech-anchor-nav .tech-anchor-link:first-of-type { margin-left: -1.05rem; }
}
body.pa-page .tech-anchor-nav .tech-anchor-link,
body.pa-page .tech-anchor-nav .zt-sec-toggle { color: var(--grey-400); }
body.pa-page .tech-anchor-nav .tech-anchor-link:hover,
body.pa-page .tech-anchor-nav .tech-anchor-link.is-active,
body.pa-page .tech-anchor-nav .zt-sec-toggle .zt-sec-current { color: var(--brand-orange); }
body.pa-page .tech-anchor-nav .zt-sec-toggle .zt-sec-current::before { color: var(--grey-400); }
@media (max-width: 575.98px) { body.pa-page .tech-anchor-nav [data-zt-sec-list] { background: var(--charcoal-900); border-bottom-color: var(--charcoal-700); } }

/* 1. challenge */
.pa-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.pa-split .pa-head { margin-bottom: 0; }
.zt-cascade { margin: 0; padding: clamp(1.25rem, 3vw, 2.25rem); }
.zt-cascade svg { display: block; width: 100%; height: auto; overflow: visible; }
.zt-slab .top { fill: var(--charcoal-500); stroke: var(--charcoal-400); stroke-width: 1; }
.zt-slab .lf { fill: var(--charcoal-600); }
.zt-slab .rf { fill: var(--charcoal-800); }
.zt-slab .lead { stroke: var(--charcoal-400); stroke-width: 1; stroke-dasharray: 2 4; }
.zt-slab .name { fill: var(--on-dark); font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.zt-slab .st { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; }
.zt-slab .ok { fill: var(--grey-400); }
.zt-slab .bad { fill: var(--brand-orange); opacity: 0; }
.zt-slab .dot { fill: var(--grey-400); }
.zt-spine line { stroke: var(--charcoal-400); stroke-width: 1.5; stroke-dasharray: 3 5; }
.zt-spine path { fill: var(--charcoal-400); }
.zt-spine text { fill: var(--grey-400); font-family: var(--font-display); font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; }
.zt-pulse { fill: var(--brand-orange); opacity: 0; }
.zt-cascade-key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--charcoal-500); color: var(--grey-400); font-size: 0.92rem; }
.zt-cascade-key span { color: var(--grey-400); display: inline-flex; align-items: center; gap: 0.5rem; }
.zt-cascade-key i { width: 10px; height: 10px; border-radius: 2px; background: var(--charcoal-500); }
.zt-cascade-key .is-fault i { background: var(--brand-orange); }
/* fault loop: power fails, the pulse climbs the spine, each layer above goes offline, then all recover (9 s) */
@media (prefers-reduced-motion: no-preference) {
  .js-chapters .zt-cascade.is-in .zt-slab-0 .top { animation: ztTop 9s ease infinite; }
  .js-chapters .zt-cascade.is-in .zt-slab-0 .lf { animation: ztLf 9s ease infinite; }
  .js-chapters .zt-cascade.is-in .zt-slab-0 .rf { animation: ztRf 9s ease infinite; }
  .js-chapters .zt-cascade.is-in .zt-slab-0 .dot { animation: ztDot 9s ease infinite; }
  .js-chapters .zt-cascade.is-in .zt-slab .ok { animation: ztOk 9s ease infinite; animation-delay: var(--d); }
  .js-chapters .zt-cascade.is-in .zt-slab .bad { animation: ztBad 9s ease infinite; animation-delay: var(--d); }
  .js-chapters .zt-cascade.is-in .zt-slab:not(.zt-slab-0) .body { animation: ztDim 9s ease infinite; animation-delay: var(--d); }
  .js-chapters .zt-cascade.is-in .zt-pulse { animation: ztClimb 9s ease-in-out infinite; }
}
@keyframes ztTop { 0%, 12% { fill: var(--charcoal-500); } 16%, 62% { fill: var(--brand-orange); } 72%, 100% { fill: var(--charcoal-500); } }
@keyframes ztLf { 0%, 12% { fill: var(--charcoal-600); } 16%, 62% { fill: var(--orange-600); } 72%, 100% { fill: var(--charcoal-600); } }
@keyframes ztRf { 0%, 12% { fill: var(--charcoal-800); } 16%, 62% { fill: var(--orange-800); } 72%, 100% { fill: var(--charcoal-800); } }
@keyframes ztDot { 0%, 12% { fill: var(--grey-400); } 16%, 62% { fill: var(--brand-orange); } 72%, 100% { fill: var(--grey-400); } }
@keyframes ztOk { 0%, 13% { opacity: 1; } 17%, 62% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes ztBad { 0%, 13% { opacity: 0; } 17%, 62% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes ztDim { 0%, 13% { opacity: 1; } 17%, 62% { opacity: 0.28; } 70%, 100% { opacity: 1; } }
@keyframes ztClimb { 0%, 14% { opacity: 0; transform: translateY(0); } 16% { opacity: 1; } 36% { opacity: 1; transform: translateY(-256px); } 40%, 100% { opacity: 0; transform: translateY(-256px); } }

/* 2. layers (platform tabs) */
.pa-layers-tabs [role="tablist"] { gap: 0; border-bottom: 1px solid var(--charcoal-600); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pa-layers-tabs [role="tablist"]::-webkit-scrollbar { display: none; }
.pa-layers-tabs [role="tab"] { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.55rem; padding: 1rem 1.25rem; color: var(--grey-400); font-size: 0.98rem; white-space: nowrap; }
.pa-layers-tabs [role="tab"] i { color: var(--grey-500); }
.pa-layers-tabs [role="tab"]:hover { color: var(--on-dark); }
.pa-layers-tabs [role="tab"][aria-selected="true"], .pa-layers-tabs [role="tab"][aria-selected="true"] i { color: var(--brand-orange); }
.pa-layers-tabs .ch-tab-bar { background: var(--charcoal-600); }
.pa-layers-tabs [role="tabpanel"] { padding-top: clamp(2rem, 4vw, 3rem); }
.pa-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pa-panel[hidden] { display: none; }
.pa-panel-title { margin: 0 0 1.1rem; color: var(--brand-orange); font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: 0.24em; line-height: 1.2; text-transform: uppercase; }
.pa-panel p { margin: 0; color: var(--grey-400); font-size: 1.05rem; line-height: 1.7; }
.pa-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.pa-points li { position: relative; padding-left: 1.5rem; color: var(--on-dark); font-family: var(--font-display); font-weight: 700; }
.pa-points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.7rem; height: 2px; background: var(--brand-orange); }
.pa-panel .pa-more { margin-top: 1.75rem; }
.pa-side { padding: 1.5rem; }
.pa-side svg { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto 1.25rem; }
.pa-side svg * { fill: none; stroke: var(--grey-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pa-side svg .acc { stroke: var(--brand-orange); }
.pa-side-label { display: block; margin-bottom: 0.4rem; color: var(--grey-500); font-family: var(--font-display); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.pa-links { list-style: none; margin: 0; padding: 0; }
.pa-links li + li { border-top: 1px solid var(--charcoal-600); }
.pa-links a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 0; color: var(--on-dark); font-weight: 600; text-decoration: none; }
.pa-links a i { color: var(--brand-orange); }
.pa-links a:hover, .pa-links a:focus-visible { color: var(--brand-orange); }

/* alternating layout: head on one side, infographic on the other (CrowdStrike-style) */
.pa-zig { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(2.5rem, 6vw, 6rem); }
.pa-zig--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.pa-zig--flip > .pa-head { order: 2; }
.pa-zig > .pa-head { margin-bottom: 0; }
.pa-zig--layers > .pa-head { order: -1; }
.pa-zig .pa-head .pa-more { margin-top: 1.75rem; }
.pa-viz { margin: 0; width: 100%; }
.pa-viz svg { display: block; width: 100%; height: auto; overflow: visible; }

/* 2. layers ring (segment follows the active tab) */
.pa-ring { max-width: 380px; margin: 0 auto; }
.pa-ring .trk { fill: none; stroke: var(--charcoal-600); stroke-width: 22; }
.pa-ring .seg { fill: none; stroke: var(--charcoal-500); stroke-width: 22; transition: stroke 0.4s ease; }
.pa-ring .seg.is-on { stroke: var(--brand-orange); }
.pa-ring .ring-n { fill: var(--brand-orange); font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.22em; }
.pa-ring .ring-name { fill: var(--on-dark); font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.pa-ring .ring-sub { fill: var(--grey-400); font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.2em; }
.pa-layers-tabs { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* 3. visibility: gradient status bars */
.pa-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }
.pa-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 10.5rem; align-items: center; column-gap: 1.25rem; row-gap: 0.5rem; }
.pa-bar-label { grid-column: 1 / -1; color: var(--grey-400); font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.pa-bar { position: relative; display: block; height: 14px; border-radius: 999px; background: var(--charcoal-700); overflow: hidden; }
.pa-bar > span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--charcoal-700) 0%, var(--orange-800) 45%, var(--brand-orange) 100%); transform-origin: 0 50%; }
.pa-bar-status { color: var(--on-dark); font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
@media (prefers-reduced-motion: no-preference) {
  .js-chapters .pa-bars > li .pa-bar > span { transform: scaleX(0); transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--ch-delay, 0ms) + 200ms); }
  .js-chapters .pa-bars.is-in > li .pa-bar > span { transform: scaleX(1); }
}

/* 4. delivery cycle */
.pa-cycle { max-width: 440px; margin: 0 auto; }
.pa-cycle .arc { fill: none; stroke: var(--brand-orange); stroke-width: 2.5; stroke-linecap: round; }
.pa-cycle .trk { fill: none; stroke: var(--charcoal-600); stroke-width: 1; stroke-dasharray: 3 6; }
.pa-cycle .node { fill: var(--brand-orange); stroke: none; }
.pa-cycle .node-n { fill: var(--on-orange); font-family: var(--font-display); font-size: 13px; font-weight: 800; }
.pa-cycle .lbl { fill: var(--on-dark); font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.pa-cycle .mid { fill: var(--grey-400); font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.2em; }
.pa-cycle marker path { fill: var(--brand-orange); stroke: none; }
.pa-steps { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.pa-steps li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.95rem 0; border-top: 1px solid var(--charcoal-600); }
.pa-steps li:last-child { border-bottom: 1px solid var(--charcoal-600); }
.pa-steps b { color: var(--brand-orange); font-family: var(--font-display); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.1em; padding-top: 0.15rem; }
.pa-steps h3 { margin: 0 0 0.2rem; color: var(--on-dark); font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
.pa-steps p { margin: 0; color: var(--grey-400); line-height: 1.55; }

/* 5. proof: ring gauges */
.pa-gauges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); text-align: center; }
.pa-gauge-dial { position: relative; display: block; max-width: 190px; margin: 0 auto; }
.pa-gauge-dial .trk { fill: none; stroke: var(--charcoal-600); stroke-width: 12; }
.pa-gauge-dial .val { fill: none; stroke: var(--brand-orange); stroke-width: 12; stroke-linecap: butt; }
.pa-gauge-n { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-dark); font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; }
.pa-gauge-word { display: block; margin-top: 1.1rem; color: var(--brand-orange); font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.1; }
.pa-gauge-cap { display: block; margin-top: 0.55rem; color: var(--on-dark); font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; line-height: 1.6; text-transform: uppercase; }
.pa-trusted { margin: clamp(3.5rem, 7vw, 5.5rem) 0 1.25rem; color: var(--grey-400); font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }
.pa-marquee { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent, rgb(var(--charcoal-rgb)) 8%, rgb(var(--charcoal-rgb)) 92%, transparent); mask-image: linear-gradient(to right, transparent, rgb(var(--charcoal-rgb)) 8%, rgb(var(--charcoal-rgb)) 92%, transparent); }
/* as on the home page: the logo row runs the full width of the screen */
.pa-marquee { width: 100vw; margin-left: calc(50% - 50vw); }
.pa-sec:has(.pa-marquee) { overflow-x: clip; }
.pa-marquee::-webkit-scrollbar { display: none; }
.pa-marquee-track { display: flex; width: max-content; }
.pa-logos { list-style: none; margin: 0; padding: 0 0.75rem 0 0; display: flex; gap: 0.75rem; }
.pa-logos[aria-hidden="true"] { display: none; }
.pa-logos li { flex: 0 0 160px; }
@media (prefers-reduced-motion: no-preference) {
  .pa-marquee { overflow: hidden; }
  .pa-logos[aria-hidden="true"] { display: flex; }
  .pa-marquee-track { animation: ztMarquee var(--pa-marquee-dur, 70s) linear infinite; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pa-marquee:hover .pa-marquee-track { animation-play-state: paused; }
}
@keyframes ztMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pa-logos li { display: grid; place-items: center; height: 64px; padding: 0.65rem 0.9rem; border-radius: 12px; background: var(--grey-100); }
.pa-logos img { max-width: 100%; max-height: 28px; width: auto; height: auto; object-fit: contain; }
/* colour behaviour as on the home page: greyscale, full colour on hover */
.pa-logos img { filter: grayscale(100%); opacity: 0.95; transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease; }
.pa-logos img:hover { filter: grayscale(0%); opacity: 1; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .pa-logos img:hover { transform: translateY(-2px); } }
.pa-logos .is-mark img { max-height: 38px; }
.pa-logos .is-small img { max-height: 22px; }

/* 6. FAQ (questions left, head right) */
#faq .pa-zig { align-items: start; }
@media (min-width: 992px) { #faq .pa-head { position: sticky; top: 9rem; } }
.pa-faq { max-width: 900px; }
.pa-faq details { border-top: 1px solid var(--charcoal-600); }
.pa-faq details:last-child { border-bottom: 1px solid var(--charcoal-600); }
.pa-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; cursor: pointer; list-style: none; color: var(--on-dark); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.pa-faq summary::-webkit-details-marker { display: none; }
.pa-faq summary::after { content: "+"; flex: 0 0 auto; color: var(--brand-orange); font-size: 1.5rem; line-height: 1; }
.pa-faq details[open] summary::after { content: "\2212"; }
.pa-faq summary:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 4px; }
.pa-faq details p { margin: 0 0 1.35rem; max-width: 70ch; color: var(--grey-400); line-height: 1.7; }

/* 7. next step: slow charcoal-to-orange drift; the orange stop is darkened so text and buttons keep contrast */
/* curved card on a light band, as on the home page; the drifting gradient lives inside the card */
#next-step { padding: clamp(3.5rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--grey-200); background: var(--grey-50); }
#next-step .container { max-width: 1200px; }
#next-step .cta-box { max-width: none; margin: 0; padding: clamp(1.75rem, 4.5vw, 3.5rem); border: 0; border-radius: 28px; text-align: left; background: linear-gradient(115deg, var(--charcoal-900) 0%, var(--charcoal-800) 35%, color-mix(in srgb, var(--orange-800) 80%, var(--charcoal-900)) 70%, var(--charcoal-800) 100%); background-size: 220% 220%; background-position: 0% 50%; box-shadow: 0 24px 60px color-mix(in srgb, var(--brand-charcoal) 18%, transparent); overflow: hidden; }
#next-step .section-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
#next-step .section-eyebrow::before { content: ""; width: 36px; height: 2px; }
#next-step .section-title { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.12; letter-spacing: -0.02em; }
#next-step .section-title::before, #next-step .section-title::after { display: none; }
#next-step .cta-actions-row { justify-content: flex-start; }
body.pa-page #next-step .cta-box, body.pa-page #next-step .cta-box * { text-align: left !important; }
body.pa-page #next-step .cta-actions-row, body.pa-page #next-step .cta-support-links { justify-content: flex-start !important; align-items: flex-start !important; }
body.pa-page #next-step .cta-support { align-items: flex-start !important; justify-content: flex-start !important; }
body.pa-page #next-step .cta-support-links a { justify-content: flex-start !important; width: auto; margin-left: 0; margin-right: 0; }
@media (max-width: 575.98px) {
  body.pa-page #next-step .cta-actions-row a { width: 100%; margin-left: 0; margin-right: 0; }
}
#next-step .section-eyebrow { color: var(--on-dark) !important; }
#next-step .section-eyebrow::before { background: var(--orange-200); }
#next-step .section-title em { color: var(--orange-200); }
#next-step p, #next-step .cta-support span { color: var(--on-dark) !important; }
#next-step .cta-support strong { color: var(--on-dark); }
#next-step .cta-support-links a { color: var(--orange-200); }
#next-step .home-btn-secondary { color: var(--on-dark); border-color: var(--on-dark); }
#next-step .cta-divider { background: color-mix(in srgb, var(--on-dark) 25%, transparent); }
@media (prefers-reduced-motion: no-preference) { #next-step .cta-box { animation: ztCtaDrift 20s ease-in-out infinite alternate; } }
@keyframes ztCtaDrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }


/* =====================================================================
   BALANCE: warm dark hero, then dark / light chapters (light = grey-50).
   Light sections use charcoal text and orange ink; #f57f20 stays for fills and strokes only.
   ===================================================================== */
html[data-theme] body.pa-page .tech-hero {
  padding: 168px 0 84px;
  text-align: left;
  color: var(--on-dark);
  background:
    radial-gradient(ellipse at 88% 0%, color-mix(in srgb, var(--orange-800) 70%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--orange-800) 22%, transparent), transparent 45%),
    linear-gradient(115deg, var(--charcoal-900) 0%, var(--charcoal-800) 60%, color-mix(in srgb, var(--orange-800) 30%, var(--charcoal-900)) 100%);
}
html[data-theme] body.pa-page .tech-hero::before { content: none; }
html[data-theme] body.pa-page .tech-hero > .container { max-width: 1200px; }
/* diagonal hairlines top right (CrowdStrike-style), fading into the charcoal */
html[data-theme] body.pa-page .tech-hero::after {
  inset: 0 0 0 42%;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--brand-orange) 45%, transparent) 0 1.5px, transparent 1.5px 16px);
  background-size: auto;
  -webkit-mask-image: linear-gradient(215deg, rgb(var(--charcoal-rgb)) 0%, transparent 62%);
  mask-image: linear-gradient(215deg, rgb(var(--charcoal-rgb)) 0%, transparent 62%);
  opacity: 0.55;
  animation: none;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-theme] body.pa-page .tech-hero::after { animation: ztHairDrift 40s linear infinite; }
}
@keyframes ztHairDrift { from { background-position: 0 0; } to { background-position: 226.27px 0; } }
html[data-theme] body.pa-page .tech-hero .section-eyebrow { color: var(--brand-orange); }
html[data-theme] body.pa-page .tech-hero-title { color: var(--on-dark); max-width: none; margin-left: 0; }
html[data-theme] body.pa-page .tech-hero-title .title-line { color: var(--on-dark); }
html[data-theme] body.pa-page .tech-hero-title em { color: var(--brand-orange); -webkit-text-fill-color: var(--brand-orange); background: none; animation: none; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html[data-theme] body.pa-page .tech-hero-title em {
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: linear-gradient(100deg, var(--brand-orange) 0%, var(--brand-orange) 40%, var(--orange-200) 50%, var(--brand-orange) 60%, var(--brand-orange) 100%);
    background-size: 250% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text;
  }
  @media (prefers-reduced-motion: no-preference) {
    html[data-theme] body.pa-page .tech-hero-title em { animation: heroTitleShimmer 9s ease-in-out 1.6s infinite; }
  }
}
.pa-hero .pa-zig--layers { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
html[data-theme] body.pa-page .pa-hero .tech-hero-title { margin: 0; font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: 1; }
.pa-hero .pa-lead { font-size: 1.15rem; max-width: 44ch; }
.pa-hero .pa-layers-tabs { margin-top: clamp(3rem, 6vw, 4.5rem); }
html[data-theme] body.pa-page .tech-hero-copy { color: var(--grey-400); font-size: 1.1rem; max-width: 46ch; margin-left: 0; margin-bottom: 0; }
@media (max-width: 991.98px) {
  html[data-theme] body.pa-page .tech-hero { padding: 132px 0 56px; }
  .pa-hero .pa-zig--layers { grid-template-columns: 1fr; }
  .pa-hero .pa-ring { max-width: 220px; }
  html[data-theme] body.pa-page .tech-hero::after { inset: 0 0 0 30%; opacity: 0.3; -webkit-mask-image: linear-gradient(200deg, rgb(var(--charcoal-rgb)) 0%, transparent 40%); mask-image: linear-gradient(200deg, rgb(var(--charcoal-rgb)) 0%, transparent 40%); }
}

/* light chapters */
.pa-sec--light { background: var(--grey-50); border-top-color: var(--grey-200); color: var(--brand-charcoal); }
.pa-sec--light .pa-eyebrow { color: var(--brand-orange-ink); }
.pa-sec--light .pa-h2 { color: var(--brand-charcoal); }
.pa-sec--light .pa-h2 em { color: var(--brand-orange-ink); }
.pa-sec--light .pa-lead { color: var(--text-muted); }
.pa-sec--light .pa-card { background: var(--grey-100); border-color: var(--grey-300); }
/* challenge graphic, light */
.pa-sec--light .zt-slab .top { fill: var(--grey-300); stroke: var(--grey-500); }
.pa-sec--light .zt-slab .lf { fill: var(--grey-500); }
.pa-sec--light .zt-slab .rf { fill: var(--grey-600); }
.pa-sec--light .zt-slab .lead { stroke: var(--grey-600); }
.pa-sec--light .zt-slab .name { fill: var(--brand-charcoal); }
.pa-sec--light .zt-slab .ok, .pa-sec--light .zt-slab .dot { fill: var(--text-muted); }
.pa-sec--light .zt-slab .bad { fill: var(--brand-orange-ink); }
.pa-sec--light .zt-spine line { stroke: var(--grey-600); }
.pa-sec--light .zt-spine path { fill: var(--grey-600); }
.pa-sec--light .zt-spine text { fill: var(--text-muted); }
.pa-sec--light .zt-cascade-key { border-top-color: var(--grey-300); }
.pa-sec--light .zt-cascade-key span { color: var(--text-muted); }
.pa-sec--light .zt-cascade-key i { background: var(--grey-300); }
@media (prefers-reduced-motion: no-preference) {
  .js-chapters .pa-sec--light .zt-cascade.is-in .zt-slab-0 .top { animation-name: ztTopL; }
  .js-chapters .pa-sec--light .zt-cascade.is-in .zt-slab-0 .lf { animation-name: ztLfL; }
  .js-chapters .pa-sec--light .zt-cascade.is-in .zt-slab-0 .rf { animation-name: ztRfL; }
  .js-chapters .pa-sec--light .zt-cascade.is-in .zt-slab-0 .dot { animation-name: ztDotL; }
}
@keyframes ztTopL { 0%, 12% { fill: var(--grey-300); } 16%, 62% { fill: var(--brand-orange); } 72%, 100% { fill: var(--grey-300); } }
@keyframes ztLfL { 0%, 12% { fill: var(--grey-500); } 16%, 62% { fill: var(--orange-600); } 72%, 100% { fill: var(--grey-500); } }
@keyframes ztRfL { 0%, 12% { fill: var(--grey-600); } 16%, 62% { fill: var(--orange-800); } 72%, 100% { fill: var(--grey-600); } }
@keyframes ztDotL { 0%, 12% { fill: var(--text-muted); } 16%, 62% { fill: var(--brand-orange-ink); } 72%, 100% { fill: var(--text-muted); } }
/* delivery cycle + steps, light */
.pa-sec--light .pa-cycle .trk { stroke: var(--grey-400); }
.pa-sec--light .pa-cycle .lbl { fill: var(--brand-charcoal); }
.pa-sec--light .pa-cycle .mid { fill: var(--text-muted); }
.pa-sec--light .pa-steps li { border-top-color: var(--grey-300); }
.pa-sec--light .pa-steps li:last-child { border-bottom-color: var(--grey-300); }
.pa-sec--light .pa-steps b { color: var(--brand-orange-ink); }
.pa-sec--light .pa-steps h3 { color: var(--brand-charcoal); }
.pa-sec--light .pa-steps p { color: var(--text-muted); }
/* at a glance, light */
.pa-sec--light .pa-gauge-dial .trk { stroke: var(--grey-300); }
.pa-sec--light .pa-gauge-n { color: var(--brand-charcoal); }
.pa-sec--light .pa-gauge-word { color: var(--brand-orange-ink); }
.pa-sec--light .pa-gauge-cap { color: var(--brand-charcoal); }
.pa-sec--light .pa-trusted { color: var(--text-muted); }
.pa-sec--light .pa-logos li { background: var(--grey-100); border: 1px solid var(--grey-300); }
/* what you see, light */
.pa-sec--light .pa-bar-label { color: var(--text-muted); }
.pa-sec--light .pa-bar { background: var(--grey-200); }
.pa-sec--light .pa-bar > span { background: linear-gradient(90deg, var(--grey-300) 0%, var(--orange-300) 45%, var(--brand-orange) 100%); }
.pa-sec--light .pa-bar-status { color: var(--brand-charcoal); }
.pa-sec--light .pa-caption { color: var(--text-muted); }
/* FAQ, light */
.pa-sec--light .pa-faq details { border-top-color: var(--grey-300); }
.pa-sec--light .pa-faq details:last-child { border-bottom-color: var(--grey-300); }
.pa-sec--light .pa-faq summary { color: var(--brand-charcoal); }
.pa-sec--light .pa-faq summary::after { color: var(--brand-orange-ink); }
.pa-sec--light .pa-faq summary:focus-visible { outline-color: var(--brand-orange-ink); }
.pa-sec--light .pa-faq details p { color: var(--text-muted); }

/* hover lift, pointer devices only */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pa-card { transition: border-color 0.25s ease, transform 0.25s ease; }
}

@media (max-width: 991.98px) {
  .pa-split, .pa-panel, .pa-zig, .pa-zig--flip { grid-template-columns: 1fr; }
  .pa-zig--flip > .pa-head { order: -1; }
  .pa-head--split { flex-direction: column; align-items: flex-start; }
  .pa-ring { max-width: 300px; margin: 0; }
  .pa-cycle { max-width: 380px; margin: 0; }
}
@media (max-width: 575.98px) {
  .pa-bars li { grid-template-columns: minmax(0, 1fr) 7.5rem; column-gap: 0.9rem; }
  .pa-bar-status { font-size: 0.95rem; }
  .pa-gauge-word { font-size: 1.1rem; }
  .pa-gauge-cap { font-size: 0.62rem; letter-spacing: 0.12em; }
  .pa-logos { gap: 0.5rem; padding-right: 0.5rem; }
  .pa-logos li { flex-basis: 120px; height: 52px; padding: 0.5rem 0.6rem; }
  .pa-logos img { max-height: 22px; }
  .pa-logos .is-mark img { max-height: 30px; }
  .pa-logos .is-small img { max-height: 18px; }
  .pa-layers-tabs [role="tab"] { padding: 0.85rem 1rem; font-size: 0.92rem; }
}

/* ==========================================================================
   SERVICE PAGES (networks.html and the other service pages): the detail card
   spans the full width under the heading/list and the drawing; the drawing
   sits beside the heading and list and stays in view while they scroll.
   ========================================================================== */
@media (min-width: 992px) {
  .nw-block[data-hs] { grid-template-areas: "head dia" "tabs dia" "cards cards"; grid-template-rows: auto 1fr auto; row-gap: 0; align-items: start; }
  .nw-block--flip[data-hs] { grid-template-areas: "dia head" "dia tabs" "cards cards"; }
  .nw-block[data-hs] > .nw-hs-side { display: contents; }
  .nw-block[data-hs] .nw-hs-side > .pa-head { grid-area: head; }
  .nw-block[data-hs] .nw-tabs { grid-area: tabs; }
  .nw-block[data-hs] .nw-cards { grid-area: cards; margin-top: 1.9rem; }
  .nw-block[data-hs] > .nw-dia { grid-area: dia; position: relative; top: auto; align-self: stretch; order: 0; }
  .nw-block[data-hs] .nw-dia-in { position: sticky; top: 9.5rem; }
  /* full-width card: summary on the left, the points on the right */
  .nw-block[data-hs] .nw-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: clamp(2rem, 4vw, 3.5rem); grid-template-rows: auto auto 1fr; align-content: start; min-height: 0; padding: 1.5rem 1.75rem 1.6rem; }
  .nw-block[data-hs] .nw-card > p { align-self: start; }
  .nw-block[data-hs] .nw-card > .nw-card-k, .nw-block[data-hs] .nw-card > h3, .nw-block[data-hs] .nw-card > p { grid-column: 1; }
  .nw-block[data-hs] .nw-card > ul:first-of-type { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; padding: 0 0 0 clamp(1.5rem, 3vw, 2.5rem); border-top: 0; border-left: 1px dashed var(--charcoal-500); }
  .nw-block[data-hs] .nw-card > ul:first-of-type ~ * { grid-column: 2; padding-left: clamp(1.5rem, 3vw, 2.5rem); }
  .pa-sec--light .nw-block[data-hs] .nw-card > ul:first-of-type { border-left-color: var(--grey-300); }
}
.nw-dia-in { position: relative; }