/* The "scan to answers" demo: the #speak translation section's layout (copy + card | phone) on cream, the card in the translation card's idiom. */
.proof-menu{padding-block:110px;scroll-margin-top:100px}
.proof-menu h2,.proof-menu h2 span{color:var(--green)}
.proof-menu .et-copy>p,.proof-menu .text-link{color:var(--ink)}
.proof-menu .et-copy{min-width:0}
.proof-menu .et-card-art{background:transparent;border-radius:0;padding:0 0 46px}
.proof-menu .et-card-art img{transition:opacity .5s}
.proof-menu .et-card-art img.is-swapping{opacity:0}
.menu-answers{position:relative;overflow:hidden;margin-top:32px;background:var(--cream);color:var(--ink);border:1px solid #557a4720;border-radius:22px;padding:8px 26px 18px;box-shadow:0 12px 35px -26px #35482d40}
.menu-scan{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--chili),transparent);box-shadow:0 0 24px 6px #e8673a55;opacity:0;pointer-events:none}
.menu-scan.is-running{animation:menu-sweep 1.1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes menu-sweep{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.menu-tabs{position:relative;display:flex;gap:24px;border-bottom:1px solid #17171720;overflow-x:auto;scrollbar-width:none}
.menu-tabs::-webkit-scrollbar{display:none}
.menu-tabs button{flex-shrink:0;background:none;border:0;border-radius:0;color:#5d554e;padding:17px 0;font:500 16px Chillax,sans-serif;min-height:52px;cursor:pointer;white-space:nowrap}
.menu-tabs button[aria-selected=true]{color:var(--ink)}
.menu-tabs button:focus-visible{outline:2px solid var(--green);outline-offset:-4px}
.menu-ink{position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--green);transition:left .45s cubic-bezier(.4,0,.2,1),width .45s cubic-bezier(.4,0,.2,1)}
#menu-panel{padding:10px 0 16px}
.menu-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px dashed #17171720;min-height:64px}
.menu-row:last-child{border-bottom:0}
.menu-row h3{margin:0;flex:1;min-width:0;font-size:20px;font-weight:500;line-height:1.3;color:var(--ink)}
.menu-row small{display:block;margin-top:4px;font-size:13px;font-weight:400;line-height:1.5;color:#5d554e;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
.menu-row small b{font-weight:500;color:var(--ink)}
.menu-row.is-on small{opacity:1;transform:none;transition-delay:.35s}
.menu-slot{flex-shrink:0;width:86px;display:flex;justify-content:flex-end}
.menu-row .status-pill{font-size:12px;font-weight:500;padding:7px 12px;border-radius:30px;line-height:1;background:#4f7541;color:#fff;opacity:0;transform:scale(.6);transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s}
.menu-row.is-on .status-pill{opacity:1;transform:none}
.menu-row .status-pill.ask{background:#ffca38;color:#503e11}
.menu-row .status-pill.avoid{background:#b84141;color:#fff}
.menu-foot{display:flex;align-items:center;gap:16px;border-top:1px solid #17171720;padding-top:14px;font-size:13px;color:#5d554e}
.menu-counts{margin-inline-start:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.menu-counts span+span:before{content:' · '}
.menu-counts b{font-weight:600;color:var(--ink)}
.menu-live{display:inline-flex;gap:4px;flex-shrink:0}
.menu-live i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:menu-pulse 1.4s ease-in-out infinite}
.menu-live i:nth-child(2){animation-delay:.2s}.menu-live i:nth-child(3){animation-delay:.4s}
#table[data-answers-playing=false] .menu-live i{animation-play-state:paused;opacity:.35}
#table[data-answers-playing=false] .menu-scan{animation-play-state:paused}
@keyframes menu-pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.menu-rail{display:flex;align-items:center;gap:7px;margin-top:18px;color:var(--green)}
.menu-rail>span{width:25px;height:3px;border-radius:3px;background:#557a4726;overflow:hidden}
.menu-rail>span:after{content:'';display:block;width:100%;height:100%;background:var(--green);transform:scaleX(var(--frame-progress,0));transform-origin:left}
[dir=rtl] .menu-rail>span:after{transform-origin:right}
.menu-rail button{margin-inline-start:5px;display:grid;place-items:center;width:32px;height:32px;background:transparent;color:var(--green);border:1px solid #557a4733;border-radius:50%;cursor:pointer}
.menu-rail button svg{width:12px;height:12px}
.proof-menu .menu-note{margin-top:14px;font-size:11px;line-height:1.7;max-width:400px;color:var(--ink)}
[dir=rtl] .menu-row h3{font-size:22px;font-weight:700;line-height:1.5}
@media(max-width:800px){.proof-menu{padding-block:70px}.menu-answers{padding-inline:22px}.menu-row h3{font-size:18px}}
@media(max-width:600px){.proof-menu{padding-block:55px}.menu-tabs{gap:18px}.menu-row h3{font-size:17px}.menu-slot{width:78px}.menu-foot{flex-wrap:wrap;gap:10px 14px;font-size:12px}.menu-counts{margin-inline-start:0;width:100%}[dir=rtl] .menu-row h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){.menu-live i{animation:none;opacity:.35}.menu-rail{display:none}}
/* Below 800 the copy column cannot hold the card and a 270px phone: stack, phone under the copy. */
@media(max-width:800px){.proof-menu .et-split{grid-template-columns:1fr;gap:28px}.proof-menu .et-card-art{min-height:0}}
/* The three tab labels need ~450px; narrower columns wrap them and swap the sliding ink (one-row assumption) for a static underline. */
@media(max-width:1200px){.menu-tabs{flex-wrap:wrap;gap:0 22px}.menu-ink{display:none}.menu-tabs button[aria-selected=true]{box-shadow:inset 0 -2px var(--green)}}
.menu-rail button{width:40px;height:40px}
.proof-menu .menu-note{font-size:12px}