/* Ephessus v2. The five product scenes: Keel (reconciliation), Mirror (x-ray sales map),
   Relay (lead path), Counsel (question and dashboard), Fieldwork (the document).
   Every scene has a static final state in the DOM; GSAP only adds movement. */

/* ---------- stage: the dark rectangle every scene lives in ---------- */
.stage {
  position: relative;
  background: var(--g0);
  border: 1px solid var(--line-d);
  border-radius: 10px;
  overflow: hidden;
  color: var(--t-hi);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
}
.stage-h {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 20px; border-bottom: 1px solid var(--line-d);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-dim);
}
.stage-h .live { display: inline-flex; align-items: center; gap: 7px; color: var(--moss-lit); }
.stage-h .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--moss-lit); animation: livep 1.6s ease-in-out infinite; }
.replay {
  font: inherit; letter-spacing: 0.12em; color: var(--t-mid); background: transparent;
  border: 1px solid var(--line-d2); border-radius: 999px; padding: 6px 13px;
  transition: color var(--t-fast) var(--ez), border-color var(--t-fast) var(--ez);
}
.replay:hover { color: var(--t-hi); border-color: var(--t-hi); }
html.static .replay { display: none; }
.stage .mono { font-family: var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- KEEL: reconciliation ---------- */
.cine { display: flex; flex-direction: column; min-height: 560px; }
.cine-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 22px 24px 14px; flex: 1; align-content: start; }
.cine-beams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.cine-beams path { fill: none; stroke: url(#gBeam); stroke-width: 1.5; stroke-linecap: round; }
.hero-open .cine-beams path { stroke: url(#gBeamH); }
.cine-col-h { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-dim); padding-bottom: 9px; border-bottom: 1px solid var(--line-d); margin-bottom: 6px; }
.cine-col-h i { width: 6px; height: 6px; border-radius: 50%; background: var(--moss-lit); animation: livep 1.6s ease-in-out infinite; }
.cx-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 8px; border-bottom: 1px solid var(--line-d); border-radius: 4px; }
.cx-row .mono { color: var(--t-dim); font-size: 12px; letter-spacing: 0.08em; }
.cx-row em { font-style: normal; font-size: 13px; color: var(--t-mid); }
.cx-row b { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-row.matched { background: rgba(138, 166, 118, 0.08); }
.cx-row.matched em, .cx-row.matched b { color: var(--moss-lit); }
.cx-row.pend { background: rgba(212, 165, 69, 0.1); }
.cx-row.pend em, .cx-row.pend b { color: var(--amber); }
.ct-row { position: relative; display: grid; grid-template-columns: 1fr 16px; gap: 2px 10px; padding: 9px 8px; border-bottom: 1px solid var(--line-d); border-radius: 4px; }
.ct-row em { font-style: normal; font-size: 13px; color: var(--t-mid); grid-column: 1; }
.ct-row span { font-size: 12px; color: var(--t-dim); grid-column: 1; }
.ct-row .ck { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.ct-row.lit { background: rgba(138, 166, 118, 0.08); }
.ct-row.lit em { color: var(--t-hi); }
.ck svg { width: 13px; height: 13px; display: block; }
.ck path { fill: none; stroke: var(--moss-lit); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset var(--t-layout) var(--ez); }
.ck.on path { stroke-dashoffset: 0; }
.ct-row.dim em { color: var(--t-dim); }
.cine-tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 24px 16px; }
.cine-tray-h { grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); padding: 6px 0; }
.dcard { border: 1px solid rgba(212, 165, 69, 0.35); border-radius: 6px; padding: 12px 14px; display: grid; gap: 6px; background: rgba(212, 165, 69, 0.05); }
.dcard b { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dcard p { font-size: 12px; line-height: 1.45; color: var(--t-mid); }
.dcard-b { justify-self: start; font-size: 12px; font-weight: 600; color: var(--moss-lit); border: 1px solid rgba(138, 166, 118, 0.4); border-radius: 999px; padding: 4px 11px; margin-top: 2px; }
.dcard.ok { border-color: rgba(138, 166, 118, 0.3); background: rgba(138, 166, 118, 0.06); }
.dcard.ok .dcard-b { color: var(--t-dim); border-color: var(--line-d2); }
.cine-foot { display: flex; align-items: center; gap: 40px; padding: 14px 24px; border-top: 1px solid var(--line-d); margin-top: auto; }
.cine-foot .mono { display: block; color: var(--t-dim); font-size: 12px; margin-bottom: 3px; }
.cine-foot b { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cine-note { margin-left: auto; color: var(--moss-lit); font-size: 12px; text-align: right; }
.cine-final { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(11, 12, 14, 0.9); opacity: 0; pointer-events: none; }
.cine-final svg { width: 52px; height: 52px; }
.cine-final circle { fill: none; stroke: var(--moss-lit); stroke-width: 1.4; stroke-dasharray: 67; stroke-dashoffset: 0; }
.cine-final path { fill: none; stroke: var(--moss-lit); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15; stroke-dashoffset: 0; }
.cine-final b { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -0.01em; }
.cine-final .mono { color: var(--t-dim); font-size: 12px; }
.cine-ghost { position: absolute; z-index: 5; width: 20px; height: 20px; opacity: 0; pointer-events: none; }
.cine-ghost path { fill: #f4f5f7; stroke: #0b0c0e; stroke-width: 1.2; }
/* the result: the ERP screen that enters when the bank closes */
.erp { position: absolute; inset: 0; z-index: 6; background: var(--g1); opacity: 0; visibility: hidden; pointer-events: none; display: grid; grid-template-rows: auto 1fr; }   /* hidden by visibility, not aria-hidden: the Replay inside leaves the tab order together with the panel */
.erp.on { opacity: 1; visibility: visible; pointer-events: auto; }
html.nomotion .stage.show-erp .erp, html.static .stage.show-erp .erp { opacity: 1; visibility: visible; pointer-events: auto; position: relative; }
html.nomotion .stage.show-erp .cine-stage, html.static .stage.show-erp .cine-stage,
html.nomotion .stage.show-erp .cine-tray, html.static .stage.show-erp .cine-tray,
html.nomotion .stage.show-erp .cine-foot, html.static .stage.show-erp .cine-foot,
html.nomotion .stage.show-erp > .stage-h, html.static .stage.show-erp > .stage-h { display: none; }
.erp { overflow: auto; }
.erp-body { display: grid; grid-template-columns: 300px 1fr; gap: 0; }
.erp-side { border-right: 1px solid var(--line-d); padding: 22px 24px; display: grid; gap: 22px; align-content: start; }
.erp-main { padding: 22px 24px; }
.erp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.erp-kpis .kv { padding: 14px 16px; border: 1px solid var(--line-d); border-radius: 6px; }
.ledger { width: 100%; border-collapse: collapse; }
.ledger th { text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-dim); font-weight: 500; padding: 8px 6px; border-bottom: 1px solid var(--line-d); }
.ledger td { padding: 10px 6px; border-bottom: 1px solid var(--line-d); font-size: 13px; color: var(--t-mid); }
.ledger td.n, .ledger th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger td.n { color: var(--t-hi); }
.ledger td.pos { color: var(--moss-lit); }
.ledger td.neg { color: var(--amber); }
.ledger tr.sum td { border-bottom: none; color: var(--t-hi); font-weight: 500; }
.erp-alerts { display: grid; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-d); }
.erp-alerts .h { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-dim); margin-bottom: 4px; }
.alert { display: flex; gap: 11px; align-items: baseline; border: 1px solid var(--line-d); border-radius: 6px; padding: 11px 14px; font-size: 13px; color: var(--t-mid); line-height: 1.45; }
.alert i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: 0 0 auto; position: relative; top: -1px; }
.alert.ok i { background: var(--moss-lit); }

/* ---------- MIRROR: x-ray sales map ---------- */
.mirror { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
.rx { position: relative; display: flex; flex-direction: column; border-right: 1px solid var(--line-d); overflow: hidden; }
.rx-shot { position: relative; flex: 1; min-height: 0; }
.rx-cap { position: relative; z-index: 3; flex: none; background: var(--g0); }
.rx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* img cover and svg slice share the same anchor (50% 50%): the polygons stay on the slabs at any crop */
.rx-shot::after { content: ''; position: absolute; inset: 0; background: rgba(11, 12, 14, 0.42); pointer-events: none; z-index: 1; }
.rx-ov { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.rx-ov .u { fill: transparent; stroke: transparent; cursor: pointer; transition: fill var(--t-fast) var(--ez), stroke var(--t-fast) var(--ez); }
.rx-ov .u.st-sold { fill: rgba(138, 166, 118, 0.52); stroke: rgba(138, 166, 118, 0.85); stroke-width: 1.6; }
.rx-ov .u.st-res { fill: rgba(212, 165, 69, 0.55); stroke: rgba(212, 165, 69, 0.9); stroke-width: 1.6; }
.rx-ov .u.st-av { fill: rgba(236, 238, 241, 0.14); stroke: rgba(236, 238, 241, 0.75); stroke-width: 2; }
.rx-ov .u:hover, .rx-ov .u.sel { stroke: #f4f5f7; stroke-width: 4; }
.rx-ov .u.st-sold:hover, .rx-ov .u.st-sold.sel { fill: rgba(138, 166, 118, 0.55); }
.rx-ov .u.st-res:hover, .rx-ov .u.st-res.sel { fill: rgba(212, 165, 69, 0.6); }
.rx-ov .u.st-av:hover, .rx-ov .u.st-av.sel { fill: rgba(236, 238, 241, 0.22); }
@keyframes rxvisit { 0%, 100% { stroke: rgba(212, 165, 69, 1); fill: rgba(212, 165, 69, 0.22); } 50% { stroke: rgba(212, 165, 69, 0.5); fill: rgba(212, 165, 69, 0.6); } }
.rx-ov .u.visit { animation: rxvisit 1.9s ease-in-out infinite; stroke-width: 4; }
.rx-tip { position: absolute; z-index: 5; pointer-events: none; background: rgba(11, 12, 14, 0.94); color: var(--t-hi); border: 1px solid var(--line-d2); padding: 7px 11px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); border-radius: 4px; }
.rx-cap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line-d); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-dim); }
.rx-leg { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rx-leg > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.rx-leg .lg { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.lg-sold { background: rgba(138, 166, 118, 0.85); }
.lg-res { background: rgba(212, 165, 69, 0.85); }
.lg-av { background: rgba(236, 238, 241, 0.14); border: 1.5px solid rgba(236, 238, 241, 0.8); }
/* the same light over the facade (A10, second surface). Inside the light the building is a register: a dark layer
   with a grey ghost of the photo, the outline of every unit in its state color and, in every cell wide enough, the
   unit number and the state (or the latest event of the day, with its time). A label is drawn only when the light
   holds it whole; cells too small for a line show the number alone and leave the state to the outline color.
   The layer is built by JS from the polygons and the feed, so nothing is written twice. */
.rx-shot { isolation: isolate; --lx: 50%; --ly: 50%; --r: 150px; touch-action: pan-y; }
/* v6: the light has no rim. The mask feathers from solid at 58% of the radius to nothing at the edge, so the record
   dissolves into the photo instead of being cut by a line */
.rx-xr {
  position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; background: var(--g0); color: var(--t-hi);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 0, #000 64%, rgba(0, 0, 0, 0.55) 86%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 0, #000 64%, rgba(0, 0, 0, 0.55) 86%, transparent 100%);
}
.rx-xr .ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0.22; filter: grayscale(1) contrast(1.15); }
.rx-xr .glow { position: absolute; inset: 0; background: radial-gradient(circle calc(var(--r) * 1.4) at var(--lx) var(--ly), rgba(138, 166, 118, 0.14), transparent 72%); }
.rx-wire { position: absolute; inset: 0; width: 100%; height: 100%; }
.rx-wire .u { fill: transparent; stroke: rgba(236, 238, 241, 0.3); stroke-width: 1; transition: stroke var(--t-fast) var(--ez), stroke-width var(--t-fast) var(--ez); }
.rx-wire .u.st-sold { stroke: rgba(138, 166, 118, 0.8); }
.rx-wire .u.st-res { stroke: rgba(212, 165, 69, 0.85); }
.rx-wire .u.st-av { stroke: rgba(236, 238, 241, 0.5); }
@keyframes rxwire { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.45; } }
.rx-wire .u.visit { stroke: var(--amber); stroke-width: 2.4; animation: rxwire 1.9s ease-in-out infinite; }
.rx-wire .u.hot, .rx-wire .u.sel { stroke: #f4f5f7; stroke-width: 3; }
.xu-all { position: absolute; inset: 0; }
.xu {
  position: absolute; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 0 6px; padding: 0 4px;
  font-family: var(--mono); font-size: 12px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; overflow: hidden;
}
.xu span { opacity: 0; transition: opacity 140ms var(--ez); }
.xu span.on { opacity: 1; }
.xu .no { display: none; }
.xu .id { color: var(--t-hi); font-weight: 500; }
.xu .tm { color: var(--t-dim); text-align: right; }
/* the register is quiet, the events of the day are loud: a state without event reads dim (the outline already
   carries its color), an event reads in the color of what happened */
.xu .st { grid-column: 1 / -1; margin-top: 3px; color: var(--t-dim); }
.xu .st.e.sold { color: var(--moss-lit); }
.xu .st.e.res { color: var(--amber); }
.xu .st.e.ev { color: var(--t-hi); }
.tvp-ctl { display: inline-flex; align-items: center; gap: 14px; }
.tvp { display: flex; flex-direction: column; }
.tvp-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line-d); }
.tvp-top .title { font-family: var(--serif); font-size: 19px; letter-spacing: -0.01em; }
.tvp-unit { padding: 20px 22px; border-bottom: 1px solid var(--line-d); display: grid; gap: 5px; }
.tvp-unit-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tvp-unit-h b { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.015em; }
.tvp-st { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.tvp-st.st-sold { color: var(--moss-lit); border-color: rgba(138, 166, 118, 0.45); }
.tvp-st.st-res, .tvp-st.st-visit { color: var(--amber); border-color: rgba(212, 165, 69, 0.5); }
.tvp-st.st-av { color: var(--t-mid); border-color: var(--line-d2); }
.tvp-st.st-visit { animation: livep 1.6s ease-in-out infinite; }
.tvp-unit p { font-size: 14px; color: var(--t-mid); }
.tvp-hint { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-dim); margin-top: 4px; }
.tvp-kpis { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-d); }
.tvp-kpis > div { padding: 18px 22px; border-right: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
.tvp-kpis > div:nth-child(2n) { border-right: none; }
.tvp-kpis > div:nth-last-child(-n+2) { border-bottom: none; }
.tvp-kpis .mono { display: block; font-size: 12px; color: var(--t-dim); margin-bottom: 8px; }
.tvp-kpis b { font-family: var(--serif); font-weight: 350; font-size: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tvp-feed { flex: 1; overflow: auto; min-height: 0; }
.tvf { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: baseline; padding: 12px 22px; border-bottom: 1px solid var(--line-d); font-size: 13.5px; color: var(--t-mid); }
.tvf .mono { font-size: 12px; color: var(--t-dim); letter-spacing: 0.08em; }
.tvf .s { color: var(--moss-lit); font-weight: 500; }
.tvf .r { color: var(--amber); font-weight: 500; }
.tvp-foot { padding: 12px 22px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-dim); }

/* ---------- RELAY: lead path ---------- */
.relay { display: grid; grid-template-columns: 1.25fr 0.75fr; min-height: 600px; }
.relay-map { position: relative; border-right: 1px solid var(--line-d); padding: 24px; display: grid; place-items: center; }
.relay-ring { position: relative; width: clamp(240px, 58%, 440px); aspect-ratio: 1; }
.relay-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* the hub and the ten labels are HTML: 12px at every viewport, never scaled with the viewBox (regra 31) */
.rh { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; display: grid; gap: 3px; pointer-events: none; }
.rh b { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; color: var(--t-hi); }
.rh span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--t-dim); }
.relay-labels { list-style: none; margin: 0; padding: 0; counter-reset: rn; }
.rn { position: absolute; display: grid; gap: 2px; white-space: nowrap; counter-increment: rn; transition: color var(--t-state) var(--ez); }
.rn b { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-dim); }
.rn span { font-size: 12.5px; color: var(--t-dim); }
.rn.lit b { color: var(--t-hi); }
.rn.lit span { color: var(--t-mid); }
.rn.p-r { left: calc(var(--x) + 20px); top: var(--y); transform: translateY(-50%); }
.rn.p-l { right: calc(100% - var(--x) + 20px); top: var(--y); transform: translateY(-50%); text-align: right; }
.rn.p-t { left: var(--x); bottom: calc(100% - var(--y) + 20px); transform: translateX(-50%); text-align: center; }
.rn.p-b { left: var(--x); top: calc(var(--y) + 20px); transform: translateX(-50%); text-align: center; }
.rn::before { display: none; content: counter(rn, decimal-leading-zero); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--t-dim); }
.relay-map .ring { fill: none; stroke: var(--line-d2); stroke-width: 1; stroke-dasharray: 3 5; }
.relay-map .edge { fill: none; stroke: rgba(236, 238, 241, 0.16); stroke-width: 1; }
.relay-map .beam { fill: none; stroke: url(#gBeam2); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.relay-map .beam.on { opacity: 1; }
.relay-map .node circle { fill: var(--g2); stroke: rgba(236, 238, 241, 0.3); stroke-width: 1; transition: fill var(--t-state) var(--ez), stroke var(--t-state) var(--ez); }
.relay-map .node.lit circle { fill: rgba(138, 166, 118, 0.22); stroke: var(--moss-lit); }
.relay-map .hub circle.core { fill: var(--g3); stroke: var(--moss-lit); stroke-width: 1.2; }
.relay-map .hub circle.halo { fill: rgba(138, 166, 118, 0.08); stroke: none; }
.relay-map .lead { fill: #f4f5f7; }
.relay-map .lead-halo { fill: rgba(244, 245, 247, 0.12); }
.relay-doss { display: flex; flex-direction: column; }
.relay-doss .tvp-top { align-items: center; }
.doss-rows { display: grid; }
.doss-row { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: baseline; padding: 12px 22px; border-bottom: 1px solid var(--line-d); }
.doss-row .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-dim); }
.doss-row .v { font-size: 13.5px; color: var(--t-hi); }
.doss-row.wait .v { color: var(--t-dim); }
.doss-log { flex: 1; padding: 6px 0 10px; }
.doss-log .h { padding: 12px 22px 6px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-dim); }
.log-row { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 8px 22px; font-size: 13px; color: var(--t-mid); }
.log-row .mono { font-size: 12px; color: var(--t-dim); letter-spacing: 0.08em; }
.log-row.hot { color: var(--t-hi); }
.relay-map .beam-defs { position: absolute; width: 0; height: 0; }

/* ---------- COUNSEL: question and dashboard ---------- */
.counsel { display: grid; grid-template-columns: 0.9fr 1.1fr; min-height: 620px; }
.cn-left { display: grid; place-items: center; padding: 36px 24px; border-right: 1px solid var(--line-d); background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(138, 166, 118, 0.07), transparent 70%); }
.phone { width: 300px; height: 700px; background: #050607; border: 1px solid rgba(236, 238, 241, 0.2); border-radius: 40px; padding: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.6); position: relative; }
.phone::before { content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; background: #050607; border-radius: 999px; z-index: 2; }
.screen { position: relative; height: 100%; background: var(--g1); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; }
.screen-h { display: flex; align-items: center; justify-content: space-between; padding: 44px 16px 10px; border-bottom: 1px solid var(--line-d); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-dim); }
.screen-h b { font-family: var(--serif); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--t-hi); font-weight: 400; }
.chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 12px; overflow: hidden; }
.msg { max-width: 90%; padding: 8px 11px 8px; border-radius: 13px; font-size: 12.5px; line-height: 1.4; }
.msg.q { align-self: flex-end; background: #2a2d33; color: var(--t-hi); border-bottom-right-radius: 4px; }
.msg.a { align-self: flex-start; background: var(--g2); border: 1px solid var(--line-d); color: var(--t-hi); border-bottom-left-radius: 4px; }
.msg .src { display: block; margin-top: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss-lit); }
.msg .mini { width: 100%; border-collapse: collapse; margin-top: 8px; }
.msg .mini td { padding: 3px 0; border-top: 1px solid var(--line-d); font-size: 12px; color: var(--t-mid); }
.msg .mini td.n { text-align: right; font-variant-numeric: tabular-nums; color: var(--t-hi); }
.msg.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.msg.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--t-dim); animation: dot 1s ease-in-out infinite; }
.msg.typing i:nth-child(2) { animation-delay: 0.15s; }
.msg.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.screen-in { display: flex; align-items: center; gap: 10px; margin: 0 12px 14px; padding: 8px 12px; border: 1px solid var(--line-d2); border-radius: 999px; font-size: 12.5px; color: var(--t-dim); }
.screen-in i { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--t-hi); }
.cn-right { display: flex; flex-direction: column; }
.cn-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line-d); }
.cn-kpis > div { padding: 20px 22px; border-right: 1px solid var(--line-d); }
.cn-kpis > div:last-child { border-right: none; }
.cn-kpis .mono { display: block; font-size: 12px; color: var(--t-dim); margin-bottom: 8px; }
.cn-kpis b { font-family: var(--serif); font-weight: 350; font-size: 26px; white-space: nowrap; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: color var(--t-state) var(--ez); }
.cn-kpis .hot b { color: var(--moss-lit); }
.cn-chart { padding: 22px; border-bottom: 1px solid var(--line-d); }
.cn-chart .h { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-dim); margin-bottom: 14px; }
.bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: end; height: 150px; }
.bar { position: relative; display: grid; align-items: end; height: 100%; }
.bar i { display: block; width: 100%; border-radius: 3px 3px 0 0; transform-origin: bottom; }
.bar .in { background: rgba(138, 166, 118, 0.7); }
.bar .out { background: rgba(236, 238, 241, 0.2); margin-top: 3px; }
.bar .l { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--t-dim); }
.bars.two .bar { grid-template-columns: 1fr 1fr; gap: 4px; }
.cn-legend { display: flex; gap: 18px; margin-top: 30px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-dim); }
.cn-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.cn-margin { padding: 22px; flex: 1; }
.cn-margin .h { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-dim); margin-bottom: 12px; display: flex; justify-content: space-between; }
.mrow { display: grid; grid-template-columns: 170px 1fr 56px; gap: 14px; align-items: center; padding: 7px 0; font-size: 13px; color: var(--t-mid); }
.mrow .bt { height: 8px; background: rgba(236, 238, 241, 0.07); border-radius: 4px; overflow: hidden; }
.mrow .bt i { display: block; height: 100%; width: var(--w); background: rgba(236, 238, 241, 0.35); border-radius: 4px; transform-origin: left; }
.mrow.hi .bt i { background: var(--moss-lit); }
.mrow.lo .bt i { background: var(--amber); }
.mrow .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--t-hi); font-size: 12.5px; }
.mrow.hi { color: var(--t-hi); }

/* ---------- FIELDWORK: the document ---------- */
.fieldwork { display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 600px; }
.fw-doc { position: relative; border-right: 1px solid var(--line-d); background: #e4e6ea; color: var(--k-hi); padding: 40px 44px; display: flex; flex-direction: column; --lx: 42%; --ly: 40%; --r: 200px; --lc: 34px; touch-action: pan-y; }
.fw-doc .mono { color: var(--k-dim); font-size: 12px; }
.fw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.fw-ctl { display: inline-flex; align-items: center; gap: 14px; }
.fw-hint .m { display: none; }
.fw-doc .replay { color: var(--k-mid); border-color: var(--line-l); }
.fw-doc .replay:hover { color: var(--k-hi); border-color: var(--k-hi); }
/* the sheet against the light (signature moment, A10): a dark layer with the record that answers each
   line, revealed through a circular mask that follows the light; boxes are aligned to the paper by JS */
.xr {
  position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; color: var(--t-hi);
  background: radial-gradient(circle calc(var(--r) * 1.4) at var(--lx) var(--ly), rgba(138, 166, 118, 0.13), transparent 72%), var(--g0);
  /* on the light paper the edge is short: solid to 80% of the radius, then a soft fall-off, so it reads as a lens and not as a stain */
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 0, #000 80%, rgba(0, 0, 0, 0.6) 91%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 0, #000 80%, rgba(0, 0, 0, 0.6) 91%, transparent 100%);
}
.xr > div { position: absolute; left: 44px; right: 44px; display: grid; align-content: center; overflow: hidden; }
.xr-head { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-dim); }
.xr-h4 { font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; max-width: 16ch; color: var(--t-hi); }
/* the label column of the record is the label column of the paper (same left, same width via --lc, so the
   text of both layers starts at the same x); a tag is only drawn once the light holds it whole, so the edge
   of the mask never leaves half a word in the label column */
.xr-row { grid-template-columns: var(--lc) 1fr auto; gap: 6px 16px; align-items: baseline; border-bottom: 1px solid var(--line-d); }
.xr-row .tag { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss-lit); white-space: nowrap; opacity: 0; transition: opacity 140ms var(--ez); }
.xr-row.tagged .tag { opacity: 1; }
.xr-row .t { font-size: 14.5px; line-height: 1.4; color: var(--t-mid); transition: color var(--t-state) var(--ez); }
.xr-row .ref { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--t-dim); white-space: nowrap; text-align: right; }
.xr-row.lit .t { color: var(--t-hi); }
.xr-total { grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; }
.fw-doc .xr .mono { color: var(--t-dim); }
.xr-total b { font-family: var(--serif); font-weight: 400; font-size: 30px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--moss-lit); white-space: nowrap; }
.xr-total b small { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-dim); margin-left: 8px; }
.xr-ring {
  position: absolute; z-index: 4; display: none; pointer-events: none;
  left: var(--lx); top: var(--ly); width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  transform: translate(-50%, -50%); border-radius: 50%;
  /* v6: no rim; a soft halo that thins out with the mask */
  background: radial-gradient(circle, transparent 66%, rgba(138, 166, 118, 0.05) 80%, rgba(138, 166, 118, 0.22) 92%, transparent 100%);
  box-shadow: 0 0 70px 10px rgba(138, 166, 118, 0.07);
}
html.motion .xr, html.nomotion .xr, html.static .xr, html.motion .xr-ring, html.nomotion .xr-ring, html.static .xr-ring, html.motion .rx-xr, html.nomotion .rx-xr, html.static .rx-xr { display: block; }
/* with motion the light arrives after the sheet fills; without it, the light is already resting on the sheet */
html.motion .xr, html.motion .xr-ring, html.motion .rx-xr { opacity: 0; transition: opacity var(--t-enter) var(--ez); }
html.motion .xr-on .xr, html.motion .xr-on .xr-ring, html.motion .xr-on .rx-xr { opacity: 1; }
.fw-doc h4 { font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; margin: 14px 0 30px; max-width: 16ch; }
.fw-rows { border-top: 1px solid var(--line-l); }
.fw-row { display: grid; grid-template-columns: var(--lc) 1fr auto; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-l); }
.fw-row .i { font-family: var(--mono); font-size: 12px; color: var(--k-dim); letter-spacing: 0.1em; }
.fw-row .t { font-size: 14.5px; color: var(--k-hi); line-height: 1.4; }
.fw-row .t small { display: block; font-size: 12px; color: var(--k-dim); margin-top: 2px; }
.fw-row .c { font-family: var(--serif); font-size: 19px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fw-row .c small { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--k-dim); margin-left: 6px; }
.fw-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0 0; margin-top: auto; }
.fw-total b { white-space: nowrap; }
.fw-total .mono { color: var(--k-mid); }
.fw-total b { font-family: var(--serif); font-weight: 400; font-size: 30px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fw-total b small { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--k-dim); margin-left: 8px; }
.fw-tests { display: flex; flex-direction: column; }
.fw-test { padding: 22px 24px; border-bottom: 1px solid var(--line-d); display: grid; gap: 8px; }
.fw-test:last-child { border-bottom: none; flex: 1; align-content: start; }
.fw-test .mono { font-size: 12px; color: var(--t-dim); }
.fw-test .big { font-family: var(--serif); font-weight: 300; font-size: 54px; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fw-test .big.mid { font-size: 34px; }
.fw-test p { font-size: 13.5px; color: var(--t-mid); line-height: 1.5; max-width: 34ch; }
.fw-test .trail { list-style: none; display: grid; gap: 6px; margin-top: 4px; }
.fw-test .trail li { display: grid; grid-template-columns: 100px 1fr; gap: 10px; font-size: 13px; color: var(--t-mid); }
.fw-test .trail .mono { color: var(--t-dim); }
.fw-test .trail .miss { color: var(--amber); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .mirror, .relay, .counsel, .fieldwork { grid-template-columns: 1fr; }
  .rx, .relay-map, .cn-left, .fw-doc { border-right: none; border-bottom: 1px solid var(--line-d); }
  .erp-body { grid-template-columns: 1fr; }
  .erp-side { border-right: none; border-bottom: 1px solid var(--line-d); }
  .rx-shot { aspect-ratio: 3 / 4; max-height: 720px; flex: none; }
}
@media (max-width: 760px) {
  .cine-stage { grid-template-columns: 1fr; gap: 20px; padding: 16px 16px 8px; }
  .cine-beams { display: none; }
  .cine-tray { grid-template-columns: 1fr; padding: 4px 16px 14px; }
  .cine-foot { flex-wrap: wrap; gap: 16px 28px; padding: 14px 16px; }
  .cine-note { margin-left: 0; text-align: left; width: 100%; }
  .stage-h { padding: 12px 16px; font-size: 12px; }
  .erp-kpis { grid-template-columns: 1fr; }
  .erp-main, .erp-side { padding: 18px 16px; }
  .cine { min-height: 0; }
  .relay { min-height: 0; }
  .relay-map { display: block; padding: 20px 16px 8px; }
  .relay-ring { width: 100%; aspect-ratio: auto; }
  .relay-ring svg { width: 224px; height: 224px; margin: 0 auto 18px; }
  .rh { top: 112px; }
  .relay-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .rn b { letter-spacing: 0.04em; }
  .rn, .rn.p-r, .rn.p-l, .rn.p-t, .rn.p-b { position: static; transform: none; text-align: left; grid-template-columns: 26px 1fr; gap: 1px 8px; padding: 9px 0; border-top: 1px solid var(--line-d); white-space: normal; }
  .rn::before { display: block; grid-row: 1 / span 2; padding-top: 1px; }
  .rn b, .rn span { grid-column: 2; }
  .cn-left { padding: 20px 16px 24px; background: none; }
  .cn-left .phone { width: 100%; height: auto; border: 0; border-radius: 0; padding: 0; box-shadow: none; background: none; }
  .cn-left .phone::before { display: none; }
  .phone .screen { border-radius: 0; background: none; }
  .screen-h { padding: 6px 0 12px; }
  .chat { padding: 12px 0; gap: 10px; }
  .msg { font-size: 14px; line-height: 1.5; max-width: 94%; }
  .msg .src { font-size: 12px; }
  .msg .mini td { font-size: 13px; }
  .screen-in { margin: 0 0 4px; font-size: 14px; }
  .cn-kpis { grid-template-columns: 1fr; }
  .cn-kpis > div { border-right: none; border-bottom: 1px solid var(--line-d); }
  .cn-kpis > div:last-child { border-bottom: none; }
  .mrow { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .mrow .bt { grid-column: 1 / -1; order: 3; }
  .fw-total { flex-direction: column; align-items: flex-start; gap: 6px; }
  .fw-doc { padding: 28px 22px; --r: 150px; }
  .fw-doc h4 { font-size: 23px; }
  .xr > div { left: 22px; right: 22px; }
  .xr-h4 { font-size: 23px; }
  .xr-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .xr-row .tag { grid-column: 1; grid-row: 1; }
  .xr-row .ref { grid-column: 2; grid-row: 1; }
  .xr-row .t { grid-column: 1 / -1; font-size: 14px; }
  .xr-total { grid-template-columns: 1fr; gap: 4px; }
  .fw-hint .d { display: none; }
  .fw-hint .m { display: inline; }
  .fw-row { grid-template-columns: 26px 1fr; }
  .fw-row .c { grid-column: 2; font-size: 17px; }
  .fw-test .big { font-size: 44px; }
  .tvp-kpis b { font-size: 24px; }
  .doss-row { grid-template-columns: 104px 1fr; padding: 10px 16px; }
  .log-row, .tvf { padding-left: 16px; padding-right: 16px; }
  .rx-shot { aspect-ratio: 3 / 4; max-height: 560px; flex: none; --r: 110px; }
  .rx-cap { padding: 10px 16px; font-size: 12px; flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* =====================================================================================================
   v6 (2026-09-15). Numbers in Geist inside every scene; Relay as a rail; Keel as the application with a
   cursor driving it; Counsel with a phone at real proportions; the operation seen in x-ray (three photos).
   ===================================================================================================== */

/* ---------- numbers: one family for every figure ---------- */
.fw-test .big, .tvp-kpis b, .cn-kpis b, .fw-row .c, .fw-total b, .xr-total b, .cine-foot b, .cx-row b, .dcard b,
.ledger td.n, .msg .mini td.n, .mrow .n, .rl-time, .ip-kv b, .ip-card .n, .ip-pill b, .app .n, .app .kpi b, .app .amt {
  font-family: var(--numeric); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.fw-test .big { font-weight: 500; font-size: 50px; letter-spacing: -0.035em; }
.fw-test .big.mid { font-size: 32px; font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
.tvp-kpis b { font-size: 26px; }
.cn-kpis b { font-size: 24px; }
.fw-row .c { font-size: 17px; }
.fw-total b, .xr-total b { font-size: 28px; }
.fw-total b small, .xr-total b small { font-family: var(--mono); letter-spacing: 0.1em; }
.cine-foot b { font-size: 17px; }

/* ---------- RELAY v6: the lead down the rail ---------- */
.relay { display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 0; }
.rl { position: relative; border-right: 1px solid var(--line-d); padding: 18px 26px 22px 26px; display: grid; grid-template-rows: auto 1fr; }
.rl-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid var(--line-d); font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-dim); }
.rl-h b { color: var(--t-hi); font-weight: 500; }
.rl-rail { position: relative; display: grid; align-content: start; padding-top: 8px; --rx: 80px; }
/* the line: a thin track under the dots, a lit segment that grows with the lead, the lead itself */
.rl-track { position: absolute; left: var(--rx); top: 8px; bottom: 0; width: 2px; background: var(--line-d); transform: translateX(-50%); }
.rl-lit { position: absolute; left: var(--rx); top: 8px; width: 2px; height: 0; background: linear-gradient(180deg, rgba(138, 166, 118, 0.35), var(--moss-lit)); transform: translateX(-50%); }
.rl-lead { position: absolute; left: var(--rx); top: 8px; width: 12px; height: 12px; border-radius: 50%; background: #f4f5f7; transform: translate(-50%, -50%); box-shadow: 0 0 0 5px rgba(244, 245, 247, 0.12), 0 0 24px rgba(138, 166, 118, 0.6); opacity: 0; z-index: 3; }
.rl-row { position: relative; display: grid; grid-template-columns: 44px 44px 1fr; gap: 0 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line-d); transition: opacity var(--t-state) var(--ez); }
.rl-row:last-child { border-bottom: 0; }
.rl-time { font-size: 12.5px; color: var(--t-dim); letter-spacing: 0; }
.rl-dot { position: relative; justify-self: center; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--g2); border: 1px solid rgba(236, 238, 241, 0.3); transition: background var(--t-state) var(--ez), border-color var(--t-state) var(--ez), box-shadow var(--t-state) var(--ez); z-index: 2; }
.rl-what { display: grid; gap: 2px; }
.rl-what b { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-dim); transition: color var(--t-state) var(--ez); }
.rl-what span { font-size: 13.5px; color: var(--t-dim); transition: color var(--t-state) var(--ez); }
.rl-row.lit .rl-dot { background: rgba(138, 166, 118, 0.3); border-color: var(--moss-lit); }
.rl-row.lit .rl-what b { color: var(--t-hi); }
.rl-row.lit .rl-what span { color: var(--t-mid); }
.rl-row.lit .rl-time { color: var(--t-mid); }
.rl-row.now .rl-dot { background: var(--moss-lit); border-color: var(--moss-lit); box-shadow: 0 0 0 5px rgba(138, 166, 118, 0.18); }
.rl-row.now .rl-what span { color: var(--t-hi); }
.rl-row.hot .rl-what span { color: var(--moss-lit); font-weight: 500; }
.rl-row.wait .rl-dot { border-style: dashed; }
.rl-row.wait .rl-what b, .rl-row.wait .rl-what span, .rl-row.wait .rl-time { color: var(--t-dim); opacity: 0.7; }
.rl-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 16px; margin-top: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-dim); }
.rl-foot b { color: var(--moss-lit); font-weight: 500; }
.relay-doss .tvp-top { padding: 16px 22px; }
.doss-sum { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-d); }
.doss-sum > div { padding: 16px 22px; border-right: 1px solid var(--line-d); }
.doss-sum > div:last-child { border-right: 0; }
.doss-sum .mono { display: block; font-size: 12px; color: var(--t-dim); margin-bottom: 6px; }
.doss-sum b { font-family: var(--numeric); font-weight: 500; font-size: 20px; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap; display: block; }
.doss-sum b small { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-dim); margin: 5px 0 0; font-weight: 400; }
.doss-row .v { transition: color var(--t-state) var(--ez); }
.doss-note { margin-top: auto; padding: 16px 22px; border-top: 1px solid var(--line-d); font-size: 13px; line-height: 1.5; color: var(--t-mid); }
.doss-note b { color: var(--t-hi); font-weight: 500; }

/* ---------- COUNSEL v6: the phone at real proportions ---------- */
.cn-left { padding: 34px 24px; }
.phone { width: 290px; height: 610px; padding: 11px; border-radius: 46px; background: linear-gradient(160deg, #1b1e23, #08090b 40%, #0d0f12); border: 1px solid rgba(236, 238, 241, 0.22); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 2.5px rgba(236, 238, 241, 0.05); }
.phone::before { content: ''; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 86px; height: 24px; background: #050607; border-radius: 999px; z-index: 3; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.phone::after { content: ''; position: absolute; right: -3px; top: 150px; width: 3px; height: 74px; border-radius: 0 2px 2px 0; background: #1a1d21; box-shadow: 0 -110px 0 0 #1a1d21, 0 -60px 0 0 #1a1d21; }
.phone .screen { border-radius: 36px; background: #0c0d10; }
.phone .screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.05), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.025)); border-radius: inherit; }
.screen-sb { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px 0 26px; font-family: var(--numeric); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--t-hi); }
.screen-sb svg { width: 52px; height: 11px; display: block; }
.screen-h { padding: 26px 16px 10px; }
.screen-h b { font-size: 15px; }
.chat { gap: 9px; padding: 12px 12px 10px; }
.msg { font-size: 12.5px; line-height: 1.42; padding: 8px 11px; border-radius: 14px; max-width: 88%; }
.msg.q { background: #2b3a2a; color: var(--t-hi); border-bottom-right-radius: 4px; }
.msg.a { background: #15171b; border-color: rgba(236, 238, 241, 0.09); }
.msg .src { font-size: 12px; letter-spacing: 0.06em; margin-top: 7px; }
.screen-in { margin: 0 12px 16px; padding: 8px 8px 8px 14px; border-color: rgba(236, 238, 241, 0.16); background: #15171b; }
.screen-in i { width: 24px; height: 24px; background: var(--moss-lit); position: relative; }
.screen-in i::after { content: ''; position: absolute; left: 7px; top: 8px; width: 7px; height: 7px; border-top: 1.6px solid #0b0c0e; border-right: 1.6px solid #0b0c0e; transform: rotate(-45deg); }
.screen-home { width: 96px; height: 4px; border-radius: 2px; background: rgba(236, 238, 241, 0.35); margin: 0 auto 8px; }

/* ---------- the operation in x-ray: three photos, one light ---------- */
.intel { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: var(--g0); min-height: 640px; }
.ip { position: relative; overflow: hidden; background: var(--g1); isolation: isolate; --lx: 50%; --ly: 50%; --r: 170px; touch-action: pan-y; cursor: crosshair; }
.ip-store { grid-row: 1 / span 2; }
.ip-img, .ip .rx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ip-store .ip-img { object-position: 60% 40%; }
.ip-rest .ip-img { object-position: 50% 50%; }
.ip::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11, 12, 14, 0.1), rgba(11, 12, 14, 0.42)); }
/* inside the light the photo turns into a register: a grey ghost, a green glow, marks on what carries data */
.ip-xr { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity var(--t-enter) var(--ez);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 0, #000 64%, rgba(0, 0, 0, 0.55) 86%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 0, #000 64%, rgba(0, 0, 0, 0.55) 86%, transparent 100%); background: var(--g0); }
.ip.xr-on .ip-xr { opacity: 1; }
.ip-xr .ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: inherit; opacity: 0.26; filter: grayscale(1) contrast(1.2); }
.ip-store .ip-xr .ghost { object-position: 60% 40%; }
.ip-xr .glow { position: absolute; inset: 0; background: radial-gradient(circle calc(var(--r) * 1.3) at var(--lx) var(--ly), rgba(138, 166, 118, 0.16), transparent 72%); }
.ip-xr .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(138, 166, 118, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 166, 118, 0.09) 1px, transparent 1px); background-size: 28px 28px; }
.ip-hot { position: absolute; z-index: 3; width: 34px; height: 34px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity var(--t-state) var(--ez); }
.ip-hot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(138, 166, 118, 0.9); }
.ip-hot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--moss-lit); transform: translate(-50%, -50%); box-shadow: 0 0 12px var(--moss-lit); }
.ip-hot i { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(138, 166, 118, 0.35); animation: iphot 2.2s ease-out infinite; }
@keyframes iphot { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.ip-hot.on { opacity: 1; }
.ip-hot.tb { width: 22px; height: 22px; }
.ip-hot.tb i { display: none; }
.ip-hot.tb.res::before { border-color: var(--amber); }
.ip-hot.tb.res::after { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.ip-hot.tb.empty::before { border-color: rgba(236, 238, 241, 0.6); }
.ip-hot.tb.empty::after { background: rgba(236, 238, 241, 0.8); box-shadow: none; }
/* the card that opens beside a person: a record in the dark, with the house's own note at the end */
.ip-card { position: absolute; z-index: 4; width: 250px; max-width: calc(100% - 24px); background: rgba(11, 12, 14, 0.93); border: 1px solid rgba(138, 166, 118, 0.35); border-radius: 8px; padding: 14px 14px 12px; color: var(--t-hi); opacity: 0; transform: translateY(6px); transition: opacity var(--t-state) var(--ez), transform var(--t-state) var(--ez); pointer-events: none; backdrop-filter: blur(6px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); }
.ip-card.on { opacity: 1; transform: none; }
.ip-card.right { left: auto; right: var(--x); }
.ip-card .h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--moss-lit); margin-bottom: 8px; }
.ip-card .h span:last-child { color: var(--t-dim); }
.ip-card .who { font-family: var(--serif); font-size: 19px; letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 10px; }
.ip-card .who small { font-family: var(--sans); font-size: 12.5px; color: var(--t-dim); margin-left: 8px; }
.ip-card .kv2 { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; font-size: 12.5px; color: var(--t-mid); border-top: 1px solid var(--line-d); padding-top: 9px; }
.ip-card .kv2 .n { text-align: right; color: var(--t-hi); font-size: 12.5px; }
.ip-card .kv2 .n.acc { color: var(--moss-lit); }
.ip-card .kv2 .n.amb { color: var(--amber); }
/* the note from Ephessus: the mark, the name, one sentence with a number and a question */
.eph-note { margin-top: 11px; padding: 10px 11px; border-radius: 10px; border-top-left-radius: 3px; background: rgba(138, 166, 118, 0.1); border: 1px solid rgba(138, 166, 118, 0.22); display: grid; grid-template-columns: 16px 1fr; gap: 3px 9px; align-items: center; }
.eph-note svg { width: 16px; height: 16px; }
.eph-note svg .mk-stroke { stroke: var(--t-mid); }
.eph-note svg .mk-fill { fill: var(--t-hi); }
.eph-note svg .mk-fill.acc { fill: var(--moss-lit); }
.eph-note b { font-family: var(--serif); font-size: 13px; font-weight: 450; letter-spacing: -0.005em; }
.eph-note p { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.45; color: var(--t-hi); }
.eph-note p em { font-style: normal; color: var(--moss-lit); font-family: var(--numeric); font-weight: 500; font-variant-numeric: tabular-nums; }
/* the table pill in the dining room */
.ip-pill { position: absolute; z-index: 4; background: rgba(11, 12, 14, 0.92); border: 1px solid rgba(236, 238, 241, 0.16); border-radius: 6px; padding: 6px 9px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-mid); white-space: nowrap; opacity: 0; transition: opacity var(--t-state) var(--ez); pointer-events: none; display: grid; gap: 2px; }
.ip-pill.on { opacity: 1; }
.ip-pill b { color: var(--t-hi); font-size: 12px; letter-spacing: -0.01em; text-transform: none; }
.ip-pill .s { color: var(--moss-lit); }
.ip-pill .r { color: var(--amber); }
.ip-pill .e { color: var(--t-dim); }
/* the corner of each panel: what the panel is, and its numbers */
.ip-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 16px; background: linear-gradient(180deg, transparent, rgba(11, 12, 14, 0.85)); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-dim); pointer-events: none; }
.ip-cap .live { display: inline-flex; align-items: center; gap: 7px; color: var(--moss-lit); }
.ip-cap .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--moss-lit); animation: livep 1.6s ease-in-out infinite; }
.ip-kv { position: absolute; z-index: 5; top: 14px; right: 14px; display: flex; gap: 0; background: rgba(11, 12, 14, 0.78); border: 1px solid var(--line-d); border-radius: 6px; backdrop-filter: blur(6px); pointer-events: none; }
.ip-kv > div { padding: 8px 12px; border-right: 1px solid var(--line-d); display: grid; gap: 3px; }
.ip-kv > div:last-child { border-right: 0; }
.ip-kv .mono { font-size: 12px; letter-spacing: 0.12em; color: var(--t-dim); }
.ip-kv b { font-size: 15px; color: var(--t-hi); }
.ip-kv b.acc { color: var(--moss-lit); }
.ip-name { color: var(--t-mid); white-space: nowrap; }
.ip-hint { color: var(--t-dim); transition: opacity var(--t-state) var(--ez); text-align: right; }
.ip-hint.pill { position: absolute; z-index: 5; left: 16px; top: 14px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-mid); background: rgba(11, 12, 14, 0.7); border: 1px solid var(--line-d); border-radius: 999px; padding: 6px 11px; pointer-events: none; text-align: left; }
.ip.xr-on .ip-hint { opacity: 0; }
/* under the light the corner numbers step back so the record reads alone */
.ip-kv, .ip-cap .live { transition: opacity var(--t-state) var(--ez); }
.ip.xr-on .ip-kv, .ip.xr-on .ip-cap .live { opacity: 0.12; }
.ip-hint .m { display: none; }
.ip-rest { --r: 120px; }
/* the tower panel reuses the Mirror register; the light fades out when the pointer leaves */
.ip-tower .rx { border: 0; height: 100%; }
.ip-tower .rx-shot { --r: 130px; }
.ip-tower .rx-shot::after { background: rgba(11, 12, 14, 0.3); }
.ip-tower .rx-ov .u { transition: fill var(--t-state) var(--ez), stroke var(--t-state) var(--ez), opacity var(--t-state) var(--ez); }
/* at rest the tower is a photo: the polygons are almost invisible until the light or the pointer reaches them */
.ip-tower .rx-ov .u.st-sold { fill: rgba(138, 166, 118, 0.05); stroke: rgba(138, 166, 118, 0.12); stroke-width: 1; }
.ip-tower .rx-ov .u.st-res { fill: rgba(212, 165, 69, 0.06); stroke: rgba(212, 165, 69, 0.14); stroke-width: 1; }
.ip-tower .rx-ov .u.st-av { fill: transparent; stroke: rgba(236, 238, 241, 0.08); stroke-width: 1; }
.ip-tower .rx-ov .u.visit { stroke-width: 2; animation-duration: 2.6s; }
.ip-tower .rx-ov .u:hover, .ip-tower .rx-ov .u.sel { stroke-width: 2.5; }
.ip-tower .rx-ov .u.st-sold:hover { fill: rgba(138, 166, 118, 0.35); }
.ip-tower .rx-tip { font-size: 12px; }
.ip-tower .tvp-feed { display: none; }
html.motion .ip-tower .rx-xr { transition: opacity var(--t-enter) var(--ez); }

/* ---------- KEEL v6: the application, driven by a cursor ---------- */
.app { --a-bg: #050608; --a-side: #08090c; --a-pan: #0c0e12; --a-line: rgba(255, 255, 255, 0.075); --a-line2: rgba(255, 255, 255, 0.14); --a-hi: #f4f6f8; --a-mid: #b4bac2; --a-dim: #737a84; --a-acc: #a3d98c; --a-acc-dim: rgba(163, 217, 140, 0.16); --a-amber: #e8b957; --a-red: #e0665b;
  background: var(--a-bg); color: var(--a-hi); display: grid; grid-template-columns: 196px 1fr; min-height: 640px; height: 640px; position: relative; overflow: hidden; }
.app-side { background: var(--a-side); border-right: 1px solid var(--a-line); display: flex; flex-direction: column; padding: 16px 12px; }
.app-brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 18px; border-bottom: 1px solid var(--a-line); margin-bottom: 12px; }
.app-brand b { font-family: var(--serif); font-size: 17px; font-weight: 450; letter-spacing: -0.01em; }
.app-brand span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-dim); display: block; margin-top: 1px; }
.app-brand i { width: 8px; height: 8px; border-radius: 2px; background: var(--a-acc); box-shadow: 0 0 12px var(--a-acc); }
.app-nav { display: grid; gap: 2px; }
.app-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; font-size: 13px; color: var(--a-mid); border: 1px solid transparent; transition: background var(--t-fast) var(--ez), color var(--t-fast) var(--ez), border-color var(--t-fast) var(--ez); }
.app-nav a svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.app-nav a.on { background: var(--a-acc-dim); color: var(--a-hi); border-color: rgba(163, 217, 140, 0.25); }
.app-nav a.on svg { stroke: var(--a-acc); opacity: 1; }
.app-nav a.dim { color: var(--a-dim); }
.app-nav .grp { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--a-dim); padding: 14px 10px 6px; }
.app-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px 2px; border-top: 1px solid var(--a-line); font-size: 12.5px; color: var(--a-mid); }
.app-user i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #2c3a2a, #10130f); border: 1px solid var(--a-line2); }
.app-user span { display: block; font-size: 12px; color: var(--a-dim); }
.app-main { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--a-line); }
.app-top h4 { font-family: var(--serif); font-weight: 400; font-size: 20px; letter-spacing: -0.015em; }
.app-top .crumb { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-dim); display: block; margin-bottom: 3px; }
.app-top .tools { display: flex; align-items: center; gap: 10px; }
.app-search { display: flex; align-items: center; gap: 8px; width: 210px; padding: 7px 12px; border: 1px solid var(--a-line2); border-radius: 999px; font-size: 12.5px; color: var(--a-dim); }
.app-search svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.app-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-acc); }
.app-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--a-acc); animation: livep 1.6s ease-in-out infinite; }
.app-pages { position: relative; overflow: hidden; }
.pg { position: absolute; inset: 0; padding: 22px 24px 56px; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity var(--t-state) var(--ez), visibility 0s linear var(--t-state); }
.pg.on { opacity: 1; visibility: visible; transition: opacity var(--t-state) var(--ez); }
.pg-scroll { will-change: transform; }
.app-sb { position: absolute; right: 6px; top: 22px; bottom: 22px; width: 4px; border-radius: 2px; background: var(--a-line); opacity: 0; transition: opacity var(--t-state) var(--ez); }
.app-sb i { display: block; width: 100%; height: 42%; border-radius: 2px; background: var(--a-line2); }
.pg.can-scroll .app-sb { opacity: 1; }
.app h5 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--a-dim); margin-bottom: 12px; }
.app .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.app .kpi { padding: 14px 16px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-pan); display: grid; gap: 8px; }
.app .kpi .mono { font-size: 12px; letter-spacing: 0.14em; color: var(--a-dim); }
.app .kpi b { font-size: 22px; letter-spacing: -0.03em; white-space: nowrap; }
.app .kpi b.acc { color: var(--a-acc); }
.app .kpi small { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--a-dim); text-transform: uppercase; }
.app .kpi small.up { color: var(--a-acc); }
.app .card { border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-pan); padding: 16px 18px; margin-bottom: 14px; }
.app .card .h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-dim); margin-bottom: 14px; }
.app .two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.app .bars { height: 130px; gap: 12px; }
.app .bars.two .bar { gap: 3px; }
.app .bar .in { background: var(--a-acc); box-shadow: 0 0 18px rgba(163, 217, 140, 0.25); }
.app .bar .out { background: rgba(255, 255, 255, 0.18); }
.app .bar .l { color: var(--a-dim); font-size: 12px; bottom: -18px; }
.app .legend { display: flex; gap: 16px; margin-top: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-dim); }
.app .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.app .ring { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.app .ring svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.app .ring circle { fill: none; stroke-width: 9; }
.app .ring .bg { stroke: rgba(255, 255, 255, 0.08); }
.app .ring .fg { stroke: var(--a-acc); stroke-linecap: round; stroke-dasharray: 251; stroke-dashoffset: 251; filter: drop-shadow(0 0 6px rgba(163, 217, 140, 0.5)); }
.app .ring .big { font-size: 26px; letter-spacing: -0.03em; display: block; }
.app .ring .mono { font-size: 12px; letter-spacing: 0.12em; color: var(--a-dim); display: block; margin-top: 4px; }
.app table { width: 100%; border-collapse: collapse; }
.app th { text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-dim); font-weight: 500; padding: 8px 8px; border-bottom: 1px solid var(--a-line); }
.app td { padding: 10px 8px; border-bottom: 1px solid var(--a-line); font-size: 13px; color: var(--a-mid); vertical-align: middle; }
.app tr:last-child td { border-bottom: 0; }
.app td.n, .app th.n { text-align: right; white-space: nowrap; }
.app td.n { color: var(--a-hi); }
.app td .sub { display: block; font-size: 12px; color: var(--a-dim); margin-top: 2px; }
.app tr.sum td { color: var(--a-hi); font-weight: 500; border-top: 1px solid var(--a-line2); }
.app tr.sel td { background: rgba(163, 217, 140, 0.07); }
.app tr.row-btn { cursor: pointer; }
.app .tag { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--a-line2); color: var(--a-mid); white-space: nowrap; }
.app .tag.ok { color: var(--a-acc); border-color: rgba(163, 217, 140, 0.4); background: rgba(163, 217, 140, 0.08); }
.app .tag.amb { color: var(--a-amber); border-color: rgba(232, 185, 87, 0.45); background: rgba(232, 185, 87, 0.08); }
.app .tag.red { color: var(--a-red); border-color: rgba(224, 102, 91, 0.45); background: rgba(224, 102, 91, 0.08); }
.app .btn2 { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--a-hi); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--a-line2); border-radius: 999px; padding: 6px 12px; white-space: nowrap; transition: background var(--t-fast) var(--ez), border-color var(--t-fast) var(--ez), color var(--t-fast) var(--ez); }
.app .btn2.acc { color: #0b0c0e; background: var(--a-acc); border-color: var(--a-acc); }
.app .btn2.done { color: var(--a-acc); background: rgba(163, 217, 140, 0.1); border-color: rgba(163, 217, 140, 0.4); }
.app .alerts { display: grid; gap: 8px; }
.app .alert { border-color: var(--a-line); color: var(--a-mid); background: var(--a-pan); font-size: 12.5px; }
.app .alert i { background: var(--a-amber); }
.app .alert.ok i { background: var(--a-acc); }
.app .alert.red i { background: var(--a-red); }
.app .alert .amt { color: var(--a-hi); }
/* reconciliation inside the application: the same film, denser */
.app .rc { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; position: relative; }
.app .rc-beams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.app .rc-beams path { fill: none; stroke: url(#gBeamA); stroke-width: 1.5; stroke-linecap: round; }
.app .rc h5 { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--a-line); }
.app .rc h5 i { width: 6px; height: 6px; border-radius: 50%; background: var(--a-acc); animation: livep 1.6s ease-in-out infinite; }
.app .cx-row, .app .ct-row { border-color: var(--a-line); padding: 8px 8px; }
.app .cx-row .mono { color: var(--a-dim); font-size: 12px; }
.app .cx-row em, .app .ct-row em { color: var(--a-mid); font-size: 12.5px; }
.app .ct-row span { color: var(--a-dim); font-size: 12px; }
.app .cx-row b { font-size: 12.5px; color: var(--a-hi); }
.app .cx-row.matched { background: rgba(163, 217, 140, 0.1); }
.app .cx-row.matched em, .app .cx-row.matched b { color: var(--a-acc); }
.app .cx-row.pend { background: rgba(232, 185, 87, 0.12); }
.app .cx-row.pend em, .app .cx-row.pend b { color: var(--a-amber); }
.app .ct-row.lit { background: rgba(163, 217, 140, 0.1); }
.app .ct-row.lit em { color: var(--a-hi); }
.app .ck path { stroke: var(--a-acc); }
.app .tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.app .tray-h { grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-amber); }
.app .dcard { border-color: rgba(232, 185, 87, 0.4); background: rgba(232, 185, 87, 0.06); }
.app .dcard b { font-size: 12px; color: var(--a-hi); }
.app .dcard p { color: var(--a-mid); font-size: 12px; }
.app .dcard .dcard-b { color: var(--a-acc); border-color: rgba(163, 217, 140, 0.45); font-size: 12px; }
.app .dcard.ok { border-color: rgba(163, 217, 140, 0.35); background: rgba(163, 217, 140, 0.07); }
.app .dcard.ok .dcard-b { color: var(--a-dim); border-color: var(--a-line2); }
.app .rc-foot { display: flex; align-items: center; gap: 32px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--a-line); }
.app .rc-foot .mono { display: block; font-size: 12px; color: var(--a-dim); letter-spacing: 0.14em; margin-bottom: 3px; }
.app .rc-foot b { font-size: 17px; }
.app .rc-foot .note { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-acc); text-align: right; }
.app .rc-foot .note.amb { color: var(--a-amber); }
/* the drawer that opens on an order */
.app .drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 340px; background: var(--a-side); border-left: 1px solid var(--a-line2); padding: 20px 22px; transform: translateX(100%); transition: transform var(--t-layout) var(--ez); z-index: 4; display: grid; align-content: start; gap: 14px; box-shadow: -30px 0 60px rgba(0, 0, 0, 0.5); }
.app .drawer.on { transform: none; }
.app .drawer h4 { font-family: var(--serif); font-weight: 400; font-size: 20px; letter-spacing: -0.015em; }
.app .drawer .kv2 { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: 12.5px; color: var(--a-mid); border-top: 1px solid var(--a-line); padding-top: 10px; }
.app .drawer .kv2 .n { color: var(--a-hi); text-align: right; }
.app .drawer .items { display: grid; gap: 6px; }
.app .drawer .it { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 10px; border: 1px solid var(--a-line); border-radius: 6px; font-size: 12.5px; color: var(--a-hi); }
.app .drawer .it span { font-size: 12px; color: var(--a-dim); }
.app .drawer .it .n { grid-row: 1 / span 2; align-self: center; }
.app .cursor { position: absolute; z-index: 9; width: 22px; height: 22px; opacity: 0; pointer-events: none; transform-origin: 4px 3px; }
.app .cursor path { fill: #f6f7f9; stroke: #0b0c0e; stroke-width: 1.2; }
.app .cursor::after { content: ''; position: absolute; left: -9px; top: -10px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--a-acc); opacity: 0; transform: scale(0.4); }
.app .cursor.click::after { animation: aclick 0.42s var(--ez) forwards; }
@keyframes aclick { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.6); } }
.app .stage-note { position: absolute; left: 46%; top: 21px; transform: translateX(-50%); z-index: 8; max-width: 38%; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--a-dim); background: rgba(5, 6, 8, 0.8); border: 1px solid var(--a-line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--t-state) var(--ez); }
.app .stage-note.on { opacity: 1; }
html.nomotion .app .cursor, html.static .app .cursor, html.nomotion .app .stage-note, html.static .app .stage-note { display: none; }
html.static .app .pg, html.nomotion .app .pg { opacity: 0; visibility: hidden; }
html.static .app .pg.on, html.nomotion .app .pg.on { opacity: 1; visibility: visible; }
.app .replay { position: absolute; right: 24px; bottom: 14px; z-index: 8; color: var(--a-mid); border-color: var(--a-line2); font-size: 12px; background: rgba(5, 6, 8, 0.8); }
.app .replay:hover { color: var(--a-hi); border-color: var(--a-hi); }

/* ---------- responsive for the v6 scenes ---------- */
@media (max-width: 1000px) {
  .rl { border-right: 0; border-bottom: 1px solid var(--line-d); }
  .intel { grid-template-columns: 1fr; grid-template-rows: auto; }
  .ip-store { grid-row: auto; aspect-ratio: 4 / 5; max-height: 640px; }
  .ip-tower { aspect-ratio: 4 / 3; }
  .ip-rest { aspect-ratio: 4 / 3; }
  .ip-tower .rx-shot { aspect-ratio: auto; max-height: none; }
  .app { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .app-side { display: none; }
  .app .kpis { grid-template-columns: 1fr 1fr; }
  .app-pages { height: 560px; }
}
@media (max-width: 760px) {
  .rl { padding: 14px 16px 18px; }
  .rl-row { grid-template-columns: 40px 30px 1fr; gap: 0 10px; }
  .rl-rail { --rx: 65px; }
  .doss-sum { grid-template-columns: 1fr; }
  .doss-sum > div { border-right: 0; border-bottom: 1px solid var(--line-d); }
  .cn-left .phone { width: 100%; height: auto; }
  .cn-left .phone::after { display: none; }
  .screen-sb, .screen-home { display: none; }
  .ip { --r: 120px; }
  .ip-card { width: 220px; }
  .ip-hint .d { display: none; }
  .ip-hint .m { display: inline; }
  .ip-kv { display: none; }
  .app .two { grid-template-columns: 1fr; }
  .app .rc { grid-template-columns: 1fr; gap: 16px; }
  .app .rc-beams { display: none; }
  .app .tray { grid-template-columns: 1fr; }
  .app .drawer { width: 100%; }
  .app-top { padding: 12px 16px; }
  .app-search { display: none; }
  .app .stage-note { display: none; }
  .pg { padding: 16px; }
  .app .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .app .kpi b { font-size: 18px; }
}