/* Scoped to the phase-03 hero. Uses foundation without overriding its tokens. */
.alta-hero { container: alta-hero / inline-size; background: var(--alta-white); }
.hero-stage { --hero-layout: mobile; position: relative; padding-top: var(--alta-space-10); }
.hero-copy { position: relative; z-index: 2; max-width: 42rem; margin-inline: auto; }
.alta-site .hero-copy h1 { font-size: clamp(2rem,10cqi,3rem); line-height: 1.06; letter-spacing: -.04em; font-weight: 750; text-wrap: initial; }
.hero-copy h1 > span { display: block; }
.hero-title__resolution { color: var(--alta-blue-900); font-weight: 500; }
.hero-subtitle { max-width: 32em; margin-top: var(--alta-space-6) !important; color: var(--alta-muted); font-size: clamp(1rem,1.5cqi,1.1875rem); line-height: 1.6; }
.hero-actions { margin-top: var(--alta-space-6); gap: var(--alta-space-4) var(--alta-space-6); }
.hero-network { position: relative; height: 23rem; max-width: 42rem; margin: var(--alta-space-8) auto 0; }
.hero-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-edge { fill: none; stroke: #BBC6DD; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: stroke 180ms, opacity 180ms; }
.hero-edge--optional { stroke-dasharray: .007 .009; }
.hero-connection { transition: opacity 180ms; }
.hero-connection--secondary { opacity: .56; }
.hero-connection--context { opacity: 0; }
.hero-pulse { fill: none; stroke: var(--alta-blue-700); stroke-width: 2; stroke-linecap: round; opacity: 0; vector-effect: non-scaling-stroke; pointer-events: none; }
[data-path-layout='desktop'], [data-path-layout='tablet'] { display: none; }
.alta-site .hero-node {
  position: absolute; z-index: 1; left: var(--mobile-x); top: var(--mobile-y); translate: -50% -50%;
  display: none; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .5rem .65rem .55rem;
  width: max-content; max-width: 11rem; min-height: 2.75rem; margin: 0; justify-content: center;
  color: var(--alta-muted); background: var(--alta-white); border: 0; border-radius: 0;
  font-family: var(--alta-font); line-height: 1.15; text-align: left; cursor: pointer;
  transition: color 180ms, background-color 180ms; touch-action: manipulation; will-change: transform;
}
.alta-site .hero-node--mobile { display: flex; }
.hero-node__label { font-size: 1.125rem; font-weight: 500; letter-spacing: -.02em; }
.hero-node__group { position: absolute; top: 100%; left: .65rem; width: max-content; max-width: 8rem; font-size: .6875rem; color: var(--alta-muted); line-height: 1.4; opacity: 0; transition: opacity 180ms; pointer-events: none; background: var(--alta-white); }
.alta-site .hero-node--primary { z-index: 2; color: var(--alta-blue-900); }
.hero-node--primary .hero-node__label { font-size: 1.375rem; font-weight: 600; }
.hero-node--primary .hero-node__group { opacity: 1; }
.hero-node--principle .hero-node__label { font-size: .8125rem; font-weight: 450; letter-spacing: 0; }
.hero-node--infrastructure .hero-node__label { font-size: .75rem; font-weight: 400; letter-spacing: 0; }
[data-node='edr'] .hero-node__group, [data-node='dlp'] .hero-node__group { left: auto; right: .65rem; text-align: right; }
.hero-node__group:empty { display: none; }
.hero-copy { z-index: 3; }
.alta-site .hero-node:disabled { cursor: default; opacity: 1; }
.alta-site .hero-node:hover:not(:disabled), .alta-site .hero-node:focus-visible, .alta-site .hero-node.is-selected { background: var(--alta-tint); color: var(--alta-blue-900); }
.hero-node:is(:hover,:focus-visible,.is-selected) .hero-node__group { opacity: 1; }
.hero-network.has-selection .hero-node.is-related { color: var(--alta-blue-900); }
.hero-network.has-selection .hero-node.is-related .hero-node__group { opacity: 1; }
.hero-network.has-selection .hero-node:not(.is-related) .hero-node__group { opacity: 0; }
.hero-network.has-selection .hero-node:not(.is-related) { color: var(--alta-muted); }
.hero-network.has-selection .hero-edge.is-related { stroke: var(--alta-blue-700); stroke-width: 1.5; opacity: 1; }
.hero-caption { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--alta-space-4); padding-top: var(--alta-space-5); border-top: 1px solid var(--alta-line); }
.hero-detail { flex: 1 1 35rem; max-width: 68ch; min-height: 4.5em; font-size: var(--alta-text-small); line-height: 1.5; }
.hero-detail__lead { display: block; }
.hero-detail__hint { display: block; margin-top: var(--alta-space-1); color: var(--alta-muted); }
.hero-motion { display: inline-flex; align-items: center; gap: var(--alta-space-2); min-height: 2.75rem; flex: 0 1 auto; padding: .5rem 0; color: var(--alta-muted); background: none; border: 0; font-size: var(--alta-text-small) !important; cursor: pointer; }
.hero-motion svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hero-motion:hover { color: var(--alta-blue-900); }
.hero-model { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--alta-space-2) var(--alta-space-6); padding-block: var(--alta-space-4) var(--alta-space-8); color: var(--alta-muted); font-size: .75rem; line-height: 1.5; }
.hero-relations { flex: 1 1 auto; }
.hero-relations summary { cursor: pointer; text-decoration: underline; text-underline-offset: .2em; padding-block: .5rem; width: fit-content; }
.hero-relations ul { padding: var(--alta-space-4) 0 var(--alta-space-2) var(--alta-space-5); max-width: 75ch; }
.hero-relations li + li { margin-top: var(--alta-space-2); }
@container alta-hero (min-width: 18.01em) and (max-width: 47.99em) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-node .hero-node__group { left: 50%; right: auto; translate: -50% 0; text-align: center; }
}
@container alta-hero (min-width: 48em) {
  .hero-stage { --hero-layout: tablet; }
  .hero-network { height: 24rem; }
  .alta-site .hero-node--tablet { display: flex; left: var(--tablet-x); top: var(--tablet-y); }
  [data-path-layout='tablet'] { display: initial; }
  [data-path-layout='mobile'] { display: none; }
}
@container alta-hero (min-width: 70em) {
  .hero-stage { --hero-layout: desktop; padding-block: 7.5rem 7rem; min-height: 45rem; }
  .hero-copy { margin-left: 22%; margin-right: 15%; max-width: none; }
  .alta-site .hero-copy h1 { font-size: clamp(4rem,5.35cqi,6.5rem); line-height: 1.045; }
  .hero-title__resolution { margin-top: .1em; }
  .hero-subtitle { font-size: 1.125rem; max-width: 32em; }
  .hero-actions { margin-top: var(--alta-space-8); }
  .hero-network { position: absolute; inset: 0; height: auto; margin: 0; max-width: none; pointer-events: none; }
  .alta-site .hero-node { display: flex; left: var(--node-x); top: var(--node-y); pointer-events: auto; padding: .65rem .8rem; }
  .hero-node__label { font-size: clamp(1.125rem,1.5cqi,1.375rem); }
  .hero-node--primary .hero-node__label { font-size: clamp(1.375rem,1.8cqi,1.625rem); }
  .hero-node--principle .hero-node__label { font-size: .875rem; }
  .hero-node--infrastructure .hero-node__label { font-size: .8125rem; }
  .hero-node__group { font-size: .6875rem; }
  [data-path-layout='desktop'] { display: initial; }
  [data-path-layout='mobile'], [data-path-layout='tablet'] { display: none; }
}
/* Large user text becomes a readable list instead of shrinking graph labels. */
@container alta-hero (max-width: 18em) {
  .hero-stage { --hero-layout: list; }
  .hero-network { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--alta-space-4); height: auto; }
  .hero-connections { display: none; }
  .alta-site .hero-node { position: relative; left: auto; top: auto; translate: none; transform: none !important; max-width: 100%; width: 100%; overflow-wrap: anywhere; }
  .hero-node__label, .hero-node--primary .hero-node__label { font-size: 1rem; }
  .hero-node__group { position: static; width: auto; font-size: .7rem; opacity: 1; }
  .hero-copy h1 br { display: none; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-node, .hero-node__group, .hero-edge, .hero-connection { transition: none !important; }
  .hero-node { will-change: auto; }
  .hero-pulse { display: none; }
}
@media (max-height: 720px) and (min-width: 1120px) {
  .alta-site [data-node='ndr'], .alta-site [data-node='xdr'] { display: none; }
}
@media (forced-colors: active) {
  .hero-edge { stroke: CanvasText; }
  .alta-site .hero-node { border: 1px solid ButtonText; }
}