/* Outcomes bento: 4 columns x 4 rows, three sizes (small 1x1, medium 2x1, large 2x2), no gaps */
.outcomes{padding:0 0 var(--cta-gap)}
.outcomes h2{font:500 clamp(24px,3vw,32px)/1.1 var(--head);letter-spacing:-.025em;color:var(--ink);max-width:680px}
.outcomes .lead{margin-top:14px;max-width:620px;font-size:17px;line-height:1.5;color:var(--text)}
.bento{margin-top:36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:234px 234px 220px 234px 234px;gap:14px}
.bc{position:relative;overflow:hidden;display:block;background:var(--card);border-radius:var(--r-card);padding:20px 22px;color:inherit;box-shadow:0 1px 0 rgba(0,0,0,.03),0 18px 36px -28px rgba(0,0,0,.28);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.bc:hover,.bc:focus-visible{transform:translateY(-3px);box-shadow:0 1px 0 rgba(0,0,0,.03),0 26px 44px -26px rgba(0,0,0,.34);outline:none}
.bc .tx{position:relative;z-index:2}
.bc h3{font:500 18px/1.2 var(--head);letter-spacing:-.015em;color:var(--ink)}
.bc p{margin-top:6px;font-size:13px;line-height:1.42;color:var(--text)}
.bc.l h3{font-size:24px}.bc.l p{font-size:15px;max-width:400px}
.bc.m h3{font-size:20px}
.bc.s h3{padding-right:32px}
.bc .go{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--card);display:flex;align-items:center;justify-content:center;transition:background .25s,transform .4s var(--ease);z-index:3}
.bc:hover .go,.bc:focus-visible .go{background:var(--orange);color:#0a0a0a;transform:translate(2px,-2px)}
.bc .rm{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--ink)}
.bc .rm svg{transition:transform .35s var(--ease)}
.bc:hover .rm svg{transform:translateX(4px)}
/* placement */
.c1{grid-column:1/3;grid-row:1/3}.c2{grid-column:3/5;grid-row:1}.c3{grid-column:3;grid-row:2}.c4{grid-column:4;grid-row:2}
.c9{grid-column:1/5;grid-row:3}
.c5{grid-column:3/5;grid-row:4/6}.c6{grid-column:1/3;grid-row:4}.c7{grid-column:1;grid-row:5}.c8{grid-column:2;grid-row:5}
/* picture areas */
.vis{position:absolute}
.l .vis{left:22px;right:22px;bottom:22px;top:182px}
.m .vis{left:50%;right:16px;top:16px;bottom:16px}
.s .vis{left:14px;right:14px;bottom:14px;height:94px}
.m .tx{width:46%}
.w .vis{left:46%;right:16px;top:16px;bottom:16px}
.w .tx{width:40%}
.bc.w h3{font-size:24px}.bc.w p{font-size:15px}
.pane{position:absolute;inset:0;background:var(--inset);border-radius:12px;overflow:hidden;font-size:12.5px;color:var(--ink)}
.mono{font-family:var(--mono)}
/* shared bits */
.av{position:relative;flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:600 10.5px var(--body);font-style:normal}
.a1{background:var(--a1-bg);color:var(--a1-fg)}.a2{background:var(--a2-bg);color:var(--a2-fg)}.a3{background:var(--a3-bg);color:var(--a3-fg)}.a4{background:var(--a4-bg);color:var(--a4-fg)}.a5{background:var(--a5-bg);color:var(--a5-fg)}.a6{background:var(--a6-bg);color:var(--a6-fg)}
@keyframes fi{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes fo{from{opacity:1}to{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* 1 acknowledgments (large) */
.v-ack .ah{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--raise)}
.v-ack .ah b{font-weight:600;font-size:13.5px}
.v-ack .ah .mono{font-size:11px;color:var(--muted)}
.v-ack .bar{margin-left:auto;width:120px;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.v-ack .bar i{display:block;height:100%;width:94%;background:var(--green);border-radius:3px}
.v-ack .ah em{font:500 12px var(--mono);font-style:normal;color:var(--ink)}
.v-ack ul{list-style:none}
.v-ack li{display:flex;align-items:center;gap:10px;height:39px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--raise)}
.v-ack li span{font-size:13.5px}
.v-ack .st{position:relative;margin-left:auto;width:116px;height:24px}
.v-ack .st s{position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;font-size:11.5px;font-weight:500}
.v-ack .pend{background:var(--fill);color:var(--muted);opacity:0}
.v-ack .done{background:var(--ok-bg);color:var(--ok-fg);opacity:1}
.v-ack .done::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}
.v-ack .more{padding:7px 16px;font-size:12px;color:var(--muted);background:var(--raise)}
.bc:is(:hover,:focus-visible,.play) .v-ack .done{animation:fi .45s var(--ease) both;animation-delay:calc(var(--i)*.4s + .25s)}
.bc:is(:hover,:focus-visible,.play) .v-ack .pend{animation:fo .3s linear both;animation-delay:calc(var(--i)*.4s + .25s)}
@keyframes fb{from{width:52%}to{width:94%}}
.bc:is(:hover,:focus-visible,.play) .v-ack .bar i{animation:fb 2.2s var(--ease) .25s both}

/* 2 approval (medium) */
.v-ap{padding:12px 14px}
.v-ap .n{position:relative;display:flex;align-items:center;gap:10px;height:44px}
.v-ap .n::before{content:"";position:absolute;left:10.5px;top:-22px;height:44px;width:1px;background:var(--line2)}
.v-ap .n:first-child::before{display:none}
.v-ap .nd{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:var(--raise);border:1.2px solid var(--line2)}
.v-ap .nd::before,.v-ap .nd::after{content:"";position:absolute;inset:-1.2px;border-radius:50%}
.v-ap .nd.k::after{background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.8 2.8L12 5'/%3E%3C/svg%3E") center/12px no-repeat;border:1.2px solid var(--ok-line)}
.v-ap .nd.k::before{background:var(--warn-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e0a100' stroke-width='1.6'%3E%3Cpath d='M1.5 8s2.5-4.5 6.500-4.500S14.500 8 14.500 8s-2.500 4.500-6.500 4.500S1.500 8 1.500 8z'/%3E%3Ccircle cx='8' cy='8' r='1.8'/%3E%3C/svg%3E") center/12px no-repeat;border:1.2px solid var(--warn-line);opacity:0}
.v-ap .n b{display:block;font-size:12.5px;font-weight:600}
.v-ap .n small{display:block;font-size:11px;color:var(--muted)}
.bc:is(:hover,:focus-visible,.play) .v-ap .nd.k::after{animation:fi .4s var(--ease) both;animation-delay:calc(var(--i)*.55s + .5s)}
.bc:is(:hover,:focus-visible,.play) .v-ap .nd.k::before{animation:fo .25s linear both;animation-delay:calc(var(--i)*.55s + .5s)}
.bc:is(:hover,:focus-visible,.play) .v-ap .nd.k::before{opacity:1}

/* 3 re-acknowledgment (small) */
.v-re{padding:10px 12px}
.v-re .dc{display:flex;align-items:center;justify-content:space-between;background:var(--raise);border-radius:8px;padding:7px 9px;font-size:11.5px;font-weight:600}
.v-re .vv{position:relative;width:28px;height:15px;font:500 10.5px/15px var(--mono);text-align:right}
.v-re .vv b{position:absolute;right:0;font-weight:500}
.v-re .vv .v31{opacity:0;color:var(--muted)}.v-re .vv .v32{color:var(--orange)}
.v-re .avs{display:flex;gap:8px;margin-top:11px}
.v-re .av{width:26px;height:26px;font-size:9.5px}
.v-re .d{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;border:2px solid var(--inset)}
.v-re .d1{background:var(--green);opacity:0}.v-re .d2{background:var(--orange);opacity:1}
@keyframes rk1{0%,38%{opacity:1}52%,100%{opacity:0}}
@keyframes rk2{0%,38%{opacity:0}52%,100%{opacity:1}}
.bc:is(:hover,:focus-visible,.play) .v-re .v31,.bc:is(:hover,:focus-visible,.play) .v-re .d1{animation:rk1 2.6s linear both}
.bc:is(:hover,:focus-visible,.play) .v-re .v32,.bc:is(:hover,:focus-visible,.play) .v-re .d2{animation:rk2 2.6s linear both}

/* 4 review dates (small) */
.v-st{padding:12px}
.v-st .row{display:flex;align-items:center;gap:8px;background:var(--raise);border-radius:8px;padding:9px 10px;font-size:11.5px;font-weight:600}
.v-st .bell{margin-left:auto;color:var(--muted);transform-origin:50% 10%}
.v-st .chip{display:inline-block;margin-top:9px;padding:5px 10px;border-radius:7px;background:var(--fill);color:var(--muted);font:500 11px var(--mono);transition:background .4s,color .4s}
.bc:is(:hover,:focus-visible,.play) .v-st .chip{background:var(--orange-tint);color:var(--orange-ink)}
@keyframes ringb{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}
.bc:is(:hover,:focus-visible,.play) .v-st .bell{animation:ringb 1s ease-in-out .15s both;color:var(--orange)}

/* 5 export (large) */
.v-ex .pg{position:absolute;left:18px;top:20px;width:196px;bottom:0;background:var(--raise);border:1px solid var(--line2);border-bottom:0;border-radius:10px 10px 0 0;padding:14px 14px;box-shadow:0 12px 24px -16px rgba(0,0,0,.3)}
.v-ex .pg h4{font:600 12.5px var(--body)}
.v-ex .pg .ln{display:block;margin-top:10px;font:400 10.5px/1.35 var(--mono);color:var(--text)}
.v-ex .pg .ln i{display:block;font-style:normal;color:var(--muted);font-size:9.5px}
.v-ex .rt{position:absolute;left:236px;right:16px;top:20px}
.v-ex .fmt{display:block;height:34px;border:1px solid var(--line2);border-radius:10px;background:var(--raise);padding:0 12px;font-size:12px;line-height:32px;margin-bottom:8px;color:var(--text)}
.v-ex .fmt.on{border-color:var(--ink);color:var(--ink);font-weight:600}
.v-ex .xb{display:block;height:38px;border-radius:12px;background:var(--ink);color:var(--card);text-align:center;font-size:13px;font-weight:600;line-height:38px;margin-top:6px;transition:transform .15s}
.v-ex .fc{position:absolute;left:236px;right:16px;top:176px;background:var(--raise);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;box-shadow:0 14px 24px -14px rgba(0,0,0,.35);opacity:0}
.v-ex .fc b{display:block;font-size:11px;font-weight:600;word-break:break-all}
.v-ex .fc .pb{display:inline-block;margin-bottom:5px;font:500 9px var(--mono);letter-spacing:.8px;color:#fff;background:var(--orange);border-radius:3px;padding:1px 5px}
.v-ex .fc .bar{display:block;height:5px;border-radius:3px;background:var(--track);margin-top:7px;overflow:hidden}
.v-ex .fc .bar i{display:block;height:100%;width:100%;background:var(--green);transform:scaleX(0);transform-origin:left}
.v-ex .fc em{display:block;margin-top:5px;font:500 10.5px var(--mono);font-style:normal;color:var(--green)}
@keyframes pressb{0%,100%{transform:scale(1)}50%{transform:scale(.95)}}
@keyframes fcin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes showlate{from{opacity:0}to{opacity:1}}
.bc:is(:hover,:focus-visible,.play) .v-ex .xb{animation:pressb .4s ease .3s both}
.bc:is(:hover,:focus-visible,.play) .v-ex .fc{animation:fcin .55s var(--ease) .7s both}
.bc:is(:hover,:focus-visible,.play) .v-ex .fc .bar i{animation:fillx 1.1s var(--ease) 1.2s both}
.v-ex .fc em{opacity:0}
.bc:is(:hover,:focus-visible,.play) .v-ex .fc em{animation:showlate .3s linear 2.3s both}

/* 6 current version (medium) */
.v-cur{padding:14px}
.v-cur .vr{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:8px;padding:0 12px;border-radius:9px;background:var(--raise);font-size:12.5px;font-weight:600;transition:transform .6s var(--ease),opacity .6s var(--ease)}
.v-cur .vr small{font:500 10.5px var(--mono);color:var(--muted)}
.v-cur .vr.now{background:var(--orange-tint);box-shadow:0 0 0 1.2px color-mix(in srgb,var(--orange) 55%,var(--card))}
.v-cur .vr.now small{color:color-mix(in srgb,var(--orange) 80%,#000)}
.v-cur .vr.old{opacity:.7}
.bc:is(:hover,:focus-visible,.play) .v-cur .vr.old{transform:translateX(20px);opacity:.28}
.bc:is(:hover,:focus-visible,.play) .v-cur .vr.old b{text-decoration:line-through}
.bc:is(:hover,:focus-visible,.play) .v-cur .vr.now{transform:scale(1.04)}

/* 7 one source (small) */
.v-pub{padding:12px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.v-pub .doc{position:relative;width:70px;height:62px;background:var(--raise);border-radius:8px;padding:8px 8px;font-size:9.5px;font-weight:600;line-height:1.2}
.v-pub .doc i{display:block;height:3px;border-radius:2px;background:var(--fill);margin-top:5px}
.v-pub .eq{font:600 15px var(--head);color:var(--muted)}
.v-pub .web{position:relative;width:76px;height:62px;background:var(--raise);border-radius:8px;overflow:hidden;border:1.2px solid transparent;transition:border-color .4s}
.v-pub .web u{display:block;height:11px;background:var(--fill);text-decoration:none;font:400 6px/11px var(--mono);color:var(--muted);padding:0 5px;white-space:nowrap;overflow:hidden}
.v-pub .web i{display:block;height:3px;border-radius:2px;background:var(--fill);margin:6px 7px 0}
.v-pub .dot{position:absolute;left:62px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--orange);opacity:0}
@keyframes travel{0%{opacity:0;transform:translateX(0)}12%{opacity:1}80%{opacity:1;transform:translateX(52px)}100%{opacity:0;transform:translateX(58px)}}
.bc:is(:hover,:focus-visible,.play) .v-pub .dot{animation:travel 1.2s var(--ease) .2s both}
.bc:is(:hover,:focus-visible,.play) .v-pub .web{border-color:var(--orange);transition-delay:1s}

/* 8 pricing (small) */
.v-pr{padding:11px 12px}
.v-pr .ed{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600}
.v-pr .ed .av{width:22px;height:22px;font-size:8.5px;box-shadow:0 0 0 2px var(--orange)}
.v-pr .rd{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.v-pr .rd .av{width:17px;height:17px;font-size:0;background:var(--fill)}
.v-pr .rd .av:nth-child(3n+1){background:color-mix(in srgb,var(--orange) 22%,var(--fill))}.v-pr .rd .av:nth-child(3n+2){background:color-mix(in srgb,var(--a2-fg) 24%,var(--fill))}
.v-pr small{display:block;margin-top:6px;font-size:10.5px;color:var(--muted)}
.bc:is(:hover,:focus-visible,.play) .v-pr .rd .av{animation:pop .4s var(--ease) both;animation-delay:calc(var(--i)*.07s + .1s)}

@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:234px;grid-auto-flow:dense}
  .bc{grid-column:auto!important;grid-row:auto!important}
  .bc.m,.bc.l,.bc.w{grid-column:1/-1!important}
  .bc.l{grid-row:span 2!important;min-height:480px}
  .m .tx{width:44%}.w .tx{width:42%}.bc.w{min-height:234px}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .bc.s{min-height:220px}.bc.m{min-height:420px}.bc.l{min-height:470px}
  .m .tx,.w .tx{width:auto}.m .vis{left:22px;right:22px;top:150px;bottom:20px}.bc.w{min-height:520px}.w .vis{left:16px;right:16px;top:230px;bottom:16px}
}
@media (prefers-reduced-motion:reduce){.bc *{animation:none!important;transition:none!important}}

/* medium and large cards: the arrow sits under the text, not in the top-right corner like the small cards */
.bc .go.go-in{position:relative;right:auto;top:auto;margin-top:16px}
.bc:hover .go.go-in,.bc:focus-visible .go.go-in{transform:translateX(4px)}

/* colour variety: one inverse card (dark on light, light on dark) and one orange card */
.bc.c6{background:#0a0a0a;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 18px 36px -28px rgba(0,0,0,.4)}
.bc.c6 h3{color:#fff}.bc.c6 p{color:rgba(255,255,255,.72)}
.bc.c6 .pane{background:#1c1c1b}
.bc.c6 .vr{background:#2a2a28;color:#fff}
.bc.c6 .vr small{color:rgba(255,255,255,.6)}
.bc.c6 .vr.now{background:color-mix(in srgb,var(--orange) 24%,#1c1c1b);box-shadow:0 0 0 1.2px var(--orange)}
.bc.c6 .vr.now small{color:var(--orange)}
.bc.c6 .go{background:#fff;color:#0a0a0a}
.bc.c6:hover .go,.bc.c6:focus-visible .go{background:var(--orange);color:#0a0a0a}

.bc.c4{background:var(--orange)}
.bc.c4 h3{color:#0a0a0a}.bc.c4 p{color:rgba(10,10,10,.78)}
.bc.c4 .pane{background:rgba(255,255,255,.28)}
.bc.c4 .chip{background:rgba(10,10,10,.14);color:#0a0a0a}
.bc.c4:is(:hover,:focus-visible,.play) .v-st .chip{background:#fff;color:#0a0a0a}
.bc.c4 .v-st .bell{color:#0a0a0a}
.bc.c4:is(:hover,:focus-visible,.play) .v-st .bell{color:var(--orange)}
.bc.c4 .go{background:#0a0a0a;color:#fff}
.bc.c4:hover .go,.bc.c4:focus-visible .go{background:#fff;color:#0a0a0a}
.bc.c4 .v-st .row{background:#fff;color:#111}

/* export card: dot pattern behind the drawing */
.v-ex,.v-es{background-color:var(--inset);background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.4px);background-size:14px 14px;background-position:7px 7px}

/* e-sign (wide) */
.bc .bdg{display:inline-block;margin-left:10px;vertical-align:middle;padding:3px 10px;border-radius:var(--r-pill);background:var(--orange-tint);color:var(--orange-ink);font:600 11px/1.3 var(--body);letter-spacing:0}
.v-es{display:flex;gap:14px;padding:14px}
.v-es .sh{position:relative;flex:none;width:156px;background:var(--raise);border-radius:8px;padding:11px 11px}
.v-es .sh b{display:block;font-size:11px;font-weight:600}
.v-es .sh>i{display:block;height:3px;border-radius:2px;background:var(--fill);margin-top:7px}
.v-es .sl{position:absolute;left:11px;right:11px;height:30px;border-bottom:1px solid var(--line2)}
.v-es .sl:nth-of-type(1){top:82px}.v-es .sl:nth-of-type(2){top:122px}
.v-es .sig{position:absolute;left:2px;bottom:-3px;white-space:nowrap;color:var(--ink);line-height:1;clip-path:inset(-20% 0 -20% 0)}
.v-es .sig.s1{font:400 31px "Mrs Saint Delafield",cursive}
.v-es .sig.s2{font:400 29px "Herr Von Muellerhoff",cursive}
.v-es .sg{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.v-es .sr{display:flex;align-items:center;gap:10px;height:46px;padding:0 12px;border-radius:9px;background:var(--raise)}
.v-es .sr b{display:block;font-size:12.5px;font-weight:600}
.v-es .sr small{display:block;font-size:11px;color:var(--muted)}
.v-es .st{position:relative;margin-left:auto;width:78px;height:24px;flex:none}
.v-es .st s{position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;font-size:11.5px;font-weight:500}
.v-es .pend{background:var(--fill);color:var(--muted);opacity:0}
.v-es .done{background:var(--ok-bg);color:var(--ok-fg);opacity:1}
.v-es .done::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}
.v-es .cert{display:flex;align-items:center;gap:8px;margin-top:auto;height:38px;padding:0 12px;border-radius:9px;border:1px solid var(--green);background:var(--ok-bg);color:var(--ok-fg);font-size:12px;font-weight:500}
@keyframes sign{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}}
.bc:is(:hover,:focus-visible,.play) .v-es .sl:nth-of-type(1) .sig{animation:sign 1s linear .3s both}
.bc:is(:hover,:focus-visible,.play) .v-es .sl:nth-of-type(2) .sig{animation:sign 1s linear 1.5s both}
.bc:is(:hover,:focus-visible,.play) .v-es .sr:nth-child(1) .done{animation:fi .45s var(--ease) 1.2s both}
.bc:is(:hover,:focus-visible,.play) .v-es .sr:nth-child(2) .done{animation:fi .45s var(--ease) 2.4s both}
.bc:is(:hover,:focus-visible,.play) .v-es .sr:nth-child(1) .pend{animation:fo .3s linear 1.2s both}
.bc:is(:hover,:focus-visible,.play) .v-es .sr:nth-child(2) .pend{animation:fo .3s linear 2.4s both}
.bc:is(:hover,:focus-visible,.play) .v-es .cert{animation:certin .5s var(--ease) 3s both}
@keyframes certin{from{opacity:.55;border-style:dashed;border-color:var(--line2);color:var(--muted);background:transparent}to{opacity:1;border-style:solid;border-color:var(--green);color:var(--ok-fg);background:var(--ok-bg)}}

/* approval, current version and e-sign: the arrow sits in the bottom-left corner of the card (the others keep their place) */
.bc.c2 .tx,.bc.c6 .tx,.bc.c9 .tx{position:static}
.bc.c2 .go.go-in,.bc.c6 .go.go-in,.bc.c9 .go.go-in{position:absolute;left:22px;bottom:20px;top:auto;right:auto;margin:0}

/* distribution card: a three-way choice (notify, acknowledge, e-sign) above the recipient list */
.v-ack .seg{position:relative;margin-left:auto;display:grid;grid-template-columns:repeat(3,82px);padding:3px;border-radius:11px;background:var(--fill);font-size:11.5px;font-weight:500}
.v-ack .seg::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:82px;border-radius:8px;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.18);transform:translateX(82px)}
.v-ack .seg s{position:relative;text-decoration:none;text-align:center;line-height:24px;color:var(--muted)}
.v-ack .seg s:nth-child(2){color:var(--ink);font-weight:600}
@keyframes segmove{from{transform:translateX(0)}to{transform:translateX(82px)}}
.bc:is(:hover,:focus-visible,.play) .v-ack .seg::before{animation:segmove .6s var(--ease) .15s both}
.v-ack .ah b{white-space:nowrap}.v-ack .ah{gap:8px}.v-ack .seg{flex:none}

/* ---- 2026-10-16 ---- */
/* one quiet tint for people: no pastel avatars (orange marks action, green marks a finished response) */
.bento .av,.ipanel .av,.hero .hc .av{background:var(--fill);color:var(--ink)}
.bento .v-pr .rd .av:nth-child(n){background:var(--line2)}
.bento .v-pr .ed .av{background:var(--card)}

/* phones: every picture sits in the flow under its words, so nothing is squeezed or overlapped */
@media (max-width:560px){
  .bento .bc{min-height:0!important;padding:20px}
  .bento .bc .tx{width:auto!important;position:relative!important}
  .bento .bc .vis{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:18px}
  .bento .bc .go.go-in{position:relative!important;left:auto!important;bottom:auto!important;top:auto!important;right:auto!important;margin-top:14px!important}
  .bento .c1 .vis{height:304px}.bento .c2 .vis{height:158px}.bento .c6 .vis{height:154px}
  .bento .s .vis{height:94px}.bento .c9 .vis{height:340px}.bento .c5 .vis{height:330px}
  /* acknowledgments: the three-way choice gets its own line under the title */
  .v-ack .ah{flex-wrap:wrap;row-gap:8px}.v-ack .seg{margin-left:0}
  /* e-sign: the signed sheet above the two signers */
  .v-es{flex-direction:column;gap:10px}
  .v-es .sh{width:auto;height:146px}
  .v-es .sl:nth-of-type(1){top:62px}.v-es .sl:nth-of-type(2){top:102px}
  .v-es .sr{height:44px}.v-es .cert{margin-top:0}
  /* export: the formats and the button on top, the log underneath, the exported file lands at the bottom */
  .v-ex .rt{left:14px;right:14px;top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .v-ex .fmt{margin:0;padding:0 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .v-ex .xb{grid-column:1/-1;margin:0}
  .v-ex .pg{left:14px;right:14px;width:auto;top:112px}
  .v-ex .fc{left:auto;right:14px;width:62%;top:auto;bottom:14px}
}