/* ==== the brand homepage (/) ======================================================================
   Built on the Firm page's approved language (landing.css is loaded first: the hero type, the aurora, the
   record's paper edge and ledger, the console aurora, the dark closer). Everything here is bh- / op- / wf- /
   fm- / rr- / net- prefixed. */

/* ---- hero: two windows on one matter; the opportunity section covers the bottom on a paper edge ---- */
main.bh { --tuck: 232px; }
.bh-stage { position: relative; display: grid; grid-template-columns: minmax(0, 384fr) minmax(0, 896fr); column-gap: 64px; align-items: start; }
.bh-fa, .bh-fc { height: 692px; }
.bh-win, .bh-con { height: 100%; }
.bh-inner, .bh-inner > .ui-app { height: 100%; }

/* the agent's window: the product's dark face (as the phone), bar and rhythm matched to the console */
.bh-agent { overflow: hidden; border-radius: 12px; background: #141219; border: 1px solid #2B2733; color: #C9C5D3; font: 400 13px/1.4 var(--font); letter-spacing: -.003em; text-align: left; }
.ag-top { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 18px; border-bottom: 1px solid rgba(255,255,255,.07); white-space: nowrap; }
.ag-tile { flex: none; width: 20px; height: 20px; border-radius: 5px; background: #3B3552; color: #E8E4F4; font: 600 9px/20px var(--font); text-align: center; letter-spacing: .02em; }
.ag-ttl { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
.ag-ttl b { font-weight: 600; color: #F2F0F6; }
.ag-ttl i { font-style: normal; font-size: 12px; color: #8E8A99; overflow: hidden; text-overflow: ellipsis; }
.ag-state { flex: none; margin-left: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); font-size: 12px; font-weight: 500; color: #C9C5D3; transition: color .3s var(--ease), border-color .3s var(--ease); }
.ag-state.wait { color: #C2B8F2; border-color: rgba(194,184,242,.35); }
.ag-log { padding: 10px 0; }
.ag-row { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: 40px; grid-auto-rows: auto; column-gap: 12px; align-items: center; padding: 0 18px; }
.ag-row::before { content: ""; position: absolute; left: 25.5px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.09); }
.ag-row:first-child::before { top: 50%; }
.ag-row:last-child::before { bottom: calc(100% - 20px); }
.ag-g { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: #141219; box-shadow: inset 0 0 0 1.5px #57525F; transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.ag-row.done .ag-g { background: #8C8C95; box-shadow: none; }
.ag-row.done .ag-g::after { content: ""; position: absolute; left: 5.4px; top: 3.4px; width: 4px; height: 7px; border-right: 1.6px solid #141219; border-bottom: 1.6px solid #141219; transform: rotate(42deg); }
.ag-row.run .ag-g { box-shadow: inset 0 0 0 1.5px rgba(194,184,242,.3); }
.ag-row.run .ag-g::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-top-color: #C2B8F2; border-right-color: #C2B8F2; animation: ag-spin 1.1s linear infinite; }
@keyframes ag-spin { to { transform: rotate(360deg); } }
.ag-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #E6E3EC; transition: color .3s var(--ease); }
.ag-row.wait .ag-t { color: #8E8A99; }
.ag-row.run .ag-t { color: #C2B8F2; }
.ag-r { font: 400 12px/1 var(--mono); color: #8E8A99; white-space: nowrap; }
.ag-card { grid-column: 2 / -1; display: grid; gap: 3px; margin: 2px 0 10px; padding: 11px 13px 12px; border-radius: 9px; background: #1D1A25; border: 1px solid rgba(255,255,255,.08); transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.ag-card.lit { border-color: rgba(194,184,242,.4); box-shadow: 0 0 0 3px rgba(194,184,242,.07); }
.ag-via { font: 500 12px/1.4 var(--mono); color: #C2B8F2; }
.ag-card b { font-size: 13px; font-weight: 600; color: #F2F0F6; }
.ag-card > span:last-child { font-size: 12px; color: #A39FAE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-row.later .ag-t { color: #85818F; }
.ag-row.later .ag-g { box-shadow: inset 0 0 0 1.5px #3E3A46; }

/* the console window: no rail (the stage is under 1000px wide); one list and the request's pane */
.bh-app { grid-template-columns: minmax(0, 1fr); }
.bh-ws i { display: block; width: 20px; height: 20px; border-radius: 5px; background: var(--ui-violet); color: #fff; font: 600 9px/20px var(--font); font-style: normal; text-align: center; letter-spacing: .02em; }
.bh-ws { flex: none; margin-right: -2px; }
.bh-duo { grid-template-columns: minmax(0, 1fr) 340px; }
.bh-list .ui-row { grid-template-columns: 14px 60px minmax(0, 1fr) 84px 20px 40px; }
.bh-list .ui-m { display: none; }
.bh-list .ui-word { white-space: nowrap; }
/* the slot opens from its foot, so the landing row slides down into place instead of being cut */
.bh-slot { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.bh-new.land { animation: hs-land .75s var(--ease-fig) both; }
.bh-pane { position: relative; }
.bh-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 13px; color: var(--ui-mute); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.bh-det { transition: opacity .45s var(--ease); }
.bh-stage.s-empty .bh-empty { opacity: 1; }
.bh-stage.s-empty .bh-det { opacity: 0; transition: none; }
.bh-pane .ui-ps { white-space: normal; }
.bh-prep li { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 13px; color: var(--ui-ink-2); }
.bh-prep .ui-g { width: 12px; height: 12px; }
.bh-prep .ui-g.done::after { left: 3.8px; top: 2.3px; width: 3px; height: 5.4px; }
.bh-q { font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--ui-ink); }
.bh-act { position: relative; height: 36px; margin-top: 14px; }
.bh-acts { display: flex; gap: 8px; height: 100%; align-items: center; transition: opacity .3s var(--ease); }
.bh-acts .ui-btn.go { height: 32px; transition: background-color .2s var(--ease), transform .2s var(--ease); }
.bh-acts .ui-btn.go.press { background: #3A3256; border-color: #3A3256; transform: scale(.96); }
.bh-done { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 8px; background: var(--ui-violet-bg); border: 1px solid rgba(69,60,102,.22); box-shadow: inset 2px 0 0 var(--ui-violet); font-size: 13px; font-weight: 500; color: var(--ui-violet); white-space: nowrap; transition: opacity .4s var(--ease); }
.bh-done .ui-g { width: 12px; height: 12px; background: var(--ui-violet); }
.bh-done .ui-g.done::after { left: 3.8px; top: 2.3px; width: 3px; height: 5.4px; }
.bh-done .ui-r { margin-left: auto; color: var(--ui-violet); }
.bh-acts { opacity: 0; pointer-events: none; }
.bh-stage.s-ask .bh-acts { opacity: 1; }
.bh-stage.s-ask .bh-done { opacity: 0; }
.bh-pane .ui-kv { margin-top: 0; }
.bh-pane .ui-kv dd { gap: 8px; }

/* the wire between the windows: a dotted guide, and a violet streak that travels it */
.bh-wire { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.bh-guide { fill: none; stroke: rgba(69,60,102,.55); stroke-width: 1.3; stroke-dasharray: 1.5 4.5; stroke-linecap: round; transition: opacity .45s var(--ease); }
.bh-guide.off { opacity: 0; }
.bh-pk { fill: none; stroke: #6556A3; stroke-width: 2.4; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 3px rgba(101,86,163,.6)); }

/* ---- the opportunity: the record's paper edge and ledger, seven rows ---- */
.bh-opp .rec-h { max-width: none; font-size: 50px; }
.op-h > span { display: block; }
@media (max-width: 1100px) { .bh-opp .rec-h { font-size: 44px; } }
@media (max-width: 640px) { .bh-opp .rec-h { font-size: 34px; } }
.op-lead { margin-top: 22px; max-width: 40ch; font-size: 18px; line-height: 1.55; color: var(--t3); text-wrap: pretty; }
.op-ledger .lg-r { grid-template-columns: minmax(0, 168px) minmax(0, 1fr) auto; height: 60px; }
.op-k { font-size: 17px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--t1); white-space: nowrap; }
.op-v { min-width: 0; font-size: 15px; line-height: 1.4; color: var(--t4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-ledger .lg-c { width: 112px; }
.op-ledger .lg-p { background: rgba(69,60,102,.03); }
.op-ledger .lg-p .lg-c { border-color: #453C66; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(69,60,102,.22); }
.op-ledger .lg-p .lg-c::before { opacity: 1; }
.op-ledger .lg-r:nth-child(5) { transition-delay: .32s; } .op-ledger .lg-r:nth-child(6) { transition-delay: .40s; } .op-ledger .lg-r:nth-child(7) { transition-delay: .48s; }
.op-ledger .lg-p:nth-child(4) .lg-c, .op-ledger .lg-p:nth-child(4) .lg-c::before { transition-delay: .7s; }
.op-ledger .lg-p:nth-child(5) .lg-c, .op-ledger .lg-p:nth-child(5) .lg-c::before { transition-delay: .82s; }
.op-ledger .lg-p:nth-child(6) .lg-c, .op-ledger .lg-p:nth-child(6) .lg-c::before { transition-delay: .94s; }
.op-ledger .lg-p:nth-child(7) .lg-c, .op-ledger .lg-p:nth-child(7) .lg-c::before { transition-delay: 1.06s; }
.op-ledger.wait .lg-r { opacity: 0; transform: translateY(8px); transition: none; }
.op-ledger.wait .lg-p .lg-c { border-color: var(--rule); color: var(--t3); box-shadow: none; transition: none; }
.op-ledger.wait .lg-p .lg-c::before { opacity: 0; transition: none; }

/* ---- the workflow (ink): four stations on one rail; the same matter card over each, lit in turn ---- */
.bh-flow { --ca-1: rgba(108,92,176,.9); --ca-2: rgba(56,46,132,.85); --ca-3: rgba(150,86,140,.5); isolation: isolate; overflow: hidden; }
.bh-flow .sec-head { position: relative; }
.wf { margin: 0; --card-h: 188px; --pad-x: 28px; --pad-t: 44px; }
.wf-panel { position: relative; padding: var(--pad-t) var(--pad-x) 44px; background: var(--bg-1); }
.wf-panel::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/_d/noise.png?v=d2365797") repeat; background-size: 160px; opacity: .05; mix-blend-mode: overlay; }
.wf-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wf-step { display: grid; justify-items: center; align-content: start; padding: 0 12px; text-align: center; }
/* the station card: one matter, the same header at every station */
.wf-card { display: grid; grid-template-rows: 36px minmax(0, 1fr) 38px; width: 100%; max-width: 268px; height: var(--card-h); overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid #DDDAD2; color: var(--ui-ink-2); text-align: left;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 22px 44px -24px rgba(0,0,0,.65); transition: opacity .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.wf-bar { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 14px; border-bottom: 1px solid var(--ui-line); font-size: 12px; font-weight: 500; color: var(--ui-ink-2); white-space: nowrap; }
.wf-doc { position: relative; flex: none; width: 10px; height: 13px; border-radius: 2px; box-shadow: inset 0 0 0 1.3px var(--ui-ring); }
.wf-doc::after { content: ""; position: absolute; left: 2.5px; right: 2.5px; top: 4.5px; height: 3.5px; border-top: 1.1px solid var(--ui-ring); border-bottom: 1.1px solid var(--ui-ring); }
.wf-id { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--ui-mute); }
.wf-body { min-height: 0; padding: 10px 14px; overflow: hidden; }
.wf-prep li { display: flex; align-items: center; gap: 9px; height: 26px; font-size: 12.5px; color: var(--ui-ink-2); white-space: nowrap; }
.wf-prep li span { overflow: hidden; text-overflow: ellipsis; }
.wf-card .ui-g { width: 12px; height: 12px; transition: opacity .3s var(--ease), background-color .3s var(--ease); }
.wf-card .ui-g.done::after { left: 3.8px; top: 2.3px; width: 3px; height: 5.4px; }
.wf-who { display: flex; align-items: center; gap: 10px; height: 44px; transition: opacity .4s var(--ease), transform .55s var(--ease-fig); }
.wf-who .ui-av { width: 28px; height: 28px; font-size: 10px; }
.wf-who span { display: grid; line-height: 1.3; min-width: 0; }
.wf-who b { font-size: 13px; font-weight: 600; color: var(--ui-ink); white-space: nowrap; }
.wf-who i { font-style: normal; font-size: 12px; color: var(--ui-mute); white-space: nowrap; }
.wf-note { margin-top: 8px; font-size: 12px; color: var(--ui-mute); transition: opacity .4s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-ask { margin: 4px 0 12px; font-size: 13px; font-weight: 600; color: var(--ui-ink); }
.wf-outs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 6px; transition: opacity .4s var(--ease), transform .55s var(--ease-fig); }
.wf-out { display: inline-flex; align-items: center; justify-content: center; min-width: 0; height: 28px; border-radius: 7px; border: 1px solid var(--ui-line-2); background: #fff; font-size: 12px; font-weight: 500; color: var(--ui-ink-2); white-space: nowrap; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.wf-out.on { background: var(--ui-ink); border-color: var(--ui-ink); color: #fff; }
.wf-res { margin: 2px 0 6px; font-size: 13px; font-weight: 600; color: var(--ui-violet); transition: opacity .4s var(--ease); }
.wf-next li { height: 24px; }
.wf-end { display: flex; align-items: center; min-width: 0; padding: 0 14px; border-top: 1px solid var(--ui-line); background: var(--ui-violet-bg); box-shadow: inset 2px 0 0 var(--ui-violet); font-size: 12px; font-weight: 500; color: var(--ui-violet); white-space: nowrap; transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
.wf-card .hold { opacity: 0; transform: translateY(4px); transition: none; }
.wf-card .ui-g.hold { transform: none; }
/* waiting and lit stations */
.wf-step.dim .wf-card { opacity: .34; }
.wf-step.dim .wf-end { background: var(--ui-sub); box-shadow: none; color: var(--ui-mute); }
.wf-step.on .wf-card { border-color: #C9C0F0; box-shadow: 0 0 0 4px rgba(201,192,240,.16), 0 1px 1px rgba(0,0,0,.2), 0 22px 44px -24px rgba(0,0,0,.65); }
/* the rail: node centre to node centre, lit up to the station in hand; the packet runs along it */
.wf-node { position: relative; z-index: 1; width: 16px; height: 16px; margin: 30px 0 24px; border-radius: 50%; background: var(--bg-1); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.26); transition: box-shadow .4s var(--ease), background-color .4s var(--ease); }
.wf-step.reached .wf-node { background: #C9C0F0; box-shadow: inset 0 0 0 1.5px #C9C0F0, 0 0 0 5px rgba(201,192,240,.12); }
.wf-track { position: absolute; z-index: 1; left: calc(var(--pad-x) + (100% - 2 * var(--pad-x)) * .125); right: calc(var(--pad-x) + (100% - 2 * var(--pad-x)) * .125); top: calc(var(--pad-t) + var(--card-h) + 37px); height: 2px; pointer-events: none; }
.wf-rail { position: absolute; inset: 0; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.1); }
.wf-rail i { position: absolute; inset: 0; background: linear-gradient(90deg, #6556A3, #C9C0F0); transform-origin: 0 50%; }
.wf-pk { position: absolute; left: 0; top: -1px; width: 36px; height: 4px; margin-left: -36px; border-radius: 2px; background: linear-gradient(90deg, rgba(201,192,240,0), #EDE8FF); box-shadow: 0 0 10px rgba(201,192,240,.55); opacity: 0; }
.wf-cap { display: grid; justify-items: center; gap: 6px; }
.wf-title { font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -.014em; color: var(--t2); white-space: nowrap; transition: color .3s var(--ease); }
.wf-desc { max-width: 25ch; font-size: 15px; line-height: 1.55; color: var(--t4); text-wrap: balance; transition: color .3s var(--ease); }
.wf-step.on .wf-title { color: var(--t1); }
.wf-step.on .wf-desc { color: var(--t3); }

/* ---- for lawyers and firms: an even row of four points, then the practice software at full width, its foot
   tucked behind the foundation's dark edge (the hero's tuck; the edge casts a short shadow, nothing fades) ---- */
main.bh { --pw-tuck: 236px; }
.bh-firms { padding-bottom: 0; }
.bh-firms::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--pw-tuck); height: 14px; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(12,10,18,.24), rgba(12,10,18,.08) 45%, rgba(12,10,18,0)); }
.sec-head > .sec-more { grid-column: 2; grid-row: 3; justify-self: start; }
.sec-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.fm-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-bottom: 64px; }
.fm-points li { display: grid; gap: 8px; align-content: start; padding-top: 22px; border-top: 1px solid var(--rule); }
.fm-t { font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -.014em; color: var(--t1); white-space: nowrap; }
.fm-d { font-size: 15px; line-height: 1.55; color: var(--t3); }
.fm-d > span { display: block; white-space: nowrap; }
.pw-stage { padding-inline: calc(var(--gut) - var(--inset)); }
.pw-win { height: 724px; }
.pw-inner, .pw-inner > .ui-app { height: 100%; }
.pw-duo { grid-template-columns: minmax(0, 1fr) 320px; }
.pw-doc { padding: 24px 32px; }
.pw-head { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.pw-head .ui-title { margin-top: 0; }
.pw-via { color: var(--ui-mute); }
.pw-decide { margin-top: 20px; padding: 16px 18px 16px 20px; border-radius: 10px; border: 1px solid rgba(69,60,102,.22); background: var(--ui-violet-bg); box-shadow: inset 2px 0 0 var(--ui-violet); }
.pw-q { display: grid; gap: 4px; }
.pw-k { font-size: 12px; font-weight: 500; color: var(--ui-violet); }
.pw-q b { font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--ui-ink); }
.pw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.pw-bar .ui-btn { height: 32px; padding: 0 14px; }
.pw-bar .ui-btn.go { padding: 0 18px; }
.pw-fee { margin-left: auto; font-size: 13px; color: var(--ui-ink-2); white-space: nowrap; }
.pw-fee b { font-weight: 600; color: var(--ui-violet); }
.pw-prep li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--ui-line); }
.pw-prep .ui-g { width: 12px; height: 12px; margin-top: 3px; }
.pw-prep .ui-g.done::after { left: 3.8px; top: 2.3px; width: 3px; height: 5.4px; }
.pw-pt { display: grid; gap: 2px; min-width: 0; }
.pw-pt b { font-size: 13px; font-weight: 500; color: var(--ui-ink); }
.pw-pt i { font-style: normal; font-size: 12px; color: var(--ui-mute); }
.pw-clauses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pw-cl { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--ui-line-2); background: #fff; }
.pw-cn { font: 400 12px/1.3 var(--mono); color: var(--ui-mute); }
.pw-cl b { font-size: 13px; font-weight: 600; color: var(--ui-ink); }
.pw-lines i { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: #E9E8E4; }
.pw-lines i:nth-child(2) { width: 92%; } .pw-lines i:nth-child(3) { width: 64%; }
.pw-note { margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: rgba(69,60,102,.07); font-size: 12px; line-height: 1.45; color: var(--ui-ink-2); }
.pw-pane .ui-kv dd { gap: 8px; }
.pw-pane .ui-act li { padding: 7px 0; }
@container (max-width: 1000px) { .pw-duo { grid-template-columns: minmax(0, 1fr) 288px; } }
@container (max-width: 860px) { .pw-duo { grid-template-columns: minmax(0, 1fr); } .pw-pane { display: none; } .pw-wide { display: none; } }
@container (max-width: 600px) {
  .pw-doc { padding: 20px 16px; }
  .pw-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .pw-decide { padding: 14px 14px 14px 16px; }
  .pw-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pw-bar .ui-btn.go { grid-column: 1 / -1; height: 40px; }
  .pw-bar .ui-btn { justify-content: center; }
  .pw-fee { grid-column: 1 / -1; margin: 4px 0 0; }
  .pw-clauses { grid-template-columns: minmax(0, 1fr); }
}

/* ---- for applications and agents: request and result, paired ink panels in one frame ---- */
/* the agents' dark edge covers the practice window's foot (the console-into-fees edge, inverted) */
.bh-agents { --ca-1: rgba(108,92,176,.9); --ca-2: rgba(56,46,132,.85); --ca-3: rgba(150,86,140,.5); z-index: 2; margin-top: calc(var(--pw-tuck) * -1); isolation: isolate; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.bh-agents .sec-head, .dr-cards { position: relative; }
.dr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dr-f { padding: 6px; border-radius: 18px; }
.dr-card { display: grid; gap: 10px; align-content: start; height: 100%; padding: 22px 22px 20px; border-radius: 12px; background: #141219; border: 1px solid #2B2733; }
.dr-t { font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -.014em; color: var(--t1); white-space: nowrap; }
.dr-d { font-size: 15px; line-height: 1.55; color: var(--t3); }
.dr-d > span { display: block; white-space: nowrap; }
.dr-code { display: block; margin-top: 8px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; border-radius: 8px; background: #0E0C12; border: 1px solid rgba(255,255,255,.07); font: 400 12.5px/1.5 var(--mono); color: #E6E1EE; white-space: nowrap; }
.dr-code::-webkit-scrollbar { display: none; }
.dr-link { justify-self: start; margin-top: 6px; font-size: 14.5px; }
@media (min-width: 1024px) and (max-width: 1279px) { .dr-card { padding: 22px 18px 20px; } .dr-code { padding: 10px; } }
@media (max-width: 1023px) { .dr-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
@media (max-width: 640px) { .dr-f { padding: 4px; border-radius: 16px; } .dr-card { padding: 20px 16px 18px; } .dr-code { padding: 10px; } }
@media (max-width: 360px) { .dr-code { font-size: 12px; } }
.rr { margin: 0; }
.rr-pair { display: grid; grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr); align-items: stretch; }
.rr-f { display: flex; }
.rr-f > .rr-pane { flex: 1; }
.rr-pane { position: relative; overflow: hidden; border-radius: 12px; background: #141219; border: 1px solid #2B2733; text-align: left; }
.rr-bar { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.07); white-space: nowrap; }
.rr-bar > span:first-child { font-size: 14px; font-weight: 600; color: #F2F0F6; }
.rr-note { margin-left: auto; font: 400 12px/1 var(--mono); color: #8E8A99; overflow: hidden; text-overflow: ellipsis; }
.rr-kv { padding: 8px 0 10px; }
.rr-r { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; column-gap: 16px; height: 44px; padding: 0 20px; transition: opacity .35s var(--ease), transform .45s var(--ease-fig), background-color .4s var(--ease), box-shadow .4s var(--ease); }
.rr-r + .rr-r { border-top: 1px solid rgba(255,255,255,.05); }
.rr-r dt { font-size: 13px; color: #8E8A99; }
.rr-r dd { min-width: 0; font-size: 14px; color: #F2F0F6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-out .rr-r[data-r="paid"] { background: rgba(194,184,242,.07); box-shadow: inset 2px 0 0 #C2B8F2; }
.rr-out .rr-r[data-r="d"] dd { font-weight: 600; color: #C2B8F2; }
.rr-wait { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: #A39FAE; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.rr-spin { position: relative; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(194,184,242,.3); }
.rr-spin::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-top-color: #C2B8F2; border-right-color: #C2B8F2; animation: ag-spin 1.1s linear infinite; }
.rr-res.waiting .rr-wait { opacity: 1; }
.rr-res .rr-r.hold { opacity: 0; transform: translateY(4px); transition: none; }
.rr-via { position: relative; display: grid; place-items: center; }
.rr-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(69,60,102,.15), rgba(69,60,102,.45) 30%, rgba(69,60,102,.45) 70%, rgba(69,60,102,.15)); }
.rr-pk { position: absolute; left: 0; top: -1px; width: 28px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(101,86,163,0), #6556A3); opacity: 0; }
.rr-pill { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 9999px; background: var(--bg-1); border: 1px solid var(--ls2); box-shadow: 0 1px 2px rgba(33,30,38,.06); font: 500 12px/1 var(--mono); color: var(--accent-text); white-space: nowrap; }

/* ---- the foundation (ink): four true figures, then api.lawyer's rules table and one request resolving
   through it, in the product's light window; the agents section's paper edge covers the window's foot ---- */
main.bh { --fd-tuck: 0px; }
.bh-found { position: relative; }
.bh-found .sec-head, .fd-frame { position: relative; }
.fd-win { height: 664px; }
.fd-inner, .fd-inner > .ui-app { height: 100%; }
.fd-duo { grid-template-columns: minmax(0, 1fr) 360px; }
.fd-list .ui-row { grid-template-columns: 14px minmax(0, 1fr) 84px 150px 120px; }
.fd-list .ui-head { height: 32px; }
.fd-cs { display: none; }
.fd-res { font-size: 12px; color: var(--ui-mute); }
.fd-res.on { color: var(--ui-violet); font-weight: 500; }
.fd-r .ui-g.due::after { background: var(--ui-violet); }
.fd-r { transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.fd-r .ui-m { transition: color .35s var(--ease); }
.fd-r .ui-m.fd-hl { color: var(--ui-violet); font-weight: 500; }
.fd-ver b { font-family: var(--mono); }
.fd-pane .ui-ps { white-space: normal; }
.fd-rungs { margin-top: 16px; }
.fd-rungs li { padding: 9px 0 10px; }
.fd-rungs .ui-rt { font-size: 12px; font-weight: 500; color: var(--ui-mute); }
.fd-rungs .ui-rw { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--ui-ink); transition: color .35s var(--ease); }
.fd-rungs .ui-rd { font-size: 12px; }
.fd-rungs li.wait .ui-rw, .fd-rungs li.wait .ui-rd { color: #B4B4BB; }
.fd-rungs li.wait > .ui-node { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ui-line-2); }
.fd-rungs li.now .ui-rw { color: var(--ui-violet); }
/* the window's own breakpoints (container): the rail goes first, then rows take two lines, then the
   resolution moves above the table on a phone-sized window */
@container (max-width: 1180px) { .fd-app { grid-template-columns: minmax(0, 1fr); } .fd-app > .ui-rail { display: none; } .fd-duo { grid-template-columns: minmax(0, 1fr) 340px; } }
@container (max-width: 1000px) { .fd-duo { grid-template-columns: minmax(0, 1fr) 316px; } }
/* the narrowest consoles: a title wraps rather than truncates */
@container (max-width: 340px) { .bh-list .ui-row { height: auto; min-height: 36px; padding-block: 8px; } .bh-list .ui-t { white-space: normal; line-height: 1.35; } }
@container (max-width: 1000px) {
  .fd-list .ui-row:not(.ui-head) { height: auto; min-height: 52px; padding-block: 8px; row-gap: 2px; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "g t r" "g c c"; }
  .fd-list .ui-row > .ui-g { grid-area: g; align-self: start; margin-top: 2px; }
  .fd-list .ui-row > .ui-t { grid-area: t; }
  .fd-list .ui-row > .fd-res { grid-area: r; }
  .fd-list .ui-row > .fd-cs { grid-area: c; display: block; font-size: 12px; }
  .fd-list .fd-cred, .fd-list .fd-scope, .fd-list .ui-head { display: none; }
  .fd-duo { grid-template-columns: minmax(0, 1fr) 300px; }
}
@container (max-width: 600px) {
  .fd-duo { display: flex; flex-direction: column; }
  .fd-pane { order: -1; border-top: 0; border-bottom: 1px solid var(--ui-line); }
  .fd-ph-hide, .fd-list .ui-bar { display: none; }
  .fd-pane .dp-head { padding: 0 16px; }
  .fd-pane .dp-body { padding: 0 16px 8px; }
  .fd-rungs li { padding: 7px 0 8px; }
}

/* ---- responsive ---- */
@media (max-width: 1280px) { .bh-stage { column-gap: 48px; } }
/* side by side under 1367px: the list drops its serials and the agent bar its client, so no title truncates */
@media (max-width: 1366px) and (min-width: 1101px) { .bh-list .ui-row { grid-template-columns: 14px minmax(0, 1fr) 84px 20px 40px; } .bh-list .ui-id { display: none; } .ag-ttl i { display: none; } }
@media (max-width: 1179px) {
  .fm-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
  .fm-points li:nth-child(n+3) { margin-top: 28px; }
}
@media (max-width: 1180px) {
  .bh-stage { grid-template-columns: minmax(0, 340fr) minmax(0, 700fr); column-gap: 40px; }
  .bh-duo { grid-template-columns: minmax(0, 1fr) 316px; }
  .bh-list .ui-row { grid-template-columns: 14px minmax(0, 1fr) 20px 40px; }
  .bh-list .ui-id, .bh-list .ui-word, .bh-list .ui-sort { display: none; }
}
@media (max-width: 1100px) {
  /* the hero stacks: the agent's run above the console, the wire straight down between them */
  main.bh { --tuck: 196px; }
  .bh-stage { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .bh-fa { height: auto; }
  .bh-agent .ag-early, .bh-agent .later { display: none; }
  .bh-fc { height: 640px; }
  .bh-duo { grid-template-columns: minmax(0, 1fr) 340px; }
  .bh-list .ui-row { grid-template-columns: 14px 60px minmax(0, 1fr) 84px 20px 40px; }
  .bh-list .ui-id, .bh-list .ui-word, .bh-list .ui-sort { display: block; }
  /* the workflow turns: a vertical rail; each station's card beside its caption */
  .wf { --pad-x: 32px; --pad-t: 40px; }
  .wf-track { display: none; }
  .wf-steps { grid-template-columns: minmax(0, 1fr); }
  .wf-step { position: relative; grid-template-columns: 16px minmax(0, 1fr) minmax(0, 268px); column-gap: 28px; align-items: start; justify-items: start; text-align: left; padding: 0 0 36px; }
  .wf-step::before { content: ""; position: absolute; left: 7.5px; top: 22px; bottom: 2px; width: 1px; background: rgba(255,255,255,.12); transition: background-color .4s var(--ease); }
  .wf-step:last-child { padding-bottom: 0; }
  .wf-step:last-child::before { display: none; }
  .wf-step.reached:not(:last-child)::before { background: rgba(201,192,240,.55); }
  .wf-node { grid-column: 1; grid-row: 1; margin: 3px 0 0; }
  .wf-cap { grid-column: 2; grid-row: 1; justify-items: start; }
  .wf-card { grid-column: 3; grid-row: 1; justify-self: end; }
  .wf-desc { max-width: 34ch; text-wrap: pretty; }
}
@media (max-width: 1023px) {
  .sec-head > .sec-more { grid-column: 1; grid-row: auto; }
  .rr-pair { grid-template-columns: minmax(0, 1fr); }
  .rr-via { height: 72px; }
  .rr-line { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, rgba(69,60,102,.15), rgba(69,60,102,.45) 30%, rgba(69,60,102,.45) 70%, rgba(69,60,102,.15)); }
  .rr-pk { left: -1px; top: 0; width: 3px; height: 24px; background: linear-gradient(180deg, rgba(101,86,163,0), #6556A3); }
}
@media (max-width: 860px) {
  .bh-list .ui-row { grid-template-columns: 14px minmax(0, 1fr) 20px 40px; }
  .bh-list .ui-id, .bh-list .ui-word, .bh-list .ui-sort { display: none; }
}
@container (max-width: 600px) {
  .bh-empty { display: none; }
  .bh-duo { display: block; }
  .bh-list .ui-bar, .bh-list .ui-gr, .bh-ph-hide { display: none; }
  /* a phone-sized console puts the question and the act first; the prepared work follows */
  .bh-det .dp-body { display: flex; flex-direction: column; }
  .bh-det .dp-body > .bh-sq { order: 1; } .bh-det .dp-body > .bh-q { order: 2; } .bh-det .dp-body > .bh-act { order: 3; margin-bottom: 4px; }
  .bh-det .dp-body > .bh-sp { order: 4; } .bh-det .dp-body > .bh-prep { order: 5; }
  .bh-det .dp-body > .ui-sub.bh-sq { margin-top: 16px; }
  .bh-list .ui-row { grid-template-columns: 14px minmax(0, 1fr) 20px 40px; padding: 0 16px; }
  .bh-list .ui-id, .bh-list .ui-word { display: none; }
  .bh-pane { padding: 0; }
  .bh-pane .dp-head { padding: 0 16px; }
  .bh-pane .dp-body { padding: 0 16px 16px; }
}
@media (max-width: 680px) {
  .wf { --pad-x: 22px; --pad-t: 28px; }
  .wf-step { grid-template-columns: 16px minmax(0, 1fr); column-gap: 18px; }
  .wf-card { grid-column: 2; grid-row: 2; justify-self: start; max-width: 300px; margin-top: 16px; }
}
@media (max-width: 640px) {
  main.bh { --tuck: 196px; --fd-tuck: 52px; --pw-tuck: 200px; }
  .fm-points { grid-template-columns: minmax(0, 1fr); margin-bottom: 48px; }
  .fm-points li + li { margin-top: 22px; }
  .pw-stage { padding-inline: 12px; }
  .pw-win { height: 720px; }
  .fd-win { height: 720px; }
  .bh-stage { row-gap: 32px; }
  .bh-fc { height: 600px; }
  .ag-row { padding: 0 14px; column-gap: 10px; }
  .ag-row::before { left: 21.5px; }
  .ag-top { padding: 0 10px 0 14px; }
  .op-ledger .lg-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; height: 64px; align-content: center; row-gap: 2px; }
  .op-k { grid-column: 1; font-size: 16px; }
  .op-v { grid-column: 1; grid-row: 2; font-size: 13.5px; }
  .op-ledger .lg-c { grid-column: 2; grid-row: 1 / span 2; width: 104px; }
  .op-lead { font-size: 16px; }
  .wf { --pad-x: 18px; --pad-t: 24px; }
  .wf-panel { padding-bottom: 28px; }
  .rr-r { grid-template-columns: 92px minmax(0, 1fr); padding: 0 16px; column-gap: 12px; }
  .rr-bar { padding: 0 16px; }
}
@media (max-width: 360px) { .wf-desc { font-size: 13.5px; } .wf-id { display: none; } }
@media (max-width: 480px) { .ag-ttl i { display: none; } }
@media (max-width: 400px) {
  .wf-note { white-space: normal; line-height: 1.4; }
  .ag-row { grid-template-rows: auto; min-height: 40px; padding-block: 9px; }
  .ag-t { white-space: normal; line-height: 1.35; }
  .ag-ttl i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-row.run .ag-g::before, .rr-spin::before { animation: none; }
  .bh-new.land { animation: none; }
}

/* the closer's three short sentences: each stays whole from tablet up, so the balanced lines break between them */
#join .cta-group { max-width: 1040px; }
#join .h2.cta-s { max-width: 22em; }
@media (min-width: 641px) { #join .h2.cta-s > span { white-space: nowrap; } }
@media (max-width: 640px) { #join .h2.cta-s > span { display: block; text-wrap: balance; } }

/* ==== the code experiences (owner, 2026-10-09) ==================================================== */
/* the M chip on Marlow's pages: Marlow violet with an ivory glyph, as the favicon */
.am-def { position: absolute; width: 0; height: 0; overflow: hidden; }
.am { flex: none; width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; }
.ag-via { display: inline-flex; align-items: center; gap: 7px; }

/* syntax on the ink: ink-silk violet, rose, ivory, warm ivory, muted greys; every token at least 4.5:1 */
.c-kw { font-style: normal; color: #B6A7F2; } .c-str { font-style: normal; color: #EDB1C1; } .c-num { font-style: normal; color: #F2D3A6; }
.c-fn { font-style: normal; color: #D8CEFA; } .c-key { font-style: normal; color: #F5F2EC; } .c-glo { font-style: normal; color: #C8C2D4; }
.c-com { font-style: normal; color: #8F8A9C; } .c-pun { font-style: normal; color: #A29DB0; }

/* the editor: title bar, tabs, gutter, a terminal and the escalation, a status bar in the brand's violet */
.fd-frame { position: relative; }
.ed-win { overflow: hidden; border-radius: 12px; border: 1px solid #2B2733; background: #121017; text-align: left; }
.ed { color: #E6E1EE; font: 400 13px/22px var(--mono); }
.ed-title { position: relative; display: flex; align-items: center; height: 38px; padding: 0 14px; background: #19161F; border-bottom: 1px solid rgba(255,255,255,.06); }
.ed-dots { display: flex; gap: 8px; }
.ed-dots i { display: block; width: 11px; height: 11px; border-radius: 50%; background: #3A3646; }
.ed-name { position: absolute; left: 50%; transform: translateX(-50%); font: 500 12px/1 var(--font); color: #A29DB0; white-space: nowrap; }
.ed-tabs { display: flex; height: 36px; background: #16131C; border-bottom: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.ed-tab { display: flex; align-items: center; gap: 8px; padding: 0 18px 0 14px; border-right: 1px solid rgba(255,255,255,.05); font: 400 13px/1 var(--font); color: #A29DB0; white-space: nowrap; }
.ed-tab.on { background: #121017; color: #F2EEF7; box-shadow: inset 0 1px 0 #8A7BD6; }
.ed-ft { font: 600 12px/1 var(--mono); color: #8FA9F2; }
.ed-fj { color: #F2D3A6; }
.ed-code { padding: 14px 0 18px; overflow-x: auto; scrollbar-width: none; }
.ed-code::-webkit-scrollbar, .ed-term::-webkit-scrollbar, .ed-gig::-webkit-scrollbar, .tr-call::-webkit-scrollbar, .tr-out::-webkit-scrollbar { display: none; }
.ed-lines li { display: flex; min-height: 22px; white-space: pre; width: max-content; min-width: 100%; }
.ed-ln { flex: none; width: 48px; padding-right: 18px; text-align: right; color: #837E92; user-select: none; }
.ed-lines code { white-space: pre; padding-right: 24px; }
.ed-panel { border-top: 1px solid rgba(255,255,255,.08); background: #100E14; }
.ed-ptabs { display: flex; align-items: center; gap: 20px; height: 34px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.05); font: 500 12px/1 var(--font); color: #8F8A9C; white-space: nowrap; }
.ed-ptabs .on { color: #F2EEF7; }
.ed-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.ed-term, .ed-gig { min-width: 0; padding: 12px 0 18px; overflow-x: auto; scrollbar-width: none; }
.ed-gig { border-left: 1px solid rgba(255,255,255,.06); }
.ed-cmd { padding: 0 18px 6px; white-space: nowrap; color: #E6E1EE; }
.ed-cwd { color: #8F8A9C; }
.ed-cmd b { font-weight: 400; color: #B6A7F2; }
.ed-json .ed-ln { display: none; }
.ed-json li { padding-left: 18px; }
.ed-wait { display: flex; align-items: center; gap: 10px; margin: 10px 18px 0; font: 500 13px/1.4 var(--font); color: #C9C0F0; white-space: nowrap; }
.ed-spin, .tr-spin { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(201,192,240,.3); }
.ed-spin::before, .tr-spin::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-top-color: #C9C0F0; border-right-color: #C9C0F0; animation: ag-spin 1.1s linear infinite; }
.ed-gh { display: flex; align-items: center; gap: 8px; padding: 0 18px 6px; font: 500 12.5px/22px var(--font); color: #F2EEF7; white-space: nowrap; }
.ed-gh i { font-style: normal; color: #8F8A9C; }
.ed-status { display: flex; align-items: center; gap: 18px; height: 26px; padding: 0 12px; background: #453C66; color: #EEEAF6; font: 400 12px/1 var(--font); white-space: nowrap; overflow: hidden; }
.ed-sb { display: inline-flex; align-items: center; gap: 6px; }
.am-sb { width: 14px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(247,243,235,.5); }
.ed-sr { margin-left: auto; }
/* the run: lines reveal, then the output streams; every hidden part is opacity only (no layout jump) */
.ed.play .ed-code li, .ed.play .ed-cmd, .ed.play .ed-out li, .ed.play .ed-gh, .ed.play .ed-gj li, .ed.play .ed-wait { opacity: 0; transform: translateY(2px); }
.ed .in { opacity: 1 !important; transform: none !important; transition: opacity .28s var(--ease), transform .32s var(--ease-fig); }
.ed.play .ed-sr::after { content: ""; }

/* the agent's session: a dark transcript, the tool calls framed, outputs on one clean line each */
.tr-frame { max-width: 960px; margin: 0 auto; }
.tr { overflow: hidden; border-radius: 12px; border: 1px solid #2B2733; background: #141219; color: #E6E3EC; font: 400 14px/1.55 var(--font); text-align: left; }
.tr-top { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 18px; border-bottom: 1px solid rgba(255,255,255,.07); white-space: nowrap; }
.tr-sess { margin-left: auto; font: 400 12px/1 var(--mono); color: #8E8A99; }
.tr-log { display: grid; gap: 10px; padding: 18px 20px 22px; }
.tr-say { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.tr-g { width: 8px; height: 8px; margin: 7px 0 0 3px; border-radius: 2px; background: #B6A7F2; transform: rotate(45deg); }
.tr-say p { font-weight: 500; color: #F2EEF7; }
.tr-note p { padding-left: 26px; font-size: 13.5px; color: #A39FAE; }
.tr-call { display: flex; align-items: center; gap: 12px; min-width: 0; margin-left: 26px; padding: 9px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: #1C1925; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.tr-tool { display: inline-flex; align-items: center; gap: 7px; font: 400 12.5px/1 var(--mono); }
.tr-tool b { font-weight: 500; color: #F5F2EC; }
.tr-tool i { font-style: normal; color: #B6A7F2; }
.tr-args { font: 400 12.5px/1.5 var(--mono); color: #E6E1EE; white-space: pre; }
.tr-out { display: grid; gap: 2px; margin-left: 32px; padding: 2px 0 2px 14px; border-left: 1px solid rgba(255,255,255,.12); overflow-x: auto; scrollbar-width: none; }
.tr-out code { font: 400 12.5px/1.6 var(--mono); color: #C8C2D4; white-space: pre; }
.tr-wait, .tr-res { display: flex; align-items: center; gap: 10px; margin-left: 32px; padding-left: 14px; font-weight: 500; }
.tr-wait { color: #C9C0F0; }
.tr-res { color: #F2EEF7; }
.tr-ok, .tr-wait.done .tr-spin { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #8C8C95; box-shadow: none; }
.tr-ok::after, .tr-wait.done .tr-spin::after { content: ""; position: absolute; left: 5.4px; top: 3.4px; width: 4px; height: 7px; border-right: 1.6px solid #141219; border-bottom: 1.6px solid #141219; transform: rotate(42deg); }
.tr-wait.done .tr-spin::before { display: none; }
.tr-wait.done { color: #A39FAE; font-weight: 400; }
.tr-res .tr-ok { background: #B6A7F2; }
.tr.play .tr-log > li { opacity: 0; transform: translateY(3px); }
.tr .tr-log > li.in { opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .4s var(--ease-fig); }
@media (max-width: 640px) {
  .ed { font-size: 12px; line-height: 20px; }
  .ed-lines li { min-height: 20px; }
  .ed-ln { width: 36px; padding-right: 12px; }
  .ed-split { grid-template-columns: minmax(0, 1fr); }
  .ed-gig { border-left: 0; border-top: 1px solid rgba(255,255,255,.06); }
  .ed-name { display: none; }
  .ed-status .ed-sm { display: none; }
  .tr { font-size: 13.5px; }
  .tr-log { padding: 16px 14px 18px; }
  .tr-call { margin-left: 0; }
  .tr-out, .tr-wait, .tr-res { margin-left: 6px; }
  .tr-note p { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ed-spin::before, .tr-spin::before { animation: none; } }