.commercial-page .concept-hero .lede{max-width:52ch}
.commercial-page .k{font:500 11px/1.2 var(--cyb-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyb-accent);margin-bottom:12px}
.commercial-page .actions{margin-top:28px}

/* Buyer journey instrument: the four adoption stages across the top, the
   governed commercial record that Deploy hangs from along the bottom. */
.commercial-journey{margin:clamp(34px,5.5vw,64px) 0 0;border:1px solid var(--cyb-line-strong);border-radius:var(--cyb-radius-lg);overflow:hidden;background:radial-gradient(ellipse 60% 80% at 50% 40%,color-mix(in srgb,var(--cyb-cyan) 7%,transparent),transparent 72%),var(--cyb-surface);box-shadow:var(--cyb-shadow-2)}
.commercial-journey__head{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1.3rem;border-bottom:1px solid var(--cyb-line);font:500 .66rem/1.2 var(--cyb-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyb-fg-3)}
.commercial-journey__head span:last-child{display:flex;align-items:center;gap:.55rem;color:var(--cyb-green)}
.commercial-journey__head span:last-child::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.commercial-journey__stage{padding:clamp(12px,2.4vw,28px) clamp(10px,2vw,24px) 0}
.cj-svg{display:block;width:100%;height:auto;font-family:var(--cyb-body,system-ui)}
.cj-svg text{text-anchor:middle}
.cj-stage rect:first-child{fill:color-mix(in srgb,var(--cyb-cyan) 5%,var(--cyb-bg-2));stroke:color-mix(in srgb,var(--cyb-cyan) 38%,transparent);stroke-width:1.2}
.cj-stage--deploy rect:first-child{stroke:var(--cyb-cyan);stroke-width:1.6}
.cj-k{font:500 11px var(--cyb-mono);letter-spacing:.14em;fill:var(--cyb-cyan)}
.cj-t{font:500 13px var(--cyb-body,system-ui);fill:var(--cyb-fg)}
.cj-scope rect{fill:color-mix(in srgb,var(--cyb-cyan) 22%,transparent);stroke:color-mix(in srgb,var(--cyb-cyan) 55%,transparent)}
.cj-scope .cj-ev{fill:color-mix(in srgb,var(--cyb-green) 40%,transparent);stroke:var(--cyb-green)}
.cj-spine{fill:none;stroke:color-mix(in srgb,var(--cyb-cyan) 30%,transparent);stroke-width:1.4}
.cj-pulse{fill:none;stroke:var(--cyb-cyan);stroke-width:2;stroke-dasharray:3 18;animation:cjFlow 2.6s linear infinite}
.cj-gate rect{fill:var(--cyb-bg-2);stroke:var(--cyb-green);stroke-width:1.4}
.cj-gate text{font:500 10px var(--cyb-mono);letter-spacing:.06em;fill:var(--cyb-fg-3)}
.cj-loop{fill:none;stroke:color-mix(in srgb,var(--cyb-green) 70%,transparent);stroke-width:1.3;stroke-dasharray:5 6}
.cj-arrowhead{fill:var(--cyb-green)}
.cj-loop-l{font:500 10px var(--cyb-mono);letter-spacing:.08em;fill:var(--cyb-green)}
.cj-drop{fill:none;stroke:var(--cyb-cyan);stroke-width:1.2;stroke-dasharray:2 5}
.cj-rail-h{font:500 10px var(--cyb-mono);letter-spacing:.2em;fill:var(--cyb-fg-3)}
.cj-rail{fill:none;stroke:color-mix(in srgb,var(--cyb-cyan) 34%,transparent);stroke-width:1.4}
.cj-step circle{fill:var(--cyb-bg-2);stroke:var(--cyb-cyan);stroke-width:1.4}
.cj-step--accept circle{fill:var(--cyb-cyan)}
.cj-step text{font:500 12px var(--cyb-body,system-ui);fill:var(--cyb-fg)}
.cj-step .cj-s{font:400 10.5px var(--cyb-body,system-ui);fill:var(--cyb-fg-3)}
@keyframes cjFlow{to{stroke-dashoffset:-42}}

.commercial-journey__legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--cyb-line)}
.commercial-journey__legend li{padding:clamp(16px,2.2vw,24px);border-right:1px solid var(--cyb-line)}
.commercial-journey__legend li:last-child{border-right:0}
.commercial-journey__legend h3,.commercial-card h3{font-family:var(--cyb-display);font-weight:400;line-height:1.25;letter-spacing:var(--cyb-tracking-display);margin:0 0 8px}
.commercial-journey__legend p,.commercial-card p,.commercial-drivers p{color:var(--cyb-fg-2);line-height:1.55;margin:0}

/* Public-record proof band directly under the hero. */
.commercial-proof{padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--cyb-line)}
.commercial-proof__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
.commercial-proof__list li{display:grid;gap:6px;align-content:start}
.commercial-proof__list b{font-family:var(--cyb-display);font-weight:400;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1;color:var(--cyb-fg)}
.commercial-proof__list span{color:var(--cyb-fg-2);line-height:1.45}
.commercial-proof__list a{font:500 12px/1.3 var(--cyb-mono);color:var(--cyb-accent);text-decoration:none}
.commercial-proof__list a:hover,.commercial-proof__list a:focus-visible{text-decoration:underline}

.commercial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.commercial-card{border:1px solid var(--cyb-line);border-radius:var(--cyb-radius-md);background:var(--cyb-surface);padding:clamp(22px,3vw,30px);box-shadow:var(--cyb-highlight)}
.commercial-drivers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
.commercial-drivers article{padding:20px;border-top:2px solid var(--cyb-accent);background:color-mix(in srgb,var(--cyb-accent) 3%,var(--cyb-surface));border-radius:0 0 var(--cyb-radius-md) var(--cyb-radius-md)}
.commercial-topology{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px}
.commercial-topology .k{margin:0}
.commercial-topology ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.commercial-topology li{padding:6px 12px;border:1px solid var(--cyb-line-strong);border-radius:999px;color:var(--cyb-fg-2);font-size:.9rem}

.commercial-diligence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.commercial-diligence article{padding:clamp(20px,2.6vw,28px);border:1px solid var(--cyb-line);border-radius:var(--cyb-radius-md);background:var(--cyb-surface)}
.commercial-diligence ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.commercial-diligence li{position:relative;padding-left:22px;color:var(--cyb-fg-2);line-height:1.45}
.commercial-diligence li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:6px;border-left:2px solid var(--cyb-green);border-bottom:2px solid var(--cyb-green);transform:rotate(-45deg)}

@media(max-width:900px){.commercial-drivers,.commercial-proof__list{grid-template-columns:1fr 1fr}.commercial-diligence{grid-template-columns:1fr}}
/* Below tablet width the diagram's labels would shrink past legibility, so the
   numbered legend carries the journey on its own as a vertical sequence. */
/* Text equivalent of the SVG commercial-record rail: read by assistive tech always, shown when the diagram is hidden. */
.commercial-journey__record{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.commercial-topology__note{flex-basis:100%;margin:0;color:var(--cyb-fg-3);font-size:.85rem}
@media(max-width:960px){
  .commercial-journey__stage{display:none}
  .commercial-journey__record{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;padding:clamp(16px,2.2vw,24px);border-top:1px solid var(--cyb-line)}
  .commercial-journey__record ol{margin:.6rem 0 0;padding-left:1.2rem;color:var(--cyb-fg-2);line-height:1.55}
  .commercial-journey__record b{color:var(--cyb-fg);font-weight:500}
}
@media(max-width:720px){
  .commercial-journey__legend{grid-template-columns:1fr;border-top:0}
  .commercial-journey__legend li{border-right:0;border-bottom:1px solid var(--cyb-line)}
  .commercial-journey__legend li:last-child{border-bottom:0}
}
@media(max-width:620px){.commercial-drivers,.commercial-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cj-pulse{animation:none;stroke-dasharray:none;opacity:.5}}
/* Sections here lead with a heading alone, so the title row need not reserve
   the empty copy column the concept layout provides for an intro paragraph.
   secondary-page-system.css pins both with !important, hence the match. */
html body.commercial-page .concept-title-row:not(:has(.copy)){grid-template-columns:1fr!important;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
html body.commercial-page .concept-title-row:not(:has(.copy)) h2{max-width:28em!important}