/* Helm landing. Colour tokens and fonts come from brand.css (HELM Design System, Señal).
   Design-system rules kept here: radii 3/4/6, 1px borders, no shadows, petroleum primary action,
   module colour only on the crossbar, the module name and the tab indicator,
   charts draw the observed signal in text colour and context in neutrals. */
:root {
  --display: "Red Hat Display", sans-serif;
  --body: "Red Hat Text", sans-serif;
  --mono: "Red Hat Mono", monospace;
  --action: #0F6E7A;
  --action-hover: #12808D;
  --r-chip: 3px;
  --r-control: 4px;
  --r-panel: 6px;
  --header-h: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* z-index scale: 1 section content over media, 10 header, 20 skip link */
}
.m-watch { --mod: #76B4FF; }
.m-events { --mod: #F98F87; }
.m-shift { --mod: #ED9C55; }
.m-knowledge { --mod: #00C8D8; }
.m-insights { --mod: #B7A0FB; }

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--text); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, dl, dd, ul, ol { margin: 0; }
p, li { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; }
button, input, textarea { font: inherit; }
a { color: inherit; text-underline-offset: .2em; }
img, svg { display: block; max-width: 100%; }
small { font-size: .8125rem; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.wrap { width: min(1280px, calc(100% - 2 * clamp(20px, 5vw, 72px))); margin-inline: auto; }
.section { padding: clamp(72px, 9vw, 128px) 0; }
.tag { font: .6875rem/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); }
.chip { display: inline-block; padding: 2px 6px; color: var(--muted); border: 1px solid var(--line2); border-radius: var(--r-chip); font: .6875rem/1.4 var(--mono); white-space: nowrap; }
.skip { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 12px; background: var(--page); transform: translateY(-150%); }
.skip:focus { transform: none; }

/* Status glyphs: shape carries the state, colour only reinforces it. */
.g { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.g.fill { fill: currentColor; stroke: none; }
.g.attn, .state.attn { color: var(--s-attn); }
.g.warn { color: var(--s-warn); }
.state { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--s-normal); font-size: .75rem; }

.mark { width: 1.45em; height: 1.45em; flex: none; }
.brand { display: inline-flex; align-items: center; gap: 4px; font: 600 1.5rem/1 var(--display); letter-spacing: -.01em; text-decoration: none; }

.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.header-inner nav { display: flex; gap: clamp(20px, 3vw, 40px); margin-inline: auto; }
.header-inner nav a { color: var(--text2); font-size: .875rem; text-decoration: none; transition: color 120ms; }
.header-inner nav a:hover { color: var(--accent); }
.header-cta { min-height: 40px; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 9px 16px;
  border: 1px solid transparent; border-radius: var(--r-control); color: var(--text); text-decoration: none; white-space: nowrap;
  font-size: .875rem; font-weight: 600; cursor: pointer; transition: background-color 120ms, border-color 120ms, transform 120ms;
}
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .6; cursor: progress; }
.button.primary { background: var(--action); color: #fff; border-color: var(--action); }
.button.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.button.secondary { background: var(--panel); border-color: var(--line2); }
.button.secondary:hover { background: var(--hover); border-color: var(--muted); }
.arrow { position: relative; width: 14px; height: 14px; flex: none; transition: transform 200ms var(--ease); }
.arrow::before { content: ""; position: absolute; left: 1px; right: 1px; top: 6px; border-top: 1px solid; }
.arrow::after { content: ""; position: absolute; top: 3px; right: 2px; width: 6px; height: 6px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.arrow.down { transform: rotate(90deg); }
.button:hover .arrow:not(.down) { transform: translateX(3px); }

/* Hero: copy low on the left; above it the plant as a drawing, its instruments wired to one trunk line.
   The drawing is generated by ../hero-anatomy.build.mjs. */
.hero { position: relative; isolation: isolate; display: grid; align-content: end; min-height: min(calc(100dvh - var(--header-h)), 900px); padding: 80px 0 72px; border-bottom: 1px solid var(--line); }
.hero-media { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
/* Sized from the hero's height so the drawing always clears the copy block below it. On short screens the second
   term takes over: the room left above the copy (bottom padding, sub copy and buttons, two headline lines), over the
   share of the drawing's height where its lower left edge sits. */
.hero-anatomy { position: absolute; top: 0; right: 3vw; height: min(77%, calc((100% - 242px - 2.04 * clamp(2.5rem, 5.4vw, 4.75rem)) / .62)); width: auto; max-width: 103%; object-fit: contain; object-position: 100% 0; }
.hero-copy h1 { font-size: clamp(2.5rem, 5.4vw, 4.75rem); line-height: 1.02; letter-spacing: -.035em; }
.hero-copy h1 span { display: block; }
.hero-copy h1 em { font-style: normal; color: var(--accent); }
.hero-copy p { max-width: 46ch; margin-top: 24px; color: var(--text2); font-size: clamp(1rem, 1.5vw, 1.1875rem); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.panel { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-panel); }
.panel-bar, .ev-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; font-size: .875rem; font-weight: 600; border-bottom: 1px solid var(--line); }
.bar-separator { display: inline-block; height: 11px; border-left: 1px solid var(--line2); vertical-align: -1px; margin-inline: 5px; }
.value strong { font: 500 clamp(1.45rem, 3vw, 2.25rem)/1.15 var(--mono); letter-spacing: -.04em; white-space: nowrap; }
.value small { font-size: clamp(.8125rem, 1.65vw, 1.25rem); color: var(--muted); letter-spacing: 0; }

/* Charts */
.gridline { fill: none; stroke: var(--line2); stroke-width: 1; }
.band { fill: var(--muted); opacity: .14; }
.trace { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.projected { stroke: var(--muted); stroke-dasharray: 5 4; }
.limit { fill: none; stroke: var(--s-alarm); stroke-width: 1; }
.marker { fill: none; stroke: var(--s-attn); stroke-dasharray: 1 3; }
.chart { width: 100%; }
.chart text { fill: var(--muted); font: 10px var(--mono); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 14px 12px; font-size: .75rem; color: var(--text2); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 16px; border-top: 2px solid var(--text); }
.legend .l-dash { border-top: 2px dashed var(--muted); }
.legend .l-band { height: 7px; border: 0; background: color-mix(in srgb, var(--muted) 22%, transparent); }
.legend .l-limit { border-top: 1px solid var(--s-alarm); }
.legend .l-prev { border-color: var(--dim); }

.section-copy h2 { max-width: 19ch; font-size: clamp(2.125rem, 4vw, 3.75rem); line-height: 1.06; letter-spacing: -.028em; }
.section-copy p { max-width: 54ch; margin-top: 16px; color: var(--text2); font-size: 1.0625rem; }
.context, .demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 7vw, 100px); align-items: center; }

/* The mark as a diagram. Row tracks mirror the mark: 7u block, 5.5u gap, 7u, 5.5u, 7u. */
.context { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.context h2 { font-size: clamp(2.125rem, 3.6vw, 3.25rem); }
.spine { display: grid; grid-template-columns: minmax(0, 1fr) clamp(160px, 21vw, 300px) minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); }
.spine-mark { width: 100%; aspect-ratio: 1; }
.spine-mark rect { fill: var(--text); transform-box: fill-box; }
.spine-mark .cross { fill: var(--accent); }
.spine-list { display: grid; grid-template-rows: 7fr 5.5fr 7fr 5.5fr 7fr; list-style: none; padding: 0; }
.spine-list li { align-self: center; display: flex; flex-direction: column; justify-content: center; height: 0; }
.spine-list li:nth-child(2) { grid-row: 3; }
.spine-list li:nth-child(3) { grid-row: 5; }
.spine-in { text-align: right; }
.spine-list strong, .spine-list small { display: block; }
.spine-list strong { font: 600 clamp(.9375rem, 1.4vw, 1.125rem)/1.25 var(--display); }
.spine-list small { color: var(--muted); line-height: 1.35; margin-top: 2px; }

.scenario-section, .rollout-section { background: var(--card); border-block: 1px solid var(--line); }
.scenario-section h2 { max-width: none; }
.scenario, .bento, .plan { margin-top: clamp(32px, 4vw, 48px); }
.scenario { overflow: hidden; }
.tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--page); border-bottom: 1px solid var(--line); }
.tabs a { display: grid; gap: 1px; padding: 12px 16px 14px; color: var(--text2); text-decoration: none; transition: background-color 120ms; }
.tabs a + a { border-left: 1px solid var(--line); }
.tabs a:hover { background: var(--hover); }
.tabs a:focus-visible { outline-offset: -4px; }
.tabs strong { font: 600 1rem/1.3 var(--display); }
.tabs a[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: inset 0 -3px 0 var(--mod); }
.scene { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(24px, 4.5vw, 64px); align-items: center; min-height: 440px; padding: clamp(20px, 4vw, 48px); }
.scene + .scene { border-top: 1px solid var(--line); }
/* With JavaScript the five scenes share one grid cell, so the panel keeps the height of the tallest. */
.scenario.enhanced { display: grid; grid-template-columns: minmax(0, 1fr); }
.scenario.enhanced .scene { grid-area: 3 / 1; border-top: 0; visibility: hidden; }
.scenario.enhanced .scene.active { visibility: visible; animation: switch-view 200ms ease-out; }
@keyframes switch-view { from { opacity: .5; transform: translateY(4px); } }
.lockup { display: flex; align-items: center; gap: 5px; font: 600 1.25rem/1 var(--display); letter-spacing: -.01em; }
.lockup > span { font-weight: 400; color: var(--mod); }
.scene-copy h3 { max-width: 17ch; margin-top: 20px; font-size: clamp(1.75rem, 2.9vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; }
.scene-copy > p:not(.lockup) { max-width: 46ch; margin-top: 12px; color: var(--text2); }
.scene-copy ul { margin-top: 20px; padding-left: 1.1em; list-style: square; color: var(--text2); font-size: .9375rem; }
.scene-copy li { padding-left: 4px; }
.scene-copy li + li { margin-top: 6px; }
.scene-copy li::marker { color: var(--faint); }

/* Evidence previews: miniature Helm components, not screenshots. */
.ev { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--sunk); }
.ev-bar { padding-inline: 14px; }
.ev-bar .tag { margin-left: 6px; font-weight: 400; }
.value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; padding: 14px 14px 0; }
.ev-foot { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); color: var(--text2); font-size: .8125rem; }
.ev-foot .g { margin-top: 4px; color: var(--s-qual); }
.ev-foot strong { color: var(--text); font-weight: 600; }
.ev-foot.conf .g { color: var(--s-conf); }
.cascade { list-style: none; padding: 4px 14px; }
.cascade li { display: grid; grid-template-columns: 4.5rem auto 1fr; gap: 12px; align-items: center; padding: 10px 0; }
.cascade li + li { border-top: 1px solid var(--line3); }
.cascade strong, .cascade small { display: block; }
.cascade strong { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.cascade small { color: var(--muted); }
.cascade .chip { justify-self: start; min-width: 6.4rem; text-align: center; }
.answer { padding: 2px 14px 14px; }
.answer > div { padding: 12px 0; }
.answer > div:nth-child(2) { border-top: 1px solid var(--line3); }
.answer > .hyp { padding: 12px; border: 1px dashed var(--line2); border-radius: var(--r-control); }
.answer b { font: 500 .6875rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.answer p { margin-block: 4px 8px; font-size: .875rem; color: var(--text2); }
.compare { display: grid; gap: 12px; padding: 16px 14px 12px; }
.compare > div { display: grid; grid-template-columns: 5.5rem 1fr 3.5rem; gap: 12px; align-items: center; font-size: .875rem; }
.compare dd:first-of-type { display: grid; gap: 3px; }
.compare i { display: block; width: var(--w); height: 6px; background: var(--text); }
.compare i.prev { background: var(--dim); }
.compare .tag { text-align: right; }

/* Trust bento: five commitments, five cells. */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.cell { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 270px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); }
.cell h3 { font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.01em; }
.cell p { max-width: 46ch; margin-top: 8px; color: var(--text2); font-size: .9375rem; }
.c-read { grid-column: span 7; background: var(--sunk); }
.c-perimeter { grid-column: span 5; }
.c-box { grid-column: span 5; }
.c-yours { grid-column: span 3; }
.c-adds { grid-column: span 4; }
.c-perimeter { background: var(--page); }
.c-perimeter img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 55%; }
.c-perimeter::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(11, 19, 22, .96) 38%, transparent 58%); }
.oneway { display: flex; align-items: center; gap: 16px; margin-bottom: auto; padding-bottom: 32px; }
.ow-src { display: grid; gap: 6px; }
.ow-src .chip { color: var(--text2); background: var(--panel); padding: 5px 10px; }
.ow-line { position: relative; flex: 1; min-width: 40px; border-top: 1px solid var(--line2); overflow: hidden; height: 1px; }
.ow-line i { position: absolute; top: -1px; left: 0; width: 56px; height: 1px; background: var(--accent); }
.oneway .brand { font-size: 1.75rem; }
.protocols { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: auto; padding-bottom: 28px; }
.protocols .chip { color: var(--text2); background: var(--panel); padding: 5px 10px; }
.levels { display: grid; gap: 10px; margin-bottom: auto; padding: 0 0 28px; list-style: none; font: 600 .9375rem var(--display); }
.levels li { display: grid; grid-template-columns: 1.25rem auto 1fr; gap: 8px; align-items: baseline; }
.levels b { font: 400 .875rem var(--mono); color: var(--muted); }
.levels small { color: var(--muted); font: 400 .8125rem var(--body); text-align: right; }

/* Rollout plan */
.plan-lanes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 0; margin-bottom: 24px; }
.bar { display: flex; align-items: center; height: 36px; padding-inline: 12px; overflow: hidden; border: 1px solid var(--line2); font: .75rem var(--mono); white-space: nowrap; }
.bar.build { color: var(--muted); background: var(--surface); border-radius: var(--r-control) 0 0 var(--r-control); border-right: 0; }
.bar.live { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 45%, var(--line2)); border-radius: 0 var(--r-control) var(--r-control) 0; }
.plan-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; padding: 0; border-top: 1px solid var(--line2); }
.plan-months li { padding: 16px 20px 0 0; }
.plan-months strong { display: block; margin-top: 4px; font: 600 1rem/1.3 var(--display); }
.plan-months p { margin-top: 6px; color: var(--text2); font-size: .875rem; line-height: 1.45; }

.demo-grid { align-items: start; }
.demo-form { display: grid; gap: 16px; padding: clamp(16px, 3vw, 32px); }
.demo-form label { display: grid; gap: 6px; font-size: .875rem; font-weight: 500; }
.demo-form input, .demo-form textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--faint); border-radius: var(--r-control); background: var(--input); color: var(--text); caret-color: var(--accent); font-weight: 400; }
.demo-form input:focus-visible, .demo-form textarea:focus-visible { outline-offset: 0; border-color: var(--accent); }
.demo-form textarea { resize: vertical; }
.demo-form .button { justify-self: start; }
.form-status { font-size: .8125rem; color: var(--muted); }
.form-status[data-state="error"] { color: var(--s-crit-t); }
.form-status[data-state="ok"] { color: var(--s-conf); }
/* Bots fill every field; people never see this one. */
.trap { position: absolute; left: -9999px; }
.form-status:empty { display: none; }

.footer { border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; min-height: 86px; padding-block: 16px; color: var(--text2); font-size: .875rem; }

/* Motion. Every animation says something: hero entry sets reading order, the mark assembles
   signals into structure, the one-way pulse shows data direction, reveals pace the scroll. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 700ms var(--ease) backwards; }
  .hero-copy > p { animation-delay: 90ms; }
  .hero-copy > .actions { animation-delay: 180ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }

  .js [data-reveal] { transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .js [data-reveal]:not(.in) { opacity: 0; transform: translateY(20px); }
  .js .spine[data-reveal] { opacity: 1; transform: none; }

  .js .spine-in li, .js .spine-out li, .js .spine .frag { transition: opacity 450ms var(--ease), transform 450ms var(--ease); }
  .js .spine .cross { transition: transform 450ms var(--ease) 380ms; transform-origin: left; }
  .js .spine .stem { transition: transform 550ms var(--ease) 720ms; transform-origin: top; }
  .js .spine :is(li, .frag):nth-of-type(2) { transition-delay: 90ms; }
  .js .spine :is(li, .frag):nth-of-type(3) { transition-delay: 180ms; }
  .js .spine .spine-out li { transition-delay: 1150ms; }
  .js .spine .spine-out li:nth-of-type(2) { transition-delay: 1240ms; }
  .js .spine .spine-out li:nth-of-type(3) { transition-delay: 1330ms; }
  .js .spine:not(.in) :is(.spine-in li, .frag) { opacity: 0; transform: translateX(-14px); }
  .js .spine:not(.in) .cross { transform: scaleX(0); }
  .js .spine:not(.in) .stem { transform: scaleY(0); }
  .js .spine:not(.in) .spine-out li { opacity: 0; transform: translateX(-8px); }

  .ow-line i { animation: flow 2.6s linear infinite; }
  @keyframes flow { from { transform: translateX(-56px); } to { transform: translateX(600px); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .arrow { transition: none; }
  .scenario.enhanced .scene.active { animation: none; }
}

@media (max-width: 1100px) {
  .context { grid-template-columns: 1fr; }
  .spine { max-width: 760px; }
}
@media (max-width: 1000px) {
  .plan-lanes { display: none; }
  .plan-months { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; border-top: 0; }
  .plan-months li { border-top: 1px solid var(--line2); }
  .c-read, .c-perimeter { grid-column: span 12; }
  .c-perimeter img { object-position: 0 30%; }
  .c-box { grid-column: span 12; }
  .c-yours, .c-adds { grid-column: span 6; }
}
@media (max-width: 1040px) {
  /* Narrow screens: the drawing sits in the flow above the copy, centred and never cropped, so the hero is as tall as
     its content. Its height is capped by what the header and the copy block leave free, which keeps the buttons on
     the first screen in landscape. */
  .hero { display: block; min-height: 0; padding: 8px 0 48px; }
  .hero-media { position: static; }
  .hero-anatomy { position: static; width: auto; height: auto; max-width: 100%; max-height: max(220px, calc(100dvh - 394px)); margin-inline: auto; }
}
@media (max-width: 800px) {
  .context, .demo-grid, .scene { grid-template-columns: 1fr; }
  .scene { min-height: 0; align-items: start; align-content: start; }
  .scene-copy h3 { max-width: none; }
  .demo-form { max-width: 620px; width: 100%; }
  .header-inner nav { display: none; }
  .header-cta { margin-left: auto; }
  .tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(124px, 1fr); overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 600px) {
  .hero-copy h1 span { display: inline; }
  .panel-bar { padding-inline: 12px; }
  .spine { grid-template-columns: minmax(0, 1fr) 124px minmax(0, 1fr); gap: 10px; }
  .spine-list small { display: none; }
  .spine-list strong { font-size: .8125rem; }
  .ev-bar .tag { display: none; }
  .scene { padding: 20px 16px; }
  .chart text { font-size: 17px; }
  .cascade li { grid-template-columns: 4.2rem 1fr; }
  .cascade li > :is(svg, .chip) { display: none; }
  .levels li { grid-template-columns: 1.25rem 1fr; }
  .levels small { grid-column: 2; text-align: left; }
  .c-yours, .c-adds { grid-column: span 12; }
  .cell { min-height: 0; padding: 20px; }
  .c-perimeter { min-height: 240px; }
  .plan-months { grid-template-columns: 1fr; }
}