/* hero-art.css: the navy banner with a drawing on the right, shared by the Security pages (animated) and the Company
   pages (still drawings, .hv--still; Verlin 2026-10-19). Drawings come from make_hero_viz.py. */
.inst-sec-hero--viz { background: radial-gradient(70rem 40rem at 80% 40%, rgba(19, 141, 205, .22), transparent 60%), #0b1a2a; }
.inst-sec-hero--viz::after { display: none; }
.inst-sec-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.inst-sec-hero-viz { background: transparent !important; color: #eaf1f8; }
.inst-sec-hero-viz .nw-svg { width: 100%; max-width: 540px; height: auto; display: block; margin-left: auto; }
@media (max-width: 900px) { .inst-sec-hero-grid { grid-template-columns: minmax(0, 1fr); } .inst-sec-hero-viz { display: none; } }
.inst-sec-hero-viz .hv { width: 100%; max-width: 520px; height: auto; display: block; margin-left: auto; overflow: visible; }

/* Animated banner diagrams (Verlin 2026-10-19: photos looked "very 1990s"; Trusted Ecosystem's animated network is
   the model). Drawn by make_hero_viz.py on the navy banner; the photo banners on the Security pages are replaced. */
.hv text { font: 600 14px/1 var(--wp--preset--font-family--instrument, sans-serif); fill: #c9d6e3; }
.hv-ring { fill: none; stroke: rgba(234, 241, 248, .16); stroke-width: 1.2; }
.hv-ring--dash { stroke: #ffb347; stroke-dasharray: 4 9; opacity: .75; transform-box: fill-box; transform-origin: center; animation: hv-spin 32s linear infinite; }
.hv-ring--dash2 { stroke: #3aa7e0; stroke-dasharray: 2 10; opacity: .8; transform-box: fill-box; transform-origin: center; animation: hv-spin 48s linear infinite reverse; }
.hv-spoke { fill: none; stroke: rgba(234, 241, 248, .16); stroke-width: 1.3; }
.hv-node { fill: #0b1a2a; stroke: #3aa7e0; stroke-width: 2; }
.hv-node--done { stroke: #5fd39a; }
.hv-core-dot { fill: #3aa7e0; }
.hv-dot { fill: #ffb347; }
.hv-dot--auto { fill: #5fd39a; }
.hv-pulse { fill: none; stroke: #5fd39a; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hv-ping 2.8s ease-out infinite; }
.hv-shield { fill: rgba(19, 141, 205, .2); stroke: #3aa7e0; stroke-width: 2.2; }
.hv-lock { fill: none; stroke: #ffb347; stroke-width: 3.2; stroke-linecap: round; }
.hv-lockbody { fill: #ffb347; }
.hv-keyhole { fill: #0b1a2a; }
.hv-gate { stroke: #ffb347; stroke-width: 2; stroke-dasharray: 6 6; animation: hv-dash 2.4s linear infinite; }
.hv-person { fill: none; stroke: #eaf1f8; stroke-width: 2.2; }
.hv-done { fill: none; stroke: #5fd39a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hv-check { fill: none; stroke: #5fd39a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.hv-check--gate { animation: hv-gate-ok 4s ease-in-out infinite; }
.hv-card { fill: rgba(255, 255, 255, .04); stroke: rgba(234, 241, 248, .14); }
.hv .hv-card-t { font: 600 16px/1 var(--wp--preset--font-family--jost, sans-serif); fill: #eaf1f8; }
.hv .hv-card-n { font: 600 14px/1 var(--wp--preset--font-family--jost, sans-serif); fill: #ffb347; }
.hv-box { fill: none; stroke: rgba(234, 241, 248, .35); stroke-width: 1.6; }
.hv-tick { fill: none; stroke: #5fd39a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: hv-tick 10s ease-in-out infinite; }
.hv-chip { fill: rgba(19, 141, 205, .12); stroke: rgba(58, 167, 224, .55); stroke-width: 1.4; }
.hv-core { fill: #138dcd; stroke: #3aa7e0; stroke-width: 2; }
.hv .hv-core-t { font: 600 15px/1 var(--wp--preset--font-family--jost, sans-serif); fill: #fff; }
@keyframes hv-spin { to { transform: rotate(360deg); } }
@keyframes hv-ping { 0% { transform: scale(.65); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes hv-dash { to { stroke-dashoffset: -24; } }
@keyframes hv-gate-ok { 0%, 34% { stroke-dashoffset: 40; } 44%, 62% { stroke-dashoffset: 0; } 72%, 100% { stroke-dashoffset: 40; } }
@keyframes hv-tick { 0%, 4% { stroke-dashoffset: 24; } 9%, 80% { stroke-dashoffset: 0; } 86%, 100% { stroke-dashoffset: 24; } }
@media (prefers-reduced-motion: reduce) {
  .hv *, .hv { animation: none !important; }
  .hv-mover { display: none; }
  .hv-tick, .hv-check { stroke-dashoffset: 0; }
}

/* Still drawings for the Company pages: same palette, no motion */
.hv-stroke { fill: none; stroke: #3aa7e0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hv-stroke--thick { stroke-width: 3.2; }
.hv-stroke-o { fill: none; stroke: #ffb347; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hv-ring-o { fill: none; stroke: #ffb347; stroke-width: 2; opacity: .6; }
.hv-solid { fill: #3aa7e0; }
.hv-solid-o { fill: #ffb347; }
.hv-mute { fill: rgba(234, 241, 248, .22); }
.hv-bar { fill: rgba(58, 167, 224, .45); }
.hv-grid { fill: none; stroke: rgba(234, 241, 248, .08); stroke-width: 1; }
.hv-dash { stroke-dasharray: 5 7; }
.hv-node--lead { stroke: #ffb347; }
.hv-node--sm { stroke-width: 1.6; }
.hv-person--o { stroke: #ffb347; }
.hv-card--front { fill: #10283f; stroke: rgba(234, 241, 248, .2); }
.hv .hv-label { font: 600 20px/1 var(--wp--preset--font-family--jost, sans-serif); fill: #eaf1f8; }
.hv .hv-label--sm { font-size: 13px; fill: #c9d6e3; }
.hv .hv-label--o { font: 600 14px/1 var(--wp--preset--font-family--instrument, sans-serif); fill: #ffb347; }
.hv .hv-num { font: 600 13px/1 var(--wp--preset--font-family--jost, sans-serif); fill: #eaf1f8; }
.hv .hv-tag { font: 700 11px/1 var(--wp--preset--font-family--instrument, sans-serif); fill: #0b1a2a; letter-spacing: .04em; }
/* Platform banner: stacked layers */
.hv-plate { fill: rgba(234, 241, 248, .05); stroke: rgba(234, 241, 248, .32); stroke-width: 1.4; }
.hv-plate--b { fill: rgba(19, 141, 205, .16); stroke: #3aa7e0; }
.hv-plate--o { fill: rgba(255, 179, 71, .12); stroke: #ffb347; }
/* Phones and tablets (Verlin 2026-10-23: "pay close attention to the line heights within your headers"): V3's display
   headlines are set at 1.0-1.06 line height, which is fine on one line but cramped once they wrap on a small screen.
   Desktop is unchanged. */
@media (max-width: 1024px) {
  .v3s :is(h1, h2, .pb-h, .h3-h, .psh-h1, .plat-close-h, .deploy-h), .inst-rd-hero h1 { line-height: 1.14 !important; }
}