/* Home page: the hero app (its own id, so the shared 8.3.6 loop in site.js stays idle), the positioning cards,
   the week table and the report pace line; then the phone layout. */

/* hero depth: the focus is the working column. Copper is the suggestion: its block carries the copper tint, its words
   the copper underline, its badge the orb; all three go quiet once Maria Reyes accepts. */
#home-app .ap-ai { transition: background var(--dur-swap) var(--ease-swap), border-color var(--dur-swap); }
#home-app .ap-ai.accepted { background: none; border-top-color: var(--line-2); }
#home-app .ap-ai.accepted .ap-row { border-bottom-color: var(--line-2); }
#home-app .ap-side { filter: blur(1.1px); opacity: .7; }
#home-app .ap-keys, #home-app .ap-top { filter: blur(.8px); opacity: .6; }
#home-app .ap-strip { filter: blur(.5px); }
#home-app .ap-evc[data-evc="2"], #home-app .ap-evc[data-evc="3"] { filter: blur(1.4px); opacity: .7; }
#home-app .ap-tabs { filter: blur(.6px); opacity: .8; }
#home-app #ha-ask { margin-top: 6px; font-size: 12.5px; color: var(--fg-3); }
#home-app .ap-keys { opacity: .45; }
#home-app .ha-note { margin-left: 10px; color: var(--fg-3); }
#home-app .ap-decided .ap-av { margin-left: auto; }
#home-app .ap-decided time { margin-left: 0; }
.hm-by { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); }
#home-app .src-excerpt { margin-top: 10px; }

.hm-mr { background: #3b4a5c; color: #eef3f8; }

/* the week: one row per step, a struck "before" label beside the "with Enpasse" label. Type carries it, no sentences.
   As a row arrives, a hairline strikes through the old way; the new way stays in full ink. */
.hm-week { margin-top: 72px; }
.hm-wk-h, .hm-wk-r { display: grid; grid-template-columns: 3fr 4.5fr 4.5fr; column-gap: var(--gutter); align-items: baseline; }
.hm-wk-h { padding-bottom: 14px; color: var(--fg-3); font-size: 13px; border-bottom: 1px solid var(--line); }
.hm-wk { list-style: none; margin: 0; padding: 0; }
.hm-wk-r { padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.hm-wk-s { color: var(--fg-3); font-size: 15px; }
.hm-wk-b, .hm-wk-a { font-size: clamp(18px, 1.9vw, 24px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; }
.hm-wk-b { justify-self: start; text-decoration: none; color: var(--fg-4); background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0% 1.5px; transition: background-size var(--dur-swap) var(--ease-swap); transition-delay: calc(var(--i, 0) * 120ms + 300ms); }
.hm-wk-r.seen .hm-wk-b { background-size: 100% 1.5px; }
.hm-wk-a { color: var(--fg-1); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; row-gap: 8px; }
/* each new way carries the small piece of product that does it, arriving a beat after its words */
.hm-wk-x { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; letter-spacing: -0.006em; opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-enter) var(--ease-spring), transform var(--dur-enter) var(--ease-spring); transition-delay: calc(var(--i, 0) * 120ms + 700ms); }
.hm-wk-r.seen .hm-wk-x { opacity: 1; transform: none; }
.hm-wk-x .ap-btn { height: 24px; font-size: 12px; }
.hm-wk-doc { padding: 3px 8px; border-radius: 4px; font-size: 12.5px; line-height: 1.6; display: inline-flex; align-items: center; gap: 6px; }
.hm-wk-r:hover .hm-wk-b { color: var(--fg-3); }
@media (prefers-reduced-motion: reduce) { .hm-wk-b { background-size: 100% 1.5px; transition: none; } .hm-wk-x { opacity: 1; transform: none; transition: none; } }

/* report pace: the Northwind scale, and the founder's modelling placeholder */
.hm-pace { margin-top: 40px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--fg-3); }
.hm-pace-n { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hm-pace-n b { color: var(--fg-1); font-weight: 560; font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.04em; line-height: 1; }
.hm-pace-n span { color: var(--fg-2); }
.hm-pace-s { font-size: 13px; color: var(--fg-4); }
.hm-model { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: var(--fg-4); }

/* modes: one line for firms that already use an assistant */
.hm-also { margin-top: 32px; color: var(--fg-3); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 8px; }

@media (max-width: 760px) {
  .hm-wk-h, .hm-wk-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .hm-wk-h > :first-child { display: none; }
  .hm-wk-s { grid-column: 1 / -1; margin-bottom: 6px; font-size: 13px; }
  .hm-wk-r { padding: 18px 0; }
  .hm-wk-b, .hm-wk-a { font-size: 17px; }
  .hm-wk-a { gap: 8px; }
  .hm-wk-x { flex-basis: 100%; }
}

/* Phone layout. Desktop is unchanged. */
@media (max-width: 640px) {
  /* hero: the app shows its working column at a readable size instead of the whole window at half size */
  #hero-stage { margin-top: 48px; }
  #hero-stage .frame { padding: 6px; }
  #hero-stage .frame-clip { height: 600px !important; -webkit-mask-image: none !important; mask-image: none !important; }
  #hero-stage .frame-clip > .ap { width: calc(100% / .86) !important; height: calc(600px / .86) !important; transform: scale(.86) !important; grid-template-columns: minmax(0, 1fr); }
  #home-app .ap-side, #home-app .ap-pane, #home-app .ap-keys, #home-app .ap-top, #home-app #ha-ask, #home-app .ap-strip .end, #home-app .ap-files .r { display: none; }
  #home-app .ap-main { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  #home-app .ap-body { grid-template-columns: minmax(0, 1fr); overflow: hidden; }
  #home-app .ap-main { min-height: 0; overflow: hidden; }
  #home-app .ap-work { -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
  #home-app .ap-title { padding: 14px 16px 12px; }
  #home-app .ap-title h4 { font-size: 16px; line-height: 1.3; }
  #home-app .ap-work { padding: 14px 16px; border-right: 0; }
  #home-app .ap-proc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; padding: 0; margin: 0 14px 12px; }
  #home-app .ap-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #home-app .ap-row > span:first-child { font-size: 13px; }
  #home-app .ap-row > :nth-child(3) { display: none; }
  #home-app .ap-chips { flex-direction: row; flex-wrap: wrap; }
  #home-app .ap-ev, #home-app .ap-key, #home-app .ap-req { font-size: 13px; height: 22px; }
  #home-app .ap-files { font-size: 13px; flex-wrap: wrap; row-gap: 2px; }
  #home-app .ap-badge { font-size: 13px; }
  #home-app .ap-decided > div { font-size: 13px; }
  #home-app .ap-decided.on { height: 64px; }
  #home-app .ap-decided time { font-size: 13px; }
  #home-app .ap-foot { justify-content: space-between; }
  #home-app .ap-toast { left: 12px; right: 12px; width: auto; bottom: 76px; }
  #home-app .ap-toast, #home-app .ap-toast small, #home-app .ap-btn { font-size: 13px; }
  #home-app .ap-cursor .tag { font-size: 13px; height: 22px; }
  .synthetic { margin-top: 16px; flex-direction: column; gap: 4px; }

  /* gaps: keep the rhythm but cut the desktop-sized empty bands */
  .mission { padding: 112px 0 96px; }
  .hm-week { margin-top: 48px; }
  /* 12 columns with 32px gaps outgrow a 360 screen; on phones the heads and feature lists use a smaller gap */
  .sec-head, .ingredients { column-gap: 12px; }
  .fig { padding: 20px 4px 32px; }
  .fig-art { min-height: 220px; }
  .cta { padding: 128px 0; gap: 32px; }
  .modes > div { min-height: 0; padding: 24px 20px; gap: 6px; }
  .modes .viz { margin-bottom: 20px; }
}


/* ================= one assessment in one scroll (#whole) =================
   A tall run; the product window sticks while the page scrubs Northwind's year: files land, suggestions arrive in
   copper, a named person accepts each of the 260 sub-requirements, the report drafts, the ROC goes final. */
.tl-sec { padding-bottom: 0; }
.tl-run { position: relative; height: 360vh; margin-top: 24px; }
.tl-stick { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 56px; }
.tl-stick > .wrap { width: 100%; }
.tl-app { height: min(660px, calc(100vh - 120px)); display: grid; grid-template-rows: 48px minmax(0, 1fr) 52px; border-radius: 12px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), var(--lift); font-size: 13px; overflow: hidden; }
.tl-top { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tl-top .ap-av { width: 24px; height: 24px; font-size: 9.5px; }
.tl-top b { font-weight: 500; }
.tl-dim { color: var(--fg-3); }
.tl-stage-now { margin-left: auto; color: var(--fg-2); }
.tl-date { min-width: 96px; text-align: right; font-size: 12px; color: var(--fg-1); }
.tl-app.final .tl-stage-now, .tl-app.final .tl-count b { color: var(--ok); }
.tl-body { display: grid; grid-template-columns: 176px minmax(0, 1fr) 320px; min-height: 0; }
.tl-stages { list-style: none; margin: 0; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); background: var(--bg); }
.tl-stages li { height: 32px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border-radius: 6px; color: var(--fg-4); transition: color var(--dur-hover), background var(--dur-hover); }
.tl-stages li.done { color: var(--fg-2); }
.tl-stages li.on { color: var(--fg-1); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.tl-field { min-width: 0; padding: 14px 20px 0; display: grid; grid-template-rows: auto minmax(0, 1fr) 40px; }
.tl-field-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--fg-3); font-size: 12.5px; }
.tl-count { font-size: 12px; color: var(--fg-3); }
.tl-count b { color: var(--fg-1); font-weight: 500; }
/* the 260 ids: mono, in the order of the standard; their colour is their state */
.tl-ids { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); grid-auto-rows: 19px; column-gap: 6px; align-content: start; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0; overflow: hidden; }
.tl-ids i, .tl-g { font-style: normal; white-space: nowrap; line-height: 19px; }
.tl-ids i { color: var(--fg-4); opacity: .4; cursor: default; justify-self: start; padding: 0 2px; border-radius: 3px; transition: color var(--dur-swap) var(--ease-swap), opacity var(--dur-swap) var(--ease-swap), background-size var(--dur-draw) var(--ease-spring); background: linear-gradient(var(--cu), var(--cu)) no-repeat 2px 16px / 0% 1px; }
.tl-g { font-family: "Geist", sans-serif; font-size: 11px; color: var(--fg-3); font-weight: 500; }
.tl-ids i.t-e { opacity: 1; color: var(--fg-3); }
.tl-ids i.t-s { opacity: 1; color: var(--cu); background-size: calc(100% - 4px) 1px; }
.tl-ids i.t-a { opacity: 1; color: var(--fg-2); }
.tl-ids i.t-n { opacity: 1; color: var(--fg-3); }
.tl-ids i.t-ad { opacity: 1; color: var(--fg-1); }
.tl-ids i.t-nd { opacity: 1; color: var(--fg-2); }
.tl-ids i.t-r { opacity: 1; color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--amber); }
.tl-ids i.t-q { opacity: 1; color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--fg-3); }
.tl-ids i:hover { background-color: var(--bg-3); }
.tl-read { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; }
.tl-read b { color: var(--fg-1); font-weight: 400; }
.tl-side { border-left: 1px solid var(--line); background: var(--bg); padding: 16px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.tl-nums { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.tl-nums dt { font-size: 12px; color: var(--fg-3); }
.tl-nums dd { margin: 2px 0 0; font-size: 22px; letter-spacing: -0.02em; color: var(--fg-1); line-height: 1.1; }
.tl-nums dd.tl-cu { color: var(--cu); }
.tl-hist-h { margin: 14px 0 6px; font-size: 12px; color: var(--fg-3); }
.tl-hist { list-style: none; margin: 0; padding: 0; }
.tl-hist li { height: 40px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line-2); font-size: 12px; color: var(--fg-2); }
.tl-hist li:first-child { color: var(--fg-1); }
.tl-hist li.empty { visibility: hidden; }
.tl-ic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; }
.tl-ic .ai-mark { --ai-mark-h: 16px; display: none; }
.tl-hist li.ai .ai-mark { display: inline-block; }
.tl-hist li.ai .ap-av { display: none; }
.tl-hist li.ai .tl-tx { color: var(--cu); }
.tl-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-hist time { margin-left: auto; flex: none; font-size: 11px; color: var(--fg-4); }
.tl-rail { position: relative; margin: 0 16px; border-top: 1px solid var(--line); }
.tl-segs { display: flex; height: 100%; }
.tl-segs > span { position: relative; min-width: 0; padding: 12px 0 0 8px; border-left: 1px solid var(--line-2); }
.tl-segs > span:first-child { border-left: 0; padding-left: 0; }
.tl-segs b { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--fg-2); transform: scaleX(0); transform-origin: 0 0; transition: transform var(--dur-enter) var(--ease-swap); }
.tl-segs > .done b { transform: none; }
.tl-segs em { display: block; font-style: normal; font-size: 11.5px; color: var(--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--dur-hover); }
.tl-segs > .done em { color: var(--fg-3); }
.tl-segs > .on em { color: var(--fg-1); }
.tl-head { position: absolute; top: -4px; width: 1px; height: 9px; margin-left: -.5px; background: var(--fg-1); }
@media (prefers-reduced-motion: reduce) {
  .tl-run { height: auto; }
  .tl-stick { position: static; height: auto; padding-top: 0; }
}
@media (max-width: 1100px) {
  .tl-body { grid-template-columns: minmax(0, 1fr) 260px; }
  .tl-stages { display: none; }
}
@media (max-width: 760px) {
  .tl-run { height: 300vh; }
  .tl-app { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px auto auto 44px; }
  .tl-field-h { font-size: 12px; }
  .tl-count { font-size: 11px; }
  .tl-top .tl-dim, .tl-top b { display: none; }
  .tl-top .tl-stage-now { margin-left: 0; }
  .tl-date { margin-left: auto; }
  .tl-body { display: contents; }
  .tl-field { padding: 12px 12px 0; grid-template-rows: auto auto 36px; }
  /* on a phone the 260 ids become 260 cells: their colour is still their state */
  .tl-ids { grid-template-columns: repeat(20, minmax(0, 1fr)); grid-auto-rows: 11px; gap: 3px; font-size: 0; }
  .tl-g { display: none; }
  .tl-ids i { width: 100%; height: 100%; padding: 0; border-radius: 2px; background: var(--fg-4); opacity: .25; }
  .tl-ids i.t-e { background: var(--fg-3); opacity: .7; }
  .tl-ids i.t-s { background: var(--cu); opacity: 1; }
  .tl-ids i.t-a { background: var(--fg-2); opacity: .75; }
  .tl-ids i.t-n { background: var(--fg-3); opacity: .6; }
  .tl-ids i.t-ad { background: var(--fg-1); }
  .tl-ids i.t-nd { background: var(--fg-2); opacity: .7; }
  .tl-ids i.t-r { background: var(--fg-1); box-shadow: 0 0 0 1px var(--amber); }
  .tl-ids i.t-q { background: var(--fg-1); box-shadow: 0 0 0 1px var(--fg-3); }
  .tl-read { font-size: 11px; }
  .tl-side { border-left: 0; border-top: 1px solid var(--line); padding: 12px; }
  .tl-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 0; border-bottom: 0; gap: 8px; }
  .tl-nums dt { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl-nums dd { font-size: 17px; }
  .tl-hist-h, .tl-hist { display: none; }
  .tl-rail { margin: 0 12px; }
  .tl-segs em { visibility: hidden; }
  .tl-segs > .on em { visibility: visible; overflow: visible; }
}

/* ================= modes you drive (#md-live) =================
   One Assess list under the assessment's AI setting. Every AI piece (orb, copper underline, suggested result) sits in
   the same cell as its by-hand twin, so a switch crossfades in place. Without AI, no copper is left on screen. */
.md-live { margin-top: 72px; }
.md-app { border-radius: 12px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), var(--lift); overflow: hidden; font-size: 13px; }
.md-bar { height: 52px; padding: 0 12px 0 18px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.md-crumb { display: flex; gap: 10px; align-items: baseline; min-width: 0; white-space: nowrap; overflow: hidden; }
.md-crumb b { font-weight: 500; }
.md-crumb span { color: var(--fg-3); }
.md-switch { margin-left: auto; flex: none; }
.md-switch button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--fg-3); font-size: 12.5px; cursor: pointer; transition: color var(--dur-hover), background var(--dur-hover), box-shadow var(--dur-hover); }
.md-switch button:hover { color: var(--fg-1); }
.md-switch button[aria-checked="true"] { background: var(--bg-3); color: var(--fg-1); box-shadow: var(--glass); }
.md-list { display: flex; flex-direction: column; }
.md-r { height: 52px; padding: 0 18px; display: grid; grid-template-columns: 72px minmax(0, 1fr) 300px; align-items: center; gap: 14px; border-bottom: 1px solid var(--line-2); }
.md-r .ap-key { justify-self: start; }
.md-t { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-c { display: grid; justify-items: end; align-items: center; }
.md-c > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; opacity: 0; filter: blur(3px); transform: translateY(3px); pointer-events: none; transition: opacity var(--dur-enter) var(--ease-spring), filter var(--dur-enter) var(--ease-spring), transform var(--dur-enter) var(--ease-spring); transition-delay: calc(var(--i, 0) * 45ms); }
.md-c .md-done { opacity: 1; filter: none; transform: none; color: var(--fg-1); }
.md-done .ap-av { margin-left: 2px; }
.md-ai .sugg-by .ai-mark { --ai-mark-h: 16px; }
.md-ai .sugg { color: var(--fg-1); }
.md-ask .ap-btn { border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500; }
.md-ask .ap-btn:hover { filter: brightness(1.15); }
/* which twin shows: Auto, every open row suggested; Assisted, only the rows someone asked about; Without AI, by hand */
[data-mode="auto"] .md-ai, [data-mode="assisted"] .md-r.asked .md-ai, [data-mode="assisted"] .md-r:not(.asked) .md-ask, [data-mode="off"] .md-man { opacity: 1; filter: none; transform: none; pointer-events: auto; }
.md-r.working .md-ask .ap-btn { color: var(--cu); box-shadow: inset 0 0 0 1px var(--cu-line); background: var(--cu-tint); }
.md-ask .ai-mark { --ai-mark-h: 14px; display: none; }
.md-r.working .md-ask .ai-mark { display: inline-block; }
.md-foot { height: 48px; padding: 0 18px; display: flex; align-items: center; gap: 12px; color: var(--fg-3); font-size: 12.5px; }
.md-foot-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.md-foot-ai { display: inline-flex; width: 16px; transition: opacity var(--dur-enter), width var(--dur-enter) var(--ease-spring); }
.md-foot-ai .ai-mark { --ai-mark-h: 16px; }
[data-mode="off"] .md-foot-ai { opacity: 0; width: 0; margin-right: -8px; }
.md-calls { margin-left: auto; flex: none; font-size: 12px; color: var(--fg-2); }
[data-mode="off"] .md-calls { color: var(--fg-1); }
.md-caps { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.md-caps button { padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; display: flex; flex-direction: column; gap: 4px; cursor: pointer; color: var(--fg-3); transition: border-color var(--dur-hover), color var(--dur-hover); }
.md-caps b { font-size: 15px; font-weight: 500; color: var(--fg-3); transition: color var(--dur-hover); }
.md-caps span { font-size: 15px; max-width: 34ch; }
.md-caps button.on { border-top-color: var(--fg-1); color: var(--fg-2); }
.md-caps button.on b, .md-caps button:hover b { color: var(--fg-1); }
@media (prefers-reduced-motion: reduce) { .md-c > * { transition: none; } }
@media (max-width: 760px) {
  .md-live { margin-top: 48px; }
  .md-bar { padding: 0 8px 0 12px; }
  .md-crumb span { display: none; }
  .md-switch button { padding: 0 9px; font-size: 12px; }
  .md-r { height: auto; min-height: 52px; padding: 10px 12px; grid-template-columns: 64px minmax(0, 1fr); row-gap: 6px; }
  .md-t { white-space: normal; font-size: 13px; line-height: 1.35; }
  .md-c { grid-column: 2; justify-items: start; }
  .md-foot { padding: 0 12px; font-size: 12px; }
  .md-caps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
/* short laptop screens: the 260 ids keep fitting the stuck window */
@media (min-width: 761px) and (max-height: 820px) { .tl-ids { grid-auto-rows: 16px; } .tl-ids i, .tl-g { line-height: 16px; } .tl-ids i { background-position: 2px 14px; } }

/* ================= one file, kickoff to AOC (#js) =================
   One surface becomes each next stage: a file in Evidence, a testing procedure in Assess, the accepted ROC page in Report (normal surface, never white),
   a line of the final evidence list in Deliver. Its size and ground change in place; the one EV-061 chip glides to
   the slot that stage keeps for it. */
.js { margin-top: 72px; }
.js-stage { height: 440px; display: grid; place-items: center; border-radius: 12px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
:root[data-theme="light"] .js-stage { background: var(--bg-2); }
.js-card { position: relative; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3), var(--lift); font-size: 13px; transition: width var(--dur-swap) var(--ease-swap), height var(--dur-swap) var(--ease-swap), background var(--dur-swap) var(--ease-swap), box-shadow var(--dur-swap) var(--ease-swap), border-radius var(--dur-swap) var(--ease-swap); }
.js-card[data-s="2"] { border-radius: 6px; }
.js-l { position: absolute; left: 0; top: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; opacity: 0; filter: blur(4px); pointer-events: none; transition: opacity var(--dur-enter) var(--ease-spring), filter var(--dur-enter) var(--ease-spring); }
.js-l.on { opacity: 1; filter: none; transition-delay: .25s; }
.js-ev { width: min(540px, calc(100vw - 64px)); }
.js-as { width: min(600px, calc(100vw - 64px)); }
.js-rp { width: min(580px, calc(100vw - 64px)); background: transparent; box-shadow: none; padding: 20px 22px; }
.js-dl { width: min(520px, calc(100vw - 64px)); }
.js-slot { display: inline-block; width: var(--chip-w, 56px); height: 20px; vertical-align: -5px; flex: none; }
.js-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.js-h svg { width: 16px; height: 16px; color: var(--fg-3); flex: none; }
.js-h b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js-h .r { margin-left: auto; flex: none; }
.js-h .r.mono, .js-f .r.mono, .js-meta .r { font-size: 11.5px; color: var(--fg-3); }
.js-meta { display: flex; align-items: center; gap: 12px; color: var(--fg-3); font-size: 12.5px; white-space: nowrap; }
.js-meta .r { margin-left: auto; }
.js-sub { padding-top: 12px; border-top: 1px solid var(--line-2); }
.js-sub .ai-mark { --ai-mark-h: 14px; }
.js-links { display: flex; flex-direction: column; gap: 8px; }
.js-links > span { display: flex; align-items: center; gap: 10px; color: var(--fg-2); }
.js-f { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 10px; color: var(--fg-3); font-size: 12.5px; }
.js-f .ap-btn, .js-f .r, .js-f time { margin-left: auto; }
.js-f time { font-size: 11.5px; }
.js-who { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-1); }
.js-proc { color: var(--fg-3); font-size: 12.5px; }
.js-kv { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line-2); }
.js-kv > span:first-child { color: var(--fg-3); font-size: 12px; }
.js-kv b { font-weight: 500; }
.js-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.js-rp .js-para { font-size: 14px; line-height: 1.85; color: var(--fg-1); }
.js-rp .js-h { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.js-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.js-list > div { height: 40px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); color: var(--fg-3); white-space: nowrap; }
.js-list > div > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.js-list > div.on { color: var(--fg-1); }
.js-list .r { margin-left: auto; font-size: 11.5px; }
/* the one chip: it travels between stages */
.js-chip { position: absolute; left: 0; top: 0; z-index: 2; color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--fg-3); transition: transform var(--dur-swap) var(--ease-swap), background var(--dur-swap), color var(--dur-swap), box-shadow var(--dur-swap); }
.js-tabs { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.js-tabs button { padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); background: none; display: flex; align-items: baseline; gap: 10px; color: var(--fg-3); font-size: 15px; cursor: pointer; text-align: left; transition: color var(--dur-hover), border-color var(--dur-hover); }
.js-tabs button .mono { font-size: 12px; color: var(--fg-4); }
.js-tabs button:hover { color: var(--fg-1); }
.js-tabs button[aria-selected="true"] { color: var(--fg-1); border-top-color: var(--fg-1); }
@media (prefers-reduced-motion: reduce) { .js-card, .js-l, .js-l.on, .js-chip { transition: none; } }
@media (max-width: 640px) {
  .js { margin-top: 48px; }
  .js-stage { height: 520px; }
  .js-l { padding: 14px; }
  .js-meta { flex-wrap: wrap; row-gap: 4px; }
  .js-meta .r { display: none; }
  .js-kv { grid-template-columns: 64px minmax(0, 1fr); }
  .js-tabs { gap: 8px; }
  .js-tabs button { flex-direction: column; gap: 2px; font-size: 13px; }
}

/* ---------- Parts into the record (A1): five inputs arrive at the silver mark's ray tips; one ROC leaves its solid arc.
   Lines are drawn by home.js from the real positions; the field is masked so more inputs seem to lie beyond the frame.
   No copper except the one line the AI read, and only as a short pulse. ---------- */
.pr { --mx: 56%; --my: 46%; --ms: 216px; --fade: radial-gradient(ellipse 72% 82% at var(--mx) var(--my), #000 55%, transparent 100%); margin: 72px 0 0; }
.pr-stage { position: relative; height: 600px; }
.pr-field, .pr-core { position: absolute; inset: 0; }
.pr-field { -webkit-mask-image: var(--fade); mask-image: var(--fade); }
.pr-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--fg-1); -webkit-mask-image: var(--fade); mask-image: var(--fade); }
.pr-lines path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pr-l { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms cubic-bezier(0, 0, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.pr.on .pr-l { stroke-dashoffset: 0; }
.pr-pulse { stroke: var(--cu) !important; stroke-width: 1.25 !important; stroke-dasharray: .08 1.2; stroke-dashoffset: .1; opacity: 0; }
.pr.on.live .pr-pulse { animation: pr-pulse 8s linear 1.8s infinite; }
@keyframes pr-pulse { 0% { stroke-dashoffset: .1; opacity: 1; } 15% { stroke-dashoffset: -1; opacity: 1; } 15.1%, 100% { stroke-dashoffset: -1; opacity: 0; } }

.pr-in { position: absolute; left: var(--x); top: var(--y); transform: translateY(-50%); display: flex; align-items: center; gap: 12px; white-space: nowrap; transition: filter var(--dur-swap) var(--ease-swap), opacity var(--dur-swap) var(--ease-swap); }
.pr-g { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--fg-2); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3), inset 0 1px 0 #ffffff0a; }
.pr-g svg { width: 16px; height: 16px; }
.pr-t { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.pr-t b { font-size: 12px; font-weight: 400; color: var(--fg-3); }
.pr-t small { font-size: 14px; color: var(--fg-2); }
.pr-in.read .pr-t small { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0; }
.pr-in.ghost { opacity: .35; filter: blur(2px); }
.pr-in[data-tip="90"] { --x: 1%; --y: 8%; }  .pr-in[data-tip="0"] { --x: 2%; --y: 90%; }
.pr-in[data-tip="75"] { --x: 9%; --y: 14%; } .pr-in[data-tip="60"] { --x: 15%; --y: 30%; } .pr-in[data-tip="45"] { --x: 20%; --y: 46%; }
.pr-in[data-tip="30"] { --x: 13%; --y: 62%; }  .pr-in[data-tip="15"] { --x: 6%; --y: 78%; }

.pr-mark { position: absolute; --s: var(--ms); left: calc(var(--mx) - var(--ms) / 2); top: calc(var(--my) - var(--ms) / 2); }
.pr-mark::before { margin-top: 0; width: 66%; }
.pr-out { position: absolute; right: 0; top: var(--my); transform: translateY(-50%); height: 56px; padding: 0 18px 0 8px; display: flex; align-items: center; gap: 12px; white-space: nowrap; border-radius: 12px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), inset 0 1px 0 #ffffff08; font-size: 15px; }
.pr-out .pr-g { color: var(--fg-1); }
.pr-out b { font-weight: 500; }
.pr-n { margin-left: 4px; color: var(--fg-3); font-size: 13px; }
.pr-cap { margin-top: 8px; }
.pr-cap h3 { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.pr-cap p { margin-top: 4px; color: var(--fg-3); font-size: 15px; max-width: 44ch; }

/* narrower screens: inputs keep their glyph and id, the ROC row moves under the mark */
@media (max-width: 1279px) {
  .pr { --mx: 68%; --my: 40%; --ms: 150px; --fade: radial-gradient(ellipse 86% 72% at var(--mx) var(--my), #000 55%, transparent 100%); }
  .pr-stage { height: 620px; }
  .pr-t small { display: none; }
  .pr-in[data-tip="90"] { --x: 0%; --y: 5%; }  .pr-in[data-tip="0"] { --x: 1%; --y: 72%; }
  .pr-in[data-tip="75"] { --x: 8%; --y: 12%; } .pr-in[data-tip="60"] { --x: 18%; --y: 26%; } .pr-in[data-tip="45"] { --x: 26%; --y: 40%; }
  .pr-in[data-tip="30"] { --x: 16%; --y: 54%; }  .pr-in[data-tip="15"] { --x: 6%; --y: 68%; }
  .pr-out { top: auto; bottom: 24px; transform: none; }
}
@media (max-width: 640px) {
  .pr { --mx: 72%; --my: 36%; --ms: 116px; margin-top: 48px; }
  .pr-stage { height: 470px; }
  .pr-in[data-tip="0"] { --y: 82%; }
  .pr-g { width: 36px; height: 36px; border-radius: 9px; }
  .pr-in { gap: 8px; }
  .pr-in[data-tip="75"] { --x: 2%; } .pr-in[data-tip="60"] { --x: 9%; } .pr-in[data-tip="45"] { --x: 15%; }
  .pr-in[data-tip="30"] { --x: 8%; }  .pr-in[data-tip="15"] { --x: 1%; }
  .pr-out { bottom: 0; }
  .pr-out { height: 52px; padding: 0 14px 0 8px; gap: 10px; font-size: 14px; bottom: 12px; }
  .pr-n { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .pr-l { transition: none; stroke-dashoffset: 0; } .pr-pulse { display: none; } .pr-in { transition: none; } }

/* trust: the three rules as a spec list, the section head on its left */
#trust .spec { margin-top: 0; }
#trust .spec .eyebrow { margin-bottom: 20px; }
#trust .spec > p { margin-top: 24px; font-size: 16px; max-width: 32ch; }
#trust .spec .arrow { margin-top: 20px; justify-self: start; }
@media (max-width: 900px) { #trust .spec .eyebrow { margin-bottom: 0; } #trust .spec > p { margin-top: 0; } #trust .spec .arrow { margin-top: 0; } #trust .spec-l { margin-top: 24px; } }

/* Hero: release status under the calls to action (private preview, GA December 2026) */
.hm-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hm-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-3); margin: 0; }
.hm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3); }
@media (min-width: 900px) { .hm-cta { align-items: flex-end; } }