/* Observatory · Self-Healing. Builds on ../../product/product.css and ../observatory.css
   (tokens, the cyan accent, .ticks, .mode-tag, .heal-scene). Page-specific layout only. */

/* ---------------- Hero ---------------- */
.sh-hero{min-height:auto;padding:150px 0 110px}
.sh-hero::before{background:radial-gradient(90% 80% at 80% 30%,#07203a 0%,#04111f 55%,#03070f 100%)}
.sh-beam{position:absolute;left:-10%;top:-40%;width:1500px;height:1500px;z-index:1;border-radius:50%;pointer-events:none;background:conic-gradient(from 90deg,transparent 0deg,rgba(255,233,190,.05) 8deg,rgba(255,233,190,.12) 16deg,rgba(255,233,190,.04) 24deg,transparent 32deg,transparent 360deg);animation:sh-sweep 14s ease-in-out infinite alternate}
@keyframes sh-sweep{from{transform:rotate(-8deg)}to{transform:rotate(14deg)}}
.sh-hero .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 26px;font:500 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--cyan);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
.sh-hero h1{font-size:clamp(44px,6vw,86px);letter-spacing:-.02em}
.sh-hero h1 span{background:linear-gradient(180deg,#e9fbff 0%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sh-hero .lede{color:#c7d3e3}
.sh-hero-rail{list-style:none;margin:0;padding:0 0 0 30px;position:relative;display:grid;gap:10px}
.sh-hero-rail::before{content:'';position:absolute;left:8px;top:14px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(238,122,92,.7),var(--cyan) 55%,var(--ok))}
.sh-hero-rail li{position:relative;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(6,20,40,.6);backdrop-filter:blur(4px)}
.sh-hero-rail li::before{content:'';position:absolute;left:-27px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#0b2340;border:1px solid var(--cyan)}
.sh-hero-rail li:first-child::before{border-color:var(--risk);background:rgba(238,122,92,.4)}
.sh-hero-rail li.is-verify{border-color:rgba(95,214,164,.45)}
.sh-hero-rail li.is-verify::before{border-color:var(--ok);background:var(--ok);box-shadow:0 0 10px var(--ok)}
.sh-hero-rail span{font:500 10px var(--mono);letter-spacing:.2em;color:var(--cyan)}
.sh-hero-rail b{margin-left:10px;font:500 13px var(--mono);letter-spacing:.18em;text-transform:uppercase}
.sh-hero-rail li.is-verify b{color:var(--ok)}
.sh-hero-rail em{display:block;margin-top:4px;font-style:normal;font-size:14px;color:var(--body)}

/* ---------------- Journey timeline ---------------- */
.timeline{list-style:none;counter-reset:tl;margin:clamp(40px,6vh,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;position:relative}
.timeline::before{content:'';position:absolute;left:0;right:0;top:15px;height:1px;background:linear-gradient(90deg,rgba(238,122,92,.5),rgba(88,220,248,.5) 45%,rgba(95,214,164,.6))}
.timeline li{counter-increment:tl;position:relative;padding-top:44px}
.timeline li::before{content:counter(tl);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;border:1px solid rgba(88,220,248,.45);background:#051528;font:500 11px/29px var(--mono);text-align:center;color:var(--cyan)}
.timeline b{display:block;font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.timeline p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--body)}
.timeline strong{display:block;margin-top:8px;font:600 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.timeline .tl-milestone::before{background:var(--cyan);color:#04111f;box-shadow:0 0 14px rgba(88,220,248,.55)}
.timeline .tl-milestone--ok::before{background:var(--ok);border-color:var(--ok);box-shadow:0 0 14px rgba(95,214,164,.55)}
.timeline .tl-milestone--ok strong{color:var(--ok)}
.milestones{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:stretch;margin-top:clamp(40px,6vh,64px)}
.ms{padding:24px;border:1px solid rgba(88,220,248,.3);border-radius:16px;background:linear-gradient(180deg,rgba(8,32,58,.6),rgba(5,14,30,.6))}
.ms--ok{border-color:rgba(95,214,164,.45);background:linear-gradient(180deg,rgba(12,52,44,.45),rgba(5,14,30,.6))}
.ms--ok .mode-tag{color:var(--ok)}
.ms h3{font-size:22px;font-weight:400}
.ms p:last-child{margin:10px 0 0;color:var(--body);font-size:15px}
.ms-gap{display:grid;place-items:center}
.ms-gap span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);font-size:26px;font-weight:200;color:var(--gold)}

/* ---------------- Modes ---------------- */
.sh-modes{background:radial-gradient(70% 60% at 20% 0%,rgba(13,79,115,.2),transparent 70%)}
.mode{position:relative;padding:22px;border:1px solid var(--line);border-radius:16px;background:rgba(6,20,40,.5)}
.mode h3{font-size:22px}
.mode-who{white-space:nowrap;display:flex;align-items:center;gap:10px;margin:18px 0 0!important;font:500 10.5px var(--mono)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)!important}
.mode-who i{flex:none;position:relative;width:44px;height:6px;border-radius:3px;background:rgba(159,193,214,.12);overflow:hidden}
.mode-who i::after{content:'';position:absolute;inset:0 auto 0 0;width:calc(var(--lvl) * 25%);border-radius:3px;background:linear-gradient(90deg,#2a78e6,var(--cyan))}
.mode:nth-child(4){border-color:rgba(88,220,248,.35)}
.policy-ticks{margin-top:clamp(32px,5vh,48px);max-width:820px}

.p-heal .feature .mode-tag{font-size:10.5px}

/* ---------------- Services diagram ---------------- */
.sh-services .split{align-items:center;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.deps{margin:0;padding:44px clamp(8px,1.4vw,18px) 16px;min-height:0;background:radial-gradient(80% 70% at 50% 60%,rgba(13,79,115,.3),transparent 70%),linear-gradient(180deg,rgba(8,20,40,.85),rgba(4,10,22,.85))}
.deps svg{width:100%;height:auto}
.deps-label{position:absolute;left:18px;top:16px;margin:0;font:500 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(159,193,214,.85)}
.deps figcaption{margin-top:12px;font-size:13px;color:var(--muted)}
.deps text{font:500 15px Inter,system-ui,sans-serif;fill:#e3eef8;text-anchor:middle}
.deps .dp-row{font:500 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;fill:rgba(159,193,214,.65);text-anchor:start}
.deps .dp-sub{font:500 12px var(--mono);fill:var(--steel)}
.dp-edges path{fill:none;stroke:rgba(88,220,248,.3);stroke-width:1.4;stroke-dasharray:3 6}
.dp-edges path.hot{stroke:rgba(226,174,94,.75);stroke-dasharray:none;stroke-width:1.8}
.dp-node rect{fill:rgba(6,42,70,.8);stroke:rgba(88,220,248,.35)}
.dp-node.hot rect{stroke:rgba(226,174,94,.8);fill:rgba(60,42,14,.55)}
.dp-node.target rect{stroke:var(--risk);stroke-width:1.6;fill:rgba(80,30,20,.55);filter:drop-shadow(0 0 14px rgba(238,122,92,.35))}
.dp-node.target .dp-sub{fill:#ffb39f}
.dp-node.infra:not(.target):not(.busy) rect{stroke:rgba(95,214,164,.7)}
.dp-node.infra:not(.target):not(.busy) .dp-sub{fill:var(--ok)}
.dp-node.busy rect{stroke:rgba(148,112,245,.8);stroke-dasharray:4 4}
.dp-node.busy .dp-sub{fill:#c3afff}
.dp-legend rect{fill:rgba(3,10,22,.6);stroke:rgba(160,185,220,.14)}
.dp-legend text{font:400 14px Inter,system-ui,sans-serif;fill:var(--body);text-anchor:start}
.lg-hot{fill:var(--gold)}.lg-keep{fill:var(--ok)}.lg-busy{fill:var(--violet)}

/* ---------------- Human + AI ---------------- */
.lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,32px);margin-top:48px}
.lane{padding:24px;border:1px solid var(--line);border-radius:16px;background:rgba(6,20,40,.5)}
.lane--ai{border-color:rgba(148,112,245,.35);background:linear-gradient(180deg,rgba(40,26,80,.3),rgba(6,20,40,.5))}
.lane--ai .path-who{color:#c3afff}
.lane ol{list-style:none;counter-reset:ln;margin:0;padding:0;display:grid;gap:8px}
.lane li{counter-increment:ln;display:flex;gap:12px;align-items:baseline;padding:10px 14px;border-radius:10px;background:rgba(88,220,248,.05);border:1px solid rgba(88,220,248,.14);font-size:15px}
.lane li::before{content:counter(ln);font:500 10.5px var(--mono);color:var(--cyan)}
.lane--ai li{background:rgba(148,112,245,.06);border-color:rgba(148,112,245,.18)}
.lane--ai li::before{color:#c3afff}
.lane-note{margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.statement{margin:clamp(40px,6vh,56px) auto 0;max-width:860px;text-align:center;font-size:clamp(20px,2.1vw,28px);font-weight:300;line-height:1.35;color:var(--ink);padding:24px 28px;border-top:1px solid rgba(88,220,248,.3);border-bottom:1px solid rgba(88,220,248,.3)}
.statement--sm{font-size:clamp(17px,1.6vw,21px);padding:18px 22px}
.statement--left{text-align:left;margin-left:0;margin-top:28px}
.statement-sub{margin:16px auto 0;max-width:720px;text-align:center;color:var(--body);font-size:15px}

/* ---------------- Visibility ---------------- */
.sh-vis{background:linear-gradient(180deg,#03070f,#04111f 50%,#03070f)}
.vis-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(48px,7vh,72px);align-items:center}
.vis-cta{padding:26px;border:1px solid rgba(88,220,248,.3);border-radius:16px;background:linear-gradient(180deg,rgba(8,32,58,.6),rgba(5,14,30,.6))}
.vis-cta p{margin:0 0 20px;color:var(--body)}

/* ---------------- Scope + environment ---------------- */
.scope{padding:26px;border:1px solid var(--line);border-radius:16px;background:rgba(6,20,40,.5)}
.scope h3{font-size:22px}
.scope--next{border-style:dashed;border-color:rgba(226,174,94,.4)}
.scope--next .mode-tag{color:var(--gold)}
.env-cols{display:grid;gap:14px}
.env-cols>div{padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:rgba(6,20,40,.5)}
.env-cols h3{font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.env-cols p{margin:8px 0 0;color:var(--body);font-size:15px}
.sh-env .split{align-items:center}

/* ---------------- Motion ---------------- */
.motion-off .sh-beam{animation:none!important}
@media (prefers-reduced-motion:reduce){.sh-beam{animation:none!important}}

/* ---------------- Responsive ---------------- */
@media (max-width:980px){
  .sh-hero .wrap{grid-template-columns:1fr}
  .sh-hero-rail{max-width:560px}
  .timeline{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}
  .timeline::before{display:none}
  .vis-grid{grid-template-columns:1fr}
  .sh-services .split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sh-hero{padding:110px 0 70px}
  .timeline{grid-template-columns:1fr;gap:0;padding-left:0}
  .timeline li{padding:0 0 18px 46px}
  .timeline li:not(:last-child)::after{content:'';position:absolute;left:15px;top:32px;bottom:2px;width:1px;background:rgba(88,220,248,.3)}
  .milestones{grid-template-columns:1fr}
  .ms-gap span{width:40px;height:40px;font-size:20px}
  .lanes{grid-template-columns:1fr}
  .statement{padding:18px 4px;text-align:left}
  .statement-sub{text-align:left}
  .close-beam{width:1000px;height:1000px;margin:-500px 0 0 -500px}
}