/* =====================================================================
   HOME HERO TEST (Dom, 3 Nov 2026): the onboarding's "How it works" example
   (claude.ai/artifact/5nQHsHgLivJWbTmyAH6xFi#how) as the home page hero
   animation, in a section above the current hero. Ported once from the
   onboarding's flow.css by a scratch script: every rule is scoped under
   .obh, ids and keyframes carry an obh- prefix, and the stage keeps the
   artifact's own tokens and fonts (Geist for Askpilot, Inter and Source
   Serif 4 for Claude). From 1000px up every size is 1.2x the artifact's,
   so the stage fills the hero column; below it the artifact's own sizes
   and its stacked phone layout. Script: js/hero-ob.js.
   ===================================================================== */
.obh {
  --bg: #FFFFFF; --ink: #141C20; --muted: #7C8B91; --secondary: #54626C; --placeholder: #9AA6AC;
  --line: #E6EBED; --field: #CFD8DC; --soft: #F8FAFB; --hover: #F5F7F8; --blue: #4C6BEE; --off: #BFC6C9;
  --pink: #BF27BF; --pink-soft: #FBE3FB; --blue-soft: #EEF1FD; --ok: #1F9D61; --ok-soft: #E8F6EE; --wait: #B7791F;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --chat: #F4F3EF;
  --font: 'Geist', Inter, -apple-system, 'Segoe UI', sans-serif;
  margin: 64px auto 0; font-family: var(--font); font-size: 14px; line-height: 1.43; color: var(--ink); text-align: left;
  -webkit-font-smoothing: antialiased;
}
/* the site's resets, undone for the stage: inline logos, plain buttons */
.obh img { display: inline-block; max-width: none; }
.obh button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; }
.obh p, .obh h3 { margin: 0; }
.obh [hidden] { display: none !important; }
@media (min-width: 1000px) { .obh { font-size: 16.5px; } }

/* ---------- 2. How it works ---------- */
.obh .stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1.12fr); grid-template-rows: auto auto; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(140deg, #F2F4FB 0%, #F7F2F8 55%, #F8F4F1 100%); }
/* the three steps of the example: one bar in three parts, divided by thin lines; each step
   number sits in a rounded square, not a circle, so it doesn't read as the setup stepper
   above; the step playing is tinted grey, its tile lifted, its line fills */
.obh .beats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 18px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: 0 1px 2px rgba(20, 28, 32, .05); }
.obh .beat { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px 11px; border-radius: 9px; color: var(--secondary); text-align: left; overflow: hidden; transition: background-color .2s ease; }
.obh .beat + .beat::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--line); transition: opacity .2s ease; }
.obh .beat[aria-selected="true"]::before, .obh .beat[aria-selected="true"] + .beat::before { opacity: 0; }
.obh .beat:hover { color: var(--ink); background: var(--soft); }
.obh .beat > b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; line-height: 1; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; transition: box-shadow .2s ease, color .2s ease; }
.obh .beat:hover > b { color: var(--ink); }
.obh .beat > span:not(.fill) { display: grid; gap: 1px; min-width: 0; }
.obh .beat strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.obh .beat small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.obh .beat small img { width: 11px; height: 11px; }
.obh .beat[aria-selected="true"] { background: #F2F4F5; color: var(--ink); }
.obh .beat[aria-selected="true"] > b { box-shadow: inset 0 0 0 1px var(--line), 0 2px 6px -2px rgba(20, 28, 32, .18); }
.obh .beat[aria-selected="true"] > b { color: var(--ink); }
.obh .beat .fill { position: absolute; left: 12px; bottom: 5px; height: 2px; width: 0; max-width: calc(100% - 24px); border-radius: 2px; background: var(--ink); }
.obh .beat[aria-selected="true"] .fill { animation: obh-fill var(--beat, 7s) linear forwards; }
.obh .stage.is-paused .beat .fill { animation-play-state: paused; }
@keyframes obh-fill { to { width: 100%; } }
/* the link between them: Askpilot MCP, a hub on a line; a dot runs along it and the
   hub glows when Claude calls Askpilot (pink) and when the answer comes back (blue) */
.obh .wire { position: relative; align-self: stretch; display: grid; place-items: center; }
.obh .wire-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, #D9C3EA, #C3CEF2); }
.obh .wire-dot { position: absolute; top: 50%; left: 0; z-index: 1; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 3px rgba(191, 39, 191, .15); opacity: 0; }
.obh .wire.is-go .wire-dot { animation: obh-wire 1s ease-in-out 1; }
.obh .wire.is-back .wire-dot { animation-direction: reverse; background: var(--blue); box-shadow: 0 0 0 3px rgba(76, 107, 238, .15); }
@keyframes obh-wire { 0% { left: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.obh .wire-hub { position: relative; z-index: 2; display: grid; justify-items: center; gap: 6px; margin-top: 30px; }
.obh .wire-node { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -8px rgba(20, 28, 32, .35); transition: box-shadow .3s ease; }
.obh .wire-node svg { width: 18px; height: 18px; }
.obh .wire.is-go .wire-node { animation: obh-hub 1s ease 1; }
.obh .wire.is-back .wire-node { animation-name: obh-hub-b; }
@keyframes obh-hub { 45% { box-shadow: 0 0 0 1px #E3B6E3, 0 0 0 6px rgba(191, 39, 191, .14), 0 6px 16px -8px rgba(20, 28, 32, .35); } }
@keyframes obh-hub-b { 45% { box-shadow: 0 0 0 1px #B9C7F6, 0 0 0 6px rgba(76, 107, 238, .14), 0 6px 16px -8px rgba(20, 28, 32, .35); } }
.obh .wire-l { font-size: 9.5px; font-weight: 600; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--muted); }
.obh .tools-strip { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.obh .tools-strip span.t { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.obh .tools-strip span.t img { width: 17px; height: 17px; }
.obh .tools-strip span.t.is-live { border-color: #E3B6E3; box-shadow: 0 0 0 3px rgba(191, 39, 191, .14); transform: translateY(-2px); }
.obh .tools-strip em { font-style: normal; }
/* what appears in the windows, beat by beat */
/* what grows in: its row opens from nothing to its height, so what is above slides up */
.obh .gi { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; }
.obh .gi > div { min-height: 0; overflow: hidden; }
.obh .gi.is-on { grid-template-rows: 1fr; opacity: 1; }
.obh .pane-app .gi > div > :first-child:not(.wr):not(.srow):not(.ptodo) { margin-top: 10px; }
.obh .pane-app .gi > div > .todo:first-child { margin-top: 8px; }
.obh .evt { padding: 8px 10px !important; }
/* between beats both windows fade */
.obh .pane-b { transition: opacity .25s ease; }
.obh .stage.is-swap .pane-b { opacity: 0; }
/* Claude thinking, and the box while you type */
/* the event that starts a run, as the session shows it */
.obh .evt { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.obh .evt img { flex: none; width: 18px; height: 18px; }
.obh .evt span { flex: 1; min-width: 0; display: grid; }
.obh .evt b { font-size: 12.5px; font-weight: 600; }
.obh .evt small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obh .evt em { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--blue-soft); color: #3550C8; font-style: normal; font-size: 11px; font-weight: 600; }
.obh .todo { transition: color .3s ease; }
.obh .todo i { transition: background-color .3s ease; }
/* the two windows (Dom, 2 Nov 2026: "improve UI"): Claude's chat on the left, the
   Askpilot app on the right, each with a window bar; the same height, so nothing jumps */
.obh .pane { display: flex; flex-direction: column; min-width: 0; height: 344px; border: 1px solid #DCE1E6; border-radius: 12px; background: var(--bg); box-shadow: 0 18px 36px -24px rgba(20, 28, 32, .4), 0 1px 2px rgba(20, 28, 32, .05); overflow: hidden; }
.obh .win { flex: none; position: relative; display: flex; align-items: center; justify-content: center; height: 28px; margin: 0; border-bottom: 1px solid #E6E8EB; background: #F3F4F6; }
.obh .lights { position: absolute; left: 10px; top: 10px; display: flex; gap: 5px; }
.obh .lights i { width: 8px; height: 8px; border-radius: 50%; background: #FF5F57; }
.obh .lights i:nth-child(2) { background: #FEBC2E; }
.obh .lights i:nth-child(3) { background: #28C840; }
.obh .win-t { font-size: 11px; color: #6B7280; }
.obh .pane-b { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; overflow: hidden; }
.obh .pane-b p { margin: 0; }
/* Claude */
.obh .pane-chat { font-family: Inter, var(--font); }
/* Claude's chat, as claude.ai behaves (Dom, 2 Nov 2026): a new chat greets you; the box
   grows upward as you type and shows all of it; on send your message goes to the top;
   only Claude's spark moves while it works; the answer streams in its serif with the spark
   under it; the chat scrolls up smoothly as it grows */
.obh .pane-chat { font-family: Inter, var(--font); }
.obh .cl-top { flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; height: 32px; margin: 0; font-size: 12.5px; color: #1F1E1D; }
.obh .cl-top b { font-weight: 500; opacity: 0; transition: opacity .4s ease; }
.obh .cl-top svg { width: 11px; height: 11px; color: #9C9A92; opacity: 0; transition: opacity .4s ease; }
.obh .cl-top.is-on b, .obh .cl-top.is-on svg { opacity: 1; }
.obh .chat-view { position: relative; display: block; padding: 0; overflow: hidden; }
.obh .chat-view.is-scrolled { -webkit-mask-image: linear-gradient(transparent 0, #000 24px); mask-image: linear-gradient(transparent 0, #000 24px); }
.obh .chat-in { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 10px; padding: 6px 14px 12px; transition: transform .45s cubic-bezier(.3, .8, .2, 1); }
.obh .hello { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; color: #3D3D3A; transition: opacity .18s ease, transform .3s ease; }
.obh .hello img { width: 22px; height: 22px; }
.obh .hello.is-gone { opacity: 0; transform: translateY(-8px); }
.obh .msg-u { align-self: flex-end; max-width: 85%; margin: 0; padding: 7px 12px; border-radius: 12px; background: rgba(11, 11, 11, .055); font-size: 12.5px; line-height: 1.45; color: rgba(0, 0, 0, .9); animation: obh-sent .22s ease-out; }
/* Claude's own: right, light grey, at once */
@keyframes obh-sent { from { opacity: 0; transform: translateY(4px); } }
.obh .msg-a { margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 13.5px; line-height: 1.5; color: #1F1E1D; }
.obh .msg-a b { font-weight: 600; }
.obh .call { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; max-width: 100%; margin: 0; padding: 5px 10px 5px 8px; border: 1px solid #E8E6DD; border-radius: 9px; background: #FAF9F5; font-size: 11.5px; color: #6B6A63; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obh .call img { width: 13px; height: 13px; }
.obh .call code { font-family: var(--mono); font-size: 11px; color: #1F1E1D; }
.obh .call svg { width: 9px; height: 9px; color: #A8A69C; }
.obh .call.is-run span { background: linear-gradient(90deg, #8D8B83 0%, #C9C6BB 45%, #8D8B83 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: obh-shimmer 1.2s linear infinite; }
@keyframes obh-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* Claude's spark: it turns while Claude works, then rests under the answer */
.obh .spark { display: block; width: 18px; height: 18px; margin: 2px 0 0; }
.obh .spark img { width: 18px; height: 18px; transition: transform .3s ease; }
.obh .spark.is-live img { animation: obh-spark 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes obh-spark { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(.82); } 100% { transform: rotate(180deg) scale(1); } }
/* Claude thinking (claude.ai, 2 Nov 2026): three orange dots trade places, the status line shimmers */
.obh .spark.thk { display: flex; align-items: center; gap: 9px; width: auto; height: 18px; font-size: 12.5px; }
.obh .thk .dots { position: relative; flex: none; width: 14px; height: 12px; }
.obh .thk .dots i { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #D97757; animation: obh-dots 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
.obh .thk .dots i:nth-child(2) { animation-delay: -.5s; }
.obh .thk .dots i:nth-child(3) { animation-delay: -1s; }
@keyframes obh-dots { 0%, 100% { transform: translate(3px, 4px) scale(.72); } 33% { transform: translate(11px, 3px) scale(.72); } 66% { transform: translate(7px, 9px) scale(1); } }
.obh .thk span { white-space: nowrap; background: linear-gradient(90deg, #73726C 0%, #73726C 35%, #C4C2B8 50%, #73726C 65%, #73726C 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: obh-shimmer 1.8s linear infinite; }
/* the box: it grows upward with the text */
.obh .compose { position: relative; flex: none; margin: 0 12px 12px; border: 1px solid #E5E3DA; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(31, 30, 29, .06); overflow: hidden; transition: height .18s ease, border-color .2s ease; }
.obh .compose.is-typing { border-color: #D6D3C8; }
.obh .cmp-in { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 8px 7px 12px; }
/* pinned to the foot: as the box grows, only the text opens upward */
.obh .cmp-t { position: relative; min-height: 18px; max-height: 92px; margin: 0; overflow: hidden; font-size: 12.5px; line-height: 18px; color: #1F1E1D; }
.obh .cmp-ph { position: absolute; left: 0; top: 0; color: #9C9A92; pointer-events: none; }
.obh .compose.is-typing .cmp-ph { display: none; }
.obh .cmp-caret { display: none; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #1F1E1D; animation: obh-blink 1s steps(1) infinite; }
.obh .compose.is-typing .cmp-caret { display: inline-block; }
@keyframes obh-blink { 50% { opacity: 0; } }
.obh .cmp-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.obh .cmp-plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid #E5E3DA; color: #6B6A63; }
.obh .cmp-plus svg { width: 12px; height: 12px; }
.obh .cmp-row b { margin-left: auto; font-size: 11px; font-weight: 500; color: #6B6A63; }
.obh .cmp-send { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #E9C6B6; transition: background-color .2s ease, transform .15s ease; }
.obh .cmp-send svg { width: 12px; height: 12px; color: #fff; }
.obh .compose.is-typing .cmp-send { background: #C96442; }
.obh .cmp-send.is-press { transform: scale(.86); }
/* Askpilot: the shell, its icon rail and the card */
.obh .apx { flex: 1; min-height: 0; display: flex; background: #F9FAFA; }
.obh .rail { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 44px; padding-top: 10px; }
.obh .rail-logo { width: 18px; height: 18px; margin-bottom: 8px; }
.obh .rail span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--secondary); }
.obh .rail span.is-cur { background: #E6EBED; color: var(--ink); }
.obh .rail svg { width: 16px; height: 16px; }
.obh .card { flex: 1; min-width: 0; display: flex; flex-direction: column; margin: 8px 8px 0 0; border: 1px solid #DAE1E4; border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--bg); }
.obh .card-h { flex: none; display: flex; align-items: center; gap: 7px; height: 40px; margin: 0; padding: 0 14px; border-bottom: 1px solid var(--line); }
.obh .card-h img { width: 14px; height: 14px; }
.obh .card-h b { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obh .card-h small { margin-left: auto; flex: none; font-size: 11px; color: var(--muted); }
.obh .pane-app .pane-b { gap: 0; padding: 4px 14px 12px; }
/* Workflows: the app's table */
.obh .wth { display: flex; justify-content: space-between; padding: 9px 0 7px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 500; color: var(--muted); }
.obh .wr { display: grid; grid-template-columns: 16px minmax(0, 1fr) 28px; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--line); }
.obh .wr > svg { width: 15px; height: 15px; color: var(--secondary); }
.obh .wr .nm { display: grid; gap: 2px; min-width: 0; }
.obh .wr .nm b { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.obh .wr .tr { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obh .wr .tr img { flex: none; width: 12px; height: 12px; }
.obh .wr .tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* a long trigger ends in … */
.obh .wr.is-new { margin: 0 -14px; padding: 0 14px; animation: obh-rowin 3.2s ease forwards; }
/* a soft blue wash that fades as it settles */
@keyframes obh-rowin { 0%, 35% { background: #EEF2FE; } 100% { background: rgba(238, 242, 254, 0); } }
.obh .sw { flex: none; position: relative; width: 28px; height: 16px; border-radius: 99px; background: var(--off); transition: background-color .3s ease; }
.obh .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transition: transform .3s ease; }
.obh .sw.is-on { background: var(--ink); }
.obh .sw.is-on::after { transform: translateX(12px); }
.obh .tag-new { padding: 1px 6px; border-radius: 99px; background: #E9EEFD; color: #3550C8; font-size: 10px; font-weight: 600; line-height: 15px; }
/* a session: its progress, as the app's Progress card draws it, and the approval */
.obh .prog { display: grid; gap: 9px; padding: 12px 0 10px; }
.obh .count { align-self: flex-start; }
.obh .todo { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.obh .todo i { flex: none; position: relative; width: 14px; height: 14px; border-radius: 50%; background: #D3CED9; }
.obh .todo.is-done i { background: #141C20; }
.obh .todo.is-done i::after { content: ''; position: absolute; left: 4.7px; top: 2.6px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.obh .todo.is-done > span { color: var(--secondary); }
.obh .todo.is-wait i { background: #ECBAFC; }
.obh .todo img { width: 13px; height: 13px; margin-left: auto; }
.obh .todo small { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11px; color: var(--pink); }
.obh .count { justify-self: start; margin-top: 2px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 11px; color: var(--secondary); }
.obh .count b { color: var(--pink); font-weight: 600; }
.obh .appr { display: grid; gap: 6px; padding: 8px 10px 9px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; box-shadow: 0 6px 16px -12px rgba(20, 28, 32, .35); }
.obh .appr > * { min-width: 0; }
.obh .appr-k { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.obh .appr-h { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.obh .appr-h i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.obh .appr-o { display: flex; align-items: center; gap: 6px; }
.obh .appr-o em { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; font-style: normal; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obh .appr-o em b { margin-right: 5px; color: var(--muted); font-weight: 500; }
.obh .appr-s { flex: none; padding: 4px 10px; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 600; }
/* Askpilot's Progress card (app.askpilot.com): the trigger, then the tasks on a thin line;
   pending grey, in progress pink, done a dark check; an approval task in pink under it */
.obh .card-prog { display: grid; place-items: center; color: var(--ink); }
.obh .card-prog svg { width: 16px; height: 16px; }
.obh .pane-app .gi > div > .ptrig:first-child, .obh #obh-pane-app > .ptrig:first-child { margin-top: 14px; }
.obh .pane-app .gi > div > .ptodo:first-child { margin-top: 0; }
.obh .ptrig, .obh .ptodo { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding-bottom: 16px; font-size: 13px; line-height: 18px; font-weight: 600; color: #141C20; }
/* the line runs from under each circle to the foot of its step, and the next step carries it
   on to its own circle, so it joins them even though each step grows in its own clipped wrapper */
.obh .ptrig::after, .obh .ptodo::after { content: ''; position: absolute; left: 7px; top: 16.5px; bottom: 0; width: 1px; background: #CFD8DC; }
.obh .ptodo::before { content: ''; position: absolute; left: 7px; top: 0; height: 2px; width: 1px; background: #CFD8DC; }
.obh .pane-app .gi:last-child .ptrig::after, .obh .ptodo:last-child::after { display: none; }
.obh .ptrig i { flex: none; display: grid; place-items: center; width: 15px; height: 18px; }
.obh .ptrig img { width: 15px; height: 15px; }
.obh .ptodo i { flex: none; position: relative; width: 15px; height: 15px; margin-top: 1.5px; border-radius: 50%; background: #D3CED9; transition: background-color .3s ease; }
.obh .ptodo.is-prog i, .obh .ptodo.is-wait i { background: #ECBAFC; }
.obh .ptodo.is-prog i { animation: obh-pdot 1.1s ease-in-out infinite; }
@keyframes obh-pdot { 50% { background: #DC95F3; } }
/* it breathes in place: no halo to clip */
.obh .ptodo.is-done i { background: #141C20; animation: none; transition: background-color .25s ease; }
.obh .ptodo.is-done i::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M19.9375%206.15241C20.1297%206.6702%2019.8657%207.2457%2019.3479%207.43782C18.289%207.83068%2017.1274%208.64841%2015.9514%209.72885C14.7866%2010.799%2013.6641%2012.074%2012.6793%2013.3107C11.6965%2014.5449%2010.8631%2015.7254%2010.2751%2016.5981C9.98143%2017.0339%209.74984%2017.3917%209.59237%2017.6394C9.51365%2017.7632%209.45351%2017.8594%209.41344%2017.924L9.36861%2017.9966L9.35785%2018.0142L9.35545%2018.0182C9.17177%2018.3209%208.84114%2018.5048%208.48701%2018.5002C8.13282%2018.4956%207.8075%2018.304%207.63176%2017.9964C6.68252%2016.3352%205.89836%2015.5873%205.42654%2015.257C5.19208%2015.0929%205.03257%2015.0302%204.96242%2015.0079C4.94586%2015.0026%204.93369%2014.9994%204.92605%2014.9976C4.4083%2014.9597%204%2014.5277%204%2014.0003C4%2013.448%204.44772%2013.0003%205%2013.0003C5.118%2013.0082%205.39696%2013.0397%205.56883%2013.102C5.84243%2013.1891%206.18292%2013.3452%206.57346%2013.6185C7.13325%2014.0104%207.79014%2014.6389%208.5059%2015.6453C8.54176%2015.5916%208.57862%2015.5367%208.61646%2015.4805C9.22514%2014.5772%2010.0902%2013.3515%2011.1148%2012.0648C12.1374%2010.7807%2013.3311%209.42028%2014.5983%208.25607C15.8543%207.10213%2017.2404%206.08653%2018.6521%205.56272C19.1699%205.37061%2019.7454%205.63462%2019.9375%206.15241Z%22/%3E%3C/svg%3E") center / 11px 11px no-repeat; }
/* Askpilot's own check (Dom, 2 Nov 2026) */
.obh .ptodo span { min-width: 0; transition: color .3s ease; }
.obh .ptodo:not(.is-done):not(.is-prog):not(.is-wait) span { color: #8A979D; }
/* not reached yet */
.obh .ptodo small { display: flex; align-items: center; gap: 4px; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; font-size: 11.5px; font-weight: 500; color: #BF27BF; transition: max-height .4s ease, margin-top .4s ease, opacity .4s ease; }
.obh .ptodo.is-wait small { max-height: 20px; margin-top: 3px; opacity: 1; }
.obh .ptodo small svg { width: 11px; height: 11px; }
/* Sessions: the Open and Done tabs, then each run with its status */
.obh #obh-pane-app { transition: opacity .25s ease; }
.obh #obh-pane-app.is-out { opacity: 0; }
.obh .stabs { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; font-size: 12.5px; color: var(--muted); }
.obh .stabs b { font-weight: 600; color: var(--ink); }
.obh .stabs em { margin-left: auto; font-size: 11px; }
.obh .srow { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 -14px; padding: 8px 14px; border-bottom: 1px solid var(--line); transition: background-color .3s ease; }
.obh .srow > img { flex: none; width: 16px; height: 16px; }
.obh .srow span { flex: 1; min-width: 0; }
.obh .srow b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obh .srow small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.obh .srow.is-read { background: #F1F4FE; box-shadow: inset 2px 0 0 var(--blue); }
.obh .sst { flex: none; padding: 0 7px; font-style: normal; border-radius: 99px; font-size: 10px; font-weight: 600; line-height: 17px; }
.obh .sst-done { background: var(--ok-soft); color: #17643E; }
.obh .sst-wait { background: #F1F3F4; color: var(--secondary); }
.obh .sst-await { background: #F6E8FC; color: #8E2BAE; }
/* the approval, as Askpilot asks for it in the session: a question, two answers, Submit;
   a pointer picks the first and submits */
.obh .card { position: relative; }
.obh .apv { padding-top: 12px; }
.obh .apv .apv-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 13px; color: #141C20; }
.obh .apv-h b { font-weight: 600; }
.obh .apv-h small { font-size: 11.5px; font-weight: 500; color: #7C8B91; }
.obh .apv-b { display: none; }
.obh .apv.is-approved .apv-a { display: none; }
.obh .apv.is-approved .apv-b { display: inline; }
.obh .apv.is-approved .apv-h small { visibility: hidden; }
/* the Input needed card, as in the app: radius 10, shadow-md, numbered options, a full-width Submit */
.obh .apv-c { padding: 12px 14px 14px; border: 1px solid #E6EBED; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(20, 28, 32, .04), 0 8px 18px -12px rgba(20, 28, 32, .22); }
.obh .apv .apv-k { margin: 0 0 6px; font-size: 11px; font-weight: 500; color: #7C8B91; }
.obh .apv .apv-q { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: #141C20; }
.obh .apv-q i { flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: #4C6BEE; }
.obh .apv .apv-x { margin: 3px 0 12px 14px; font-size: 11.5px; line-height: 16px; color: #7C8B91; }
.obh .apv-ol { border: 1px solid #E6EBED; border-radius: 8px; overflow: hidden; }
.obh .apv .apv-o { display: flex; align-items: center; gap: 10px; height: 32px; margin: 0; padding: 0 10px; border-top: 1px solid #EEF1F2; font-size: 12.5px; color: #141C20; transition: background-color .2s ease; }
.obh .apv-o:first-child { border-top: 0; }
.obh .apv-o em { width: 8px; font-style: normal; font-size: 12px; color: #7C8B91; }
.obh .apv-o::after { content: ''; width: 14px; height: 14px; margin-left: auto; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.4, .5, 1); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234C6BEE%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207%22/%3E%3C/svg%3E") center / 14px no-repeat; }
.obh .apv-o.is-picked { background: #F4F6FF; }
.obh .apv-o.is-picked::after { opacity: 1; transform: none; }
.obh .apv .apv-s { display: grid; place-items: center; height: 32px; margin: 12px 0 0; border-radius: 8px; background: #4C6BEE; color: #fff; font-size: 12.5px; font-weight: 600; transition: background-color .25s ease; }
.obh .apv-s-b { display: none; align-items: center; gap: 6px; }
.obh .apv-s-b svg { width: 13px; height: 13px; color: #fff; }
.obh .apv.is-approved .apv-s { background: var(--ok); }
.obh .apv.is-approved .apv-s-a { display: none; }
.obh .apv.is-approved .apv-s-b { display: inline-flex; }
.obh .ptodo small.is-note { max-height: 20px; margin-top: 3px; opacity: 1; color: var(--muted); }
.obh .ap-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 14px; height: 20px; opacity: 0; pointer-events: none; transition: transform .75s cubic-bezier(.3, .8, .2, 1), opacity .25s ease; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Cpath d='M1 1v15l4-3.6 2.6 6 2.4-1-2.6-6H13z' fill='%23111' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; }
.obh .ap-cursor.is-on { opacity: 1; }
.obh .ap-cursor.is-press { scale: .85; }
/* the workflow's week, and the change to its PROCESS.md */
.obh .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 12px; }
.obh .stats p { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; }
.obh .stats b { display: block; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.obh .stats small { font-size: 11px; color: var(--muted); }
.obh .md { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.obh .md-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 11px; font-weight: 600; color: var(--secondary); }
.obh .md-h small { font-weight: 500; color: var(--ok); }
.obh .md-b { padding: 8px 10px; font-size: 12px; line-height: 1.55; }
.obh .md-b ins { text-decoration: none; background: #E3F5EA; color: #17643E; padding: 0 2px; border-radius: 3px; }
.obh .example { position: absolute; right: 18px; top: 4px; font-size: 11px; color: var(--muted); }
.obh .beat-cap { grid-column: 1 / -1; margin: 14px 0 0; min-height: 21px; text-align: center; font-size: 14px; color: var(--secondary); }
.obh .beat-cap b { color: var(--ink); font-weight: 600; }
@media (max-width: 680px) {
  .obh .stage { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .obh .pane { height: 330px; }
  .obh .pane-app { height: 352px; }
  .obh .rail { display: none; }
  .obh .card { margin-left: 8px; }
  .obh .beat { padding: 8px 8px 10px; gap: 6px; }
  .obh .beat .fill { left: 8px; max-width: calc(100% - 16px); }
  .obh .beat > b { display: none; }
  .obh .beat strong { font-size: 12.5px; white-space: normal; }
  .obh .beat small { font-size: 10.5px; white-space: normal; }
  .obh .example { display: none; }
}
@media (max-width: 680px) {
  .obh .wire { height: 64px; }
  .obh .wire-line { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; margin: 0 0 0 -1px; background: linear-gradient(180deg, #D9C3EA, #C3CEF2); }
  .obh .wire-dot { left: 50%; top: 0; margin: 0 0 0 -4px; }
  .obh .wire.is-go .wire-dot { animation-name: obh-wire-v; }
  .obh .wire-hub { display: flex; align-items: center; gap: 8px; margin: 0 0 0 98px; }
  .obh .wire-l br { display: none; }
}
@keyframes obh-wire-v { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }

/* ---------- from 1000px: every size 1.2x, so the stage fills the hero column ---------- */
@media (min-width: 1000px) {
  .obh .stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 91px minmax(0, 1.12fr); grid-template-rows: auto auto; padding: 21.5px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(140deg, #F2F4FB 0%, #F7F2F8 55%, #F8F4F1 100%); }
  .obh .beats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 21.5px; padding: 5px; border: 1px solid var(--line); border-radius: 14.5px; background: var(--bg); box-shadow: 0 1px 2px rgba(20, 28, 32, .05); }
  .obh .beat { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 14.5px 13px; border-radius: 11px; color: var(--secondary); text-align: left; overflow: hidden; transition: background-color .2s ease; }
  .obh .beat + .beat::before { content: ''; position: absolute; left: 0; top: 14.5px; bottom: 14.5px; width: 1px; background: var(--line); transition: opacity .2s ease; }
  .obh .beat[aria-selected="true"]::before, .obh .beat[aria-selected="true"] + .beat::before { opacity: 0; }
  .obh .beat:hover { color: var(--ink); background: var(--soft); }
  .obh .beat > b { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; transition: box-shadow .2s ease, color .2s ease; }
  .obh .beat:hover > b { color: var(--ink); }
  .obh .beat > span:not(.fill) { display: grid; gap: 1px; min-width: 0; }
  .obh .beat strong { font-size: 16px; font-weight: 600; white-space: nowrap; }
  .obh .beat small { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--muted); white-space: nowrap; }
  .obh .beat small img { width: 13px; height: 13px; }
  .obh .beat[aria-selected="true"] { background: #F2F4F5; color: var(--ink); }
  .obh .beat[aria-selected="true"] > b { box-shadow: inset 0 0 0 1px var(--line), 0 2px 7px -2px rgba(20, 28, 32, .18); }
  .obh .beat[aria-selected="true"] > b { color: var(--ink); }
  .obh .beat .fill { position: absolute; left: 14.5px; bottom: 6px; height: 2px; width: 0; max-width: calc(100% - 29px); border-radius: 2px; background: var(--ink); }
  .obh .beat[aria-selected="true"] .fill { animation: obh-fill var(--beat, 7s) linear forwards; }
  .obh .stage.is-paused .beat .fill { animation-play-state: paused; }
  @keyframes obh-fill { to { width: 100%; } }
  .obh .wire { position: relative; align-self: stretch; display: grid; place-items: center; }
  .obh .wire-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, #D9C3EA, #C3CEF2); }
  .obh .wire-dot { position: absolute; top: 50%; left: 0; z-index: 1; width: 9.5px; height: 9.5px; margin-top: -5px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 3.5px rgba(191, 39, 191, .15); opacity: 0; }
  .obh .wire.is-go .wire-dot { animation: obh-wire 1s ease-in-out 1; }
  .obh .wire.is-back .wire-dot { animation-direction: reverse; background: var(--blue); box-shadow: 0 0 0 3.5px rgba(76, 107, 238, .15); }
  @keyframes obh-wire { 0% { left: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: calc(100% - 9.5px); opacity: 0; } }
  .obh .wire-hub { position: relative; z-index: 2; display: grid; justify-items: center; gap: 7px; margin-top: 36px; }
  .obh .wire-node { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 7px 19px -9.5px rgba(20, 28, 32, .35); transition: box-shadow .3s ease; }
  .obh .wire-node svg { width: 21.5px; height: 21.5px; }
  .obh .wire.is-go .wire-node { animation: obh-hub 1s ease 1; }
  .obh .wire.is-back .wire-node { animation-name: obh-hub-b; }
  @keyframes obh-hub { 45% { box-shadow: 0 0 0 1px #E3B6E3, 0 0 0 7px rgba(191, 39, 191, .14), 0 7px 19px -9.5px rgba(20, 28, 32, .35); } }
  @keyframes obh-hub-b { 45% { box-shadow: 0 0 0 1px #B9C7F6, 0 0 0 7px rgba(76, 107, 238, .14), 0 7px 19px -9.5px rgba(20, 28, 32, .35); } }
  .obh .wire-l { font-size: 11.5px; font-weight: 600; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--muted); }
  .obh .tools-strip { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 17px; font-size: 14.5px; color: var(--muted); }
  .obh .tools-strip span.t { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
  .obh .tools-strip span.t img { width: 20.5px; height: 20.5px; }
  .obh .tools-strip span.t.is-live { border-color: #E3B6E3; box-shadow: 0 0 0 3.5px rgba(191, 39, 191, .14); transform: translateY(-2px); }
  .obh .tools-strip em { font-style: normal; }
  .obh .gi { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; }
  .obh .gi > div { min-height: 0; overflow: hidden; }
  .obh .gi.is-on { grid-template-rows: 1fr; opacity: 1; }
  .obh .pane-app .gi > div > :first-child:not(.wr):not(.srow):not(.ptodo) { margin-top: 12px; }
  .obh .pane-app .gi > div > .todo:first-child { margin-top: 9.5px; }
  .obh .evt { padding: 9.5px 12px !important; }
  .obh .pane-b { transition: opacity .25s ease; }
  .obh .stage.is-swap .pane-b { opacity: 0; }
  .obh .evt { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
  .obh .evt img { flex: none; width: 21.5px; height: 21.5px; }
  .obh .evt span { flex: 1; min-width: 0; display: grid; }
  .obh .evt b { font-size: 15px; font-weight: 600; }
  .obh .evt small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .obh .evt em { flex: none; padding: 2px 9.5px; border-radius: 119px; background: var(--blue-soft); color: #3550C8; font-style: normal; font-size: 13px; font-weight: 600; }
  .obh .todo { transition: color .3s ease; }
  .obh .todo i { transition: background-color .3s ease; }
  .obh .pane { display: flex; flex-direction: column; min-width: 0; height: 413px; border: 1px solid #DCE1E6; border-radius: 14.5px; background: var(--bg); box-shadow: 0 21.5px 43px -29px rgba(20, 28, 32, .4), 0 1px 2px rgba(20, 28, 32, .05); overflow: hidden; }
  .obh .win { flex: none; position: relative; display: flex; align-items: center; justify-content: center; height: 33.5px; margin: 0; border-bottom: 1px solid #E6E8EB; background: #F3F4F6; }
  .obh .lights { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
  .obh .lights i { width: 9.5px; height: 9.5px; border-radius: 50%; background: #FF5F57; }
  .obh .lights i:nth-child(2) { background: #FEBC2E; }
  .obh .lights i:nth-child(3) { background: #28C840; }
  .obh .win-t { font-size: 13px; color: #6B7280; }
  .obh .pane-b { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14.5px 17px; overflow: hidden; }
  .obh .pane-b p { margin: 0; }
  .obh .pane-chat { font-family: Inter, var(--font); }
  .obh .pane-chat { font-family: Inter, var(--font); }
  .obh .cl-top { flex: none; display: flex; align-items: center; justify-content: center; gap: 5px; height: 38.5px; margin: 0; font-size: 15px; color: #1F1E1D; }
  .obh .cl-top b { font-weight: 500; opacity: 0; transition: opacity .4s ease; }
  .obh .cl-top svg { width: 13px; height: 13px; color: #9C9A92; opacity: 0; transition: opacity .4s ease; }
  .obh .cl-top.is-on b, .obh .cl-top.is-on svg { opacity: 1; }
  .obh .chat-view { position: relative; display: block; padding: 0; overflow: hidden; }
  .obh .chat-view.is-scrolled { -webkit-mask-image: linear-gradient(transparent 0, #000 29px); mask-image: linear-gradient(transparent 0, #000 29px); }
  .obh .chat-in { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 12px; padding: 7px 17px 14.5px; transition: transform .45s cubic-bezier(.3, .8, .2, 1); }
  .obh .hello { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9.5px; margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 20.5px; color: #3D3D3A; transition: opacity .18s ease, transform .3s ease; }
  .obh .hello img { width: 26.5px; height: 26.5px; }
  .obh .hello.is-gone { opacity: 0; transform: translateY(-9.5px); }
  .obh .msg-u { align-self: flex-end; max-width: 85%; margin: 0; padding: 8.5px 14.5px; border-radius: 14.5px; background: rgba(11, 11, 11, .055); font-size: 15px; line-height: 1.45; color: rgba(0, 0, 0, .9); animation: obh-sent .22s ease-out; }
  @keyframes obh-sent { from { opacity: 0; transform: translateY(5px); } }
  .obh .msg-a { margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; line-height: 1.5; color: #1F1E1D; }
  .obh .msg-a b { font-weight: 600; }
  .obh .call { display: inline-flex; align-self: flex-start; align-items: center; gap: 8.5px; max-width: 100%; margin: 0; padding: 6px 12px 6px 9.5px; border: 1px solid #E8E6DD; border-radius: 11px; background: #FAF9F5; font-size: 14px; color: #6B6A63; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .obh .call img { width: 15.5px; height: 15.5px; }
  .obh .call code { font-family: var(--mono); font-size: 13px; color: #1F1E1D; }
  .obh .call svg { width: 11px; height: 11px; color: #A8A69C; }
  .obh .call.is-run span { background: linear-gradient(90deg, #8D8B83 0%, #C9C6BB 45%, #8D8B83 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: obh-shimmer 1.2s linear infinite; }
  @keyframes obh-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
  .obh .spark { display: block; width: 21.5px; height: 21.5px; margin: 2px 0 0; }
  .obh .spark img { width: 21.5px; height: 21.5px; transition: transform .3s ease; }
  .obh .spark.is-live img { animation: obh-spark 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
  @keyframes obh-spark { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(.82); } 100% { transform: rotate(180deg) scale(1); } }
  .obh .spark.thk { display: flex; align-items: center; gap: 11px; width: auto; height: 21.5px; font-size: 15px; }
  .obh .thk .dots { position: relative; flex: none; width: 17px; height: 14.5px; }
  .obh .thk .dots i { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #D97757; animation: obh-dots 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
  .obh .thk .dots i:nth-child(2) { animation-delay: -.5s; }
  .obh .thk .dots i:nth-child(3) { animation-delay: -1s; }
  @keyframes obh-dots { 0%, 100% { transform: translate(3.5px, 5px) scale(.72); } 33% { transform: translate(13px, 3.5px) scale(.72); } 66% { transform: translate(8.5px, 11px) scale(1); } }
  .obh .thk span { white-space: nowrap; background: linear-gradient(90deg, #73726C 0%, #73726C 35%, #C4C2B8 50%, #73726C 65%, #73726C 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: obh-shimmer 1.8s linear infinite; }
  .obh .compose { position: relative; flex: none; margin: 0 14.5px 14.5px; border: 1px solid #E5E3DA; border-radius: 19px; background: #fff; box-shadow: 0 2px 9.5px rgba(31, 30, 29, .06); overflow: hidden; transition: height .18s ease, border-color .2s ease; }
  .obh .compose.is-typing { border-color: #D6D3C8; }
  .obh .cmp-in { position: absolute; left: 0; right: 0; bottom: 0; padding: 11px 9.5px 8.5px 14.5px; }
  .obh .cmp-t { position: relative; min-height: 21.5px; max-height: 110.5px; margin: 0; overflow: hidden; font-size: 15px; line-height: 21.5px; color: #1F1E1D; }
  .obh .cmp-ph { position: absolute; left: 0; top: 0; color: #9C9A92; pointer-events: none; }
  .obh .compose.is-typing .cmp-ph { display: none; }
  .obh .cmp-caret { display: none; width: 1.5px; height: 17px; margin-left: 1px; vertical-align: -2px; background: #1F1E1D; animation: obh-blink 1s steps(1) infinite; }
  .obh .compose.is-typing .cmp-caret { display: inline-block; }
  @keyframes obh-blink { 50% { opacity: 0; } }
  .obh .cmp-row { display: flex; align-items: center; gap: 9.5px; margin: 7px 0 0; }
  .obh .cmp-plus { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8.5px; border: 1px solid #E5E3DA; color: #6B6A63; }
  .obh .cmp-plus svg { width: 14.5px; height: 14.5px; }
  .obh .cmp-row b { margin-left: auto; font-size: 13px; font-weight: 500; color: #6B6A63; }
  .obh .cmp-send { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9.5px; background: #E9C6B6; transition: background-color .2s ease, transform .15s ease; }
  .obh .cmp-send svg { width: 14.5px; height: 14.5px; color: #fff; }
  .obh .compose.is-typing .cmp-send { background: #C96442; }
  .obh .cmp-send.is-press { transform: scale(.86); }
  .obh .apx { flex: 1; min-height: 0; display: flex; background: #F9FAFA; }
  .obh .rail { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 53px; padding-top: 12px; }
  .obh .rail-logo { width: 21.5px; height: 21.5px; margin-bottom: 9.5px; }
  .obh .rail span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--secondary); }
  .obh .rail span.is-cur { background: #E6EBED; color: var(--ink); }
  .obh .rail svg { width: 19px; height: 19px; }
  .obh .card { flex: 1; min-width: 0; display: flex; flex-direction: column; margin: 9.5px 9.5px 0 0; border: 1px solid #DAE1E4; border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--bg); }
  .obh .card-h { flex: none; display: flex; align-items: center; gap: 8.5px; height: 48px; margin: 0; padding: 0 17px; border-bottom: 1px solid var(--line); }
  .obh .card-h img { width: 17px; height: 17px; }
  .obh .card-h b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .obh .card-h small { margin-left: auto; flex: none; font-size: 13px; color: var(--muted); }
  .obh .pane-app .pane-b { gap: 0; padding: 5px 17px 14.5px; }
  .obh .wth { display: flex; justify-content: space-between; padding: 11px 0 8.5px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--muted); }
  .obh .wr { display: grid; grid-template-columns: 19px minmax(0, 1fr) 33.5px; align-items: center; gap: 12px; min-height: 62.5px; border-bottom: 1px solid var(--line); }
  .obh .wr > svg { width: 18px; height: 18px; color: var(--secondary); }
  .obh .wr .nm { display: grid; gap: 2px; min-width: 0; }
  .obh .wr .nm b { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
  .obh .wr .tr { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; color: var(--secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .obh .wr .tr img { flex: none; width: 14.5px; height: 14.5px; }
  .obh .wr .tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .obh .wr.is-new { margin: 0 -17px; padding: 0 17px; animation: obh-rowin 3.2s ease forwards; }
  @keyframes obh-rowin { 0%, 35% { background: #EEF2FE; } 100% { background: rgba(238, 242, 254, 0); } }
  .obh .sw { flex: none; position: relative; width: 33.5px; height: 19px; border-radius: 119px; background: var(--off); transition: background-color .3s ease; }
  .obh .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14.5px; height: 14.5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transition: transform .3s ease; }
  .obh .sw.is-on { background: var(--ink); }
  .obh .sw.is-on::after { transform: translateX(14.5px); }
  .obh .tag-new { padding: 1px 7px; border-radius: 119px; background: #E9EEFD; color: #3550C8; font-size: 12px; font-weight: 600; line-height: 18px; }
  .obh .prog { display: grid; gap: 11px; padding: 14.5px 0 12px; }
  .obh .count { align-self: flex-start; }
  .obh .todo { display: flex; align-items: center; gap: 11px; font-size: 15px; }
  .obh .todo i { flex: none; position: relative; width: 17px; height: 17px; border-radius: 50%; background: #D3CED9; }
  .obh .todo.is-done i { background: #141C20; }
  .obh .todo.is-done i::after { content: ''; position: absolute; left: 5.5px; top: 3px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
  .obh .todo.is-done > span { color: var(--secondary); }
  .obh .todo.is-wait i { background: #ECBAFC; }
  .obh .todo img { width: 15.5px; height: 15.5px; margin-left: auto; }
  .obh .todo small { display: inline-flex; align-items: center; gap: 5px; margin-left: 7px; font-size: 13px; color: var(--pink); }
  .obh .count { justify-self: start; margin-top: 2px; padding: 3.5px 12px; border: 1px solid var(--line); border-radius: 119px; font-size: 13px; color: var(--secondary); }
  .obh .count b { color: var(--pink); font-weight: 600; }
  .obh .appr { display: grid; gap: 7px; padding: 9.5px 12px 11px; border: 1px solid var(--line); border-radius: 12px; font-size: 14.5px; box-shadow: 0 7px 19px -14.5px rgba(20, 28, 32, .35); }
  .obh .appr > * { min-width: 0; }
  .obh .appr-k { font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .obh .appr-h { display: flex; align-items: center; gap: 7px; font-weight: 600; }
  .obh .appr-h i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
  .obh .appr-o { display: flex; align-items: center; gap: 7px; }
  .obh .appr-o em { flex: 1; min-width: 0; padding: 5px 9.5px; border: 1px solid var(--line); border-radius: 9.5px; font-style: normal; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .obh .appr-o em b { margin-right: 6px; color: var(--muted); font-weight: 500; }
  .obh .appr-s { flex: none; padding: 5px 12px; border-radius: 9.5px; background: var(--blue); color: #fff; font-weight: 600; }
  .obh .card-prog { display: grid; place-items: center; color: var(--ink); }
  .obh .card-prog svg { width: 19px; height: 19px; }
  .obh .pane-app .gi > div > .ptrig:first-child, .obh #obh-pane-app > .ptrig:first-child { margin-top: 17px; }
  .obh .pane-app .gi > div > .ptodo:first-child { margin-top: 0; }
  .obh .ptrig, .obh .ptodo { position: relative; display: flex; align-items: flex-start; gap: 14.5px; margin: 0; padding-bottom: 19px; font-size: 15.5px; line-height: 21.5px; font-weight: 600; color: #141C20; }
  .obh .ptrig::after, .obh .ptodo::after { content: ''; position: absolute; left: 8.5px; top: 20px; bottom: 0; width: 1px; background: #CFD8DC; }
  .obh .ptodo::before { content: ''; position: absolute; left: 8.5px; top: 0; height: 2px; width: 1px; background: #CFD8DC; }
  .obh .pane-app .gi:last-child .ptrig::after, .obh .ptodo:last-child::after { display: none; }
  .obh .ptrig i { flex: none; display: grid; place-items: center; width: 18px; height: 21.5px; }
  .obh .ptrig img { width: 18px; height: 18px; }
  .obh .ptodo i { flex: none; position: relative; width: 18px; height: 18px; margin-top: 1.5px; border-radius: 50%; background: #D3CED9; transition: background-color .3s ease; }
  .obh .ptodo.is-prog i, .obh .ptodo.is-wait i { background: #ECBAFC; }
  .obh .ptodo.is-prog i { animation: obh-pdot 1.1s ease-in-out infinite; }
  @keyframes obh-pdot { 50% { background: #DC95F3; } }
  .obh .ptodo.is-done i { background: #141C20; animation: none; transition: background-color .25s ease; }
  .obh .ptodo.is-done i::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M19.9375%206.15241C20.1297%206.6702%2019.8657%207.2457%2019.3479%207.43782C18.289%207.83068%2017.1274%208.64841%2015.9514%209.72885C14.7866%2010.799%2013.6641%2012.074%2012.6793%2013.3107C11.6965%2014.5449%2010.8631%2015.7254%2010.2751%2016.5981C9.98143%2017.0339%209.74984%2017.3917%209.59237%2017.6394C9.51365%2017.7632%209.45351%2017.8594%209.41344%2017.924L9.36861%2017.9966L9.35785%2018.0142L9.35545%2018.0182C9.17177%2018.3209%208.84114%2018.5048%208.48701%2018.5002C8.13282%2018.4956%207.8075%2018.304%207.63176%2017.9964C6.68252%2016.3352%205.89836%2015.5873%205.42654%2015.257C5.19208%2015.0929%205.03257%2015.0302%204.96242%2015.0079C4.94586%2015.0026%204.93369%2014.9994%204.92605%2014.9976C4.4083%2014.9597%204%2014.5277%204%2014.0003C4%2013.448%204.44772%2013.0003%205%2013.0003C5.118%2013.0082%205.39696%2013.0397%205.56883%2013.102C5.84243%2013.1891%206.18292%2013.3452%206.57346%2013.6185C7.13325%2014.0104%207.79014%2014.6389%208.5059%2015.6453C8.54176%2015.5916%208.57862%2015.5367%208.61646%2015.4805C9.22514%2014.5772%2010.0902%2013.3515%2011.1148%2012.0648C12.1374%2010.7807%2013.3311%209.42028%2014.5983%208.25607C15.8543%207.10213%2017.2404%206.08653%2018.6521%205.56272C19.1699%205.37061%2019.7454%205.63462%2019.9375%206.15241Z%22/%3E%3C/svg%3E") center / 13px 13px no-repeat; }
  .obh .ptodo span { min-width: 0; transition: color .3s ease; }
  .obh .ptodo:not(.is-done):not(.is-prog):not(.is-wait) span { color: #8A979D; }
  .obh .ptodo small { display: flex; align-items: center; gap: 5px; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; font-size: 14px; font-weight: 500; color: #BF27BF; transition: max-height .4s ease, margin-top .4s ease, opacity .4s ease; }
  .obh .ptodo.is-wait small { max-height: 24px; margin-top: 3.5px; opacity: 1; }
  .obh .ptodo small svg { width: 13px; height: 13px; }
  .obh #obh-pane-app { transition: opacity .25s ease; }
  .obh #obh-pane-app.is-out { opacity: 0; }
  .obh .stabs { display: flex; align-items: center; gap: 17px; margin: 12px 0 5px; font-size: 15px; color: var(--muted); }
  .obh .stabs b { font-weight: 600; color: var(--ink); }
  .obh .stabs em { margin-left: auto; font-size: 13px; }
  .obh .srow { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 -17px; padding: 9.5px 17px; border-bottom: 1px solid var(--line); transition: background-color .3s ease; }
  .obh .srow > img { flex: none; width: 19px; height: 19px; }
  .obh .srow span { flex: 1; min-width: 0; }
  .obh .srow b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .obh .srow small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  .obh .srow.is-read { background: #F1F4FE; box-shadow: inset 2px 0 0 var(--blue); }
  .obh .sst { flex: none; padding: 0 8.5px; font-style: normal; border-radius: 119px; font-size: 12px; font-weight: 600; line-height: 20.5px; }
  .obh .sst-done { background: var(--ok-soft); color: #17643E; }
  .obh .sst-wait { background: #F1F3F4; color: var(--secondary); }
  .obh .sst-await { background: #F6E8FC; color: #8E2BAE; }
  .obh .card { position: relative; }
  .obh .apv { padding-top: 14.5px; }
  .obh .apv .apv-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 9.5px; font-size: 15.5px; color: #141C20; }
  .obh .apv-h b { font-weight: 600; }
  .obh .apv-h small { font-size: 14px; font-weight: 500; color: #7C8B91; }
  .obh .apv-b { display: none; }
  .obh .apv.is-approved .apv-a { display: none; }
  .obh .apv.is-approved .apv-b { display: inline; }
  .obh .apv.is-approved .apv-h small { visibility: hidden; }
  .obh .apv-c { padding: 14.5px 17px 17px; border: 1px solid #E6EBED; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(20, 28, 32, .04), 0 9.5px 21.5px -14.5px rgba(20, 28, 32, .22); }
  .obh .apv .apv-k { margin: 0 0 7px; font-size: 13px; font-weight: 500; color: #7C8B91; }
  .obh .apv .apv-q { display: flex; align-items: flex-start; gap: 9.5px; margin: 0; font-size: 15.5px; line-height: 21.5px; font-weight: 600; color: #141C20; }
  .obh .apv-q i { flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: #4C6BEE; }
  .obh .apv .apv-x { margin: 3.5px 0 14.5px 17px; font-size: 14px; line-height: 19px; color: #7C8B91; }
  .obh .apv-ol { border: 1px solid #E6EBED; border-radius: 9.5px; overflow: hidden; }
  .obh .apv .apv-o { display: flex; align-items: center; gap: 12px; height: 38.5px; margin: 0; padding: 0 12px; border-top: 1px solid #EEF1F2; font-size: 15px; color: #141C20; transition: background-color .2s ease; }
  .obh .apv-o:first-child { border-top: 0; }
  .obh .apv-o em { width: 9.5px; font-style: normal; font-size: 14.5px; color: #7C8B91; }
  .obh .apv-o::after { content: ''; width: 17px; height: 17px; margin-left: auto; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.4, .5, 1); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234C6BEE%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012.5l4.5%204.5L19%207%22/%3E%3C/svg%3E") center / 17px no-repeat; }
  .obh .apv-o.is-picked { background: #F4F6FF; }
  .obh .apv-o.is-picked::after { opacity: 1; transform: none; }
  .obh .apv .apv-s { display: grid; place-items: center; height: 38.5px; margin: 14.5px 0 0; border-radius: 9.5px; background: #4C6BEE; color: #fff; font-size: 15px; font-weight: 600; transition: background-color .25s ease; }
  .obh .apv-s-b { display: none; align-items: center; gap: 7px; }
  .obh .apv-s-b svg { width: 15.5px; height: 15.5px; color: #fff; }
  .obh .apv.is-approved .apv-s { background: var(--ok); }
  .obh .apv.is-approved .apv-s-a { display: none; }
  .obh .apv.is-approved .apv-s-b { display: inline-flex; }
  .obh .ptodo small.is-note { max-height: 24px; margin-top: 3.5px; opacity: 1; color: var(--muted); }
  .obh .ap-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 17px; height: 24px; opacity: 0; pointer-events: none; transition: transform .75s cubic-bezier(.3, .8, .2, 1), opacity .25s ease; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Cpath d='M1 1v15l4-3.6 2.6 6 2.4-1-2.6-6H13z' fill='%23111' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; }
  .obh .ap-cursor.is-on { opacity: 1; }
  .obh .ap-cursor.is-press { scale: .85; }
  .obh .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9.5px; padding-top: 14.5px; }
  .obh .stats p { padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; }
  .obh .stats b { display: block; font-size: 21.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .obh .stats small { font-size: 13px; color: var(--muted); }
  .obh .md { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .obh .md-h { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 13px; font-weight: 600; color: var(--secondary); }
  .obh .md-h small { font-weight: 500; color: var(--ok); }
  .obh .md-b { padding: 9.5px 12px; font-size: 14.5px; line-height: 1.55; }
  .obh .md-b ins { text-decoration: none; background: #E3F5EA; color: #17643E; padding: 0 2px; border-radius: 3.5px; }
  .obh .example { position: absolute; right: 21.5px; top: 5px; font-size: 13px; color: var(--muted); }
  .obh .beat-cap { grid-column: 1 / -1; margin: 17px 0 0; min-height: 25px; text-align: center; font-size: 17px; color: var(--secondary); }
  .obh .beat-cap b { color: var(--ink); font-weight: 600; }
  @keyframes obh-wire-v { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - 9.5px); opacity: 0; } }
}

/* ---------- on the landing page (Dom, 3 Nov 2026: "remove box background, improve the
   whole header"): no box around the example, so it sits on the hero's own background;
   the two windows are product screens, so they carry the site's ink outline and the
   hero shadow (see the screens rule); the beat bar stays light, its line in the site's
   pink to violet, as the hero tabs and the video players draw it ---------- */
.obh { margin-top: 72px; }
.obh .stage { padding: 0; border: 0; border-radius: 0; background: none; }
.obh .pane { border: 1.5px solid #16121A; border-radius: 14px; box-shadow: 0 24px 50px -20px rgba(17, 24, 39, .22), 0 2px 6px -2px rgba(17, 24, 39, .06); }
.obh .win { background: #F4F5F7; }
.obh .beats { box-shadow: 0 10px 28px -18px rgba(17, 24, 39, .28), 0 1px 2px rgba(17, 24, 39, .04); }
.obh .beat .fill { background: linear-gradient(90deg, #D53BD5, #8B5CF6); }
.obh .beat[aria-selected="true"] > b { color: #fff; background: #16121A; box-shadow: none; }
.obh .wire-node { box-shadow: 0 0 0 1.5px #16121A, 0 10px 22px -10px rgba(17, 24, 39, .35); }
@media (min-width: 1000px) {
  .obh { margin-top: 80px; }
  .obh .stage { padding: 0; border: 0; background: none; }
  .obh .pane { border-radius: 18px; }
  .obh .beats { margin-bottom: 28px; }
}
@media (max-width: 680px) {
  .obh { margin-top: 48px; }
  .obh .stage { padding: 0; }
}

/* ---------- step 1 ends on the new workflow's page (Dom, 3 Nov 2026), as the app shows it on
   its Workflow tab: "← Name", the description, Workflow | Settings, access and trigger, then the
   PROCESS.md in a white card, read in line by line. Sizes in em, so they follow the stage ---------- */
.obh .card-h .wf-back { flex: none; width: 1.05em; height: 1.05em; margin-right: .35em; vertical-align: -.18em; color: var(--secondary); }
.obh .pane-b .wfp-desc { margin: 1.05em 0 0; font-size: .9em; line-height: 1.4; color: var(--muted); }
.obh .pane-b .wfp-tabs { display: flex; gap: 1.7em; margin: 1.15em 0 0; border-bottom: 1px solid var(--line); font-size: .9em; }
.obh .pane-b .wfp-tabs span { position: relative; padding: 0 0 .7em; color: var(--secondary); }
.obh .pane-b .wfp-tabs span.is-cur { font-weight: 600; color: var(--ink); }
.obh .pane-b .wfp-tabs span.is-cur::after { content: ''; position: absolute; left: -.15em; right: -.15em; bottom: -1px; height: 2px; border-radius: 2px; background: var(--blue); }
.obh .pane-b .wfp-meta { display: flex; flex-wrap: wrap; gap: .35em 1.5em; margin: 1.05em 0 1em; font-size: .82em; color: var(--muted); }
.obh .pane-b .wfp-meta span { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.obh .pane-b .wfp-meta b { font-weight: 500; color: var(--ink); }
.obh .pane-b .wfp-meta img { width: 1.05em; height: 1.05em; }
.obh .pane-b .wfp-doc { border: 1px solid var(--line); border-radius: .75em; background: #fff; box-shadow: 0 1px 2px rgba(20, 28, 32, .04), 0 6px 16px -12px rgba(20, 28, 32, .18); overflow: hidden; }
.obh .pane-b .wfp-doc-h { display: flex; align-items: center; justify-content: space-between; padding: .55em .8em; border-bottom: 1px solid var(--line); background: var(--soft); font-size: .8em; }
.obh .pane-b .wfp-chip { display: inline-flex; align-items: center; gap: .35em; padding: .2em .55em; border: 1px solid var(--field); border-radius: .5em; background: #fff; font-family: var(--mono); font-size: .95em; color: var(--ink); }
.obh .pane-b .wfp-chip svg { width: .85em; height: .85em; color: var(--muted); }
.obh .pane-b .wfp-doc-h small { color: var(--muted); }
.obh .pane-b .wfp-md { display: grid; gap: .4em; padding: .95em 1.05em 1.1em; font-size: .82em; line-height: 1.5; }
.obh .pane-b .wl { margin: 0; opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .35s ease; }
.obh .pane-b .wl.is-on { opacity: 1; transform: none; }
.obh .pane-b .wl-h { margin-top: .6em; font-size: 1.08em; font-weight: 600; color: var(--ink); }
.obh .pane-b .wl-h:first-child { margin-top: 0; }
.obh .pane-b .wl b { font-weight: 600; color: #9B1C31; }   /* a bold lead phrase renders dark red, as in the app */
.obh .pane-b .wl-t { display: flex; align-items: center; gap: .5em; }
.obh .pane-b .wl-t i { flex: none; width: .85em; height: .85em; border: 1.5px solid var(--field); border-radius: .22em; }

/* ---------- the Askpilot window stands out (Dom, 3 Nov 2026: "highlight the Askpilot box, it is the
   important one"): its outline is a ring in the logo's colours, with a soft glow of them behind it,
   and its title bar carries the logo; the Claude window keeps the plain ink outline ---------- */
.obh .pane-app {
  border: 2px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(135deg, #EE844C 0%, #EE4CEE 48%, #4C6BEE 100%) border-box;
  box-shadow: 0 30px 60px -30px rgba(213, 59, 213, .42), 0 26px 54px -30px rgba(76, 107, 238, .45), 0 2px 6px -2px rgba(17, 24, 39, .08);
}
.obh .pane-app .win { border-radius: 12px 12px 0 0; }
.obh .pane-app .win-t { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: #4B5563; }
.obh .pane-app .win-t img { width: 12px; height: 12px; }
@media (min-width: 1000px) {
  .obh .pane-app .win { border-radius: 16px 16px 0 0; }
  .obh .pane-app .win-t img { width: 14px; height: 14px; }
}

/* a clicked beat tab shows no focus ring; the keyboard still gets one */
.obh .beat:focus { outline: none; }
.obh .beat:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* on phones the beat's line is "with your agent" (Dom, 3 Nov 2026) */
@media (max-width: 680px) { .obh .beat-long { display: none; } }

/* ---------- step 2's end (Dom, 3 Nov 2026): Claude reads the session through Askpilot MCP, so the
   Askpilot window shows it: a badge in the card's header while Claude reads, and each row lights up
   in Claude's orange as it is read ---------- */
.obh .card-h small:has(.rd) { display: inline-flex; }
.obh .rd { display: inline-flex; align-items: center; gap: .35em; padding: .2em .6em .2em .45em; border: 1px solid #EED9CF; border-radius: 99px; background: #FBF5F1; font-size: .95em; font-weight: 500; color: #8A4B33; white-space: nowrap; animation: obh-rdin .35s ease; }
.obh .rd img { width: 1.05em; height: 1.05em; }
.obh .rd.is-live span { background: linear-gradient(90deg, #8A4B33 0%, #8A4B33 35%, #E2A48C 50%, #8A4B33 65%, #8A4B33 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: obh-shimmer 1.6s linear infinite; }
@keyframes obh-rdin { from { opacity: 0; transform: translateY(-3px); } }
.obh .ptrig > span, .obh .ptodo > span { border-radius: 4px; transition: background-color .25s ease, box-shadow .25s ease; }
.obh .ptrig.is-read > span, .obh .ptodo.is-read > span { background: rgba(217, 119, 87, .13); box-shadow: 0 0 0 4px rgba(217, 119, 87, .13); }
/* the workflow page keeps its full height (a clipped flex item would shrink to fit), so it can scroll */
.obh .pane-b > .wfp-desc, .obh .pane-b > .wfp-tabs, .obh .pane-b > .wfp-meta, .obh .pane-b > .wfp-doc { flex: none; }

/* ==== FULL APP (Dom, 3 Nov 2026): step 2 first shows the whole Askpilot web app running the
   session, Progress on the left and Activity on the right, then folds back to the split view
   at "Has Northgate paid yet?". The app's own styles, as the demo videos draw it from the
   real app (css/demo-apps.css, read live on app-dev on 1 Nov 2026), scoped under .obh .apf.
   It is drawn at the app's real size and scaled to the window (js/hero-ob.js). ==== */
.obh .apf .dv-in { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1), opacity .32s ease, margin .45s cubic-bezier(.2, .8, .2, 1); }
.obh .apf .dv-in > * { min-height: 0; overflow: hidden; }
.obh .apf .dv-in:not(.is-on) > * { padding-top: 0 !important; padding-bottom: 0 !important; border-top-width: 0 !important; border-bottom-width: 0 !important; }
.obh .apf .dv-in.is-on { grid-template-rows: 1fr; opacity: 1; }
.obh .apf .apf-app {
    display: flex; font-family: Geist, Inter, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; color: #141C20;
    background: linear-gradient(176deg, rgba(246, 244, 255, .3) .59%, rgba(255, 247, 253, .3) 31.09%, rgba(247, 255, 255, .3) 67.31%, rgba(250, 255, 250, .3) 99.7%), #fff;
}
.obh .apf .apf-app svg { stroke-width: 1.6; }
.obh .apf .apx-side {
    flex: none; display: flex; flex-direction: column; width: 268px; box-sizing: border-box; overflow: hidden; white-space: nowrap;
    transition: width .8s cubic-bezier(.3, .8, .2, 1), opacity .45s ease;
}
.obh .apf .apx-org { display: flex; align-items: center; gap: 6px; height: 59px; padding: 16px 7px 7px 13px; }
.obh .apf .apx-org-logo { display: grid; place-items: center; flex: none; width: 30px; height: 30px; box-sizing: border-box; border: 1px solid #CFD8DC; border-radius: 12px; background: #1D2B53; font-size: 12px; font-weight: 700; color: #fff; }
.obh .apf .apx-org b { flex: 1; font-size: 14px; font-weight: 600; }
.obh .apf .apx-collapse { box-sizing: content-box; width: 16px; height: 16px; padding: 10px; color: #141C20; }
.obh .apf .apx-nav { display: grid; gap: 2px; margin-top: 5px; padding: 7px; }
.obh .apf .apx-nav span { display: flex; align-items: center; gap: 6px; height: 33px; padding: 0 12px; box-sizing: border-box; border-radius: 10px; font-size: 14px; transition: background-color .2s ease; }
.obh .apf .apx-nav svg { flex: none; width: 16px; height: 16px; stroke-width: 1.5; }
.obh .apf .apx-nav span.is-cur { background: #E6EBED; }
.obh .apf .apx-tabs { display: flex; gap: 8px; margin: 0 !important; padding: 0 12px 0 18px; height: 32px; align-items: center; font-size: 14px; }
.obh .apf .apx-tabs b { font-weight: 600; }
.obh .apf .apx-sess { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 7px; }
.obh .apf .apx-s { position: relative; display: flex; align-items: center; gap: 6px; min-height: 45px; padding: 7px 12px; box-sizing: border-box; border-radius: 10px; transition: background-color .3s ease; }
.obh .apf .apx-s > img, .obh .apf .apx-s > svg { position: absolute; left: 12px; top: 10px; width: 12px; height: 12px; color: #141C20; }
.obh .apf .apx-s > span { min-width: 0; flex: 1; }
.obh .apf .apx-s b { display: block; padding-left: 18px; font-size: 14px; line-height: 18px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.obh .apf .apx-s small { display: block; font-size: 10px; line-height: 13px; font-weight: 500; color: #7C8B91; }
.obh .apf .apx-s.is-sel { background: #E6EBED; }
.obh .apf .apx-s.is-hover:not(.is-sel) { background: #EFF2F3; }
.obh .apf .apx-s.is-ping { background: #EEF1FD; }
.obh .apf .apx-await { display: none; flex: none; padding: 2px 5px; border-radius: 999px; background: #B7C5FF; color: #1F3FC4; font-style: normal; font-size: 11px; line-height: 14px; font-weight: 500; }
.obh .apf .apx-s.is-await .apx-await { display: inline-block; }
.obh .apf .apx-user { display: flex; align-items: center; gap: 6px; margin: auto 0 0; padding: 15px 8px 15px 13px; border-top: 1px solid #E6EBED; }
.obh .apf .apx-uav { display: grid; place-items: center; flex: none; width: 30px; height: 30px; box-sizing: border-box; border: 1px solid #CFD8DC; border-radius: 12px; background: #F4F6FF; font-size: 10px; font-weight: 600; color: #141C20; }
.obh .apf .apx-user b { flex: 1; font-size: 14px; font-weight: 600; }
.obh .apf .apx-user svg { width: 16px; height: 16px; margin-right: 6px; color: #7C8B91; }
.obh .apf .apx-main {
    flex: 1; min-width: 0; margin: 12px 12px 0 0; padding: 39px 31px 0; box-sizing: border-box; overflow: hidden;
    border: 1px solid #DAE1E4; border-bottom: 0; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    transition: margin .8s cubic-bezier(.3, .8, .2, 1);
}
.obh .apf .apx-title { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.obh .apf .apx-title svg { width: 20px; height: 20px; color: #54626C; stroke-width: 1.7; }
.obh .apf .apx-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid #4C6BEE; border-radius: 10px; background: #4C6BEE; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease; }
.obh .apf .apx-btn.is-hover { background: #3D5AD6; border-color: #3D5AD6; }
.obh .apf .apx-btn-off { border-color: #C5CED3; background: #C5CED3; }
.obh .apf .apx-btn-g { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid #BFC6C9; border-radius: 10px; background: #fff; font-size: 14px; font-weight: 600; color: #141C20; }
.obh .apf .apx-btn-g svg { width: 15px; height: 15px; }
.obh .apf .apx-sw { position: relative; flex: none; display: inline-block; width: 30px; height: 17px; border-radius: 999px; background: #CFD8DC; transition: background-color .25s ease; }
.obh .apf .apx-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .25s ease; }
.obh .apf .apx-sw.is-on { background: #141C20; }
.obh .apf .apx-sw.is-on::after { left: 15px; }
.obh .apf .apx-pane-tools.is-off { display: none; }
.obh .apf .apx-pane-hooks { display: none; }
.obh .apf .apx-pane-hooks.is-on { display: block; }
.obh .apf .apx-setup-t { display: flex; gap: 6px; }
.obh .apf .apx-setup-t svg { flex: none; width: 12px; height: 12px; margin-top: 2px; color: #9AA6AC; }
.obh .apf .apx-setup-last { margin: 6px 0 0 18px !important; }
.obh .apf .apx-dlg-wrap { position: absolute; inset: 0; z-index: 8; display: none; background: rgba(40, 46, 50, .32); }
.obh .apf .apx-dlg-wrap.is-on { display: block; animation: dv-fade .2s ease; }
.obh .apf .apx-field-key .dp-val { letter-spacing: .1em; }
.obh .apf .apx-dlg-f { display: flex; justify-content: flex-end; gap: 10px; margin: 20px -16px 0 !important; padding: 14px 16px 16px; border-top: 1px solid #E6EBED; }
.obh .apf .apx-tools-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 28px !important; padding-bottom: 20px; border-bottom: 1px solid #E6EBED; }
.obh .apf .apx-search { display: flex; align-items: center; gap: 8px; width: 264px; height: 34px; padding: 0 12px; box-sizing: border-box; border: 1px solid #CFD8DC; border-radius: 10px; color: #9AA6AC; }
.obh .apf .apx-search svg { width: 15px; height: 15px; }
.obh .apf .apx-wth, .obh .apf .apx-wr { display: grid; grid-template-columns: 1.35fr .8fr 2.25fr 1.25fr 40px 30px; align-items: center; gap: 10px; padding: 0 16px; }
.obh .apf .apx-wth { height: 54px; border-bottom: 1px solid #E6EBED; font-weight: 600; }
.obh .apf .apx-wth span:nth-child(3), .obh .apf .apx-wth span:nth-child(4), .obh .apf .apx-wr > span:nth-child(3), .obh .apf .apx-wr > span:nth-child(4) { justify-content: flex-end; text-align: right; }
.obh .apf .apx-wr { height: 55px; transition: background-color 1.2s ease; }
.obh .apf .apx-wr > span { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obh .apf .apx-wr > span > svg { flex: none; width: 16px; height: 16px; }
.obh .apf .apx-wr > span:nth-child(2) svg { width: 15px; height: 15px; }
.obh .apf .apx-wr b { font-weight: 600; }
.obh .apf .apx-wr img { flex: none; width: 14px; height: 14px; }
.obh .apf .apx-wr > span:last-child svg { width: 16px; height: 16px; }
.obh .apf .apx-notrig { color: #9AA6AC; }
.obh .apf .apx-wr-new.is-flash { background: #EEF2FE; }
.obh .apf .apx-sessv { display: flex; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.obh .apf .apx-prog, .obh .apf .apx-sm { border: 1px solid #DAE1E4; border-bottom: 0; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
.obh .apf .apx-prog {
    position: relative; flex: none; width: 0; margin-right: 0; overflow: hidden; opacity: 0; border-width: 0;
    transition: width .7s cubic-bezier(.3, .8, .2, 1), margin .7s cubic-bezier(.3, .8, .2, 1), opacity .35s ease;
}
.obh .apf .apx-prog-in { position: relative; width: 412px; height: 100%; counter-reset: tdone ttot; }
.obh .apf .apx-proh { display: flex; align-items: center; gap: 8px; height: 43px; padding: 0 16px; border-bottom: 1px solid #E6EBED; white-space: nowrap; }
.obh .apf .apx-proh svg { flex: none; width: 16px; height: 16px; stroke-width: 1.5; color: #141C20; }
.obh .apf .apx-proh b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.obh .apf .apx-plist { padding: 20px 16px 0; }
.obh .apf .apx-plist .dv-in[data-k="t-list"] { transition: none; }
.obh .apf .apx-trig, .obh .apf .apx-todo { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; padding-bottom: 28px; font-weight: 600; line-height: 18px; color: #141C20; }
.obh .apf .apx-trig > i, .obh .apf .apx-todo > i { position: relative; height: 18px; }
.obh .apf .apx-trig > i > img, .obh .apf .apx-trig > i > svg { position: absolute; left: 2px; top: 3px; width: 12px; height: 12px; color: #141C20; stroke-width: 1.5; }
.obh .apf .apx-trig::after, .obh .apf .apx-todo::after { content: ''; position: absolute; left: 8px; top: 17px; bottom: 0; border-left: 1px solid #CFD8DC; }
.obh .apf .apx-todo::before { content: ''; position: absolute; left: 8px; top: 0; height: 3px; border-left: 1px solid #CFD8DC; }
.obh .apf .apx-todo.is-done::before { height: 1px; }
.obh .apf .apx-todo::after { top: 15px; }
.obh .apf .apx-todo.is-done::after { top: 17px; }
.obh .apf .apx-todo > i::before { content: ''; position: absolute; left: 4px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #D3CED9; }
.obh .apf .apx-todo.is-prog > i::before { background: #ECBAFC; }
.obh .apf .apx-todo.is-done > i::before {
    left: 2px; top: 3px; width: 12px; height: 12px; border-radius: 0; background: #141C20;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 12c0 6.63 5.37 12 12 12s12-5.37 12-12S18.63 0 12 0 0 5.38 0 12m17.22-4.17c.45.42.49 1.12.07 1.58l-6.14 6.7c-.21.22-.49.36-.8.36-.3 0-.6-.11-.81-.33l-2.79-2.79a1.11 1.11 0 0 1 0-1.58 1.11 1.11 0 0 1 1.58 0l1.97 1.97 5.35-5.84a1.12 1.12 0 0 1 1.58-.07z'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 12c0 6.63 5.37 12 12 12s12-5.37 12-12S18.63 0 12 0 0 5.38 0 12m17.22-4.17c.45.42.49 1.12.07 1.58l-6.14 6.7c-.21.22-.49.36-.8.36-.3 0-.6-.11-.81-.33l-2.79-2.79a1.11 1.11 0 0 1 0-1.58 1.11 1.11 0 0 1 1.58 0l1.97 1.97 5.35-5.84a1.12 1.12 0 0 1 1.58-.07z'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.obh .apf .apx-tl > .dv-in { transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1), opacity .32s ease; }
.obh .apf .apx-todo small { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 14px; line-height: 18px; font-weight: 400; color: #7C8B91; }
.obh .apf .apx-todo small svg { flex: none; width: 12px; height: 12px; color: #7C8B91; }
.obh .apf .apx-todo { counter-increment: ttot; }
.obh .apf .apx-todo.is-done { counter-increment: ttot tdone; }
.obh .apf .apx-pfoot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 28px 16px 16px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 20px); }
.obh .apf .apx-pfoot span { padding: 8px 16px; border: 1px solid #CFD8DC; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); line-height: 18px; white-space: nowrap; }
.obh .apf .apx-pfoot b { font-weight: 600; }
.obh .apf .apx-pn::before { content: counter(tdone); color: #BF27BF; }
.obh .apf .apx-pt::before { content: counter(ttot); }
.obh .apf .apx-sm { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.obh .apf .apx-sh { flex: none; display: flex; align-items: center; gap: 10px; height: 43px; padding: 0 16px; border-bottom: 1px solid #E6EBED; }
.obh .apf .apx-sh b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obh .apf .apx-sh-a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.obh .apf .apx-sh-a > img, .obh .apf .apx-sh-a > svg { flex: none; width: 14px; height: 14px; color: #141C20; stroke-width: 1.5; }
.obh .apf .apx-sh-b { display: none; flex: 1; }
.obh .apf .apx-ar { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 7px; box-sizing: border-box; border: 1px solid #BFC6C9; border-radius: 10px; background: #fff; font-size: 12px; font-weight: 600; color: #7C8B91; white-space: nowrap; }
.obh .apf .apx-ar svg { width: 12px; height: 12px; }
.obh .apf .apx-ar.is-off { display: none; }
.obh .apf .apx-mark-done { display: grid; place-items: center; flex: none; width: 26px; height: 26px; box-sizing: border-box; border: 1px solid #BFC6C9; border-radius: 10px; background: #fff; }
.obh .apf .apx-mark-done svg { width: 12px; height: 12px; }
.obh .apf .apx-feed { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.obh .apf .apx-feed-in { flex: none; width: 100%; max-width: 792px; min-height: 100%; margin: 0 auto; padding: 16px 16px 40px; box-sizing: border-box; line-height: 18px; }
.obh .apf .apx-feed-in > .dv-in.is-on { margin-bottom: 20px; }
.obh .apf .apx-feed-in > .dv-in > *, .obh .apf .apx-feed-in .dv-in > .apx-body { padding: 0 8px 8px; margin: 0 -8px -8px; }
.obh .apf .apx-mh { display: flex; align-items: center; gap: 10px; }
.obh .apf .apx-mh b { font-weight: 600; }
.obh .apf .apx-mh time { margin-left: -6px; font-size: 12px; color: #7C8B91; }
.obh .apf .apx-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; box-sizing: border-box; border: 1px solid #CFD8DC; border-radius: 12px; background: #fff; }
.obh .apf .apx-av img { width: 16px; height: 16px; }
.obh .apf .apx-ask > .apx-mh .apx-av { background: #F8FAFB; }
.obh .apf .apx-ask > .apx-mh .apx-av img { width: 14px; height: 14px; }
.obh .apf .apx-av-me { background: #F4F6FF; font-size: 10px; font-weight: 600; }
.obh .apf .apx-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px !important; }
.obh .apf .apx-link svg { width: 10px; height: 10px; color: #7C8B91; stroke-width: 2; }
.obh .apf .apx-link-s { font-size: 12px; color: #7C8B91; }
.obh .apf .apx-worked { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px !important; color: #7C8B91; }
.obh .apf .apx-worked svg { width: 10px; height: 10px; stroke-width: 2; transition: transform .3s ease; }
.obh .apf .apx-w-live { display: none; }
.obh .apf .apx-ask.is-working .apx-w-live { display: inline; background: linear-gradient(90deg, #9AA6AC 0%, #9AA6AC 38%, #141C20 50%, #9AA6AC 62%, #9AA6AC 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: obh-dv-shine 1.5s linear infinite; }
.obh .apf .apx-ask.is-working .apx-w-done { display: none; }
.obh .apf .apx-ask.is-working .apx-worked svg { transform: rotate(90deg); }
.obh .apf .apx-rsteps { display: grid; gap: 6px; padding-top: 12px; }
.obh .apf .apx-step { display: flex; align-items: center; gap: 6px; height: 25px; white-space: nowrap; }
.obh .apf .apx-step img { flex: none; width: 14px; height: 14px; }
.obh .apf .apx-step .apx-mark { width: 16px; height: 16px; margin: 0 12px 0 6px; filter: grayscale(1) brightness(.35); }
.obh .apf .apx-step b { font-weight: 600; }
.obh .apf .apx-step svg { width: 10px; height: 10px; color: #141C20; stroke-width: 2; }
.obh .apf .apx-rsteps .is-live .apx-mark { animation: obh-apx-spin 1.2s linear infinite; }
@keyframes obh-apx-spin { to { transform: rotate(360deg); } }
.obh .apf .apx-body { padding-top: 12px; }
.obh .apf .apx-me .apx-body { padding-top: 10px; }
.obh .apf .apx-body p + p { margin-top: 8px !important; }
.obh .apf .apx-body i { font-style: italic; }
.obh .apf .apx-body .apx-sum-h { margin-top: 12px !important; font-size: 16px; line-height: 21px; font-weight: 600; }
.obh .apf .apx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.obh .apf .apx-body .apx-chips { margin-top: 15px !important; }
.obh .apf .apx-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #E6EBED; border-radius: 8px; font-size: 13px; line-height: 17px; font-weight: 600; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }
.obh .apf .apx-chips span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.obh .apf .apx-chips .is-g { background: #F8FFFE; }
.obh .apf .apx-chips .is-g::before { background: #00BFA5; }
.obh .apf .apx-chips .is-b { background: #F4F6FF; }
.obh .apf .apx-chips .is-b::before { background: #4C6BEE; }
.obh .apf .apx-chips .is-r { background: #FFF2F2; }
.obh .apf .apx-chips .is-r::before { background: #FF5B61; }
.obh .apf .apx-card { margin-top: 12px; border: 1px solid #E6EBED; border-radius: 10px; background: #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); overflow: hidden; }
.obh .apf .apx-card-h { padding: 15px 12px; line-height: 18px; color: #54626C; }
.obh .apf .apx-ci { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 6px; row-gap: 4px; padding: 12px; border-top: 1px solid #E6EBED; }
.obh .apf .apx-ci svg { width: 14px; height: 14px; margin-top: 2px; color: #00BFA5; }
.obh .apf .apx-ci > span { display: contents; }
.obh .apf .apx-ci b { font-weight: 600; }
.obh .apf .apx-ci small { grid-column: 1 / -1; font-size: 12px; line-height: 15px; color: #54626C; }
.obh .apf .apx-appr-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px !important; }
.obh .apf .apx-appr-h b { font-size: 18px; line-height: 24px; font-weight: 600; }
.obh .apf .apx-appr-h span { color: #7C8B91; }
.obh .apf .apx-appr-b { display: none; }
.obh .apf .apx-appr.is-approved .apx-appr-a, .obh .apf .apx-appr.is-approved .apx-appr-h span { display: none; }
.obh .apf .apx-appr.is-approved .apx-appr-b { display: inline; }
.obh .apf .apx-in { border: 1px solid #E6EBED; border-radius: 10px; background: #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); overflow: hidden; }
.obh .apf .apx-in-h { padding: 15px 12px; border-bottom: 1px solid #E6EBED; line-height: 18px; color: #54626C; }
.obh .apf .apx-in-b { display: grid; gap: 4px; padding: 12px; }
.obh .apf .apx-in-q { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 12px !important; font-weight: 600; }
.obh .apf .apx-in-q i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #4C6BEE; }
.obh .apf .apx-in-c { margin: -12px 0 12px !important; color: #54626C; }
.obh .apf .apx-opt { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; transition: background-color .2s ease, color .2s ease; }
.obh .apf .apx-opt em { width: 14px; font-style: normal; color: #7C8B91; }
.obh .apf .apx-opt svg { display: none; width: 14px; height: 14px; margin-left: auto; color: #4C6BEE; stroke-width: 2; }
.obh .apf .apx-opt.is-hover { background: #F8FAFB; }
.obh .apf .apx-opt.is-picked { background: #F8FAFB; }
.obh .apf .apx-opt.is-picked svg { display: block; }
.obh .apf .apx-opt-c { margin-top: 2px; color: #7C8B91; }
.obh .apf .apx-opt .apx-opt-pen { display: block; width: 14px; height: 14px; margin: 0; color: #7C8B91; }
.obh .apf .apx-appr.is-approved .apx-opt:not(.is-picked) { color: #9AA6AC; }
.obh .apf .apx-appr.is-approved .apx-opt.is-picked { background: none; }
.obh .apf .apx-in-f { padding: 12px; border-top: 1px solid #E6EBED; }
.obh .apf .apx-submit { display: grid; place-items: center; height: 34px; border-radius: 10px; background: #4C6BEE; font-weight: 600; color: #fff; transition: background-color .15s ease; }
.obh .apf .apx-submit.is-hover { background: #3D5AD6; }
.obh .apf .apx-submitted { display: none; align-items: center; justify-content: center; gap: 6px; height: 34px; font-weight: 600; }
.obh .apf .apx-submitted svg { width: 15px; height: 15px; color: #4C6BEE; }
.obh .apf .apx-appr.is-approved .apx-submit { display: none; }
.obh .apf .apx-appr.is-approved .apx-submitted { display: flex; }
.obh .apf .apx-compose { flex: none; width: 100%; max-width: 792px; margin: 0 auto; padding: 0 16px 12px; box-sizing: border-box; }
.obh .apf .apx-arpill { display: flex; align-items: center; gap: 5px; width: max-content; height: 24px; margin: 0 auto 8px !important; padding: 0 9px; border-radius: 999px; background: #4C6BEE; font-size: 12.5px; font-weight: 600; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.obh .apf .apx-arpill.is-on { opacity: 1; transform: none; }
.obh .apf .apx-arpill svg { width: 13px; height: 13px; stroke-width: 2; }
.obh .apf .apx-arpill .apx-ar-i { width: 12px; height: 12px; opacity: .75; }
.obh .apf .apx-ar-b { display: none; }
.obh .apf .apx-arpill.is-later .apx-ar-a { display: none; }
.obh .apf .apx-arpill.is-later .apx-ar-b { display: inline; }
.obh .apf .apx-cbox { padding: 12px 12px 11px; border: 1px solid #CFD8DC; border-radius: 18px; background: #fff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.obh .apf .apx-cbox p { line-height: 18px; color: #9AA6AC; }
.obh .apf .apx-srcs { display: inline-flex; align-items: center; gap: 6px; height: 29px; margin-top: 20px; padding: 0 10px; box-sizing: border-box; border: 1px solid #E6EBED; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 500; }
.obh .apf .apx-srcs svg { width: 12px; height: 12px; }
.obh .apf .apx-srcs .apx-srcs-i { width: 12px; height: 12px; color: #7C8B91; }
@keyframes obh-dv-shine { from { background-position: 100% 0; } to { background-position: -120% 0; } }
/* the hero's own: the canvas over the window, Progress always open, the last todo's line */
.obh .pane-app { position: relative; }
.obh .apf { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.obh .apf.is-on { opacity: 1; }
.obh .apf-app { position: absolute; left: 0; top: 0; transform-origin: 0 0; font-size: 14px; line-height: normal; letter-spacing: 0; }
.obh .apf .apx-main { margin: 12px 12px 0 0; }
.obh .apf .apx-sessv { display: none; }
.obh .apf.is-sess .apx-wfp { display: none; }
.obh .apf.is-sess .apx-sessv { display: flex; animation: obh-pagein .3s ease; }
@keyframes obh-pagein { from { opacity: 0; } }
/* the todos come in one by one once Progress opens, then the count under them */
.obh .apf .apx-todo { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.obh .apf .apx-todo.is-in { opacity: 1; transform: none; }
.obh .apf .apx-pfoot { opacity: 0; transition: opacity .4s ease; }
.obh .apf .apx-sessv.has-todos .apx-pfoot { opacity: 1; }
/* as in the app: one card (the trigger's icon and the session's name) until the todos come in,
   then Progress opens on the left and the card is titled Activity */
.obh .apf .apx-sessv.has-prog .apx-prog { width: 414px; margin-right: 12px; opacity: 1; border-width: 1px 1px 0; }
.obh .apf .apx-sessv.has-prog .apx-sh-a { display: none; }
.obh .apf .apx-sessv.has-prog .apx-sh-b { display: block; }
.obh .apf .apx-tl > .apx-todo:last-child { padding-bottom: 0; }
.obh .apf .apx-tl > .apx-todo:last-child::after { display: none; }
/* as in the app: the feed starts at the top, and once it is full it scrolls to the latest message */
.obh .apf .apx-feed { justify-content: flex-start; }
.obh .apf .apx-feed.is-scrolled { -webkit-mask-image: linear-gradient(transparent 0, #000 36px); mask-image: linear-gradient(transparent 0, #000 36px); }
.obh .apf .apx-feed-in { min-height: 0; padding-bottom: 20px; }
.obh .apf .apx-link .apx-wfn { margin-left: .3em; font-weight: 600; color: #141C20; }
.obh .apf.no-side .apx-side { display: none; }
.obh .apf.no-side .apx-main { margin-left: 12px; }
.obh .apf.no-prog .apx-prog { display: none; }
.obh .apf .apx-todo.is-wait > i::before { background: #ECBAFC; }
.obh .apf-cur { position: absolute; left: 0; top: 0; z-index: 9; width: 16px; height: 23px; opacity: 0; pointer-events: none; transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .3s ease, scale .14s ease; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Cpath d='M1 1v15l4-3.6 2.6 6 2.4-1-2.6-6H13z' fill='%23111' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; background-size: contain; }
.obh .apf-cur.is-on { opacity: 1; }
.obh .apf-cur.is-press { scale: .82; }
.obh .apf-cur.no-anim, .obh .ap-cursor.no-anim { transition: none; }
/* the compact window's pointer moves the same way */
.obh .ap-cursor { transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .3s ease, scale .14s ease; }
.obh .ap-cursor.is-press { scale: .82; }
/* the split view folds away: from 681px the Claude window and the link close and
   Askpilot widens over the whole stage; on phones the windows stay stacked and only the
   Askpilot window changes */
.obh .pane-app .apx { transition: opacity .35s ease; }
.obh .stage.is-full .pane-app .apx { opacity: 0; }
@media (min-width: 681px) {
  .obh .stage { grid-template-columns: 1fr 76px 1.12fr; transition: grid-template-columns .85s cubic-bezier(.45, 0, .2, 1); }
  .obh .pane-chat, .obh .wire { transition: opacity .35s ease; }
  .obh .stage.is-full { grid-template-columns: 0fr 0px 1fr; }
  .obh .stage.is-full .pane-chat, .obh .stage.is-full .wire { opacity: 0; }
  .obh .stage.is-full .pane-chat { border-width: 0; }
}
@media (min-width: 1000px) { .obh .stage { grid-template-columns: 1fr 91px 1.12fr; } .obh .stage.is-full { grid-template-columns: 0fr 0px 1fr; } }
/* ==== END FULL APP ==== */
/* the Progress line through the middle of each mark (marks are centred at 8px; a 1px line at 8px
   sat half a pixel to the right, which the scaled app made visible) */
.obh .apf .apx-trig::after, .obh .apf .apx-todo::after, .obh .apf .apx-todo::before { left: 7.5px; }

/* the pointers move by the translate property and press by scale around their tip, so a
   click shrinks the arrow in place instead of throwing it sideways (Dom, 3 Nov 2026) */
.obh .ap-cursor, .obh .apf-cur { transform: none; transform-origin: 2px 1px; transition: translate .8s cubic-bezier(.45, 0, .2, 1), opacity .3s ease, scale .12s ease; }
.obh .ap-cursor.no-anim, .obh .apf-cur.no-anim { transition: none; }
.obh .ap-cursor.is-press, .obh .apf-cur.is-press { scale: .86; }
@media (min-width: 1000px) { .obh .ap-cursor { transition: translate .8s cubic-bezier(.45, 0, .2, 1), opacity .3s ease, scale .12s ease; } }

/* the small arrows in the feed sit close to their words, as in the app */
.obh .apf .apx-link, .obh .apf .apx-worked { gap: 2px; }
.obh .apf .apx-link .apx-wfn { margin-left: .25em; }
.obh .apf .apx-step > svg:last-child { margin-left: -2px; }

/* step 3: the whole workflow page after the change, the changed rule marked in green */
.obh .pane-b .wl.wl-chg { margin: 0 -.5em; padding: .3em .5em; border-radius: .4em; background: #EEF8F2; box-shadow: inset 2px 0 0 #1F9D61; animation: obh-chg 1.6s ease; }
.obh .pane-b .wl-chg ins { text-decoration: none; padding: 0 .15em; border-radius: .2em; background: #CDEED9; color: #17643E; }
@keyframes obh-chg { 0%, 30% { background: #D5F0DF; } 100% { background: #EEF8F2; } }
.obh .pane-b .wfp-doc-h small.wfp-chg { font-weight: 600; color: var(--ok); }
/* on phones a little more room between a beat's title and its line (Dom, 3 Nov 2026) */
@media (max-width: 680px) { .obh .beat > span:not(.fill) { gap: 5px; } }
/* on phones the MCP link's box sits on the line, in the middle; its label to the right (Dom, 3 Nov 2026) */
@media (max-width: 680px) {
  .obh .wire { display: block; position: relative; }
  .obh .wire-hub { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-18px, -50%); }
}

/* ---------- the integration pages' section "One short chat, and your first workflow is live."
   (#first-workflow, Dom 5 Nov 2026): the same stage under a section title, after Grow
   without hiring; tools/new_hero.py first_workflow() writes it ---------- */
.fw { position: relative; padding: 104px 0 112px; border-top: 1px solid var(--line, #EAE3E1); }
.fw .sec-head { margin-bottom: 56px; }
/* no <br> (Dom): the width stops the first line after "first", and plain wrapping (not
   balance) keeps the first line the longer one at every width */
.fw .sec-title { max-width: 14.2em; margin-left: auto; margin-right: auto; text-wrap: wrap; }
.fw .obh { margin-top: 0; }
@media (max-width: 767px) {
    .fw { padding: 72px 0 80px; }
    .fw .sec-head { margin-bottom: 36px; }
}