/* tracston.observer — story enhancements (#16449, wiki 119/3442).
   Extends site.css: same tokens, mono labels, line borders. No new fonts or frameworks. */

/* ---------- hero: one picture ---------- */
.hero-one{margin:26px auto 0;font-family:var(--mono);font-size:clamp(13px,1.6vw,18px);letter-spacing:.32em;text-transform:uppercase;color:var(--mist);line-height:1.6}
.hero-one span{color:var(--warm2)}
#hero abbr{text-decoration:none;color:var(--cyan)}
@media (max-width:700px){
  .hero-one{letter-spacing:.2em}
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%;justify-content:center;padding:13px 14px;letter-spacing:.14em}
}

/* ---------- AFPM: value propositions ---------- */
/* #16520: the Live Trace screenshot gets more room than the text column, a framed edge and a centred caption */
#afpm .lead{max-width:58ch}
#afpm .shot-panel[data-panel="live-trace"]{--shot-w:100%}
@media (min-width:1181px){#afpm .shot-panel[data-panel="live-trace"]{--shot-w:min(1320px,100vw - 2 * var(--chrome-gutter) - 48px)}}
#afpm .shot-panel[data-panel="live-trace"] .screenshot-frame{width:var(--shot-w);margin-left:calc((100% - var(--shot-w)) / 2);border:1px solid rgba(76,201,217,.32);border-radius:10px;
  box-shadow:0 0 0 1px rgba(76,201,217,.06),0 40px 110px -36px rgba(76,201,217,.38),0 30px 80px rgba(0,0,0,.55)}
#afpm .shot-panel[data-panel="live-trace"] .sf-synth{text-align:center;margin-top:14px}
@media (max-width:700px){#afpm .shot-panel[data-panel="live-trace"] .screenshot-frame{width:calc(100% + 32px);margin-left:-16px;border-radius:0;border-left:0;border-right:0}}

.vp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.vp-item{padding:26px 24px 24px;border:1px solid var(--line);background:rgba(4,26,44,.6);border-top:2px solid var(--cyan)}
.vp-item b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--cyan);margin-bottom:12px}
.vp-item h3{font-size:20px;line-height:1.3;margin:0 0 10px;color:var(--white);text-wrap:balance}
.vp-item p{margin:0;font-size:15px;line-height:1.65;color:#B9D2E1}
@media (max-width:900px){.vp{grid-template-columns:1fr}}

/* ---------- AFPM: four kinds of health — a ladder, read top to bottom, as the caption describes ---------- */
.health{margin:32px 0 0;padding:0}
.health-row{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);background:rgba(4,26,44,.6)}
.hl{display:grid;grid-template-columns:minmax(200px,240px) 150px 1fr;align-items:center;gap:20px;padding:15px 22px 15px 20px;border-bottom:1px solid var(--line);border-left:3px solid currentColor;position:relative}
.hl:last-child{border-bottom:0}
.hl small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--mist);margin:0}
.hl strong{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:600}
.hl strong::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.hl span{display:block;margin:0;font-size:15px;line-height:1.5;color:var(--mist)}
.hl.ok{color:var(--green)}.hl.warn{color:var(--amber)}.hl.bad{color:var(--red)}
.hl.ok{background:linear-gradient(90deg,rgba(53,219,154,.07),rgba(53,219,154,0) 45%)}
.hl.warn{background:linear-gradient(90deg,rgba(240,184,63,.09),rgba(240,184,63,0) 50%)}
.hl.bad{background:linear-gradient(90deg,rgba(240,98,111,.14),rgba(240,98,111,.04) 60%)}
.health figcaption{margin-top:14px;font-size:15px;color:var(--steel);line-height:1.6}
.health figcaption b{color:var(--white)}
.health figcaption .sf-synth{display:inline;margin-left:8px}
@media (max-width:760px){
  .hl{grid-template-columns:1fr auto;gap:6px 14px;padding:14px 16px}
  .hl span{grid-column:1 / -1;font-size:14.5px}
}

/* ---------- AFPM: interactive lab teaser (from feat/afpm-experience, #14775) ---------- */
.afpm-teaser{--t-accent:#58dcf8;--t-amber:#f2a93b;--t-ink:#e8eef7;--t-body:#b8c3d4;--t-muted:#8a98ad;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center;
  margin:clamp(36px,6vh,64px) 0 0;padding:clamp(18px,2.4vw,28px);border-radius:16px;border:1px solid rgba(88,160,230,.24);
  background:radial-gradient(90% 120% at 100% 50%,rgba(16,58,110,.45),transparent 65%),rgba(6,13,30,.82);color:var(--t-ink);font-family:inherit}
.afpm-teaser--imperium{--t-accent:#eac557}
.afpm-teaser__kicker{margin:0 0 8px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--t-accent)}
.afpm-teaser__title{margin:0;font-size:clamp(22px,2.3vw,30px);line-height:1.15;font-weight:500;letter-spacing:-.01em;color:var(--t-ink)}
.afpm-teaser__text{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--t-body)}
.afpm-teaser__note{margin:10px 0 0;font-size:12.5px;color:var(--t-muted)}
.afpm-teaser__cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid #f0b246;
  background:linear-gradient(180deg,#f6bd4f,#e9a43a);color:#1b1206;font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none}
.afpm-teaser__cta:hover{background:linear-gradient(180deg,#ffc95e,#f2ad42)}
.afpm-teaser__cta:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}
.afpm-teaser__art{position:relative;margin:0;aspect-ratio:300/200;border-radius:12px;border:1px solid rgba(88,160,230,.2);overflow:hidden;background:radial-gradient(70% 70% at 50% 40%,#0b2246,#050c1c)}
.afpm-teaser__art svg{display:block;width:100%;height:100%;max-width:none}
.afpm-teaser__tag{position:absolute;right:10px;top:8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-muted)}
.at-grid{stroke:rgba(60,110,180,.18);stroke-width:1}
.at-edge{fill:none;stroke:rgba(88,220,248,.5);stroke-width:1.6}
.at-edge--hot{stroke:var(--t-amber)}
.at-node rect{fill:rgba(14,40,80,.92);stroke:#58dcf8;stroke-width:1.4}
.at-node text{fill:#e8f4ff;font:600 11px Inter,system-ui,sans-serif}
.at-node--hot rect{fill:rgba(70,45,8,.95);stroke:var(--t-amber)}
.at-node--hot text{fill:#ffd08a}
.at-badge rect{fill:rgba(40,26,4,.95);stroke:var(--t-amber)}.at-badge text{fill:#ffd08a;font:600 9.5px Inter,system-ui,sans-serif}
.at-pkt,.at-still{fill:#bff3ff}
.at-pkt--hot,.at-still--hot{fill:#ffc867}
.at-pkt{display:none}
.at-cap{fill:none;stroke:var(--t-accent);stroke-width:1.4;stroke-dasharray:3 3}
.at-card rect{fill:rgba(6,14,32,.95);stroke:var(--t-accent)}.at-card text{fill:var(--t-ink);font:600 9.5px Inter,system-ui,sans-serif}.at-card .at-dim{fill:var(--t-muted);font-weight:400}
@media (prefers-reduced-motion:no-preference){
  .at-pkt{display:inline}.at-still{display:none}
  .at-pkt{animation:at-move 3.2s linear infinite;offset-rotate:0deg}
  .at-pkt--a{offset-path:path('M150 44 L80 104')}
  .at-pkt--b{offset-path:path('M150 44 L150 104');animation-delay:.6s}
  .at-pkt--hot{offset-path:path('M150 120 L150 168');animation:at-retry 1.6s ease-in infinite}
  .at-node--hot rect{animation:at-glow 1.6s ease-in-out infinite}
  .at-cap{animation:at-dash 1.2s linear infinite}
  @keyframes at-move{0%{offset-distance:0%;opacity:0}10%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
  @keyframes at-retry{0%{offset-distance:0%;opacity:0}15%{opacity:1}80%{offset-distance:88%;opacity:1}100%{offset-distance:88%;opacity:0}}
  @keyframes at-glow{50%{stroke-width:2.6}}
  @keyframes at-dash{to{stroke-dashoffset:-12}}
}
@media (max-width:760px){.afpm-teaser{grid-template-columns:1fr}.afpm-teaser__art{order:-1}}
.afpm-teaser__alt{display:inline-block;margin:18px 0 0 16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-accent);border-bottom:1px solid rgba(88,220,248,.4)}
.afpm-teaser__alt:hover{color:var(--white)}
@media (max-width:480px){.afpm-teaser__alt{display:block;margin:14px 0 0}}

/* ---------- nav: subtle corporate link ---------- */
#nav .corp{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--steel);padding:6px 2px;border-bottom:1px solid transparent}
#nav .corp:hover{color:var(--white);border-bottom-color:var(--steel)}
body.tone-light #nav .corp{color:#3D6883}
@media (max-width:1100px){#nav .corp{display:none}}

/* ---------- platform ecosystem (bottom of the story) ---------- */
.platform{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.platform-head{text-align:center;max-width:62ch;margin:0 auto}
.platform-head h3{font-size:clamp(22px,2.4vw,30px);line-height:1.2}
.platform-head p{margin:12px auto 0;font-size:15px;line-height:1.6;color:var(--steel)}
/* #16520: each product carries its tracston.com accent (nav-products.css .np-card--*) as a top edge and mark;
   --np-ink is the same hue darkened for text on the light deploy scene (WCAG AA). */
.platform-grid{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.platform-grid li{display:flex}
.platform-grid li:nth-child(1){--np:#eac557;--np-ink:#7A5B0C}
.platform-grid li:nth-child(2){--np:#58dcf8;--np-ink:#0E6F8C}
.platform-grid li:nth-child(3){--np:#a775d6;--np-ink:#6B3FA0}
.platform-grid li:nth-child(4){--np:#3b82f6;--np-ink:#1D4ED8}
.platform-grid a{position:relative;display:flex;flex-direction:column;width:100%;min-height:100%;padding:22px 20px 20px;border:1px solid var(--line);border-top:3px solid var(--np);background:rgba(4,26,44,.45);
  transition:border-color .2s,transform .2s,box-shadow .2s,background-color .2s}
.platform-grid a:hover,.platform-grid a:focus-visible{transform:translateY(-3px);border-color:var(--np);box-shadow:0 18px 40px -22px var(--np)}
.platform-grid a:focus-visible{outline:2px solid var(--np-ink);outline-offset:3px}
.platform-grid b{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.24em}
.platform-grid b::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--np);transform:rotate(45deg)}
.platform-grid em span{display:inline-block;transition:transform .2s}
.platform-grid a:hover em span,.platform-grid a:focus-visible em span{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){.platform-grid a,.platform-grid em span{transition:none}.platform-grid a:hover,.platform-grid a:focus-visible{transform:none}.platform-grid a:hover em span,.platform-grid a:focus-visible em span{transform:none}}
.platform-grid strong{display:block;margin-top:10px;font-size:16px;line-height:1.35;font-weight:600}
.platform-grid span{display:block;margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--steel);flex:1}
.platform-grid em{display:block;margin-top:14px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--cyan)}
.platform-grid .here a{border-color:var(--cyan);background:rgba(76,201,217,.07)}
.platform .eco-note{text-align:center;margin:18px auto 0}
.tone-light .platform{border-top-color:rgba(8,47,73,.16)}
.tone-light .platform-head h3,.tone-light .platform-grid b,.tone-light .platform-grid strong{color:#062A46}
.tone-light .platform-head p,.tone-light .platform-grid span{color:#3D6883}
.tone-light .platform-grid a{background:rgba(255,255,255,.6);border-color:rgba(8,47,73,.16)}
.tone-light .platform-grid .here a{border-color:#0E6F8C;background:rgba(22,138,173,.08)}
.tone-light .platform-grid a:hover,.tone-light .platform-grid a:focus-visible{border-color:var(--np-ink);box-shadow:0 18px 40px -24px var(--np-ink)}
.tone-light .platform-grid em{color:#0E6F8C}
.tone-light .platform-grid li b{color:var(--np-ink)}
.tone-light .platform-grid a,.tone-light .platform-grid .here a{border-top-color:var(--np)}
@media (max-width:1000px){.platform-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.platform-grid{grid-template-columns:1fr}}
footer .legal a{color:inherit;border-bottom:1px solid rgba(220,234,240,.3)}
footer .legal a:hover{color:var(--white)}
.platform-grid em span{display:inline-block;margin:0;color:inherit}