/* Zenzo Analyst v2: livelier product page.
   Sections: hero motion · before/after · how-it-works stepper · capabilities bento ·
   live detail panels · logo wall models row · privacy flow · roadmap tabs. */

/* shared logo dot used inside the new components */
.ba-chips i, .sc-map .src i, .sc-pick .lgs i, .jn i, .ig-models .intg-chips i { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background: var(--c, #fff); font-style: normal; }
.ba-chips i img, .sc-map .src i img, .sc-pick .lgs i img { width: 10px; height: 10px; }
.ba-chips i.m img, .sc-map .src i.m img, .sc-pick .lgs i.m img, .jn i.m img { filter: brightness(0) invert(1); }
.ba-chips i.f img, .sc-map .src i.f img, .sc-pick .lgs i.f img { width: 14px; height: 14px; }

/* ── Hero: the answer window comes alive ── */
.mo .pv-live .pv-bars span.b i { animation: an2Grow 1.1s var(--ease) both; transform-origin: left; }
.mo .pv-live .pv-bars div:nth-child(2) span.b i { animation-delay: .12s; }
.mo .pv-live .pv-bars div:nth-child(3) span.b i { animation-delay: .24s; }
.mo .pv-live .pv-bars div:nth-child(4) span.b i { animation-delay: .36s; }
.mo .pv-live .pv-card, .mo .pv-live .pv-code, .mo .pv-live .pv-chips { animation: an2Up .7s var(--ease) both; }
.mo .pv-live .pv-card { animation-delay: .25s; }
.mo .pv-live .pv-code { animation-delay: .55s; }
.mo .pv-live .pv-chips { animation-delay: .8s; }
.mo .pv-live .pv-chip.ok { animation: an2Pulse 2.6s ease-in-out 1.6s infinite; }
@keyframes an2Grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes an2Up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes an2Pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } 50% { box-shadow: 0 0 0 5px rgba(74,222,128,.18); } }

/* ── Problem: before / after ── */
.ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.ba-col { position: relative; border-radius: 28px; padding: 28px; display: flex; flex-direction: column; overflow: hidden; }
.ba-old { background: #F5F4F2; border: 1px solid var(--bdr); }
.ba-new { background: linear-gradient(160deg, #FFF7ED 0%, #FFEDD5 100%); border: 1px solid #FED7AA; }
.ba-new::before { content: ""; position: absolute; inset: auto -30% -40% auto; width: 70%; height: 70%; background: radial-gradient(closest-side, rgba(249,115,22,.22), transparent); pointer-events: none; }
.ba-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ba-tag { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.ba-new .ba-tag { color: var(--or-dk); }
.ba-time { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 5px 12px; background: #fff; border: 1px solid var(--bdr); color: #B91C1C; }
.ba-new .ba-time { color: #15803D; border-color: #BBF7D0; }
.ba-time svg { width: 14px; height: 14px; }
.ba-thread { display: grid; gap: 10px; }
.ba-msg { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--bdr-l); }
.ba-msg .av { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.ba-msg .av.a1 { background: #7C3AED; } .ba-msg .av.a2 { background: #0F766E; }
.ba-msg b { display: block; font-size: 13px; font-weight: 600; color: var(--t1); }
.ba-msg b small { font-weight: 400; color: var(--t3); font-size: 11.5px; margin-left: 6px; }
.ba-msg p { font-size: 13.5px; line-height: 1.5; color: var(--t2); margin-top: 2px; }
.ba-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--t2); padding: 4px 10px; border-radius: 8px; background: #F0FDF4; border: 1px solid #BBF7D0; }
.ba-file svg { width: 13px; height: 13px; color: #15803D; }
.ba-ask { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #FED7AA; font-size: 14px; color: var(--t1); box-shadow: 0 12px 30px -24px rgba(194,87,10,.6); }
.ba-ask b { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; background: var(--or); color: #fff; display: flex; align-items: center; justify-content: center; }
.ba-ask b svg { width: 14px; height: 14px; }
.ba-ans { position: relative; margin-top: 10px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #FED7AA; }
.ba-ans-top { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.ba-ans-top .ok { display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: #15803D; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 999px; padding: 2px 9px; }
.ba-ans-top .ok svg { width: 11px; height: 11px; }
.ba-ans-h { font-size: 16px; font-weight: 600; line-height: 1.35; margin-top: 8px; color: var(--t1); }
.ba-ans-h em { font-style: normal; color: var(--or-dk); }
.ba-why { font-size: 13.5px; line-height: 1.5; color: var(--t2); margin-top: 6px; }
.ba-bars, .sc-bars { display: grid; gap: 7px; margin-top: 12px; }
.ba-bars div, .sc-bars div { display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 10px; font-size: 12px; color: var(--t2); }
.sc-bars div { grid-template-columns: 96px 1fr 44px; font-size: 12.5px; }
.ba-bars div span:last-child, .sc-bars div span:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--t1); }
.ba-bars .b, .sc-bars .b { height: 8px; border-radius: 4px; background: #F5F4F2; overflow: hidden; }
.ba-bars .b i, .sc-bars .b i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #EA580C, #FB923C); transform-origin: left; }
.ba-bars .b i.neg, .sc-bars .b i.neg { background: linear-gradient(90deg, #DC2626, #F87171); }
.ba-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ba-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t2); padding: 3px 9px 3px 4px; border-radius: 999px; background: #FAFAF9; border: 1px solid var(--bdr-l); }
.ba-chips span > svg { width: 12px; height: 12px; margin-left: 4px; color: var(--or-dk); }
.ba-chips i { width: 18px; height: 18px; }
.ba-list { list-style: none; display: grid; gap: 10px; margin-top: auto; padding-top: 20px; }
.ba-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--t2); }
.ba-list li b { color: var(--t1); font-weight: 600; }
.ba-list svg { flex-shrink: 0; width: 18px; height: 18px; padding: 3px; border-radius: 50%; margin-top: 2px; }
.ba-old .ba-list svg { transform: rotate(45deg); background: #FEE2E2; color: #B91C1C; }
.ba-new .ba-list svg { background: #DCFCE7; color: #15803D; }
.ba-old .ba-thread { position: relative; }
.ba-old .ba-thread::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30px; background: linear-gradient(transparent, #F5F4F2); pointer-events: none; }
/* reveal sequence */
.mo .ba .ba-msg { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--d) * .35s + .2s); }
.mo .ba.in .ba-msg { opacity: 1; transform: none; }
.mo .ba .ba-ans, .mo .ba .ba-new .ba-time { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: .9s; }
.mo .ba.in .ba-ans, .mo .ba.in .ba-new .ba-time { opacity: 1; transform: none; }
.mo .ba .ba-bars .b i { transform: scaleX(0); transition: transform .9s var(--ease) 1.2s; }
.mo .ba.in .ba-bars .b i { transform: none; }

/* ── How it works: stepper with a live product window ── */
.hx { position: relative; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px; align-items: stretch; }
.hx-steps { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hx-btn { width: 100%; text-align: left; display: grid; grid-template-columns: 34px 1fr; gap: 14px; position: relative; padding: 16px 18px; border-radius: 18px; border: 1px solid transparent; background: transparent; cursor: pointer; font: inherit; color: inherit; transition: background .25s, border-color .25s; overflow: hidden; }
.hx-btn:hover { background: #FAFAF9; }
.hx-step.on .hx-btn { background: #fff; border-color: var(--bdr); box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 18px 40px -30px rgba(60,20,0,.35); }
.hx-btn .n { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--t3); background: #F5F4F2; transition: background .25s, color .25s; }
.hx-step.on .hx-btn .n { background: var(--or); color: #fff; }
.hx-tt b { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--t2); line-height: 34px; transition: color .25s; }
.hx-step.on .hx-tt b { color: var(--t1); }
.hx-tt span { display: block; font-size: 14px; line-height: 1.55; color: var(--t3); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .3s; }
.hx-step.on .hx-tt span { max-height: 80px; opacity: 1; margin-top: 2px; }
.hx-bar { position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; border-radius: 2px; background: transparent; overflow: hidden; }
.hx-step.on .hx-bar { background: #F5F4F2; }
.hx-bar i { display: block; height: 100%; width: 0; background: var(--or); }
.hx.auto .hx-step.on .hx-bar i { animation: an2Prog var(--dur, 6s) linear forwards; }
.hx.paused .hx-step.on .hx-bar i { animation-play-state: paused; }
@keyframes an2Prog { to { width: 100%; } }
.hx-frame { grid-column: 2; grid-row: 1; min-height: 470px; border-radius: 24px; background: linear-gradient(160deg, #FFF7ED, #FFEDD5 55%, #FED7AA); border: 1px solid #FED7AA; padding: 18px; }
.hx-frame::after { content: ""; position: absolute; }
.hx-fbar { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 16px; border-radius: 16px 16px 0 0; background: #fff; border: 1px solid #FDE3C8; border-bottom-color: var(--bdr-l); }
.hx-fbar b { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.hx-fbar b img { width: 16px; height: 16px; }
.hx-fstep, .hx-mstep { font-size: 11.5px; color: var(--or-dk); background: #FFF4ED; border: 1px solid #FED7AA; border-radius: 999px; padding: 2px 10px; }
.hx-mbar { display: none; }
/* the scenes sit over the frame body on desktop */
.hx-scene { position: absolute; top: 62px; bottom: 18px; right: 18px; left: calc(min(400px, 40%) + 40px + 18px); border-radius: 0 0 16px 16px; background: #fff; border: 1px solid #FDE3C8; border-top: 0; padding: 22px 24px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; overflow: hidden; }
.hx-step.on .hx-scene { opacity: 1; visibility: visible; transition: opacity .35s; }
.sc-k { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin: 18px 0 10px; }
.sc-k:first-child { margin-top: 0; }
.sc-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 14px 18px; border-radius: 14px; border: 1.5px solid var(--or); background: #fff; box-shadow: 0 0 0 4px rgba(249,115,22,.1); font-size: 16px; color: var(--t1); min-height: 58px; }
.sc-q b { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--or); color: #fff; display: flex; align-items: center; justify-content: center; }
.sc-q b svg { width: 15px; height: 15px; }
.sc-type.typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--or); animation: an2Blink .8s steps(1) infinite; }
@keyframes an2Blink { 50% { opacity: 0; } }
.sc-chat { display: grid; gap: 8px; }
.sc-chat .me, .v-chat .me { justify-self: end; max-width: 80%; font-size: 13.5px; padding: 9px 14px; border-radius: 14px 14px 4px 14px; background: #1C1917; color: #fff; }
.sc-chat .bot, .v-chat .bot { justify-self: start; max-width: 85%; font-size: 13.5px; line-height: 1.5; padding: 9px 14px; border-radius: 14px 14px 14px 4px; background: #F5F4F2; color: var(--t2); }
.sc-sugg, .v-chat .fu { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sc-sugg span, .v-chat .fu span { font-size: 12.5px; color: var(--or-dk); padding: 5px 12px; border-radius: 999px; background: #FFF4ED; border: 1px solid #FED7AA; }
.sc-map { display: grid; gap: 8px; }
.mp { display: grid; grid-template-columns: 110px 16px 1fr 26px; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: #FAFAF9; border: 1px solid var(--bdr-l); font-size: 13.5px; }
.mp .w { color: var(--t1); font-weight: 500; }
.mp > svg { width: 14px; height: 14px; color: var(--or); }
.mp code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; color: var(--t2); }
.mp code.met { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-weight: 500; color: var(--or-dk); }
.mp code.met svg { width: 14px; height: 14px; }
.mp .src i, .sc-pick .lgs i { width: 24px; height: 24px; }
.sc-pick { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #F0FDF4; border: 1px solid #BBF7D0; font-size: 13.5px; color: var(--t2); }
.sc-pick > svg { width: 16px; height: 16px; color: #15803D; }
.sc-pick b { color: var(--t1); }
.sc-pick .lgs { margin-left: auto; display: flex; }
.sc-pick .lgs i { box-shadow: 0 0 0 2px #F0FDF4; }
.sc-pick .lgs i + i { margin-left: -6px; }
.sc-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; line-height: 1.8; color: #E7E5E4; background: #151311; border-radius: 14px; padding: 16px 18px; white-space: pre; overflow: hidden; }
.sc-code .kw { color: #FB923C; } .sc-code .fx { color: #4ADE80; } .sc-code .er { color: #F87171; }
.sc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sc-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); padding: 4px 10px; border-radius: 999px; background: #FAFAF9; border: 1px solid var(--bdr-l); }
.sc-meta svg { width: 13px; height: 13px; color: var(--or-dk); }
.sc-checks { display: grid; gap: 8px; }
.ck { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: #FAFAF9; border: 1px solid var(--bdr-l); }
.ck .ci { width: 34px; height: 34px; border-radius: 10px; background: #FFF4ED; color: var(--or-dk); display: flex; align-items: center; justify-content: center; }
.ck .ci svg { width: 16px; height: 16px; }
.ck b { display: block; font-size: 14px; font-weight: 600; color: var(--t1); }
.ck small { display: block; font-size: 12.5px; color: var(--t3); }
.ck .tk { width: 24px; height: 24px; border-radius: 50%; background: #DCFCE7; color: #15803D; display: flex; align-items: center; justify-content: center; }
.ck .tk svg { width: 12px; height: 12px; }
.ck.hl { background: #FFF7ED; border-color: #FED7AA; }
.sc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sc-acts span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--bdr); color: var(--t2); background: #fff; }
.sc-acts span.on { border-color: var(--or); color: var(--or-dk); background: #FFF4ED; }
.sc-acts svg { width: 15px; height: 15px; }
.sc-toast { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #1C1917; color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.5; }
.sc-toast b { color: #fff; }
.sc-toast svg { flex-shrink: 0; width: 18px; height: 18px; color: #4ADE80; margin-top: 1px; }
/* scene animations replay each time a step opens */
.mo .hx-step.on .mp, .mo .hx-step.on .sc-pick, .mo .hx-step.on .ck, .mo .hx-step.on .sc-code .ln { animation: an2Up .45s var(--ease) both; animation-delay: calc(var(--d) * .3s + .15s); }
.mo .hx-step.on .sc-code .ln { display: inline-block; animation-name: an2Line; animation-delay: calc(var(--d) * .22s + .1s); }
@keyframes an2Line { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.mo .hx-step.on .ck .tk { animation: an2Pop .35s var(--ease) both; animation-delay: calc(var(--d) * .3s + .5s); }
@keyframes an2Pop { from { transform: scale(0); } 70% { transform: scale(1.2); } to { transform: scale(1); } }
.mo .hx-step.on .sc-bars .b i { animation: an2Grow .9s var(--ease) both; }
.mo .hx-step.on .sc-bars div:nth-child(2) .b i { animation-delay: .1s; }
.mo .hx-step.on .sc-bars div:nth-child(3) .b i { animation-delay: .2s; }
.mo .hx-step.on .sc-bars div:nth-child(4) .b i { animation-delay: .3s; }
.mo .hx-step.on .sc-acts span.on { animation: an2Press .5s var(--ease) 1.1s both; }
@keyframes an2Press { 50% { transform: scale(.94); } }
.mo .hx-step.on .sc-toast { animation: an2Up .5s var(--ease) 1.5s both; }
.mo .hx-step.on .sc-chat, .mo .hx-step.on .sc-sugg { animation: an2Up .5s var(--ease) 1.4s both; }

/* ── Capabilities bento ── */
.bn { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bn-c { display: flex; flex-direction: column; border-radius: 24px; background: #fff; border: 1px solid var(--bdr); overflow: hidden; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.bn-c:hover { border-color: #FDBA74; box-shadow: 0 24px 50px -36px rgba(194,87,10,.5); transform: translateY(-3px); }
.bn-c.w4 { grid-column: span 4; } .bn-c.w3 { grid-column: span 3; } .bn-c.w2 { grid-column: span 2; }
.mo .bn-c.rv3:nth-child(2), .mo .bn-c.rv3:nth-child(4), .mo .bn-c.rv3:nth-child(6) { transition-delay: .1s; }
.bn-v { position: relative; height: 170px; padding: 22px 24px; background: linear-gradient(160deg, #FFF7ED, #FFFBF7 70%); border-bottom: 1px solid var(--bdr-l); overflow: hidden; }
.bn-t { padding: 22px 24px 24px; }
.bn-t .ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #FFF4ED; color: var(--or-dk); border: 1px solid #FED7AA; }
.bn-t .ic svg { width: 17px; height: 17px; }
.bn-t h3 { font-size: 19px; font-weight: 500; letter-spacing: -.02em; margin-top: 14px; }
.bn-t p { font-size: 14.5px; line-height: 1.6; color: var(--t3); margin-top: 6px; }
.v-chat { display: flex; flex-direction: column; gap: 8px; }
.v-chat .fu { margin-top: 4px; }
.mo .v-chat > * { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--d) * .45s + .3s); }
.mo .bn-c.in .v-chat > * { opacity: 1; transform: none; }
.v-join .jl { position: absolute; inset: 22px 24px; width: calc(100% - 48px); height: calc(100% - 44px); }
.v-join .jl path { fill: none; stroke: #FDBA74; stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.mo .v-join .jl path { animation: an2Dash 1.2s linear infinite; }
@keyframes an2Dash { to { stroke-dashoffset: -22; } }
.jn { position: absolute; width: 46px; height: 46px; border-radius: 14px; background: #fff; border: 1px solid var(--bdr); box-shadow: 0 10px 24px -16px rgba(60,20,0,.4); display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); }
.jn i { width: 30px; height: 30px; }
.jn i img { width: 16px; height: 16px; } .jn i.f img { width: 26px; height: 26px; }
.jn.j1 { left: calc(24px + (100% - 48px) * .2); top: calc(22px + (100% - 44px) * .233); }
.jn.j2 { left: calc(24px + (100% - 48px) * .2); top: calc(22px + (100% - 44px) * .767); }
.jn.jz { left: calc(24px + (100% - 48px) * .8); top: 50%; width: 56px; height: 56px; border-color: #FDBA74; box-shadow: 0 0 0 6px rgba(249,115,22,.1); }
.jn.jz img { width: 28px; height: 28px; }
.mo .bn-c.in .jn.jz { animation: an2Glow 2.4s ease-in-out infinite; }
@keyframes an2Glow { 50% { box-shadow: 0 0 0 12px rgba(249,115,22,.06); } }
.v-fix { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.fx-l { display: flex; align-items: center; gap: 8px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--bdr-l); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-l svg { flex-shrink: 0; width: 13px; height: 13px; }
.fx-l.er { color: #B91C1C; background: #FEF2F2; border-color: #FECACA; } .fx-l.er svg { transform: rotate(45deg); }
.fx-l.rp svg { color: var(--or-dk); }
.fx-l.ok { color: #15803D; background: #F0FDF4; border-color: #BBF7D0; }
.mo .v-fix .fx-l { opacity: 0; transform: translateX(-8px); transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: calc(var(--d) * .5s + .3s); }
.mo .bn-c.in .v-fix .fx-l { opacity: 1; transform: none; }
.mo .bn-c.in .fx-l.rp svg { animation: an2Spin 1.2s linear 2; }
@keyframes an2Spin { to { transform: rotate(360deg); } }
.v-fc svg { position: absolute; inset: 22px 24px 18px; width: calc(100% - 48px); height: calc(100% - 40px); overflow: visible; }
.v-fc .ln { fill: none; stroke: #EA580C; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.v-fc .fl { fill: none; stroke: #EA580C; stroke-width: 2.5; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; opacity: .7; }
.v-fc .band { fill: rgba(249,115,22,.12); }
.v-fc .now { stroke: #D6D3D1; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.mo .v-fc .ln { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.mo .bn-c.in .v-fc .ln { stroke-dashoffset: 0; }
.mo .v-fc .band, .mo .v-fc .fl { opacity: 0; transition: opacity .6s 1.6s; }
.mo .bn-c.in .v-fc .band { opacity: 1; } .mo .bn-c.in .v-fc .fl { opacity: .7; }
.v-fc .an { position: absolute; left: calc(24px + (100% - 48px) * .59 - 6px); top: calc(22px + (100% - 40px) * .8 - 6px); display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #B91C1C; white-space: nowrap; }
.v-fc .an i { width: 12px; height: 12px; border-radius: 50%; background: #DC2626; box-shadow: 0 0 0 4px rgba(220,38,38,.18); }
.mo .v-fc .an i { animation: an2Ring 1.8s ease-out infinite; }
@keyframes an2Ring { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.45); } 100% { box-shadow: 0 0 0 12px rgba(220,38,38,0); } }
.v-fc .an { padding: 0; }
.v-fc .fcl { position: absolute; right: 24px; top: 16px; font-size: 11.5px; color: var(--or-dk); background: #fff; border: 1px solid #FED7AA; border-radius: 999px; padding: 3px 10px; }
.v-lin { display: grid; grid-template-columns: auto 60px 1fr; align-items: center; }
.ln-col { display: grid; gap: 14px; }
.ln-col span { font-size: 12px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--bdr-l); }
.ln-col code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: var(--t2); }
.ln-w { width: 60px; height: 122px; }
.ln-w path { fill: none; stroke: #FDBA74; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 5 6; }
.mo .bn-c.in .ln-w path { animation: an2Dash 1.2s linear infinite; }
.ln-m { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1.5px solid var(--or); box-shadow: 0 0 0 4px rgba(249,115,22,.1); }
.ln-m svg { width: 18px; height: 18px; color: var(--or-dk); }
.ln-m b { display: block; font-size: 15px; font-weight: 600; margin-top: 6px; }
.ln-m small { display: block; font-size: 12px; color: var(--t3); }
.v-doc { display: flex; flex-direction: column; gap: 10px; }
.dc { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--bdr-l); align-self: flex-start; }
.dci { width: 32px; height: 32px; border-radius: 8px; background: #FEF2F2; color: #DC2626; display: flex; align-items: center; justify-content: center; }
.dci svg { width: 17px; height: 17px; }
.dc b { display: block; font-size: 13px; font-weight: 600; } .dc small { display: block; font-size: 11.5px; color: var(--t3); }
.da { padding: 11px 14px; border-radius: 14px 14px 14px 4px; background: #F5F4F2; font-size: 13px; line-height: 1.5; color: var(--t2); }
.da mark { background: linear-gradient(transparent 55%, #FED7AA 55%); color: var(--t1); padding: 0 1px; }
.da .cite { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; color: var(--or-dk); }
.da .cite svg { width: 12px; height: 12px; }
.mo .v-doc .da { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) .6s, transform .5s var(--ease) .6s; }
.mo .bn-c.in .v-doc .da { opacity: 1; transform: none; }
.mo .da mark { background-size: 0 100%; }

/* ── Detail panels: live states ── */
.mo .lv-type .ln { opacity: 0; transition: opacity .3s; transition-delay: calc(var(--d) * .28s + .2s); }
.mo .lv-type.in .ln { opacity: 1; }
.lv-type { opacity: 1 !important; transform: none !important; }
.lv-live { float: right; display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: #15803D; }
.lv-live i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
.mo .lv-live i, .mo .lv-agents .pst.g::before { animation: an2Ring2 1.6s ease-out infinite; }
@keyframes an2Ring2 { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 100% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }
.pst.run { color: #1D4ED8; background: #EFF6FF; border: 1px solid #BFDBFE; }
.pst.run::before { animation: an2Blink .9s steps(1) infinite; }
.lv-row.flash { animation: an2Flash 1.2s var(--ease); }
@keyframes an2Flash { 0% { background: #FFFBEB; border-color: #FDE68A; } 100% { background: #fff; } }
.lv-va { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 12px; background: #fff; border: 1px solid var(--bdr-l); width: max-content; max-width: 100%; }
.lv-va > span { font-size: 12px; color: var(--t3); padding: 0 8px 0 6px; }
.lv-va button { font: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 14px; border-radius: 9px; border: 0; background: transparent; color: var(--t2); cursor: pointer; transition: background .2s, color .2s; }
.lv-va button.on { background: #1C1917; color: #fff; }
.lv-va button:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }
.lv-tbl tbody tr { transition: background .3s; }
.lv-tbl tbody tr.new { animation: an2Up .4s var(--ease) both; }
.lv-tbl td.un { color: var(--t1); font-weight: 500; }

/* ── Connectors: AI model row under the logo wall ── */
.ig-models { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ig-mk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--t1); }
.ig-mk svg { width: 18px; height: 18px; color: var(--or-dk); }
.ig-models .intg-chips span { background: #fff; }

/* ── Security: privacy flow ── */
.fw { margin: 8px 0 36px; }
.fw-row { display: grid; grid-template-columns: 1fr 1.1fr 1fr 1.1fr 1fr; align-items: center; }
.fw-node { position: relative; z-index: 1; text-align: center; padding: 18px 14px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.fw-node.wall { background: rgba(249,115,22,.12); border-color: rgba(251,146,60,.5); box-shadow: 0 0 40px -10px rgba(249,115,22,.5); }
.fw-ic { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: #FDBA74; }
.fw-node.wall .fw-ic { background: var(--or); color: #fff; }
.fw-ic svg { width: 20px; height: 20px; }
.fw-node b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.fw-node small { display: block; font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
.fw-pipe { position: relative; height: 2px; margin: 0 -1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 6px, transparent 6px 12px); }
.fw-pipe.p2 { background: repeating-linear-gradient(90deg, rgba(251,146,60,.6) 0 6px, transparent 6px 12px); }
.fw-pipe i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 3px; background: #fff; opacity: 0; }
.fw-pipe.p2 i { border-radius: 50%; background: #FB923C; box-shadow: 0 0 10px rgba(251,146,60,.8); }
.mo .fw-pipe.p1 i { animation: an2Rows 2.4s linear infinite; animation-delay: var(--d); }
.mo .fw-pipe.p2 i { animation: an2Meta 2s linear infinite; animation-delay: var(--d); }
@keyframes an2Rows { 0% { left: 0; opacity: 0; } 10% { opacity: .9; } 75% { left: calc(100% - 14px); opacity: .9; transform: scale(1); } 90%, 100% { left: calc(100% - 14px); opacity: 0; transform: scale(.3); } }
@keyframes an2Meta { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
html:not(.mo) .fw-pipe i { opacity: .9; left: 40%; }
.fw-lbl { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-size: 11.5px; color: rgba(255,255,255,.5); white-space: nowrap; }
.fw-pipe.p2 .fw-lbl { color: #FDBA74; }
.fw-cap { margin-top: 22px; font-size: 14px; color: rgba(255,255,255,.65); text-align: center; }

/* ── Roadmap tabs ── */
.rd { border-radius: 28px; border: 1px solid var(--bdr); background: #fff; overflow: hidden; }
.rd-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--bdr-l); background: #FAFAF9; }
.rd-tab { position: relative; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 26px; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; transition: background .2s; }
.rd-tab + .rd-tab { border-left: 1px solid var(--bdr-l); }
.rd-tab b { font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--t2); }
.rd-tab small { font-size: 12.5px; color: var(--t3); }
.rd-tab:hover { background: #fff; }
.rd-tab[aria-selected="true"] { background: #fff; }
.rd-tab[aria-selected="true"] b { color: var(--t1); }
.rd-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--or); }
.rd-tab.now[aria-selected="true"]::after { background: #22C55E; }
.rd-tab.later[aria-selected="true"]::after { background: #A8A29E; }
.rd-tab:focus-visible { outline: 2px solid var(--or); outline-offset: -2px; }
.rd-pan { padding: 26px 28px 28px; }
.rd-pan > p { font-size: 15px; color: var(--t3); }
.rd-pan ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin-top: 16px; }
.rd-pan li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--t2); }
.rd-pan li svg { flex-shrink: 0; width: 18px; height: 18px; padding: 3px; border-radius: 50%; margin-top: 2px; background: #DCFCE7; color: #15803D; }
.rd-pan.next li svg { background: #FFF4ED; color: var(--or-dk); }
.rd-pan.later li svg { background: #F5F4F2; color: var(--t3); }
.mo .rd-pan:not([hidden]) { animation: an2Up .35s var(--ease); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .hx { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; }
  .hx-scene { left: calc(340px + 28px + 18px); }
  .bn-c.w4, .bn-c.w2 { grid-column: span 3; }
}
@media (max-width: 900px) {
  .ba { grid-template-columns: minmax(0, 1fr); }
  .fw-row { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 360px; margin: 0 auto; }
  .fw-pipe { width: 2px; height: 46px; margin: -1px auto; background: repeating-linear-gradient(180deg, rgba(255,255,255,.22) 0 6px, transparent 6px 12px); }
  .fw-pipe.p2 { background: repeating-linear-gradient(180deg, rgba(251,146,60,.6) 0 6px, transparent 6px 12px); }
  .fw-pipe i { left: 50% !important; margin-left: -5px; top: 0; margin-top: 0; }
  .mo .fw-pipe.p1 i { animation-name: an2RowsV; } .mo .fw-pipe.p2 i { animation-name: an2MetaV; }
  @keyframes an2RowsV { 0% { top: 0; opacity: 0; } 10% { opacity: .9; } 70% { top: calc(100% - 14px); opacity: .9; transform: scale(1); } 90%, 100% { top: calc(100% - 14px); opacity: 0; transform: scale(.3); } }
  @keyframes an2MetaV { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }
  .fw-lbl { left: 16px; top: 50%; transform: translateY(-50%); }
}
@media (max-width: 768px) {
  /* how it works: stacking cards */
  .hx { display: block; }
  .hx-frame { display: none; }
  .hx-steps { gap: 14px; }
  .hx-step { position: sticky; top: calc(var(--nav-h, 64px) + 12px + var(--i) * 10px); border-radius: 22px; background: #fff; border: 1px solid var(--bdr); box-shadow: 0 -8px 30px -18px rgba(60,20,0,.25); overflow: hidden; transform-origin: center top; }
  .hx-btn { cursor: default; padding: 18px 18px 14px; border: 0 !important; box-shadow: none !important; background: #fff !important; }
  .hx-btn .n { background: var(--or); color: #fff; }
  .hx-tt b { color: var(--t1); }
  .hx-tt span { max-height: none; opacity: 1; margin-top: 2px; }
  .hx-bar { display: none; }
  .hx-scene { position: relative; inset: auto; opacity: 1; visibility: visible; margin: 0 12px 12px; padding: 0; border: 1px solid #FDE3C8; border-radius: 16px; background: #fff; }
  .hx-mbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 12px; background: #FFF7ED; border-bottom: 1px solid #FDE3C8; }
  .hx-mbar b { font-size: 12px; font-weight: 600; }
  .hx-mbar .app-dots i { width: 7px; height: 7px; }
  .hx-mstep { font-size: 10.5px; }
  .hx-sb { padding: 14px; }
  .sc-q { font-size: 14px; min-height: 50px; padding: 10px 10px 10px 14px; }
  .sc-chat, .sc-k:nth-of-type(2) { display: none; }
  .mp { grid-template-columns: 1fr 26px; gap: 4px 10px; font-size: 13px; }
  .mp > svg { display: none; }
  .mp code { grid-column: 1; }
  .mp .src { grid-row: 1 / span 2; grid-column: 2; }
  .sc-code { font-size: 11px; padding: 12px 14px; }
  .ck { grid-template-columns: 30px 1fr 22px; padding: 9px 11px; gap: 10px; }
  .ck .ci { width: 30px; height: 30px; }
  .ck b { font-size: 13px; } .ck small { font-size: 12px; }
  .sc-bars div { grid-template-columns: 84px 1fr 40px; font-size: 12px; }
  .sc-acts span { font-size: 12px; padding: 7px 10px; }
  /* bento */
  .bn { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bn-c.w4, .bn-c.w3, .bn-c.w2 { grid-column: auto; }
  .bn-v { height: 170px; padding: 18px; }
  .bn-t { padding: 18px 20px 20px; }
  .ba-col { padding: 20px; border-radius: 22px; }
  .ba-msg p { font-size: 13px; }
  .rd-tabs { grid-template-columns: minmax(0, 1fr); }
  .rd-tab { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 14px 18px; gap: 6px 10px; }
  .rd-tab + .rd-tab { border-left: 0; border-top: 1px solid var(--bdr-l); }
  .rd-tab b { font-size: 16px; }
  .rd-tab small { margin-left: auto; }
  .rd-pan { padding: 20px; }
  .rd-pan ul { grid-template-columns: minmax(0, 1fr); }
  .ig-models { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-tt span, .hx-scene { transition: none; }
}
.sc-map .src i.f img, .sc-pick .lgs i.f img { width: 20px; height: 20px; }

/* ── Length pass: 3×2 bento, compact phone layouts ── */
.bn-c { grid-column: span 2; }
.bn-v { height: 158px; padding: 18px 20px; }
.bn-t { padding: 18px 22px 22px; }
.bn-t h3 { margin-top: 12px; }
.v-chat .bot { font-size: 12.5px; }
.v-chat .me { font-size: 12.5px; }
.v-chat .fu span:nth-child(3) { display: none; }
.v-lin { grid-template-columns: auto 40px 1fr; }
.ln-w { width: 40px; }
.ln-col span { font-size: 11px; padding: 6px 8px; }
.ln-m { padding: 12px; }
.ln-m b { font-size: 14px; }
.da { font-size: 12.5px; padding: 9px 12px; }
.v-fc .fcl { top: 12px; right: 16px; }
@media (max-width: 1100px) { .bn-c { grid-column: span 3; } }
@media (max-width: 768px) {
  .bn { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--G, 24px)); padding: 4px var(--G, 24px) 10px; scrollbar-width: none; }
  .bn::-webkit-scrollbar { display: none; }
  .bn-c { flex: 0 0 84%; scroll-snap-align: start; scroll-margin-left: var(--G, 24px); }
  .bn-c:hover { transform: none; }
  .bn-v { height: 150px; }
  /* compact step cards */
  .hx-sb .sc-k, .hx-sb .sc-meta, .hx-sb .sc-sugg, .ck small, .sc-acts span:not(.on) { display: none; }
  .hx-btn { padding: 16px 16px 10px; }
  .hx-tt span { font-size: 13.5px; }
  .hx-sb { padding: 12px; }
  .sc-map, .sc-checks { gap: 6px; }
  .mp { padding: 8px 10px; }
  .ck { padding: 7px 10px; }
  .sc-code { font-size: 10.5px; line-height: 1.65; padding: 10px 12px; }
  .sc-acts { margin-top: 10px; }
  .sc-toast { margin-top: 10px; font-size: 12.5px; padding: 10px 12px; }
  .sc-pick { margin-top: 8px; padding: 9px 12px; font-size: 13px; }
  .ba-old .ba-msg:nth-child(2) { display: none; }
}
@media (max-width: 900px) {
  /* keep the privacy flow horizontal and compact */
  .fw-row { grid-template-columns: 1fr .55fr 1fr .55fr 1fr; max-width: none; }
  .fw-pipe { width: auto; height: 2px; margin: 0 -1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 5px, transparent 5px 10px); }
  .fw-pipe.p2 { background: repeating-linear-gradient(90deg, rgba(251,146,60,.6) 0 5px, transparent 5px 10px); }
  .fw-pipe i { left: 0 !important; top: 50%; margin: -4px 0 0; width: 8px; height: 8px; }
  .mo .fw-pipe.p1 i { animation-name: an2Rows; } .mo .fw-pipe.p2 i { animation-name: an2Meta; }
  .fw-lbl { display: none; }
  .fw-node { padding: 12px 6px; border-radius: 14px; }
  .fw-ic { width: 32px; height: 32px; margin-bottom: 6px; border-radius: 10px; }
  .fw-ic svg { width: 16px; height: 16px; }
  .fw-node b { font-size: 12px; line-height: 1.3; }
  .fw-node small { display: none; }
  .fw-cap { font-size: 13px; text-align: left; margin-top: 16px; }
}


/* ── Detail panels: one auto-advancing tabbed panel ── */
.dt-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.dt-tab { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--bdr); background: #fff; font: inherit; color: inherit; cursor: pointer; overflow: hidden; transition: border-color .25s, background .25s, box-shadow .25s; }
.dt-tab:hover { border-color: #FDBA74; }
.dt-tab[aria-selected="true"] { border-color: #FDBA74; background: #FFF7ED; box-shadow: 0 18px 40px -30px rgba(194,87,10,.5); }
.dt-tab:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.dt-tab .ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: #F5F4F2; color: var(--t3); transition: background .25s, color .25s; }
.dt-tab[aria-selected="true"] .ic { background: var(--or); color: #fff; }
.dt-tab .ic svg { width: 17px; height: 17px; }
.dt-tab b { display: block; font-size: 16px; font-weight: 600; color: var(--t1); }
.dt-tab small { display: block; font-size: 13px; color: var(--t3); line-height: 1.35; }
.dt-bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; }
.dt-bar i { display: block; height: 100%; width: 0; background: var(--or); }
.dt.auto .dt-tab[aria-selected="true"] .dt-bar i { animation: an2Prog var(--dur, 7s) linear forwards; }
.dt.paused .dt-tab[aria-selected="true"] .dt-bar i { animation-play-state: paused; }
.dt-pans { display: grid; }
.dt-pan { grid-area: 1 / 1; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.dt-pan[aria-hidden="true"] { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility 0s .25s; }
.dt-pan .p-row-t .eyebrow { display: none; }
.dt-pan .p-row-t h3 { margin-top: 0; }
@media (max-width: 768px) {
  .dt-tabs { display: flex; overflow-x: auto; gap: 8px; margin: 0 calc(-1 * var(--G, 24px)) 12px; padding: 2px var(--G, 24px) 4px; scrollbar-width: none; }
  .dt-tabs::-webkit-scrollbar { display: none; }
  .dt-tab { flex: 0 0 auto; padding: 10px 14px 10px 10px; border-radius: 999px; gap: 8px; }
  .dt-tab .ic { width: 30px; height: 30px; border-radius: 50%; }
  .dt-tab .ic svg { width: 14px; height: 14px; }
  .dt-tab b { font-size: 14px; }
  .dt-tab small { display: none; }
  .dt-bar { left: 14px; right: 14px; }
}

/* ── Before/After: real faces instead of initials ── */
.ba-msg img.av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; padding: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--bdr-l); }
.ba-by { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--t3); }
.ba-by img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #FED7AA; }
.ba-by b { color: var(--t1); font-weight: 600; }
.mo .ba .ba-by { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease) .7s, transform .45s var(--ease) .7s; }
.mo .ba.in .ba-by { opacity: 1; transform: none; }

/* ── How it works v2: the answer builds layer by layer ── */
.hc { --cur: 4; }
.hc-rail { position: relative; margin-bottom: 18px; }
.hc-rail ol { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; }
.hc-line { position: absolute; left: 10%; right: 10%; top: 19px; height: 2px; border-radius: 2px; background: var(--bdr); overflow: hidden; }
.hc-line i { display: block; height: 100%; width: calc(var(--cur) / 4 * 100%); background: var(--or); transition: width .6s var(--ease); }
.hc-st { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 4px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.hc-st .d { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; background: #fff; color: var(--t3); border: 1.5px solid var(--bdr); transition: background .3s, color .3s, border-color .3s, box-shadow .3s; }
.hc-st b { font-size: 16px; font-weight: 600; color: var(--t3); transition: color .3s; }
.hc-st small { font-size: 13px; line-height: 1.4; color: var(--t3); max-width: 190px; }
.hc-st.done .d { background: #FFF4ED; color: var(--or-dk); border-color: #FDBA74; }
.hc-st.done b { color: var(--t1); }
.hc-st.cur .d { background: var(--or); color: #fff; border-color: var(--or); box-shadow: 0 0 0 6px rgba(249,115,22,.14); }
.hc-st.cur b { color: var(--t1); }
.hc-st:focus-visible { outline: none; } .hc-st:focus-visible .d { outline: 2px solid var(--or); outline-offset: 3px; }
.hc-cap { display: none; }
.hc-win { border-radius: 24px; padding: 14px; background: linear-gradient(160deg, #FFF7ED, #FFEDD5 55%, #FED7AA); border: 1px solid #FED7AA; }
.hc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 16px; border-radius: 16px 16px 0 0; background: #fff; border: 1px solid #FDE3C8; border-bottom-color: var(--bdr-l); }
.hc-bar b { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.hc-bar b img { width: 16px; height: 16px; }
.hc-stat { font-size: 11.5px; color: var(--or-dk); background: #FFF4ED; border: 1px solid #FED7AA; border-radius: 999px; padding: 2px 10px; }
.hc-body { background: #fff; border: 1px solid #FDE3C8; border-top: 0; border-radius: 0 0 16px 16px; padding: 18px 22px 20px; }
.hc-l { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding-bottom: 14px; }
.hc-l:last-child { padding-bottom: 0; }
.hc-l:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 2px; width: 2px; background: var(--bdr-l); }
.hc-l.on:not(:last-child)::before { background: #FDBA74; }
.hc-g i { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 600; color: var(--t3); background: #F5F4F2; transition: background .3s, color .3s; }
.hc-l.on .hc-g i { background: #FFF4ED; color: var(--or-dk); }
.hc-l.cur .hc-g i { background: var(--or); color: #fff; }
.hc-k { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); line-height: 30px; }
.hc-c > :not(.hc-k) { transition: opacity .45s var(--ease), filter .45s, transform .45s var(--ease); }
.hc-l:not(.on) .hc-c > :not(.hc-k) { opacity: .16; filter: grayscale(1) blur(1.5px); transform: translateY(4px); }
.hc-ask { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 11px 11px 16px; border-radius: 13px; border: 1.5px solid var(--or); box-shadow: 0 0 0 4px rgba(249,115,22,.1); font-size: 15.5px; color: var(--t1); min-height: 52px; }
.hc-ask b { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--or); color: #fff; display: flex; align-items: center; justify-content: center; }
.hc-ask b svg { width: 14px; height: 14px; }
.hc-type.typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--or); animation: an2Blink .8s steps(1) infinite; }
.hc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hc-map, .hc-src, .hc-ck { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--t2); padding: 6px 12px; border-radius: 10px; background: #FAFAF9; border: 1px solid var(--bdr-l); }
.hc-map em { font-style: normal; font-weight: 500; color: var(--t1); }
.hc-map > svg { width: 13px; height: 13px; color: var(--or); }
.hc-map code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; }
.hc-map .met { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; color: var(--or-dk); }
.hc-map .met svg { width: 13px; height: 13px; }
.hc-src { background: #F0FDF4; border-color: #BBF7D0; }
.hc-src .lgs { display: flex; }
.hc-src .lgs i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c, #fff); box-shadow: 0 0 0 2px #F0FDF4; }
.hc-src .lgs i + i { margin-left: -6px; }
.hc-src .lgs i img { width: 11px; height: 11px; } .hc-src .lgs i.m img { filter: brightness(0) invert(1); } .hc-src .lgs i.f img { width: 18px; height: 18px; }
.hc-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; line-height: 1.75; color: #E7E5E4; background: #151311; border-radius: 12px; padding: 12px 16px; white-space: pre-wrap; }
.hc-code .kw { color: #FB923C; } .hc-code .fx { color: #4ADE80; } .hc-code .er { color: #F87171; }
.hc-ck svg { width: 13px; height: 13px; color: #15803D; }
.hc-ck.hl { background: #FFF7ED; border-color: #FED7AA; color: var(--t1); font-weight: 500; }
.hc-ck.hl svg { color: var(--or-dk); }
.hc-res { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.hc-tbl { display: grid; gap: 6px; }
.hc-tbl .r { display: grid; grid-template-columns: 150px minmax(80px, 1fr) 30px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px 12px; border-radius: 10px; background: #FAFAF9; border: 1px solid var(--bdr-l); }
.hc-tbl b { font-size: 13.5px; font-weight: 600; color: var(--t1); }
.hc-tbl .bar { height: 7px; border-radius: 4px; background: #F0EEEC; overflow: hidden; }
.hc-tbl .bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #DC2626, #F87171); transform-origin: left; }
.hc-tbl .sc { font-size: 13px; font-weight: 600; text-align: right; color: #B91C1C; font-variant-numeric: tabular-nums; }
.hc-tbl small { grid-column: 1 / -1; font-size: 12px; color: var(--t3); }
.hc-acts { display: grid; gap: 8px; }
.hc-acts span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--bdr); background: #fff; color: var(--t2); white-space: nowrap; }
.hc-acts span.on { border-color: #BBF7D0; background: #F0FDF4; color: #15803D; }
.hc-acts svg { width: 14px; height: 14px; }
.mo .hc-l.cur .hc-tbl .bar i { animation: an2Grow .9s var(--ease) both; }
.mo .hc-l.cur .hc-tbl .r:nth-child(2) .bar i { animation-delay: .12s; } .mo .hc-l.cur .hc-tbl .r:nth-child(3) .bar i { animation-delay: .24s; }
.mo .hc-l.cur .hc-acts span.on { animation: an2Up .5s var(--ease) .7s both; }
.mo .hc-l.cur .hc-ck { animation: an2Up .4s var(--ease) both; }
.mo .hc-l.cur .hc-ck:nth-child(2) { animation-delay: .1s; } .mo .hc-l.cur .hc-ck:nth-child(3) { animation-delay: .2s; } .mo .hc-l.cur .hc-ck:nth-child(4) { animation-delay: .3s; }
.mo .hc-l.cur .hc-map, .mo .hc-l.cur .hc-src { animation: an2Up .4s var(--ease) both; }
.mo .hc-l.cur .hc-map:nth-child(2) { animation-delay: .12s; } .mo .hc-l.cur .hc-src { animation-delay: .24s; }

@media (max-width: 900px) {
  .hc-st small { display: none; }
  .hc-cap { display: block; text-align: center; margin: -6px 0 14px; font-size: 14px; color: var(--t2); min-height: 1.5em; }
  .hc-res { grid-template-columns: minmax(0, 1fr); }
  .hc-acts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .hc-rail ol { gap: 4px; }
  .hc-line { top: 16px; }
  .hc-st .d { width: 34px; height: 34px; font-size: 13px; }
  .hc-st b { font-size: 13px; }
  .hc-win { padding: 8px; border-radius: 20px; }
  .hc-bar { height: 38px; padding: 0 12px; }
  .hc-stat { font-size: 10.5px; }
  .hc-body { padding: 14px 12px 14px 10px; }
  .hc-l { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding-bottom: 12px; }
  .hc-l:not(:last-child)::before { left: 12px; top: 26px; }
  .hc-g i { width: 26px; height: 26px; font-size: 11px; }
  .hc-k { line-height: 26px; }
  .hc-ask { font-size: 14px; padding: 9px 9px 9px 12px; }
  .hc-map, .hc-src, .hc-ck { font-size: 12px; padding: 5px 9px; }
  .hc-code { font-size: 11px; padding: 10px 12px; }
  .hc-tbl .r { grid-template-columns: minmax(0, 1fr) 70px 26px; padding: 7px 10px; }
  .hc-tbl b { font-size: 12.5px; }
  .hc-acts span { font-size: 12px; padding: 7px 9px; white-space: normal; }
}
/* compact pass */
.hc-rail { margin-bottom: 14px; }
.hc-st small { font-size: 12.5px; max-width: 200px; }
.hc-body { padding: 16px 20px 18px; }
.hc-l { padding-bottom: 10px; }
.hc-c { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.hc-c > :not(.hc-k) { min-height: 30px; }
.hc-ask { min-height: 46px; padding: 8px 8px 8px 14px; margin-top: -8px; }
.hc-ask b { width: 30px; height: 30px; }
.hc-code { padding: 9px 14px; font-size: 12px; line-height: 1.65; }
.hc-tbl { gap: 5px; }
.hc-tbl .r { grid-template-columns: 140px minmax(70px, 1fr) 28px minmax(0, 1.25fr); grid-template-rows: auto; padding: 7px 12px; }
.hc-tbl small { grid-column: auto; padding-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
  .hc-tbl .r { grid-template-columns: 130px minmax(60px, 1fr) 28px; grid-template-rows: auto auto; }
  .hc-tbl small { grid-column: 1 / -1; padding-left: 0; }
}
@media (max-width: 768px) {
  .hc-c { display: block; }
  .hc-ask { margin-top: 0; }
  .hc-tbl .r { grid-template-columns: minmax(0, 1fr) 70px 26px; }
}

/* ── How it works v3: one answer screen, played once ── */
.hq-win { max-width: 980px; margin: 0 auto; border-radius: 24px; padding: 12px; background: #F3F2F0; border: 1px solid var(--bdr); box-shadow: 0 40px 80px -60px rgba(28,25,23,.45); }
.hq-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 10px 0 16px; border-radius: 14px 14px 0 0; background: #fff; border: 1px solid var(--bdr-l); border-bottom: 0; }
.hq-bar b { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.hq-bar b img { width: 16px; height: 16px; }
.hq-replay { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; color: var(--t2); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bdr); background: #fff; cursor: pointer; transition: border-color .2s, color .2s; }
.hq-replay:hover { border-color: var(--or); color: var(--or-dk); }
.hq-replay:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.hq-replay svg { width: 13px; height: 13px; }
.hq-body { display: grid; gap: 14px; padding: 22px 26px 24px; border-radius: 0 0 14px 14px; background: #fff; border: 1px solid var(--bdr-l); border-top: 1px solid var(--bdr-l); }
.hq-tag { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--or-dk); }
.hq-q { justify-self: end; max-width: 78%; text-align: right; }
.hq-q p { margin-top: 6px; display: inline-block; text-align: left; font-size: 16px; line-height: 1.45; color: #fff; background: #1C1917; padding: 12px 16px; border-radius: 16px 16px 4px 16px; }
.hq-type.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: #FB923C; animation: an2Blink .8s steps(1) infinite; }
.hq-trail { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hq-trail li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #FAFAF9; border: 1px solid var(--bdr-l); }
.hq-trail p { font-size: 13.5px; line-height: 1.5; color: var(--t2); }
.hq-trail b { color: var(--t1); font-weight: 600; }
.hq-ok { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: #DCFCE7; color: #15803D; display: flex; align-items: center; justify-content: center; }
.hq-ok svg { width: 10px; height: 10px; }
.hq-trail .lgs { display: flex; margin-top: auto; }
.hq-trail .lgs i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c, #fff); box-shadow: 0 0 0 2px #FAFAF9; }
.hq-trail .lgs i + i { margin-left: -6px; }
.hq-trail .lgs i img { width: 11px; height: 11px; } .hq-trail .lgs i.m img { filter: brightness(0) invert(1); } .hq-trail .lgs i.f img { width: 18px; height: 18px; }
.hq-sql { margin-top: auto; }
.hq-sql summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--or-dk); cursor: pointer; }
.hq-sql summary::-webkit-details-marker { display: none; }
.hq-sql summary svg { width: 13px; height: 13px; }
.hq-sql summary:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 4px; }
.hq-sql pre { margin-top: 8px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; line-height: 1.65; color: #E7E5E4; background: #151311; border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; }
.hq-sql .kw { color: #FB923C; } .hq-sql .fx { color: #4ADE80; } .hq-sql .er { color: #F87171; }
.hq-trail li:has(.hq-sql[open]) { grid-column: 1 / -1; order: 9; }
.hq-ans { padding: 18px 20px; border-radius: 16px; border: 1px solid #FED7AA; background: #fff; box-shadow: 0 18px 40px -30px rgba(194,87,10,.45); }
.hq-ans-top { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.hq-ans-top .ok { display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: #15803D; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 999px; padding: 2px 9px; }
.hq-ans-top .ok svg { width: 11px; height: 11px; }
.hq-ans-h { margin-top: 8px; font-size: 19px; line-height: 1.4; letter-spacing: -.01em; color: var(--t2); }
.hq-ans-h b { color: var(--t1); font-weight: 600; }
.hq-rows { display: grid; gap: 6px; margin-top: 14px; }
.hq-rows .r { display: grid; grid-template-columns: 150px minmax(80px, 1fr) 84px minmax(0, 1.3fr); align-items: center; column-gap: 14px; padding: 9px 14px; border-radius: 10px; background: #FAFAF9; border: 1px solid var(--bdr-l); font-size: 13.5px; }
.hq-rows b { font-weight: 600; color: var(--t1); }
.hq-rows .bar { height: 7px; border-radius: 4px; background: #F0EEEC; overflow: hidden; }
.hq-rows .bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #DC2626, #F87171); transform-origin: left; }
.hq-rows .sc { font-weight: 600; color: #B91C1C; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hq-rows .sc small { font-weight: 400; color: var(--t3); font-size: 11.5px; }
.hq-rows .why { font-size: 12.5px; color: var(--t3); }
.hq-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hq-act .hq-tag { margin-right: 4px; }
.hq-act > span:not(.hq-tag) { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--bdr); background: #fff; color: var(--t2); }
.hq-act > span.on { border-color: #BBF7D0; background: #F0FDF4; color: #15803D; }
.hq-act svg { width: 14px; height: 14px; }
/* play once: pieces appear in order, then everything stays */
.mo .hq.arm [style*="--t"] { opacity: 0; transform: translateY(8px); }
.mo .hq.play [style*="--t"] { animation: an2Up .5s var(--ease) both; animation-delay: calc(var(--t) * .55s + .9s); }
.mo .hq.play .hq-q { animation-delay: 0s; }
.mo .hq.play .hq-rows .bar i { animation: an2Grow .9s var(--ease) both; animation-delay: 3.4s; }
.mo .hq.play .hq-ok { animation: an2Pop .35s var(--ease) both; }
.mo .hq.play .hq-trail li:nth-child(1) .hq-ok { animation-delay: 1.85s; } .mo .hq.play .hq-trail li:nth-child(2) .hq-ok { animation-delay: 2.4s; } .mo .hq.play .hq-trail li:nth-child(3) .hq-ok { animation-delay: 2.95s; }

@media (max-width: 900px) {
  .hq-trail { grid-template-columns: minmax(0, 1fr); }
  .hq-rows .r { grid-template-columns: minmax(0, 1fr) 70px 78px; row-gap: 2px; }
  .hq-rows .why { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .hq-win { padding: 8px; border-radius: 20px; }
  .hq-bar { height: 40px; padding: 0 8px 0 12px; }
  .hq-body { padding: 16px 14px; gap: 12px; }
  .hq-q { max-width: 92%; }
  .hq-q p { font-size: 14.5px; padding: 10px 13px; }
  .hq-trail li { padding: 10px 12px; }
  .hq-trail .lgs { position: absolute; right: 38px; top: 9px; margin: 0; }
  .hq-ans { padding: 14px; }
  .hq-ans-h { font-size: 16px; }
  .hq-rows .r { grid-template-columns: minmax(0, 1fr) 50px auto; padding: 8px 10px; font-size: 13px; }
  .hq-act > span:not(.hq-tag) { font-size: 12px; padding: 6px 10px; }
}
.hq { width: 100%; } .hq-win { max-width: none; }

/* ── How it works v4: question travels through Zenzo (dark stage) ── */
.hz { position: relative; border-radius: 32px; overflow: hidden; color: #fff; background: radial-gradient(60% 70% at 50% 45%, #3A1A06 0%, #1A0A00 55%, #120700 100%); border: 1px solid #2B170A; box-shadow: 0 50px 100px -60px rgba(26,10,0,.7); }
.hz::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(60% 60% at 50% 45%, #000, transparent); pointer-events: none; }
.hz-stage { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 330px); align-items: center; gap: 12px; padding: 36px 36px 8px; }
.hz-k { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #FDBA74; margin-bottom: 10px; }
/* ask */
.hz-in { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 16px; border-radius: 16px; background: #fff; color: var(--t1); font-size: 15px; line-height: 1.45; box-shadow: 0 0 0 4px rgba(249,115,22,.18), 0 20px 40px -20px rgba(0,0,0,.6); min-height: 72px; }
.hz-in b { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--or); color: #fff; display: flex; align-items: center; justify-content: center; }
.hz-in b svg { width: 15px; height: 15px; }
.hz-type.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: var(--or); animation: an2Blink .8s steps(1) infinite; }
.hz-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hz-sugg span { font-size: 12px; color: rgba(255,255,255,.55); padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); }
/* core diagram */
.hz-core { position: relative; aspect-ratio: 600 / 420; width: 100%; }
.hz-core svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hz-orbit { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; stroke-dasharray: 3 6; }
.hz-glow { opacity: .55; transition: opacity .8s; }
.hz-cometpath, .hz-outpath { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 1.5; stroke-dasharray: 4 6; }
.hz.s4 .hz-outpath { stroke: rgba(251,146,60,.55); }
.hz-beam { fill: none; stroke: #FB923C; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .8s var(--ease), opacity .3s; filter: drop-shadow(0 0 6px rgba(251,146,60,.8)); }
.hz.s1 .hz-beam { stroke-dashoffset: 0; opacity: 1; }
.hz-pt { fill: #fff; opacity: 0; transition: opacity .3s; }
.hz.flow .hz-pt { opacity: .95; }
.hz-out { fill: #FB923C; opacity: 0; filter: drop-shadow(0 0 6px rgba(251,146,60,.9)); transition: opacity .3s; }
.hz.emit .hz-out { opacity: 1; }
.hz-comet { fill: #FDBA74; opacity: 0; filter: drop-shadow(0 0 10px #FB923C); }
.hz.fly .hz-comet { opacity: 1; }
.hz-shield { fill: none; stroke: #4ADE80; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .9s var(--ease), opacity .3s; filter: drop-shadow(0 0 8px rgba(74,222,128,.7)); }
.hz.s3 .hz-shield { stroke-dashoffset: 0; opacity: 1; }
.hz-n { position: absolute; z-index: 2; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); transition: opacity .5s, transform .5s var(--ease), box-shadow .5s; }
.hz-n i { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--c, #fff); }
.hz-n i img { width: 16px; height: 16px; } .hz-n i.m img { filter: brightness(0) invert(1); } .hz-n i.f img { width: 26px; height: 26px; }
.hz.s1 .hz-n:not(.pick) { opacity: .22; transform: scale(.88); }
.hz.s1 .hz-n.pick { transform: scale(1.12); box-shadow: 0 0 0 3px #FB923C, 0 0 28px rgba(251,146,60,.65); }
.hz-hub { position: absolute; z-index: 3; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 26px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(249,115,22,.16), 0 0 50px rgba(249,115,22,.55); }
.hz-hub img { width: 44px; height: 44px; }
.hz.pulse .hz-hub { animation: hzPulse .7s var(--ease); }
@keyframes hzPulse { 40% { transform: scale(1.14); box-shadow: 0 0 0 16px rgba(249,115,22,.22), 0 0 80px rgba(249,115,22,.8); } }
.hz-chip { position: absolute; z-index: 4; left: 50%; transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; opacity: 0; transition: opacity .4s, transform .4s var(--ease); }
.hz-chip svg { width: 14px; height: 14px; }
.hz-chip.c-sql { top: 27%; background: #1C1917; border: 1px solid rgba(255,255,255,.16); color: #fff; }
.hz-chip.c-sql svg { color: #FDBA74; }
.hz-chip.c-chk { top: 72%; background: rgba(22,101,52,.9); border: 1px solid rgba(74,222,128,.5); color: #DCFCE7; }
.hz.s2 .hz-chip.c-sql, .hz.s3 .hz-chip.c-chk { opacity: 1; transform: translate(-50%, 0); }
/* answer */
.hz-card { padding: 16px 18px; border-radius: 18px; background: #fff; color: var(--t1); box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); opacity: .08; transform: translateY(10px) scale(.98); filter: blur(2px); transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s; }
.hz.s4 .hz-card { opacity: 1; transform: none; filter: none; }
.hz-h { font-size: 15px; line-height: 1.45; color: var(--t2); }
.hz-h b { color: var(--t1); }
.hz-rows { display: grid; gap: 7px; margin-top: 12px; }
.hz-rows div { display: grid; grid-template-columns: 112px 1fr 24px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--t2); }
.hz-rows .b { height: 7px; border-radius: 4px; background: #F0EEEC; overflow: hidden; }
.hz-rows .b i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #DC2626, #F87171); transform-origin: left; }
.hz-rows em { font-style: normal; font-weight: 600; color: #B91C1C; text-align: right; }
.mo .hz.s4 .hz-rows .b i { animation: an2Grow .9s var(--ease) .3s both; }
.hz-src { margin-top: 10px; font-size: 11.5px; color: var(--t3); }
.hz-toast { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 11px 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(74,222,128,.35); font-size: 13px; color: rgba(255,255,255,.8); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) .9s, transform .5s var(--ease) .9s; }
.hz-toast svg { width: 16px; height: 16px; color: #4ADE80; flex-shrink: 0; }
.hz-toast b { color: #fff; }
.hz.s4 .hz-toast { opacity: 1; transform: none; }
/* narration bar */
.hz-foot { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; margin: 8px 24px 24px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.hz-steps { display: flex; gap: 4px; }
.hz-st { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 500; padding: 6px 12px 6px 6px; border-radius: 999px; border: 0; background: transparent; color: rgba(255,255,255,.45); cursor: pointer; transition: background .3s, color .3s; }
.hz-st .d { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; background: rgba(255,255,255,.08); transition: background .3s, color .3s; }
.hz-st.done { color: rgba(255,255,255,.8); }
.hz-st.done .d { background: rgba(251,146,60,.25); color: #FDBA74; }
.hz-st.cur { background: rgba(251,146,60,.16); color: #fff; }
.hz-st.cur .d { background: var(--or); color: #fff; }
.hz-st:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.hz-cap { font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.85); }
.hz-replay { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; color: rgba(255,255,255,.8); padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: transparent; cursor: pointer; }
.hz-replay:hover { border-color: #FB923C; color: #fff; }
.hz-replay svg { width: 14px; height: 14px; }
@media (max-width: 1100px) {
  .hz-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 28px 28px 8px; }
  .hz-core { grid-column: 1 / -1; grid-row: 2; max-width: 620px; margin: 0 auto; }
  .hz-ans { grid-column: 2; grid-row: 1; }
  .hz-foot { grid-template-columns: minmax(0, 1fr) auto; }
  .hz-steps { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .hz { border-radius: 24px; margin: 0 calc(-1 * var(--G, 24px) + 8px); }
  .hz-stage { grid-template-columns: minmax(0, 1fr); padding: 22px 16px 4px; gap: 6px; }
  .hz-ask, .hz-core, .hz-ans { grid-column: auto; grid-row: auto; }
  .hz-core { margin: 0 -8px; width: calc(100% + 16px); }
  .hz-in { font-size: 14px; min-height: 0; }
  .hz-sugg { display: none; }
  .hz-n { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 11px; }
  .hz-n i { width: 24px; height: 24px; border-radius: 7px; } .hz-n i img { width: 13px; height: 13px; } .hz-n i.f img { width: 20px; height: 20px; }
  .hz-hub { width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 19px; } .hz-hub img { width: 32px; height: 32px; }
  .hz-chip { font-size: 11px; padding: 4px 9px; }
  .hz-chip.c-sql { top: 23%; } .hz-chip.c-chk { top: 75%; }
  .hz-foot { grid-template-columns: minmax(0, 1fr) auto; margin: 6px 12px 14px; gap: 10px 12px; padding: 12px; }
  .hz-steps { overflow-x: auto; scrollbar-width: none; }
  .hz-st { font-size: 12px; padding: 5px 10px 5px 5px; flex-shrink: 0; }
  .hz-cap { font-size: 14px; }
}
/* chips sit centred in the gaps between the hub's shield and the picked tools */
.hz-chip { transform: translate(-50%, -40%); font-size: 12px; padding: 5px 11px; }
.hz.s2 .hz-chip.c-sql, .hz.s3 .hz-chip.c-chk { transform: translate(-50%, -50%); }
.hz-chip.c-sql { top: 28.6%; } .hz-chip.c-chk { top: 71.4%; }
@media (max-width: 768px) { .hz-chip { font-size: 10.5px; padding: 3px 8px; gap: 5px; } .hz-chip svg { width: 11px; height: 11px; } .hz-chip.c-sql { top: 28.6%; } .hz-chip.c-chk { top: 71.4%; } }
/* How it works sits in the same light-orange box as the homepage section */
.hiw-an .hz { margin: 0; }
@media (max-width: 768px) { .hiw-an .hz { margin: 0 -2%; } .hiw-an { padding-left: 4%; padding-right: 4%; } }
.hz-chip .sm { display: none; }
@media (max-width: 768px) { .hz-chip .lg { display: none; } .hz-chip .sm { display: inline; } }

/* ── How it works: light stage on the homepage's light-orange box ── */
.hiw-an .hz { color: var(--t1); background: rgba(255,255,255,.55); border: 1px solid #FED7AA; box-shadow: 0 30px 60px -48px rgba(194,87,10,.45); }
.hiw-an .hz::before { background-image: radial-gradient(rgba(194,87,10,.14) 1px, transparent 1px); }
.hiw-an .hz-k { color: var(--or-dk); }
.hiw-an .hz-in { box-shadow: 0 0 0 4px rgba(249,115,22,.14), 0 18px 36px -24px rgba(194,87,10,.45); border: 1px solid #FED7AA; }
.hiw-an .hz-sugg span { color: var(--t3); border-color: #FED7AA; background: rgba(255,255,255,.6); }
.hiw-an .hz-orbit { stroke: rgba(194,87,10,.28); }
.hiw-an .hz-glow { opacity: .35; }
.hiw-an .hz-cometpath, .hiw-an .hz-outpath { stroke: rgba(194,87,10,.25); }
.hiw-an .hz.s4 .hz-outpath { stroke: rgba(234,88,12,.6); }
.hiw-an .hz-beam { stroke: #EA580C; filter: drop-shadow(0 0 4px rgba(249,115,22,.45)); }
.hiw-an .hz-pt { fill: #C2570A; }
.hiw-an .hz-out { fill: #F97316; filter: drop-shadow(0 0 4px rgba(249,115,22,.6)); }
.hiw-an .hz-comet { fill: #F97316; filter: drop-shadow(0 0 8px rgba(249,115,22,.8)); }
.hiw-an .hz-shield { stroke: #16A34A; filter: drop-shadow(0 0 5px rgba(22,163,74,.4)); }
.hiw-an .hz-n { border: 1px solid var(--bdr); box-shadow: 0 8px 18px -12px rgba(60,20,0,.35); }
.hiw-an .hz.s1 .hz-n:not(.pick) { opacity: .35; }
.hiw-an .hz.s1 .hz-n.pick { box-shadow: 0 0 0 3px #FB923C, 0 0 22px rgba(249,115,22,.4); border-color: transparent; }
.hiw-an .hz-hub { border: 1px solid #FED7AA; box-shadow: 0 0 0 8px rgba(249,115,22,.12), 0 0 40px rgba(249,115,22,.35); }
.hiw-an .hz-chip.c-sql { background: #fff; border: 1px solid var(--bdr); color: var(--t1); box-shadow: 0 6px 16px -10px rgba(60,20,0,.35); }
.hiw-an .hz-chip.c-sql svg { color: var(--or-dk); }
.hiw-an .hz-chip.c-chk { background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; box-shadow: 0 6px 16px -10px rgba(22,101,52,.35); }
.hiw-an .hz-card { border: 1px solid #FED7AA; box-shadow: 0 20px 40px -28px rgba(194,87,10,.45); opacity: .35; filter: grayscale(1) blur(1.5px); }
.hiw-an .hz.s4 .hz-card { opacity: 1; filter: none; }
.hiw-an .hz-toast { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.hiw-an .hz-toast b { color: #14532D; }
.hiw-an .hz-toast svg { color: #16A34A; }
.hiw-an .hz-foot { background: rgba(255,255,255,.7); border-color: #FED7AA; }
.hiw-an .hz-st { color: var(--t3); }
.hiw-an .hz-st .d { background: #F5F4F2; color: var(--t3); }
.hiw-an .hz-st.done { color: var(--t2); }
.hiw-an .hz-st.done .d { background: #FFEDD5; color: var(--or-dk); }
.hiw-an .hz-st.cur { background: #FFF4ED; color: var(--t1); }
.hiw-an .hz-st.cur .d { background: var(--or); color: #fff; }
.hiw-an .hz-cap { color: var(--t2); }
.hiw-an .hz-replay { color: var(--t2); border-color: var(--bdr); background: #fff; }
.hiw-an .hz-replay:hover { border-color: var(--or); color: var(--or-dk); }

/* ── Capabilities: full-width "Alerts and agents" card ── */
.bn-c.bn-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.bn-wide .bn-v { height: auto; border-bottom: 0; border-right: 1px solid var(--bdr-l); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: center; padding: 22px 24px; }
.bn-wide .bn-t { display: flex; flex-direction: column; justify-content: center; }
.v-agents .lv-row { padding: 10px 12px; }
@media (max-width: 1100px) { .bn-c.bn-wide { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  .bn-c.bn-wide { grid-template-columns: minmax(0, 1fr); }
  .bn-wide .bn-v { border-right: 0; border-bottom: 1px solid var(--bdr-l); }
}
@media (max-width: 768px) {
  .bn-c.bn-wide { display: flex; flex-direction: column; }
  .bn-wide .bn-v { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 6px; height: auto; }
  .bn-wide .bn-v .lv-row:nth-child(n+3) { display: none; }
}

/* ── Security: hands-on "View as" demo ── */
.secu-demo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; margin-top: 34px; padding: 28px; border-radius: 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.secu-demo-t h3 { margin-top: 14px; font-size: 24px; font-weight: 400; letter-spacing: -.03em; color: #fff; }
.secu-demo-t p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.65); }
.secu-demo .lv { background: #FAFAF9; }
@media (max-width: 900px) { .secu-demo { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; } }
@media (max-width: 768px) { .secu-demo .lv { padding: 14px; } .secu-demo .lv-tbl { font-size: 11.5px; } .secu-demo .lv-tbl th, .secu-demo .lv-tbl td { padding: 8px 6px; } }

/* ── Capabilities v2: bento with a hero card and ecosystem gradients ── */
.bn { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
.bn-c, .bn-c.bn-wide { grid-column: auto; }
.bn-c.bn-hero { grid-column: 1 / span 2; grid-row: span 2; }
.bn-c.bn-half, .bn-c.bn-wide.bn-half { grid-column: span 2; display: flex; flex-direction: column; }
.bn-wide.bn-half .bn-v { border-right: 0; }
/* visual areas: the homepage ecosystem gradients + dot texture */
.bn-v { isolation: isolate; height: 172px; border-bottom: 0; }
.bn-v::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.28) 1px, transparent 1.2px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(70% 60% at 15% 85%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 15% 85%, #000, transparent 75%); }
.g1 .bn-v { background: radial-gradient(60% 55% at 12% 10%, rgba(255,237,213,.85), transparent 70%), linear-gradient(140deg, #FDBA74 0%, #FB923C 40%, #EA580C 100%); }
.g2 .bn-v { background: radial-gradient(60% 55% at 12% 10%, rgba(254,243,199,.9), transparent 70%), linear-gradient(140deg, #FDE68A 0%, #FBBF24 38%, #F97316 100%); }
.g3 .bn-v { background: radial-gradient(60% 55% at 12% 10%, rgba(254,215,170,.75), transparent 70%), linear-gradient(140deg, #FB923C 0%, #F97316 40%, #B8430A 100%); }
.gd .bn-v { background: radial-gradient(60% 55% at 85% 12%, rgba(249,115,22,.55), transparent 70%), linear-gradient(140deg, #1A0A00 0%, #4A1A06 50%, #9A3412 100%); }
.bn-c { border-color: var(--bdr); }
.bn-c:hover { border-color: #FDBA74; }
/* white floating UI on the gradients */
.bn-v .bot, .bn-v .da, .bn-v .fu span, .bn-v .ln-col span, .bn-v .fx-l:not(.er):not(.ok), .bn-v .dc { background: #fff; box-shadow: 0 10px 24px -14px rgba(60,20,0,.45); border-color: transparent; }
.bn-v .fu span { color: var(--or-dk); }
.bn-v .me { box-shadow: 0 10px 24px -14px rgba(0,0,0,.5); }
.bn-v .fx-l.er, .bn-v .fx-l.ok { box-shadow: 0 10px 24px -14px rgba(60,20,0,.45); }
.v-join .jl path, .ln-w path { stroke: rgba(255,255,255,.9); }
.v-fc .ln { stroke: #fff; } .v-fc .fl { stroke: #fff; opacity: .85; } .v-fc .band { fill: rgba(255,255,255,.28); } .v-fc .now { stroke: rgba(255,255,255,.6); }
.mo .bn-c.in .v-fc .fl { opacity: .85; }
.v-fc .an { color: #fff; text-shadow: 0 1px 2px rgba(120,20,0,.5); }
.v-fc .an i { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.3); }
.v-fc .fcl { border-color: transparent; box-shadow: 0 8px 18px -12px rgba(60,20,0,.45); }
.jn { border-color: transparent; }
.ln-m { border: 0; box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 12px 26px -14px rgba(60,20,0,.5); }
.da mark { background: linear-gradient(transparent 55%, #FED7AA 55%); }
.gd .v-agents .lv-row { border-color: transparent; box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
/* hero card: larger visual with a mini chart */
.bn-hero .bn-v { flex: 1; height: auto; min-height: 380px; padding: 30px 32px; justify-content: center; gap: 12px; }
.bn-hero .v-chat .me, .bn-hero .v-chat .bot { font-size: 14.5px; padding: 12px 16px; }
.bn-hero .v-chat .bot { max-width: 92%; }
.bn-hero .v-chat .fu span:nth-child(3) { display: inline-block; }
.bn-hero .bn-t h3 { font-size: 24px; }
.bn-hero .bn-t p { font-size: 15.5px; max-width: 520px; }
.bn-c.bn-hero { display: flex; flex-direction: column; }
.v-chat .mini { display: grid; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bdr-l); }
.v-chat .mini div { display: grid; grid-template-columns: 96px 1fr 38px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--t2); }
.v-chat .mini .b { height: 7px; border-radius: 4px; background: #F0EEEC; overflow: hidden; }
.v-chat .mini .b i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #EA580C, #FB923C); transform-origin: left; }
.v-chat .mini em { font-style: normal; font-weight: 600; color: var(--t1); text-align: right; }
.mo .bn-c.in .v-chat .mini .b i { animation: an2Grow .9s var(--ease) .9s both; }
.v-chat .fu { margin-top: 2px; }
/* small cards: text sized for the narrower column */
.bn-c:not(.bn-hero):not(.bn-half) .bn-t h3 { font-size: 17.5px; }
.bn-c:not(.bn-hero):not(.bn-half) .bn-t p { font-size: 14px; }
.v-lin { grid-template-columns: auto 30px 1fr; }
.ln-w { width: 30px; }
.ln-m small { font-size: 11px; }
@media (max-width: 1100px) {
  .bn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-c.bn-hero { grid-column: 1 / -1; grid-row: auto; }
  .bn-hero .bn-v { min-height: 300px; }
  .bn-c, .bn-c.bn-wide { grid-column: auto; }
  .bn-c.bn-half, .bn-c.bn-wide.bn-half { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .bn-v { height: 160px; }
  .bn-hero .bn-v { min-height: 0; height: auto; padding: 18px; gap: 8px; }
  .bn-hero .v-chat .me, .bn-hero .v-chat .bot { font-size: 13px; padding: 9px 12px; }
  .v-chat .mini div { grid-template-columns: 82px 1fr 34px; font-size: 11.5px; }
  .bn-hero .v-chat .fu span:nth-child(3) { display: none; }
  .bn-hero .bn-t h3 { font-size: 19px; } .bn-hero .bn-t p { font-size: 14.5px; }
  .bn-c.bn-half, .bn-c.bn-wide.bn-half { flex: 0 0 84%; }
  .bn-wide.bn-half .bn-v { height: auto; }
}
/* anomaly label sits to the left of its dot so it never runs off the card */
.v-fc .an { flex-direction: row-reverse; transform: translateX(calc(-100% + 12px)); }
@media (max-width: 768px) { .bn-v.v-doc { height: auto; min-height: 160px; } }

/* ── Alerts and agents: live updates must never change the layout ── */
.v-agents .pst { min-width: 88px; justify-content: center; }
.v-agents .lv-row > span:nth-child(2) { flex: 1; min-width: 0; }
.v-agents .lv-row b, .v-agents .lv-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-ago { display: inline-block; min-width: 10.5ch; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
  .bn-wide.bn-half .bn-v { height: 168px; }
  .v-agents .lv-row { height: 62px; }
}

/* ── Alerts and agents: short, complete content (nothing cut off) ── */
.v-agents .lv-row b, .v-agents .lv-row small { text-overflow: clip; }
@media (max-width: 768px) {
  .bn-wide.bn-half .bn-v { height: 236px; gap: 6px; padding: 14px; }
  .bn-wide .bn-v .lv-row:nth-child(n+3) { display: flex; }
  .v-agents .lv-row { height: 48px; padding: 0 10px; gap: 10px; }
  .v-agents .lv-row .ic { width: 26px; height: 26px; }
  .v-agents .lv-row b { font-size: 13px; } .v-agents .lv-row small { font-size: 11.5px; }
  .v-agents .pst { min-width: 82px; font-size: 10.5px; }
}

/* ── How it works on phones: a clear top-to-bottom flow ── */
@media (max-width: 768px) {
  /* one box only: the light-orange section box; the stage panel goes flat */
  .hiw-an .hz { background: none; border: 0; box-shadow: none; border-radius: 0; margin: 0; overflow: visible; }
  .hiw-an .hz::before { display: none; }
  .hiw-an { padding-left: 5%; padding-right: 5%; }
  .hiw-an .hz-stage { padding: 0; gap: 0; }
  .hiw-an .hz-ask .hz-k, .hiw-an .hz-ans .hz-k { margin-bottom: 8px; }
  /* the core: all 8 connected tools (Zenzo highlights the 3 it needs) → Zenzo → two checks, joined by a dashed line */
  .hiw-an .hz-core { aspect-ratio: auto; width: auto; margin: 0; display: grid; grid-template-columns: repeat(4, 48px); justify-content: center; column-gap: 16px; row-gap: 12px; padding: 26px 0; }
  .hiw-an .hz-core::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed #FDBA74; transform: translateX(-1px); z-index: 0; }
  .hiw-an .hz-core svg { display: none; }
  .hiw-an .hz-n { position: relative; left: auto !important; top: auto !important; margin: 0; width: 48px; height: 48px; border-radius: 14px; }
  .hiw-an .hz-n { z-index: 1; }
  .hiw-an .hz.s1 .hz-n:not(.pick) { opacity: .3; transform: scale(.86); filter: grayscale(1); }
  .hiw-an .hz-n i { width: 30px; height: 30px; } .hiw-an .hz-n i img { width: 16px; height: 16px; } .hiw-an .hz-n i.f img { width: 26px; height: 26px; }
  .hiw-an .hz.s1 .hz-n.pick { transform: scale(1.06); }
  .hiw-an .hz-hub { position: relative; left: auto; top: auto; margin: 12px 0 4px; grid-column: 1 / -1; justify-self: center; width: 64px; height: 64px; border-radius: 20px; }
  .hiw-an .hz-hub img { width: 34px; height: 34px; }
  .hiw-an .hz.s3 .hz-hub { box-shadow: 0 0 0 4px #fff, 0 0 0 6px #16A34A, 0 0 30px rgba(22,163,74,.35); }
  .hiw-an .hz-chip { position: relative; left: auto; top: auto !important; grid-column: 1 / -1; justify-self: center; transform: translateY(6px); font-size: 12.5px; padding: 6px 12px; }
  .hiw-an .hz.s2 .hz-chip.c-sql, .hiw-an .hz.s3 .hz-chip.c-chk { transform: none; }
  .hiw-an .hz-chip .lg { display: inline; } .hiw-an .hz-chip .sm { display: none; }
  .hiw-an .hz-ans { margin-top: 0; }
  .hiw-an .hz-card { padding: 14px 16px; }
  .hiw-an .hz-rows div { grid-template-columns: 104px 1fr 24px; }
  /* steps: five equal slots, narration and Replay underneath */
  .hiw-an .hz-foot { display: block; margin: 18px 0 0; padding: 14px; }
  .hiw-an .hz-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .hiw-an .hz-st { flex-direction: column; gap: 4px; padding: 6px 2px; font-size: 11px; border-radius: 10px; }
  .hiw-an .hz-st .d { width: 24px; height: 24px; }
  .hiw-an .hz-cap { margin-top: 12px; font-size: 14px; min-height: 2.9em; }
  .hiw-an .hz-replay { margin-top: 10px; }
}
/* fixed-width badges mean wrapping is stable, so let text wrap instead of cutting it off */
.v-agents .lv-row b, .v-agents .lv-row small { white-space: normal; overflow: visible; text-overflow: clip; }
.v-agents .pst { width: 84px; min-width: 0; flex-shrink: 0; }
@media (max-width: 768px) {
  .bn-wide.bn-half .bn-v { height: auto; }
  .v-agents .lv-row { height: auto; min-height: 48px; padding: 8px 10px; }
}

/* ── Capabilities: real people (who asks) ── */
.v-chat .q-row { display: flex; align-items: flex-end; justify-content: flex-end; gap: 10px; }
.v-chat .q-row .me { max-width: 78%; }
.v-chat .pf { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.v-chat .pf img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 8px 18px -10px rgba(60,20,0,.55); }
.v-chat .pf small { font-size: 11px; font-weight: 600; color: #fff; letter-spacing: .01em; white-space: nowrap; text-shadow: 0 1px 2px rgba(120,40,0,.35); }
.bn-t .who { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.bn-t .who img { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px #FED7AA; }
.bn-t .who span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.bn-t .who b { font-size: 12px; font-weight: 600; color: var(--or-dk); letter-spacing: .01em; }
.bn-t .who small { font-size: 13px; color: var(--t2); font-style: italic; }
@media (max-width: 768px) {
  .v-chat .pf img { width: 32px; height: 32px; }
  .v-chat .pf small { font-size: 10px; }
}

/* ── Product pages (BI, Knowledge, Brain): shared additions ── */
/* How it works: icon and product-mark nodes, positive bars, citation lists, concept note */
.hz-n i.g { background: #FFF4ED; color: var(--or-dk); }
.hz-n i.g svg { width: 16px; height: 16px; }
.hz-n i.p { background: none; width: 34px; height: 34px; }
.hz-n i.p svg { width: 34px; height: 34px; border-radius: 10px; }
.hz-rows.pos .b i { background: linear-gradient(90deg, #EA580C, #FB923C); }
.hz-rows.pos em { color: var(--or-dk); }
.hz-cites { list-style: none; display: grid; gap: 8px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--bdr-l); }
.hz-cites li { display: flex; gap: 10px; align-items: flex-start; }
.hz-cites .n { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; background: #FFF4ED; color: var(--or-dk); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.hz-cites b { display: block; font-size: 13px; font-weight: 600; color: var(--t1); }
.hz-cites small { display: block; font-size: 11.5px; color: var(--t3); }
.hz-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 0; font-size: 13px; color: var(--t3); text-align: center; }
.hz-note svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--or-dk); }
/* bento: chart-type grid, citations and plan rows in the chat card, orange doc icon */
.v-ct { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.v-ct .ct { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.v-ct .ct span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; background: #fff; font-size: 10.5px; color: var(--t2); box-shadow: 0 10px 24px -14px rgba(60,20,0,.45); }
.v-ct .ct svg { width: 15px; height: 15px; color: var(--or-dk); }
.v-ct .ct-n { align-self: flex-start; font-size: 11.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(120,40,0,.35); }
.mo .v-ct .ct span { opacity: 0; transform: scale(.9); transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: calc(var(--d) * .07s + .3s); }
.mo .bn-c.in .v-ct .ct span { opacity: 1; transform: none; }
.v-chat .cites, .v-chat .plan { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bdr-l); }
.v-chat .cites span, .v-chat .plan span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--t2); }
.v-chat .cites i { font-style: normal; flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; background: #FFF4ED; color: var(--or-dk); font-size: 10.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.v-chat .plan i { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px #DCFCE7; }
.v-chat .plan em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600; color: #15803D; }
.dci.o { background: #FFF4ED; color: var(--or-dk); }
@media (max-width: 768px) {
  .hiw-an .hz-n i.p, .hiw-an .hz-n i.p svg { width: 34px; height: 34px; }
  .v-ct .ct span { font-size: 9.5px; padding: 6px 2px; }
}
.hz-rows.pos div { grid-template-columns: 112px 1fr 34px; }
@media (max-width: 768px) {
  .hiw-an .hz-rows.pos div { grid-template-columns: 96px 1fr 34px; }
  /* phones: let short code lines wrap instead of cutting them off */
  .bn-v.v-fix, .bn-v.v-lin { height: auto; min-height: 160px; }
  .bn-v .fx-l { white-space: normal; align-items: flex-start; line-height: 1.4; }
  .bn-v .fx-l svg { margin-top: 2px; }
  .v-lin { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
  .ln-w { width: 24px; }
  .ln-col span { font-size: 11px; padding: 6px 8px; overflow-wrap: anywhere; }
  .ln-m { padding: 10px 12px; } .ln-m b { font-size: 13.5px; }
}
/* icons inside nodes and chips are inline, not the full-size diagram svg */
.hz-core .hz-n svg, .hz-core .hz-chip svg { position: static; inset: auto; overflow: visible; }
.hz-core .hz-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 768px) {
  .hiw-an .hz-core .hz-n svg { display: block; }
  .hiw-an .hz-core .hz-chip svg { display: inline-block; }
}
@media (max-width: 768px) { .hiw-an .hz[data-n="6"] .hz-core { grid-template-columns: repeat(3, 48px); } }

/* ── BI Before/After: two dashboards vs one trusted dashboard ── */
.bd { position: relative; background: #fff; border: 1px solid var(--bdr-l); border-radius: 16px; padding: 14px 16px; box-shadow: 0 10px 24px -18px rgba(60,20,0,.35); }
.bd-top { display: flex; align-items: center; gap: 8px; }
.bd-top b { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--t1); }
.bd-top > img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bd-app { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; background: #F5F4F2; color: var(--t2); display: flex; align-items: center; justify-content: center; }
.bd-app svg { width: 13px; height: 13px; }
.bd-app.o { background: #FFF4ED; } .bd-app.o img { width: 15px; height: 15px; }
.bd-k { margin-top: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.bd-v { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--t1); font-variant-numeric: tabular-nums; line-height: 1.2; }
.bd-v em { font-style: normal; font-size: 13px; font-weight: 600; color: #15803D; margin-left: 6px; letter-spacing: 0; }
.bd-sp { display: block; width: 100%; height: 32px; margin-top: 8px; }
.bd-sp path { fill: none; stroke: #A8A29E; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bd-note { margin-top: 8px; font-size: 11.5px; color: var(--t3); }
.bd-pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.bd-pair .bd-v { color: #B91C1C; }
.bd-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: #FEE2E2; border: 3px solid #F5F4F2; color: #B91C1C; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bd-ask { display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--bdr-l); }
.bd-ask > img { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.bd-ask b { display: block; font-size: 13px; font-weight: 600; color: var(--t1); }
.bd-ask b small { font-weight: 400; color: var(--t3); font-size: 11.5px; margin-left: 6px; }
.bd-ask p { font-size: 13.5px; line-height: 1.5; color: var(--t2); margin-top: 2px; }
.bd-wait { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: #B91C1C; padding: 4px 10px; border-radius: 8px; background: #FEF2F2; border: 1px solid #FECACA; }
.bd-wait svg { width: 13px; height: 13px; }
.bd-one { border-color: #FED7AA; padding: 16px 18px; }
.bd-cert { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: #15803D; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 999px; padding: 2px 8px; }
.bd-cert svg { width: 11px; height: 11px; }
.bd-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bd-def { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--or-dk); background: #FFF4ED; border: 1px solid #FED7AA; border-radius: 999px; padding: 3px 10px; margin-bottom: 4px; }
.bd-def svg { width: 12px; height: 12px; }
.bd-one .bd-sp path { stroke: #EA580C; stroke-width: 2.5; }
.bd-story { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #FFF7ED; border: 1px solid #FFEDD5; }
.bd-sk { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--or-dk); }
.bd-sk svg { width: 12px; height: 12px; }
.bd-story p { font-size: 13.5px; line-height: 1.5; color: var(--t2); margin-top: 4px; }
.bd-story b { color: var(--t1); font-weight: 600; }
.bd-by { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--t3); }
.bd-by img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.bd-by b { color: var(--t1); font-weight: 600; }
/* motion: the two numbers appear, the ≠ pops; the trusted dashboard and its story follow */
.mo .ba-dash .bd-pair .bd, .mo .ba-dash .bd-ask, .mo .ba-dash .bd-one, .mo .ba-dash .bd-story { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mo .ba-dash .d2 { transition-delay: .2s; } .mo .ba-dash .bd-ask { transition-delay: .7s; }
.mo .ba-dash .bd-one { transition-delay: .5s; } .mo .ba-dash .bd-story { transition-delay: 1.1s; }
.mo .ba-dash .bd-vs { transform: translate(-50%, -50%) scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1) .5s; }
.mo .ba-dash.in .bd-pair .bd, .mo .ba-dash.in .bd-ask, .mo .ba-dash.in .bd-one, .mo .ba-dash.in .bd-story { opacity: 1; transform: none; }
.mo .ba-dash.in .bd-vs { transform: translate(-50%, -50%) scale(1); }
@media (max-width: 768px) {
  .bd-pair { gap: 10px; }
  .bd { padding: 12px; }
  .bd-pair .bd-v { font-size: 20px; }
  .bd-pair .bd-top b { font-size: 12px; }
  .bd-pair .bd-top > img { display: none; }
  .bd-v { font-size: 22px; }
}

/* ══ Zenzo BI page ══ */
/* hero: import logos on the trust line */
.trust-lg { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: middle; }
.trust-lg .tl { width: 24px; height: 24px; border-radius: 7px; background: #fff; border: 1px solid var(--bdr); display: inline-flex; align-items: center; justify-content: center; }
.trust-lg i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: var(--c, transparent); }
.trust-lg i img { width: 14px; height: 14px; } .trust-lg i.m img { width: 10px; height: 10px; filter: brightness(0) invert(1); }
/* hero: the preview builds itself */
.mo .pv-bi .pv-draw { clip-path: inset(0 100% 0 0); animation: biDraw 1.6s var(--ease) .5s forwards; }
@keyframes biDraw { to { clip-path: inset(0 0 0 0); } }
.mo .pv-bi .pv-kpi { animation: an2Up .6s var(--ease) both; }
.mo .pv-bi .pv-kpi:nth-child(2) { animation-delay: .1s; } .mo .pv-bi .pv-kpi:nth-child(3) { animation-delay: .2s; }
.pv-bi .pv-kpi b { font-variant-numeric: tabular-nums; }
.pv-type.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--or); animation: an2Blink .8s steps(1) infinite; }
.mo .pv-bi .pv-drill { opacity: 0; transition: opacity .5s; } .mo .pv-bi.typed .pv-drill { opacity: 1; }
/* capabilities: rolling-out tag inside a line */
.fx-l .ro { margin-left: auto; padding-left: 8px; font-family: var(--ff-ui, inherit); font-style: normal; font-size: 10px; font-weight: 600; color: #B45309; white-space: nowrap; }
/* CTA: what early access includes */
.cta-inc { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; padding: 0; }
.cta-inc li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.92); }
.cta-inc svg { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; }

/* How it works: a dashboard assembles itself */
.hb-stage { position: relative; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px; padding: 32px 32px 8px; align-items: start; }
.hb .hz-k { display: flex; align-items: center; gap: 6px; }
.hb .hz-k svg { width: 13px; height: 13px; }
.hb-sem { padding: 18px; border-radius: 20px; background: #fff; border: 1px solid #FED7AA; box-shadow: 0 20px 40px -32px rgba(194,87,10,.45); }
.hb-m { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #FFF7ED; border: 1px solid #FFEDD5; margin-top: 8px; transition: opacity .45s var(--ease), transform .45s var(--ease), border-color .4s; transition-delay: calc(var(--d) * .25s); }
.hb-m b { display: block; font-size: 13px; font-weight: 600; color: var(--t1); }
.hb-m code { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--t3); margin-top: 2px; }
.hb-m i { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #DCFCE7; color: #15803D; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s var(--ease); transition-delay: calc(var(--d) * .15s + .2s); }
.hb-m i svg { width: 11px; height: 11px; }
.hb-dims { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; transition: opacity .45s var(--ease) .75s; }
.hb-dims span { font-size: 11.5px; color: var(--t2); padding: 3px 9px; border-radius: 999px; background: #F5F4F2; }
.hb-note { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; color: #15803D; transition: opacity .45s .9s; }
.hb-note svg { width: 14px; height: 14px; }
.hb-canvas { position: relative; padding: 0 0 16px; border-radius: 20px; background: #fff; border: 1px solid #FED7AA; box-shadow: 0 24px 50px -36px rgba(194,87,10,.5); overflow: hidden; }
.hb-bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--bdr-l); font-size: 12.5px; }
.hb-bar .app-dots { display: flex; gap: 6px; } .hb-bar .app-dots i { width: 9px; height: 9px; border-radius: 50%; background: #E7E5E4; }
.hb-bar > b { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--t1); flex: 1; min-width: 0; }
.hb-bar > b img { width: 16px; height: 16px; }
.hb-view { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); padding: 4px 10px; border-radius: 999px; background: #F5F4F2; transition: background .4s, color .4s; }
.hb-view svg { width: 12px; height: 12px; }
.hb-view b { color: inherit; font-weight: 600; }
.hb .emea { display: none; }
.hb.s3 .all { display: none; } .hb.s3 .emea { display: inline; }
.hb.s3 .hb-view { background: #F0FDF4; color: #15803D; }
.hb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 0; }
.hb-w { position: relative; min-height: 74px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed #FED7AA; background: #FFFBF7; transition: border-color .4s, background .4s, box-shadow .4s; transition-delay: calc(var(--d) * .22s); }
.hb-w > * { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: calc(var(--d) * .22s + .1s); }
.hb-w small { display: block; font-size: 11px; color: var(--t3); }
.hb-w.kpi b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--t1); margin-top: 4px; font-variant-numeric: tabular-nums; }
.hb-w.kpi em { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: #15803D; margin-top: 2px; }
.hb-w.kpi em.d { color: #B91C1C; } .hb.s3 .hb-w.kpi em.d { color: #15803D; }
.hb-w.chart { grid-column: span 2; }
.hb-w.chart svg { display: block; width: 100%; height: 78px; margin-top: 8px; }
.hb-w.chart .ar { fill: rgba(249,115,22,.14); } .hb-w.chart .ln { fill: none; stroke: #EA580C; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hb-w.rgn > div { display: grid; grid-template-columns: 70px 1fr 40px; align-items: center; gap: 8px; margin-top: 9px; font-size: 11.5px; color: var(--t2); transition: opacity .5s, filter .5s; }
.hb-w.rgn .b { height: 7px; border-radius: 4px; background: #F0EEEC; overflow: hidden; }
.hb-w.rgn .b i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #EA580C, #FB923C); }
.hb-w.rgn em { font-style: normal; font-weight: 600; text-align: right; color: var(--t1); }
.hb-lock { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 10.5px; color: #15803D; opacity: 0; transition: opacity .4s .3s; }
.hb-lock svg { width: 11px; height: 11px; }
.hb.s3 .hb-w.rgn .rls { opacity: .35; filter: blur(2.5px); }
.hb.s3 .hb-lock { opacity: 1; }
.hb-story { margin: 12px 16px 0; padding: 12px 14px; border-radius: 12px; background: #FFF7ED; border: 1px solid #FFEDD5; opacity: .25; filter: grayscale(1); transition: opacity .5s, filter .5s; }
.hb-sk { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--or-dk); }
.hb-sk svg { width: 12px; height: 12px; }
.hb-story p { font-size: 13.5px; line-height: 1.5; color: var(--t2); margin-top: 4px; min-height: 2.9em; }
.hb-type.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--or); animation: an2Blink .8s steps(1) infinite; }
.hb-toast { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 10px 14px; border-radius: 12px; background: #F0FDF4; border: 1px solid #BBF7D0; font-size: 13px; color: #166534; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.hb-toast svg { width: 16px; height: 16px; color: #16A34A; flex-shrink: 0; }
.hb-toast b { color: #14532D; }
/* states, cumulative: s1 model · s2 build · s3 check · s4 explain · s5 share */
.hb:not(.s1) .hb-m, .hb:not(.s1) .hb-dims, .hb:not(.s1) .hb-note { opacity: 0; transform: translateY(6px); }
.hb.s2 .hb-m i { opacity: 1; transform: none; }
.hb.s2 .hb-w { border-style: solid; border-color: var(--bdr-l); background: #fff; }
.hb.s2 .hb-w > * { opacity: 1; transform: none; }
.hb.s4 .hb-story { opacity: 1; filter: none; }
.hb.s5 .hb-toast { opacity: 1; transform: none; }
.hb .hz-foot { margin: 16px 24px 24px; }
@media (max-width: 1100px) { .hb-stage { grid-template-columns: minmax(0, 1fr); } .hb-sem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .hb-sem .hz-k, .hb-dims, .hb-note { grid-column: 1 / -1; } .hb-m { margin-top: 0; } }
@media (max-width: 768px) {
  .hiw-an .hb-stage { padding: 0; gap: 14px; }
  .hb-sem { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .hb-m { padding: 8px 10px; }
  .hb-bar { height: auto; flex-wrap: wrap; padding: 10px 12px; gap: 6px 10px; }
  .hb-bar .app-dots { display: none; }
  .hb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 10px 0; }
  .hb-w { padding: 9px; min-height: 0; }
  .hb-w.kpi small { font-size: 9.5px; line-height: 1.25; }
  .hb-w.kpi b { font-size: 16px; } .hb-w.kpi em { font-size: 10.5px; }
  .hb-w.chart, .hb-w.rgn { grid-column: 1 / -1; }
  .hb-story, .hb-toast { margin-left: 10px; margin-right: 10px; }
  .hiw-an .hb .hz-foot { margin: 18px 0 0; }
}
/* capabilities grid: switch to two columns on small laptops (cards were too narrow below 1300px) */
@media (max-width: 1300px) {
  .bn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-c.bn-hero { grid-column: 1 / -1; grid-row: auto; }
  .bn-hero .bn-v { min-height: 300px; }
  .bn-c, .bn-c.bn-wide { grid-column: auto; }
  .bn-c.bn-half, .bn-c.bn-wide.bn-half { grid-column: 1 / -1; }
}

/* ══ Zenzo Knowledge page ══ */
/* hero: the question types, then the answer and citations arrive */
.mo .pv-kn .pv-card { animation-delay: 1.7s; }
.mo .pv-kn .pv-sup { animation: knPop .35s cubic-bezier(.3,1.6,.5,1) both; animation-delay: 2.2s; }
.mo .pv-kn .pv-sup + .pv-sup, .mo .pv-kn .pv-p .pv-sup:last-child { animation-delay: 2.35s; }
@keyframes knPop { from { transform: scale(0); } to { transform: scale(1); } }
.mo .pv-kn .pv-cite > div { animation: an2Up .5s var(--ease) both; animation-delay: 2.5s; }
.mo .pv-kn .pv-cite > div + div { animation-delay: 2.7s; }
.mo .pv-kn .pv-chips { animation-delay: 3.1s; }
.mo .pv-kn .pv-warn { animation: knBlink .5s ease-in-out 3.4s 2; }
@keyframes knBlink { 50% { opacity: .25; } }
.pv-kn .pv-type.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--or); animation: an2Blink .8s steps(1) infinite; }
/* proof strip */
.p-proof .intg-chips i.g { background: #FFF4ED; color: var(--or-dk); display: inline-flex; align-items: center; justify-content: center; }
.p-proof .intg-chips i.g svg { width: 11px; height: 11px; }
/* before/after: version cards */
.bd-meta { margin-top: 4px; font-size: 11px; color: var(--t3); }
.bd-pair .bd-app i { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--c, transparent); }
.bd-pair .bd-app i img { width: 10px; height: 10px; filter: brightness(0) invert(1); }
.bd-q { margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: #FAFAF9; border: 1px solid var(--bdr-l); font-size: 13px; color: var(--t2); }
.bd-vers { display: grid; gap: 6px; margin-top: 12px; }
.bd-vers span { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 6px 10px; border-radius: 8px; }
.bd-vers svg { width: 12px; height: 12px; flex-shrink: 0; }
.bd-vers .cur { color: #15803D; background: #F0FDF4; border: 1px solid #BBF7D0; }
.bd-vers .old { color: var(--t3); background: #FAFAF9; border: 1px solid var(--bdr-l); text-decoration: line-through; }
.bd-vers .old svg { transform: rotate(45deg); }
.mo .ba-dash .bd-vers span { opacity: 0; transform: translateX(-6px); transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: 1.1s; }
.mo .ba-dash .bd-vers .old { transition-delay: 1.35s; }
.mo .ba-dash.in .bd-vers span { opacity: 1; transform: none; }
/* how it works: govern step locks spaces before search */
.hz-n .lk { position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: #1C1917; color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s var(--ease); }
.hz-n .lk svg { width: 10px; height: 10px; }
.hiw-an .hz[data-flow="gov"].s1 .hz-n:not(.pick):not(.lock) { opacity: 1; transform: none; filter: none; }
.hiw-an .hz[data-flow="gov"].s1 .hz-n.pick { transform: none; box-shadow: 0 8px 18px -12px rgba(60,20,0,.35); border-color: var(--bdr); }
.hiw-an .hz[data-flow="gov"].s1 .hz-n.lock { opacity: .4; transform: scale(.9); filter: grayscale(1); }
.hz[data-flow="gov"].s1 .hz-n.lock .lk { opacity: 1; transform: none; }
.hiw-an .hz[data-flow="gov"].s2 .hz-n:not(.pick):not(.lock) { opacity: .35; filter: grayscale(1); }
.hiw-an .hz[data-flow="gov"].s2 .hz-n.pick { transform: scale(1.12); box-shadow: 0 0 0 3px #FB923C, 0 0 22px rgba(249,115,22,.4); border-color: transparent; }
.hz[data-flow="gov"].s1:not(.s2) .hz-beam { stroke-dashoffset: 1; opacity: 0; }
@media (max-width: 768px) {
  .hiw-an .hz[data-flow="gov"].s2 .hz-n.pick { transform: scale(1.06); }
  .hz-n .lk { right: -5px; top: -5px; width: 18px; height: 18px; }
}
/* capabilities: hybrid search lists, evidence meter, source authority */
.v-hy { display: flex; align-items: center; }
.hy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.hy-c { display: grid; gap: 5px; align-content: start; }
.hy-k { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(120,40,0,.3); }
.hy-c i { font-style: normal; font-size: 10.5px; color: var(--t2); background: rgba(255,255,255,.85); border-radius: 7px; padding: 5px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hy-c.top i { background: #fff; color: var(--t1); font-weight: 500; box-shadow: 0 8px 18px -12px rgba(60,20,0,.5); display: flex; gap: 5px; align-items: center; }
.hy-c.top i b { flex-shrink: 0; width: 14px; height: 14px; border-radius: 4px; background: #FFF4ED; color: var(--or-dk); font-size: 9px; display: flex; align-items: center; justify-content: center; }
.mo .v-hy .hy-c.top i { opacity: 0; transform: translateX(-6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.mo .v-hy .hy-c.top i:nth-of-type(2) { transition-delay: .7s; } .mo .v-hy .hy-c.top i:nth-of-type(3) { transition-delay: .85s; } .mo .v-hy .hy-c.top i:nth-of-type(1) { transition-delay: .55s; }
.mo .bn-c.in .v-hy .hy-c.top i { opacity: 1; transform: none; }
.v-ev { display: flex; align-items: center; }
.ev { position: relative; width: 100%; padding: 14px 14px 12px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -14px rgba(60,20,0,.45); }
.ev-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.ev-bar span { position: relative; padding-top: 12px; font-size: 10.5px; color: var(--t3); text-align: center; }
.ev-bar span::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px; }
.ev-bar .s::before { background: #16A34A; } .ev-bar .m::before { background: #F59E0B; } .ev-bar .w::before { background: #FB923C; } .ev-bar .n::before { background: #E7E5E4; }
.ev-bar .on { color: #15803D; font-weight: 600; }
.ev-bar .on::before { height: 8px; top: -1px; box-shadow: 0 0 0 3px #DCFCE7; }
.ev-res { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #15803D; }
.ev-res svg { width: 13px; height: 13px; }
.ev-alt { margin-top: 3px; font-size: 11px; color: var(--t3); }
.mo .v-ev .ev-bar .on::before { animation: knPulse 1.6s ease-in-out .6s 2; }
@keyframes knPulse { 50% { box-shadow: 0 0 0 6px rgba(22,163,74,.12); } }
.v-au { display: flex; align-items: center; }
.au { position: relative; width: 100%; display: grid; }
.au-c { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px -14px rgba(60,20,0,.45); }
.au-c span:nth-child(2) { flex: 1; min-width: 0; }
.au-c b { display: block; font-size: 12.5px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-c small { display: block; font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-r { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; background: #F5F4F2; color: var(--t3); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.au-c em { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #F5F4F2; color: var(--t3); }
.au-c em svg { width: 11px; height: 11px; }
.au-c.lo { opacity: .78; transform: scale(.95); margin-top: 8px; order: 2; }
.au-c.hi { order: 1; border: 1.5px solid #86EFAC; }
.au-c.hi .au-r { background: #DCFCE7; color: #15803D; }
.au-c.hi em { background: #F0FDF4; color: #15803D; }
.mo .v-au .au-c.hi { transition: transform .5s var(--ease) .5s; transform: translateY(54px); }
.mo .bn-c.in .v-au .au-c.hi { transform: none; }
.mo .v-au .au-c.lo { transition: transform .5s var(--ease) .5s; transform: translateY(-58px) scale(.95); }
.mo .bn-c.in .v-au .au-c.lo { transform: scale(.95); }
/* use cases: one cited answer per team */
.up-ans { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #FED7AA; }
.up-ans p { font-size: 13.5px; line-height: 1.45; color: var(--t2); }
.up-ans p b { color: var(--t1); font-weight: 600; }
.up-cite { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; color: var(--or-dk); background: #FFF4ED; border-radius: 999px; padding: 2px 9px; }
.up-cite svg { width: 11px; height: 11px; }
.uk-body .up-ans { margin-top: 10px; }
/* integrations: three columns */
.ig-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.igc { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid #FED7AA; }
.igc-h { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--t1); }
.igc-h span { width: 30px; height: 30px; border-radius: 9px; background: #FFF4ED; color: var(--or-dk); display: flex; align-items: center; justify-content: center; }
.igc-h svg { width: 15px; height: 15px; }
.igc ul { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; }
.igc li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--t2); padding: 8px 10px; border-radius: 10px; background: #FAFAF9; }
.igc li i { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--c, #fff); }
.igc li i img { width: 14px; height: 14px; } .igc li i.m img { filter: brightness(0) invert(1); } .igc li i.f img { width: 20px; height: 20px; }
.igc li i.g { background: #FFF4ED; color: var(--or-dk); } .igc li i.g svg { width: 13px; height: 13px; }
.ig-cols + .ig-models { margin-top: 20px; }
@media (max-width: 900px) { .ig-cols { grid-template-columns: minmax(0, 1fr); } }
.hy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
.hy-k { color: rgba(60,20,0,.72); text-shadow: none; }
.au { grid-template-columns: minmax(0, 1fr); }
.bd-top b { overflow-wrap: anywhere; }

/* ══ Zenzo Brain page ══ */
/* hero: the concept preview plays out */
.mo .pv-br .pv-body > .pv-node, .mo .pv-br .pv-arrow, .mo .pv-br .pv-split .pv-node { animation: an2Up .5s var(--ease) both; }
.mo .pv-br .pv-body > .pv-node { animation-delay: .3s; }
.mo .pv-br .pv-arrow { animation-delay: .6s; }
.mo .pv-br .pv-split .pv-node:first-child { animation-delay: .8s; } .mo .pv-br .pv-split .pv-node:last-child { animation-delay: 1s; }
.mo .pv-br .pv-arrow + .pv-card, .mo .pv-br .pv-split + .pv-arrow { animation-delay: 2.9s; }
.mo .pv-br .pv-card { animation-delay: 3.1s; }
.pv-st { min-width: 74px; justify-content: center; }
.pv-st.is-run { color: #FBBF24 !important; background: rgba(251,191,36,.1) !important; border-color: rgba(251,191,36,.3) !important; }
.mo .pv-br .pv-chip.warn { animation: knPop .35s cubic-bezier(.3,1.6,.5,1) 3.6s both; }
/* before/after: stitched by hand */
.bd-paste { background: #FEF3C7 !important; color: #B45309 !important; }
.bd-paste svg { width: 15px; height: 15px; }
.ba-stitch .bd-pair .bd-v { color: var(--t1); font-size: 20px; }
.bd-stitch { position: relative; display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px dashed #FCA5A5; transform: rotate(-.6deg); }
.bd-stitch .bd-app { background: #EFF6FF; color: #2563EB; }
.bd-stitch b { display: block; font-size: 13px; font-weight: 600; color: var(--t1); }
.bd-stitch p { font-size: 13px; line-height: 1.45; color: var(--t2); margin-top: 2px; }
.bd-vers .cav { color: #B45309; background: #FFFBEB; border: 1px solid #FDE68A; }
.mo .ba-dash .bd-stitch { opacity: 0; transform: translateY(10px) rotate(-.6deg); transition: opacity .5s var(--ease) .7s, transform .5s var(--ease) .7s; }
.mo .ba-dash.in .bd-stitch { opacity: 1; transform: rotate(-.6deg); }
.mo .ba-dash .bd-vers .cav { transition-delay: 1.6s; }
/* how it works: a product refused at the Check step */
.hz-n .dn { position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: #DC2626; color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s var(--ease); }
.hz-n .dn svg { width: 11px; height: 11px; transform: rotate(45deg); }
.hz-n .dn-l { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 600; color: #B91C1C; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 999px; padding: 2px 8px; opacity: 0; transition: opacity .3s; }
.hiw-an .hz.s3 .hz-n.deny:not(.pick) { opacity: 1; filter: none; transform: none; box-shadow: 0 0 0 3px #FCA5A5; border-color: transparent; }
.hz.s3 .hz-n.deny .dn { opacity: 1; transform: none; }
.hz.s3 .hz-n.deny .dn-l { opacity: 1; }
.hz-skip { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: #B91C1C; }
.hz-skip svg { width: 12px; height: 12px; }
@media (max-width: 768px) { .hz-n .dn-l { display: none; } .hz-n .dn { right: -5px; top: -5px; width: 18px; height: 18px; } }
/* capabilities: plan tree, clarifying question, permission gates, stripped instruction */
.v-tree, .v-clar, .v-gate, .v-out { display: flex; flex-direction: column; justify-content: center; }
.tr { position: relative; display: flex; flex-direction: column; align-items: center; }
.tr-root { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: #fff; font-size: 12px; font-weight: 600; color: var(--t1); box-shadow: 0 10px 24px -14px rgba(60,20,0,.45); }
.tr-root svg { width: 14px; height: 14px; color: var(--or-dk); }
.tr-w { width: 70%; height: 30px; }
.tr-w path { fill: none; stroke: rgba(255,255,255,.95); stroke-width: 2; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.mo .bn-c.in .tr-w path { animation: an2Dash 1.2s linear infinite; }
.tr-kids { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.tr-kids span { padding: 7px 8px; border-radius: 10px; background: #fff; font-size: 11.5px; color: var(--t2); text-align: center; box-shadow: 0 10px 24px -14px rgba(60,20,0,.45); }
.tr-kids b { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--or-dk); }
.tr-par { margin-top: 8px; font-style: normal; font-size: 11px; font-weight: 600; color: rgba(60,20,0,.72); }
.cl-b { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: #fff; font-size: 12.5px; color: var(--t1); box-shadow: 0 10px 24px -14px rgba(60,20,0,.45); }
.cl-b img { width: 16px; height: 16px; flex-shrink: 0; }
.cl-o { display: flex; gap: 6px; margin-top: 8px; }
.cl-o span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.75); color: var(--t2); }
.cl-o span.on { background: #fff; color: #15803D; font-weight: 600; box-shadow: 0 0 0 2px #86EFAC; }
.cl-o svg { width: 12px; height: 12px; }
.mo .v-clar .cl-o span.on { box-shadow: none; transition: box-shadow .4s 1s; } .mo .bn-c.in .v-clar .cl-o span.on { box-shadow: 0 0 0 2px #86EFAC; }
.gt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.gt span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 8px; border-radius: 12px; background: #fff; font-size: 10.5px; color: var(--t2); box-shadow: 0 10px 24px -14px rgba(60,20,0,.45); }
.gt i { width: 26px; height: 26px; border-radius: 8px; background: #FFF4ED; color: var(--or-dk); display: flex; align-items: center; justify-content: center; }
.gt i svg { width: 14px; height: 14px; }
.gt span b { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #DCFCE7; color: #15803D; }
.gt span b svg { width: 10px; height: 10px; }
.gt span.no { box-shadow: 0 0 0 2px #FCA5A5, 0 10px 24px -14px rgba(60,20,0,.45); }
.gt span.no i { background: #FEF2F2; color: #B91C1C; }
.gt span.no b { background: #DC2626; color: #fff; } .gt span.no b svg { transform: rotate(45deg); }
.gt-cap { margin-top: 10px; font-size: 11.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(120,40,0,.35); }
.mo .v-gate .gt span b { transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.mo .v-gate .gt span:nth-child(2) b { transition-delay: .25s; } .mo .v-gate .gt span:nth-child(3) b { transition-delay: .5s; } .mo .v-gate .gt span:nth-child(4) b { transition-delay: .8s; }
.mo .bn-c.in .v-gate .gt span b { transform: none; }
.ot { padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -14px rgba(60,20,0,.45); }
.ot-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--t1); }
.ot-h svg { width: 14px; height: 14px; color: var(--or-dk); }
.ot-h em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; color: #15803D; background: #F0FDF4; border-radius: 999px; padding: 2px 8px; }
.ot p { font-size: 12.5px; color: var(--t2); margin-top: 6px; line-height: 1.45; }
.ot-x { position: relative; color: var(--t3) !important; text-decoration: line-through; text-decoration-color: #DC2626; }
.ot-st { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; text-decoration: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #B91C1C; border: 1.5px solid #FCA5A5; border-radius: 6px; padding: 1px 6px; transform: rotate(-3deg); display: inline-flex; }
.ot-st svg { width: 11px; height: 11px; }
.mo .v-out .ot-st { opacity: 0; transform: rotate(-3deg) scale(1.4); transition: opacity .3s .8s, transform .3s cubic-bezier(.3,1.6,.5,1) .8s; }
.mo .bn-c.in .v-out .ot-st { opacity: 1; transform: rotate(-3deg); }
/* delivery stages */
.stg { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: stretch; gap: 10px; }
.stg-c { padding: 20px; border-radius: 20px; background: #FAFAF9; border: 1px solid var(--bdr); }
.stg-c.now { background: linear-gradient(160deg, #FFF7ED, #FFEDD5); border-color: #FED7AA; }
.stg-k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.stg-c.now .stg-k { color: var(--or-dk); }
.stg-c > b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--t1); margin-top: 6px; }
.stg-c ul { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; }
.stg-c li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--t2); }
.stg-c li em { flex-shrink: 0; font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.stg-c li em.g { color: #15803D; background: #F0FDF4; } .stg-c li em.a { color: #B45309; background: #FFFBEB; }
.stg-ar { display: flex; align-items: center; justify-content: center; color: #FDBA74; }
.stg-ar svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .stg { grid-template-columns: minmax(0, 1fr); } .stg-ar { transform: rotate(90deg); height: 18px; } }
/* CTA: register with an email right here */
.cta-mail { display: flex; gap: 8px; margin-top: 24px; max-width: 480px; }
.cta-mail input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border-radius: 999px; border: 0; font: inherit; font-size: 15px; color: var(--t1); background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }
.cta-mail input:focus { outline: 2px solid #1C1917; outline-offset: 2px; }
.cta-mail .btn-dark { flex-shrink: 0; border: 0; cursor: pointer; font: inherit; }
.cta-alt { margin-top: 12px; }
@media (max-width: 520px) { .cta-mail { flex-direction: column; } .cta-mail .btn-dark { justify-content: center; } }
.bd-pair .bd-app i.f { background: none; } .bd-pair .bd-app i.f img { width: 16px; height: 16px; filter: none; }
@media (max-width: 768px) { .bn-v.v-tree, .bn-v.v-out, .bn-v.v-gate, .bn-v.v-clar { height: auto; min-height: 160px; } }
@media (max-width: 520px) { .cta-mail input { flex: none; width: 100%; } }

/* ══ Solution pages ══ */
/* before/after: the page's own task rows, side by side */
.ba-sol .ba-by { margin-bottom: 12px; }
.ba-rows { margin-top: 0 !important; padding-top: 0 !important; gap: 10px !important; }
.ba-rows li { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--bdr-l); }
.ba-new .ba-rows li { border-color: #FFEDD5; }
.ba-rows li b { display: block; margin-bottom: 2px; }
.mo .ba-sol .ba-rows li { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--d) * .15s + .2s); }
.mo .ba-sol .ba-new .ba-rows li { transition-delay: calc(var(--d) * .15s + .8s); }
.mo .ba-sol.in .ba-rows li { opacity: 1; transform: none; }
/* how it works: evidence line in the answer card */
.hz-ev { font-size: 13px; line-height: 1.5; color: var(--t2); margin-top: 6px; }
/* capabilities: product tag on join visuals, a full-width last card, sources in the hero card */
.bn-prod { position: absolute; right: 14px; top: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--or-dk); background: #fff; border-radius: 999px; padding: 3px 9px; box-shadow: 0 8px 18px -12px rgba(60,20,0,.45); }
.bn-prod svg { width: 12px; height: 12px; }
.bn-c.bn-full { grid-column: 1 / -1; }
.bn-full .bn-v.v-doc { height: auto; min-height: 150px; }
.sol-src { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
.sol-src span { display: inline-flex !important; align-items: center; gap: 6px; font-size: 12px !important; padding: 3px 9px 3px 4px; border-radius: 999px; background: #FAFAF9; border: 1px solid var(--bdr-l); }
.sol-src i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--c, #fff); font-style: normal; }
.sol-src i img { width: 10px; height: 10px; } .sol-src i.m img { filter: brightness(0) invert(1); } .sol-src i.f img { width: 14px; height: 14px; } .sol-src i.g svg { width: 11px; height: 11px; color: var(--or-dk); }
.jn i.g { background: #FFF4ED; color: var(--or-dk); } .jn i.g svg { width: 16px; height: 16px; }
@media (max-width: 1300px) { .bn-c.bn-full { grid-column: 1 / -1; } }
@media (max-width: 768px) { .bn-c.bn-full { flex: 0 0 84%; } }
.v-chat .sol-src i { background: var(--c, #fff); color: inherit; font-size: 0; } .v-chat .sol-src i.g { background: #FFF4ED; }
.s-hub.s-hub-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .s-hub.s-hub-3 { grid-template-columns: minmax(0, 1fr); } }