/* Nook UI components gallery — scenes built from the site's tokens (tokens.css)
   and the BeUI agent-component compositions (sher.md): approval card, agent
   activity rows, chat bubbles, progress states. Motion patterns borrow the
   loopcut-reels scenes (approve-by-text, status cycle, task stream, receipt),
   reframed to the landing page's slot ratios. */

.gallery{padding:56px 0 96px}
.gallery-head{max-width:720px;margin-bottom:40px}
.gallery-head p{color:var(--text-secondary);font-size:17px;line-height:1.55;margin-top:12px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
.spec{border:1px solid var(--border-secondary);border-radius:var(--radius-3xl);background:var(--bg-subtle);padding:20px}
.spec.wide{grid-column:1/-1}
.spec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.spec-head h3{font-size:17px;font-weight:650;letter-spacing:-.2px;color:var(--text-default)}
.spec-head .slot{font:500 11px/1 var(--font-mono);color:var(--text-tertiary);white-space:nowrap}
.spec .for{font-size:13.5px;color:var(--text-secondary);line-height:1.5;margin-bottom:14px}
.spec .for b{color:var(--text-default);font-weight:600}
.frame{container-type:inline-size;border-radius:var(--radius-2xl);background:var(--bg-default);
  border:1px solid var(--border-secondary);box-shadow:var(--shadow-sm);overflow:hidden;
  display:flex;align-items:center;justify-content:center;position:relative}
.frame.r65{aspect-ratio:6/5}.frame.r85{aspect-ratio:8/5}.frame.r11{aspect-ratio:1/1}
.frame.r169{aspect-ratio:16/9}.frame.r43{aspect-ratio:4/3}
.scene{width:100%;height:100%;padding:6.5cqw;display:flex;flex-direction:column;gap:3.2cqw;
  font-size:3.6cqw;color:var(--text-default)}
.scene *{box-sizing:border-box}

/* ---- shared UI primitives ---- */
.ui-card{background:var(--bg-default);border:1px solid var(--border-secondary);border-radius:4.5cqw;
  box-shadow:var(--shadow-md);padding:4.5cqw}
.ui-head{display:flex;align-items:center;gap:2.4cqw}
.ui-title{font-weight:650;letter-spacing:-.02em}
.ui-sub{color:var(--text-secondary);font-size:.86em;line-height:1.45}
.mono{font-family:var(--font-mono)}
.badge{display:inline-flex;align-items:center;gap:1.4cqw;font-size:.78em;font-weight:600;
  padding:1cqw 2.6cqw;border-radius:var(--radius-full);border:1px solid;white-space:nowrap}
.badge.amber{color:var(--amber-11);background:var(--amber-3);border-color:var(--amber-6)}
.badge.green{color:var(--green-11);background:var(--green-3);border-color:var(--green-6)}
.badge.blue{color:var(--blue-11);background:var(--blue-3);border-color:var(--blue-6)}
.badge.red{color:var(--red-11);background:var(--red-3);border-color:var(--red-6)}
.badge.slate{color:var(--text-secondary);background:var(--bg-element);border-color:var(--border-secondary)}
.dot{width:2cqw;height:2cqw;border-radius:50%;background:currentColor;flex:none}
.store-tile{display:flex;align-items:center;gap:2.6cqw}
.sq{width:9cqw;height:9cqw;border-radius:2.6cqw;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:1.05em;flex:none;box-shadow:var(--shadow-xs)}
.kv{display:flex;justify-content:space-between;gap:3cqw;padding:1.6cqw 0;border-bottom:1px dashed var(--border-secondary)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--text-secondary)} .kv .v{font-weight:600;text-align:right}
.kv .v.reg{font-weight:500;color:var(--text-secondary)}
.check{width:5.4cqw;height:5.4cqw;border-radius:50%;background:var(--green-9);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:.8em}
.spin{width:5.4cqw;height:5.4cqw;border-radius:50%;flex:none;border:.7cqw solid var(--blue-4);
  border-top-color:var(--blue-9);animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.btnrow{display:flex;gap:2.4cqw}
.uibtn{flex:1;text-align:center;padding:2.6cqw;border-radius:var(--radius-full);font-weight:600;font-size:.95em}
.uibtn.primary{background:var(--cta-bg);color:var(--cta-text)}
.uibtn.ghost{background:var(--bg-element);color:var(--text-default)}

/* chat */
.chat{display:flex;flex-direction:column;gap:2.6cqw}
.bubble{max-width:82%;padding:3cqw 3.8cqw;border-radius:4cqw;line-height:1.4;font-size:.98em}
.bubble.them{background:var(--bg-element);align-self:flex-start;border-bottom-left-radius:1.2cqw}
.bubble.me{background:var(--blue-9);color:#fff;align-self:flex-end;border-bottom-right-radius:1.2cqw}
.bubble.agent{background:var(--bg-default);border:1px solid var(--border-secondary);align-self:flex-start;border-bottom-left-radius:1.2cqw;box-shadow:var(--shadow-xs)}

/* activity rows (BeUI agent-activity) */
.act{display:flex;flex-direction:column}
.act-row{display:flex;gap:3cqw;padding:2.8cqw 0;border-bottom:1px solid var(--border-secondary)}
.act-row:last-child{border-bottom:0}
.act-ic{width:8.5cqw;height:8.5cqw;border-radius:2.4cqw;background:var(--bg-element);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:1em}
.act-row .t{font-weight:600;line-height:1.3}
.act-row .s{color:var(--text-secondary);font-size:.85em;line-height:1.4}
.act-row .time{margin-left:auto;color:var(--text-tertiary);font-size:.8em;font-family:var(--font-mono);white-space:nowrap}

/* browser chrome */
.browser{border:1px solid var(--border-secondary);border-radius:3.6cqw;overflow:hidden;background:var(--bg-default);box-shadow:var(--shadow-md)}
.browser-bar{display:flex;align-items:center;gap:2cqw;background:var(--bg-element);padding:2.4cqw 3.4cqw;border-bottom:1px solid var(--border-secondary)}
.browser-bar .d{width:2.6cqw;height:2.6cqw;border-radius:50%}
.urlbar{flex:1;background:var(--bg-default);border:1px solid var(--border-secondary);border-radius:var(--radius-full);
  font-family:var(--font-mono);font-size:.78em;color:var(--text-secondary);padding:1.2cqw 3cqw;white-space:nowrap;overflow:hidden}
.browser-body{padding:4cqw}

/* animation system: scenes loop via .play on the frame; children use --d delay */
.frame .anim{opacity:0;transform:translateY(2.2cqw)}
.frame.play .anim{animation:rise .55s var(--ease-out-quart) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}
.frame .pop{opacity:0;transform:scale(.92)}
.frame.play .pop{animation:pop .45s var(--ease-out-quart) forwards;animation-delay:var(--d,0s)}
@keyframes pop{to{opacity:1;transform:scale(1)}}
.frame .fade{opacity:0}
.frame.play .fade{animation:fade .5s ease forwards;animation-delay:var(--d,0s)}
@keyframes fade{to{opacity:1}}
.frame .draw{transform-origin:left;transform:scaleX(0)}
.frame.play .draw{animation:draw .7s var(--ease-out-quart) forwards;animation-delay:var(--d,0s)}
@keyframes draw{to{transform:scaleX(1)}}
.frame .typein{overflow:hidden;white-space:nowrap;width:0}
.frame.play .typein{animation:typein 1.1s steps(30) forwards;animation-delay:var(--d,0s)}
@keyframes typein{to{width:100%}}
.frame .pulse-dot{animation:pdot 1.6s ease-in-out infinite}
@keyframes pdot{0%,100%{opacity:1}50%{opacity:.25}}
.frame .swap{position:relative}
@media (prefers-reduced-motion: reduce){
  .frame .anim,.frame .pop,.frame .fade,.frame .draw,.frame .typein{opacity:1;transform:none;width:auto;animation:none}
  .spin{animation:none}
}

/* ---- scene-specific ---- */
.connect-row{display:flex;align-items:center;gap:3cqw;padding:2.7cqw 0;border-bottom:1px solid var(--border-secondary)}
.connect-row:last-child{border-bottom:0}
.connect-row .nm{font-weight:600}
.connect-row .st{margin-left:auto}
.receipt{background:var(--bg-default);border:1px solid var(--border-secondary);box-shadow:var(--shadow-md);
  padding:5cqw 5cqw 6cqw;border-radius:1cqw 1cqw 0 0;position:relative}
.receipt:after{content:"";position:absolute;left:0;right:0;bottom:-2.4cqw;height:2.4cqw;
  background:linear-gradient(-45deg,transparent 2.4cqw,var(--bg-default) 0) 0 0/4.8cqw 4.8cqw,
             linear-gradient(45deg,transparent 2.4cqw,var(--bg-default) 0) 2.4cqw 0/4.8cqw 4.8cqw}
.storegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.6cqw}
.storecell{border:1px solid var(--border-secondary);border-radius:3cqw;padding:3cqw 2cqw;text-align:center;background:var(--bg-default)}
.storecell .sq{margin:0 auto 1.8cqw}
.storecell .nm{font-size:.82em;font-weight:600;line-height:1.25}
.storecell .tg{font-size:.72em;font-weight:600;margin-top:1cqw}
.tg.q{color:var(--green-11)} .tg.c{color:var(--text-tertiary)}
.term{background:var(--slate-12);color:#e6e8ee;border-radius:3.6cqw;padding:4.5cqw;font-family:var(--font-mono);
  font-size:.86em;line-height:1.75;box-shadow:var(--shadow-md);overflow:hidden}
.term .dim{color:#9aa0ab}.term .grn{color:#5fd68b}.term .blu{color:#7cc4ff}
.pwfield{border:1px solid var(--border-default);border-radius:2.6cqw;padding:2.8cqw 3.4cqw;
  font-family:var(--font-mono);letter-spacing:.35em;background:var(--bg-default)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.4cqw;height:100%}
.split .side{display:flex;flex-direction:column;gap:2.6cqw}
.side-tag{font:600 .72em var(--font-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--text-tertiary)}
.big-total{font-size:2.5em;font-weight:700;letter-spacing:-.03em;line-height:1}
.gatebar{display:flex;align-items:center;gap:2.6cqw;border-radius:3cqw;padding:3.2cqw 3.8cqw;font-weight:600}
.gatebar.red{background:var(--red-3);color:var(--red-12)}
.gatebar.green{background:var(--green-3);color:var(--green-12)}
.progressline{height:1.6cqw;border-radius:var(--radius-full);background:var(--bg-element);overflow:hidden}
.progressline i{display:block;height:100%;background:var(--blue-9);border-radius:var(--radius-full)}
.chiprow{display:flex;flex-wrap:wrap;gap:2cqw}
.prefchip{display:inline-flex;gap:1.6cqw;align-items:center;background:var(--bg-element);border-radius:var(--radius-full);
  padding:1.6cqw 3cqw;font-size:.85em;font-weight:550}
.quotecard .kv .v.total{font-size:1.25em}
.scene.center{align-items:center;justify-content:center;text-align:left}
.eyesmark{display:flex;gap:2.2cqw;justify-content:center}
.eyesmark .eye{width:11cqw;height:15.5cqw;background:var(--bg-default);border:1px solid var(--border-secondary);
  border-radius:50%;position:relative;box-shadow:var(--shadow-sm)}
.eyesmark .eye:after{content:"";position:absolute;left:22%;bottom:16%;width:44%;height:44%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c98a2b,#5f3a08 70%)}

/* wide frames: scale scene type down so full scenes fit the 16:9 slot */
.frame.r169 .scene{font-size:2.55cqw;padding:4.2cqw;gap:2.2cqw}
.frame.r169 .kv{padding-top:1.1cqw;padding-bottom:1.1cqw}
.frame.r169 .connect-row{padding-top:2cqw;padding-bottom:2cqw}
.frame.r169 .browser-body{padding:3cqw}
.ui-head{flex-wrap:wrap}

/* ---- real logos ---- */
.sqimg{width:9cqw;height:9cqw;border-radius:2.6cqw;object-fit:cover;flex:none;box-shadow:var(--shadow-xs);background:#fff}
.storecell .sqimg{margin:0 auto 1.8cqw;display:block}
.agentrow{display:flex;align-items:center;gap:2.2cqw;margin-bottom:3.6cqw}
.mini-tile{width:7.5cqw;height:7.5cqw;border-radius:2cqw;object-fit:cover;box-shadow:var(--shadow-xs);background:#fff;flex:none}
.logowall{background:#fff;border:1px solid var(--border-secondary);border-radius:3.6cqw;overflow:hidden;box-shadow:var(--shadow-md);width:100%}
.mq{overflow:hidden;padding:4.5cqw 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;width:max-content}
.mq-half{display:flex;align-items:center;gap:9cqw;padding-right:9cqw}
.frame.play .mq-track{animation:mqslide 32s linear infinite}
.frame.play .mq.rev .mq-track{animation-duration:38s;animation-direction:reverse}
@keyframes mqslide{to{transform:translateX(-50%)}}
.mq-mark{height:8.5cqw;width:auto;max-width:36cqw;object-fit:contain;flex:none}
.paygrid{display:flex;flex-wrap:wrap;gap:2.6cqw 4.2cqw;align-items:center;justify-content:center;padding:3.2cqw}
.paygrid img{height:4.4cqw;width:auto;max-width:19cqw;object-fit:contain}
.iconwall{display:grid;grid-template-columns:repeat(5,1fr);gap:2.4cqw;width:100%}
.iconwall img{width:100%;aspect-ratio:1;border-radius:3.4cqw;object-fit:cover;box-shadow:var(--shadow-xs);background:#fff}
/* .iw-fit: the same icon wall inside a 16:9 frame (bento "Connect your accounts once") — 3×2, tiles sized to fill the height */
.frame.r169.iw-frame .scene{padding:3cqw;justify-content:center;align-items:center}
.iconwall.iw-fit{grid-template-columns:repeat(3,23cqw);gap:2.4cqw;width:auto;justify-content:center}
.iconwall.iw-fit img{border-radius:5.2cqw}
@media (prefers-reduced-motion: reduce){.frame.play .mq-track{animation:none}}

/* ---- scenes 20-22: messaging surfaces, API trace, quote anatomy ---- */
.minichats{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5cqw;width:100%}
.minichat{border:1px solid var(--border-secondary);border-radius:3.5cqw;background:var(--bg-default);box-shadow:var(--shadow-sm);padding:3.2cqw;display:flex;flex-direction:column;gap:2.2cqw;min-width:0}
.minichat.wa{background:#f2f7ee}
.dark-theme .minichat.wa{background:#16211a}
.minichat .mc-head{display:flex;align-items:center;gap:1.8cqw;font-weight:650;font-size:.92em}
.minichat .mc-head .dotp{width:3cqw;height:3cqw;border-radius:50%;flex:none}
.mc-bub{max-width:88%;padding:2cqw 2.8cqw;border-radius:2.8cqw;font-size:.86em;line-height:1.4}
.mc-bub.them{background:var(--bg-element);align-self:flex-start;border-bottom-left-radius:.8cqw}
.mc-bub.me{align-self:flex-end;border-bottom-right-radius:.8cqw;color:#fff;background:var(--blue-9)}
.mc-bub.me.grn{background:#3fa34d}
.mc-stamp{align-self:flex-end;font-size:.78em;font-weight:650;color:var(--green-11)}
.codeblock{background:#101418;color:#dbe4ee;border-radius:4cqw;padding:4.2cqw;font-family:var(--font-mono);
  font-size:.82em;line-height:1.75;box-shadow:var(--shadow-md);width:100%}
.codeblock .cb-head{display:flex;align-items:center;gap:2cqw;border-bottom:1px solid #ffffff22;padding-bottom:2.6cqw;margin-bottom:2.6cqw;font-family:var(--font-sans)}
.codeblock .cb-head b{color:#fff;font-size:1.05em}
.codeblock .cb-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.codeblock .m{color:#7ee2a8}.codeblock .p{color:#8ab8ff}.codeblock .d{color:#8b98a5}.codeblock .y{color:#ffd479}.codeblock .w{color:#fff;font-weight:600}
.cb-chips{display:flex;gap:1.8cqw;flex-wrap:wrap;margin-top:3cqw}
.cb-chip{border:1px solid #ffffff2e;border-radius:var(--radius-full);padding:.7cqw 2.2cqw;font-size:.85em;color:#aebac7;font-family:var(--font-sans)}
.stackbar{display:flex;height:5.5cqw;border-radius:1.6cqw;overflow:hidden}
.stackbar .s1{background:var(--blue-9)}
.stackbar .s2{background:var(--amber-9)}
.stackleg{display:flex;gap:4cqw;font-size:.84em;color:var(--text-secondary)}
.stackleg i{width:2.6cqw;height:2.6cqw;border-radius:.8cqw;display:inline-block;vertical-align:-.4cqw;margin-right:1.2cqw}

/* ---- scenes 20/23-26: phone chats, benchmarks, range, one number ---- */
.phones{height:100%;display:flex;justify-content:center;gap:3.2cqw}
.phone-frame{container-type:inline-size;height:100%;aspect-ratio:9/16;border-radius:4.2cqw;border:.55cqw solid #14161a;
  background:var(--bg-default);box-shadow:var(--shadow-lg);overflow:hidden;flex:none}
.dark-theme .phone-frame{border-color:#3a3f46}
.phone-frame.wa{background:#f2f7ee}.dark-theme .phone-frame.wa{background:#131c15}
.phone-frame.tg{background:#eef5fb}.dark-theme .phone-frame.tg{background:#101a24}
.phone-ui{display:flex;flex-direction:column;gap:4.6cqw;padding:5.5cqw;height:100%;font-size:5.1cqw;color:var(--text-default)}
.phone-ui .mc-bub{font-size:.92em;max-width:92%}
.phone-ui .mc-head{font-size:.95em}
.bars{display:flex;flex-direction:column;gap:2.6cqw}
.barrow{display:grid;grid-template-columns:9.5em 1fr 3.2em;align-items:center;gap:2.6cqw;font-size:.92em}
.bar{height:3.2cqw;background:var(--bg-element);border-radius:var(--radius-full);overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue-9);border-radius:var(--radius-full);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.frame.play .bar i{transform:scaleX(1)}
.seats{display:flex;gap:1.6cqw;justify-content:center;padding:1cqw 0}
.seats i{width:3.6cqw;height:3.6cqw;border-radius:1.2cqw 1.2cqw .4cqw .4cqw;background:var(--bg-element);border:1px solid var(--border-secondary)}
.seats i.on{background:var(--blue-9);border-color:transparent}
.showchips{display:flex;gap:1.8cqw;flex-wrap:wrap}
.showchips span{border:1px solid var(--border-default);border-radius:var(--radius-full);padding:1cqw 2.6cqw;font-weight:600;font-size:.9em}
.showchips span.on{background:var(--slate-12);color:var(--bg-default)}
.listing-img{height:26cqw;border-radius:3cqw;background:linear-gradient(135deg,#f5a623,#e5484d);display:flex;align-items:flex-end;padding:3cqw;color:#fff;font-weight:650}
.dial{display:grid;grid-template-columns:repeat(3,7.2cqw);gap:2.2cqw;justify-content:center}
.dial span{width:7.2cqw;height:7.2cqw;border-radius:50%;border:1px solid var(--border-default);display:flex;align-items:center;justify-content:center;font-weight:600;background:var(--bg-default)}
.dial span.on{background:var(--blue-9);color:#fff;border-color:transparent}
.smsbub{background:var(--bg-element);border-radius:3.5cqw;border-bottom-left-radius:1cqw;padding:3cqw 3.6cqw;max-width:88%}
.frame.compact .listing-img{height:19cqw}
.dial{grid-template-columns:repeat(3,6.2cqw);gap:1.8cqw}
.dial span{width:6.2cqw;height:6.2cqw}
.storegrid2{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw}
.storecell2{display:flex;gap:2cqw;align-items:center;min-width:0}
.storecell2 .grow b{display:block;line-height:1.2}
.storecell2 .badge{padding:.7cqw 2cqw}

/* ---- scenes 27-35: heat calendar, price fan, race rows, funnels, donut, ledger, logo cloud ---- */
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:1.6cqw}
.heat i{display:block;border-radius:1.5cqw;aspect-ratio:1;background:var(--bg-element)}
.heat .l1{background:var(--green-4)}.heat .l2{background:var(--green-6)}.heat .l3{background:var(--green-8)}
.heat .today{outline:.55cqw solid var(--amber-9);outline-offset:.3cqw}
.fanpath{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.8s ease .2s}
.frame.play .fanpath{stroke-dashoffset:0}
.fanpath.fd2{transition-delay:.45s}.fanpath.fd3{transition-delay:.7s}
.racerow{display:grid;grid-template-columns:7.5cqw 1fr auto;gap:2.6cqw;align-items:center}
.racerow .sqimg{width:7.5cqw;height:7.5cqw}
.racerow.win .bar i{background:var(--green-9)}
.logocloud{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2cqw}
.logocloud img{width:100%;aspect-ratio:1;border-radius:22%;display:block}
.funrow{display:flex;align-items:center;gap:2.2cqw}
.funseg{height:4.4cqw;border-radius:1.5cqw;transform:scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.frame.play .funseg{transform:scaleX(1)}
.donut{width:19cqw;height:19cqw;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--blue-9) 0 38%,var(--green-9) 38% 62%,var(--amber-9) 62% 82%,var(--slate-8) 82% 100%)}
.donut i{width:11.5cqw;height:11.5cqw;border-radius:50%;background:var(--bg-default);display:flex;align-items:center;justify-content:center;font-weight:700;font-style:normal}
.ledrow{display:flex;gap:2.6cqw;align-items:center;padding:1.9cqw 0;border-bottom:1px dashed var(--border-secondary)}
.ledrow:last-child{border-bottom:0}
.miniapp{display:flex;gap:2.4cqw;align-items:center;background:var(--bg-default);border:1px solid var(--border-secondary);border-radius:3.4cqw;padding:2.6cqw 3cqw;box-shadow:var(--shadow-sm)}
.miniapp .sqimg{width:7cqw;height:7cqw}

/* ---- scene 36: panel reveal (sher.md transitions) ---- */
.panelstage{position:relative;width:100%;height:100%;display:flex;align-items:center}
.storewall{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqw;width:63%;transition:opacity .7s ease,transform .7s ease}
.frame.play .storewall{opacity:.72;transform:translateX(-1.2cqw)}
.wallcell{display:flex;flex-direction:column;gap:1.1cqw;align-items:flex-start}
.wallcell .sqimg{width:8.5cqw;height:8.5cqw}
.wallcell span{font-size:.8em;font-weight:600}
.wallcell.sel .sqimg{outline:.55cqw solid var(--blue-9);outline-offset:.35cqw}
.sidepanel{position:absolute;top:2.5cqw;bottom:2.5cqw;right:2.5cqw;width:36%;background:var(--bg-subtle);
  border:1px solid var(--border-secondary);border-radius:4cqw;box-shadow:var(--shadow-lg);padding:3.4cqw;
  display:flex;flex-direction:column;gap:1.9cqw;font-size:.9em;z-index:3;
  transform:translateX(110%);opacity:.6;transition:transform .75s cubic-bezier(.3,1.25,.35,1),opacity .5s ease}
.frame.play .sidepanel{transform:none;opacity:1}
.prow{display:flex;justify-content:space-between;align-items:center;gap:2.4cqw;opacity:0;transform:translateX(1.6cqw);transition:opacity .45s ease,transform .45s ease}
.frame.play .prow{opacity:1;transform:none}
.prow .k{color:var(--text-secondary)}
.pd1{transition-delay:.38s}.pd2{transition-delay:.48s}.pd3{transition-delay:.58s}.pd4{transition-delay:.68s}.pd5{transition-delay:.78s}.pd6{transition-delay:.9s}
.bankwall{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw}
.bankwall img{width:100%;aspect-ratio:1;border-radius:22%;display:block;background:#fff;border:1px solid var(--border-secondary)}
.banktile{background:#fff;border:1px solid var(--border-secondary);border-radius:22%;display:flex;align-items:center;justify-content:center;aspect-ratio:1}
.banktile img{width:64%;display:block}
.miniapp.sm{padding:2cqw 2.6cqw}

/* ---- thinking orb (sher.md ui/chat-orb): glossy sphere, eyes, sheen, pulse ---- */
.orbwrap{position:relative;display:inline-flex;flex:none}
.orbring{position:absolute;inset:0;border-radius:50%;background:var(--blue-9);opacity:.3}
.frame.play .orbring{animation:orbpulse 2.6s ease-out infinite}
@keyframes orbpulse{0%{transform:scale(1);opacity:.3}70%,100%{transform:scale(1.5);opacity:0}}
.orb{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;flex:none;
  background:radial-gradient(circle at 32% 28%, #a8d4ff, var(--blue-9) 42%, #0057a8);
  box-shadow:inset 0 -.18em .36em rgb(0 0 0/.25), inset 0 .14em .3em rgb(255 255 255/.35)}
.orb .sheen{position:absolute;inset:-20%;border-radius:50%;opacity:.35;
  background:conic-gradient(from 0deg, transparent, rgb(255 255 255/.5), transparent 40%)}
.frame.play .orb .sheen,.orb.live .sheen{animation:orbsheen 7s linear infinite}
@keyframes orbsheen{to{transform:rotate(360deg)}}
.orb .eyes{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9%}
.orb .eye{width:27%;height:32%;background:#fff;border-radius:50%;position:relative;box-shadow:inset 0 -1px 2px rgb(0 0 0/.15)}
.orb .eye::after{content:"";position:absolute;left:50%;top:54%;width:42%;height:38%;background:#12263f;border-radius:50%;transform:translate(-50%,-50%)}
.frame.play .orb .eyes,.orb.live .eyes{animation:orbblink 4.8s ease-in-out infinite}
@keyframes orbblink{0%,90%,100%{transform:scaleY(1)}93.5%{transform:scaleY(.08)}97%{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){.orbring,.orb .sheen,.orb .eyes{animation:none}}

/* ---- scene 38: set the cap (sher.md set-timer, re-premised as money) ---- */
.capsurface{position:relative;height:100%;background:#2c2c2c;border-radius:4.5cqw;overflow:hidden;
  display:flex;align-items:center;gap:4.5cqw;padding:3.4cqw 4.5cqw;color:#fff}
.capborder{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.capborder rect{fill:none;stroke-width:3;vector-effect:non-scaling-stroke}
.capborder-track{stroke:rgb(0 0 0/.35)}
.capborder-anim{stroke:#ff9f0a;stroke-dasharray:1;stroke-dashoffset:0}
.frame.play .capborder-anim{animation:capdrain 12s linear infinite}
@keyframes capdrain{from{stroke-dashoffset:0}to{stroke-dashoffset:.8}}
.capwheel{position:relative;width:30cqw;height:28cqw;overflow:hidden;flex:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent)}
.cappill{position:absolute;left:6%;right:6%;top:36.07%;height:27.86%;background:rgb(255 255 255/.08);border-radius:2.2cqw}
.capwheel-track{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column}
.capwheel-track div{height:7.8cqw;display:flex;align-items:center;justify-content:center;
  font-size:4.9cqw;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:rgb(255 255 255/.32)}
.capwheel-clip{position:absolute;inset:0;clip-path:inset(36.07% 0 36.07% 0)}
.capwheel-clip .capwheel-track div{color:#fff}
.frame.play .capwheel-track{animation:capscroll 12s linear infinite}
@keyframes capscroll{from{transform:translateY(0)}to{transform:translateY(-62.4cqw)}}
.capstack{flex:1;display:flex;flex-direction:column;gap:2.6cqw;min-width:0}
.caprow{display:flex;align-items:center;gap:2.6cqw;font-size:.92em}
.caprow>span{width:11.5cqw;flex:none;color:rgb(255 255 255/.72)}
.capbar{flex:1;height:1.9cqw;background:rgb(255 255 255/.14);border-radius:999px;overflow:hidden}
.capbar i{display:block;height:100%;background:#34c759;border-radius:inherit}
.caprow b{min-width:7.5cqw;text-align:right;font-variant-numeric:tabular-nums}
.capbtn{align-self:flex-start;background:rgb(52 199 89/.2);color:#34c759;padding:1.8cqw 3.6cqw;
  border-radius:999px;font-weight:600;font-size:.95em;margin-top:.8cqw}
@media (prefers-reduced-motion: reduce){.capwheel-track,.capborder-anim{animation:none}}

/* ---- scene 39: coverflow of orders (sher.md ui/coverflow-carousel) ---- */
.cfstage{position:relative;flex:1;perspective:115cqw}
.cfcard{position:absolute;left:50%;top:50%;width:31cqw;height:33cqw;background:var(--bg-default);
  border:1px solid var(--border-secondary);border-radius:4cqw;box-shadow:var(--shadow-md);
  padding:3cqw;display:flex;flex-direction:column;gap:1.8cqw;transform:translate(-50%,-50%)}
.frame.play .cfcard{animation:cfspin 12.5s ease-in-out infinite;animation-delay:calc(var(--k) * -2.5s)}
@keyframes cfspin{
  0%,14%{transform:translate(calc(-50% + 0cqw),-50%) translateZ(0) rotateY(0deg);opacity:1;z-index:30}
  20%,34%{transform:translate(calc(-50% - 16.5cqw),-50%) translateZ(-9cqw) rotateY(30deg);opacity:.88;z-index:29}
  40%,54%{transform:translate(calc(-50% - 33cqw),-50%) translateZ(-17cqw) rotateY(38deg);opacity:.55;z-index:28}
  57%{transform:translate(calc(-50% - 33cqw),-50%) translateZ(-17cqw) rotateY(38deg);opacity:0;z-index:10}
  60%{transform:translate(calc(-50% + 33cqw),-50%) translateZ(-17cqw) rotateY(-38deg);opacity:0;z-index:10}
  63%,74%{transform:translate(calc(-50% + 33cqw),-50%) translateZ(-17cqw) rotateY(-38deg);opacity:.55;z-index:28}
  80%,94%{transform:translate(calc(-50% + 16.5cqw),-50%) translateZ(-9cqw) rotateY(-30deg);opacity:.88;z-index:29}
  100%{transform:translate(calc(-50% + 0cqw),-50%) translateZ(0) rotateY(0deg);opacity:1;z-index:30}}
@media (prefers-reduced-motion: reduce){.cfcard{animation:none}}


/* ---- coverflow organization: floor, synced caption, dots ---- */
.cffloor{position:absolute;left:50%;bottom:4%;width:64cqw;height:5cqw;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%, rgb(0 0 0/.16), transparent 70%);border-radius:50%}
.cfmeta{display:flex;flex-direction:column;align-items:center;gap:1.6cqw}
.cfcaps{position:relative;height:3.4cqw;width:100%}
.cfcap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.92em;color:var(--text-secondary);opacity:0;text-align:center;white-space:nowrap}
.cfcap b{color:var(--text-default)}
.frame.play .cfcap{animation:cfcap 12.5s linear infinite;animation-delay:calc(var(--k) * -2.5s)}
@keyframes cfcap{0%{opacity:0}2.5%{opacity:1}17%{opacity:1}20%,100%{opacity:0}}
.cfdots{display:flex;gap:1.6cqw}
.cfdot{width:1.7cqw;height:1.7cqw;border-radius:50%;background:var(--text-tertiary);opacity:.35}
.frame.play .cfdot{animation:cfdot 12.5s linear infinite;animation-delay:calc(var(--k) * -2.5s)}
@keyframes cfdot{0%,17%{opacity:1;transform:scale(1.25);background:var(--text-default)}20%,100%{opacity:.35;transform:scale(1);background:var(--text-tertiary)}}
@media (prefers-reduced-motion: reduce){.cfcap,.cfdot{animation:none}.cfcap:first-child{opacity:1}}

/* ---- mobile: narrow frames stack top-down (frame = container) ---- */
@keyframes cfspinS{
  0%,14%{transform:translate(calc(-50% + 0cqw),-50%) translateZ(0) rotateY(0deg);opacity:1;z-index:30}
  20%,34%{transform:translate(calc(-50% - 13cqw),-50%) translateZ(-8cqw) rotateY(27deg);opacity:.88;z-index:29}
  40%,54%{transform:translate(calc(-50% - 26cqw),-50%) translateZ(-15cqw) rotateY(34deg);opacity:.55;z-index:28}
  57%{transform:translate(calc(-50% - 26cqw),-50%) translateZ(-15cqw) rotateY(34deg);opacity:0;z-index:10}
  60%{transform:translate(calc(-50% + 26cqw),-50%) translateZ(-15cqw) rotateY(-34deg);opacity:0;z-index:10}
  63%,74%{transform:translate(calc(-50% + 26cqw),-50%) translateZ(-15cqw) rotateY(-34deg);opacity:.55;z-index:28}
  80%,94%{transform:translate(calc(-50% + 13cqw),-50%) translateZ(-8cqw) rotateY(-27deg);opacity:.88;z-index:29}
  100%{transform:translate(calc(-50% + 0cqw),-50%) translateZ(0) rotateY(0deg);opacity:1;z-index:30}}
@container (max-width:460px){
  .people-grid .split{grid-template-columns:1fr}
  .capsurface{flex-direction:column;gap:3.2cqw}
  .capwheel{height:22cqw}
  .signin-flex{flex-direction:column}
  .signin-flex .phonewrap{width:42cqw !important}
  .frame.play .cfcard{width:47cqw;animation-name:cfspinS}
}
@media (max-width:480px){
  .frame.signin-frame{aspect-ratio:auto}
  .frame.signin-frame .scene{height:auto}
  .frame.cap-frame{aspect-ratio:4/3}
  .frame.split-frame{aspect-ratio:1/1}
}

/* ---- Round 6m: "Pair it once." calendar + ring (pair-calendar.js) ---- */
.pair-cal{height:100%;display:flex;align-items:center;justify-content:center;gap:6cqw;padding:3cqw 5cqw}
.pc-dial{position:relative;width:31cqw;height:31cqw;flex:none;display:flex;align-items:center;justify-content:center}
.pc-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pc-ring circle{fill:none;stroke-width:3.2;stroke-linecap:round}
.pc-track{stroke:var(--border-secondary)}
.pc-arc{stroke:var(--blue-9);stroke-dasharray:1 1;stroke-dashoffset:1}
.pc-tile{width:19cqw;height:19cqw;border-radius:4.4cqw;background:#fff;border:1px solid var(--border-secondary);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column}
.pc-month{background:var(--red-9);color:#fff;font-weight:700;font-size:2.5cqw;letter-spacing:.12em;text-align:center;padding:1cqw 0 .9cqw}
.pc-day{flex:1;position:relative;overflow:hidden;font-size:9.6cqw;font-weight:600;letter-spacing:-.04em;color:var(--text-default);font-variant-numeric:tabular-nums;line-height:1}
.pc-side{display:flex;flex-direction:column;gap:2cqw;min-width:0}
.pc-head{display:flex;align-items:baseline;gap:2cqw}
.pc-head b{font-size:1.1em}
.pc-grid{display:grid;grid-template-columns:repeat(7,4.4cqw);gap:.7cqw;font-size:1.85cqw;text-align:center}
.pc-grid span{height:4.4cqw;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.pc-grid .pc-wd{font-weight:600;color:var(--text-secondary);font-size:1.6cqw}
.pc-status{display:flex;align-items:center;gap:1.6cqw;flex-wrap:wrap}
.pc-dot{width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--green-9);box-shadow:0 0 0 .8cqw color-mix(in srgb,var(--green-9) 22%,transparent);flex:none}
.pc-note{flex-basis:100%;padding-left:3.8cqw;min-height:1.3em}

/* ---- Round 6n ---- */
/* Calendar: cross-sliding digits, emoji cells, theme-aware tile */
.pc-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s ease;will-change:transform,opacity}
.pc-num.enter{transform:translateY(55%);opacity:0;transition:none}
.pc-num.out{transform:translateY(-55%);opacity:0}
.pc-tile{position:relative;overflow:visible}
.pc-tile .pc-month{border-radius:4.4cqw 4.4cqw 0 0}
.pc-day{border-radius:0 0 4.4cqw 4.4cqw}
.dark-theme .pc-tile{background:#1c1c1f}
.pc-emo{position:absolute;right:-2.4cqw;bottom:-2.4cqw;width:8cqw;height:8cqw;border-radius:50%;background:var(--bg-default);box-shadow:var(--shadow-sm),0 0 0 1px var(--border-secondary);font-size:4.4cqw;line-height:1}
.pc-em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .25s ease}
.pc-em.enter{transform:scale(.4);opacity:0;transition:none}
.pc-em.out{transform:scale(.6);opacity:0}
.pc-cell{position:relative}
.pc-cell::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue-3,#e6f4fe);opacity:0;transform:scale(.6);transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.pc-cell.now::before{background:var(--blue-9)}
.pc-cell.on::before{opacity:1;transform:none}
.pc-n,.pc-e{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .22s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.pc-e{opacity:0;transform:scale(.3);font-size:2.5cqw}
.pc-cell.on .pc-n{opacity:0;transform:scale(.6)}
.pc-cell.on .pc-e{opacity:1;transform:none}

/* Logos sit straight on the page: no white tiles, panels or rings behind them */
.sqimg,.mini-tile,.iconwall img,.storechips img,img.app-icon,.bankwall img,.banktile,.logocloud img,.avatars img,.models-also img,.mtile,.pc-logo{background:transparent}
.bankwall img,.banktile{border:0}
.beam-node{background:transparent;border:0;box-shadow:none}
.beam-node img{width:82%;height:82%}
.logowall{background:transparent;border:0;box-shadow:none;border-radius:0}
img.lg-clear{object-fit:contain;box-shadow:none;border-radius:0}
.dark-theme img.lg-dk,.dark-theme .lg-dk img{filter:invert(1) hue-rotate(180deg)}
.dark-theme img.lg-ring{box-shadow:0 0 0 1px rgb(255 255 255/.16)}

/* Marquee bars and logo walls: one gray / negative monochrome treatment, tuned for dark */
.marquee-track{align-items:center;gap:40px;animation-name:logo-carousel-6n}
@keyframes logo-carousel-6n{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 20px))}}
.mq-logo{height:24px;width:auto;max-width:120px;object-fit:contain;flex:none}
.mq-logo,.mq-mark,.paygrid img{filter:brightness(0);opacity:.55;transition:opacity .25s ease}
.dark-theme .mq-logo,.dark-theme .mq-mark,.dark-theme .paygrid img{filter:brightness(0) invert(1);opacity:.62}
.mq-logo.knock,.mq-mark.knock,.paygrid img.knock{filter:grayscale(1) contrast(1.15)}
.dark-theme .mq-logo.knock,.dark-theme .mq-mark.knock,.dark-theme .paygrid img.knock{filter:grayscale(1) invert(1) contrast(1.1)}
.mq-logo:hover,.mq-mark:hover,.paygrid img:hover{opacity:1}

/* Approvals card: four rule badges */
.rule-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0;padding:0}
.rule-badges li{--c:var(--blue-9);display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px 0 12px;border-radius:999px;font:600 14px/1 var(--font-sans);letter-spacing:-.1px;color:var(--text-default);background:color-mix(in srgb,var(--c) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 34%,transparent)}
.rule-badges li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 24%,transparent)}
.rule-badges .rb-ap{--c:var(--green-9)}.rule-badges .rb-al{--c:var(--amber-9)}.rule-badges .rb-of{--c:var(--blue-9)}.rule-badges .rb-re{--c:#8e4ec6}
.dark-theme .rule-badges li{background:color-mix(in srgb,var(--c) 16%,transparent)}

/* Tap a store + Sign in with iMessage */
.band-sep{border:0;height:1px;background:var(--border-secondary);margin:40px 0 28px}
.imsg-row{display:flex;align-items:center;gap:16px;max-width:680px;margin-bottom:24px}
.imsg-row img{width:48px;height:48px;flex:none;object-fit:contain}
.imsg-row h3{font-size:20px;font-weight:600;letter-spacing:-.4px;line-height:1.2}
.imsg-row p{color:var(--text-secondary);font-size:16px;line-height:1.5;margin-top:4px}

/* Approve anywhere: crisp iMessage render beside compact chat rows */
.aa-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:48px;align-items:center}
.aa-phone img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 50px rgb(0 0 0/.28))}
.aa-list{display:flex;flex-direction:column;gap:14px}
.aa-row{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;padding:16px 18px;border-radius:20px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--border-secondary)}
.aa-row img{width:40px;height:40px;border-radius:11px;grid-row:span 2}
.aa-row .aa-app{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aa-row .aa-msg{font-size:14.5px;color:var(--text-secondary);line-height:1.45}
.aa-row .aa-me{display:inline-block;margin-left:6px;padding:3px 10px;border-radius:12px;background:#30a46c;color:#fff;font-weight:600;font-size:13px}
.aa-row .badge{font-size:12px;padding:3px 8px}
@media (max-width:787.98px){.aa-grid{grid-template-columns:1fr;gap:28px}.aa-phone{max-width:300px;margin:0 auto;width:100%}}

/* Plaid: one phone number, many banks */
.plaid-row{display:flex;align-items:center;gap:20px;padding:20px 22px;margin-bottom:20px;border-radius:24px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--border-secondary)}
.plaid-row svg{height:30px;width:auto;flex:none;color:var(--text-default)}
.plaid-row h3{font-size:19px;font-weight:600;letter-spacing:-.35px}
.plaid-row p{color:var(--text-secondary);font-size:15.5px;line-height:1.5;margin-top:3px}
@media (max-width:520px){.plaid-row{flex-direction:column;align-items:flex-start;gap:12px}}

/* Charts (charts.js) */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.kpi{padding:18px 18px 12px;border-radius:20px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--border-secondary);display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi .k{font-size:13px;color:var(--text-secondary)}
.kpi .v{font-size:26px;font-weight:650;letter-spacing:-.8px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kpi .v small{font-size:12px;font-weight:600;letter-spacing:0;color:var(--green-11);background:var(--green-3);padding:2px 7px;border-radius:999px}
.kpi [data-chart]{height:36px}
.kpi [data-chart] svg{width:100%;height:100%;display:block;overflow:visible}
.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.chart-card{margin:0;padding:22px;border-radius:24px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--border-secondary);min-width:0;display:flex;flex-direction:column;gap:14px}
.chart-card.wide{grid-column:1/-1}
.chart-card figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chart-card figcaption b{font-size:16px;font-weight:600;letter-spacing:-.25px}
.chart-card figcaption span{font-size:13px;color:var(--text-tertiary)}
.chart-card figcaption .up{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--green-11);background:var(--green-3);padding:3px 8px;border-radius:999px}
.chart-card [data-chart] svg{width:100%;height:auto;display:block;overflow:visible;color:var(--text-default)}
.ch-grid{stroke:var(--border-secondary);stroke-dasharray:3 3;stroke-width:1}
.ch-tick{font:500 11px var(--font-sans);fill:var(--text-tertiary)}
.ch-legend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--text-secondary)}
.ch-legend li{display:flex;align-items:center;gap:7px}
.ch-legend i{width:9px;height:9px;border-radius:3px;flex:none}
.ch-legend.col{flex-direction:column;gap:9px}
.ch-legend.col li b{margin-left:auto;font-weight:600;color:var(--text-default);font-variant-numeric:tabular-nums}
.ch-grow{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.02);opacity:0;transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .5s ease}
.in .ch-grow{transform:none;opacity:1}
.hb-row{display:grid;grid-template-columns:22px 78px minmax(0,1fr) 72px;align-items:center;gap:10px;font-size:13.5px;padding:5px 0}
.hb-row img{width:22px;height:22px;border-radius:6px}
.hb-name{color:var(--text-secondary);white-space:nowrap}
.hb-row b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.hb-track{height:10px;border-radius:5px;background:var(--bg-element);overflow:hidden}
.hb-track i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#548ee4,#0090ff);transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.22,1,.36,1) calc(var(--i)*70ms)}
.in .hb-track i{transform:none}
[data-chart="donut"]{display:flex;align-items:center;gap:22px}
.dn-wrap{position:relative;width:46%;max-width:200px;flex:none}
.dn-spin{transform-origin:100px 100px;transform:rotate(-60deg) scale(.86);opacity:0;transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .6s ease}
.in .dn-spin{transform:none;opacity:1}
.dn-seg{stroke:var(--bg-subtle);stroke-width:3}
.dn-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.dn-mid b{font-size:17px;font-weight:650;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.dn-mid span{font-size:12px;color:var(--text-tertiary)}
[data-chart="donut"] .ch-legend{flex:1;min-width:0}
.sb-col{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .8s cubic-bezier(.22,1,.36,1) calc(var(--i)*60ms)}
.in .sb-col{transform:none}
.fn-row{display:grid;grid-template-columns:76px minmax(0,1fr) 30px 38px;align-items:center;gap:10px;font-size:13.5px;padding:6px 0}
.fn-name{color:var(--text-secondary)}
.fn-row b{text-align:right;font-variant-numeric:tabular-nums}
.fn-pct{font-size:12px;color:var(--text-tertiary);text-align:right}
.fn-track{height:22px;display:flex;justify-content:center}
.fn-track i{display:block;height:100%;border-radius:6px;transform:scaleX(0);opacity:.4;transition:transform .9s cubic-bezier(.22,1,.36,1) calc(var(--i)*90ms),opacity .6s ease calc(var(--i)*90ms)}
.in .fn-track i{transform:none;opacity:1}
.chart-note{font-size:13px;color:var(--text-tertiary);margin-top:14px}
@media (max-width:1007.98px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:787.98px){.chart-grid{grid-template-columns:1fr}.chart-card{padding:18px}}
@media (max-width:420px){[data-chart="donut"]{flex-direction:column;align-items:stretch}.dn-wrap{width:62%;margin:0 auto}.kpi .v{font-size:22px}}
@media (prefers-reduced-motion: reduce){.ch-grow,.hb-track i,.dn-spin,.sb-col,.fn-track i,.pc-num,.pc-em,.pc-n,.pc-e,.pc-cell::before{transition:none}}

/* Copy-pass cleanups: no uppercase kicker labels */
.mega-col .mega-label{font:600 13px/1.2 var(--font-sans);color:var(--text-tertiary);margin-bottom:4px}
.logos .caption{text-transform:none;font:400 14px/1.6 var(--font-sans)}
.side-tag{text-transform:none;letter-spacing:0;font:600 .8em var(--font-sans)}

/* Round 6n: Dia line centering + audience badges */
.dia-reveal{transition:width .45s cubic-bezier(.65,0,.35,1)}
.dia-line{text-align:center}
.dia-aud{margin-top:22px}
.dia-aud .rb-dev{--c:#0090ff}.dia-aud .rb-ret{--c:#f5a623}.dia-aud .rb-shop{--c:var(--green-9)}
@media (min-width:944px){.dia-aud{margin-top:28px}}

/* ===== Round 7 ===== */
/* Neutral badges and chips: grayscale plus one accent (blue-9), no color coding */
.rule-badges li,.rule-badges .rb-ap,.rule-badges .rb-al,.rule-badges .rb-of,.rule-badges .rb-re,.dia-aud .rb-dev,.dia-aud .rb-ret,.dia-aud .rb-shop{--c:var(--slate-9)}
.rule-badges li{background:var(--bg-element);box-shadow:inset 0 0 0 1px var(--border-secondary);padding:0 15px}
.dark-theme .rule-badges li{background:var(--bg-element)}
.rule-badges li::before{display:none}
.badge.green,.badge.blue,.badge.amber{color:var(--text-default);background:var(--bg-element);border-color:var(--border-secondary)}
.sq[style]{background:var(--slate-12) !important;color:var(--bg-default) !important}
.kpi .v small,.chart-card figcaption .up{color:var(--text-secondary);background:var(--bg-element)}
.hb-track i{background:var(--slate-10)}
.heat .l1{background:var(--slate-5)}.heat .l2{background:var(--slate-7)}.heat .l3{background:var(--slate-10)}
.heat .today{outline-color:var(--blue-9)}
.check{background:var(--slate-12);color:var(--bg-default)}
.racerow .bar i{background:var(--slate-8)}.racerow.win .bar i{background:var(--blue-9)}
.dia-reveal{--dia-accent:var(--blue-9)}

/* Dia reveal: under 944px the word sits on its own centered line, so the line count never changes */
@media (max-width:943.98px){.dia-line .dia-reveal{display:block;margin:0 auto}}

/* Paid from banks linked through Plaid (illustrative) */
.pf-card figcaption{align-items:center}
.pf-plaid{height:20px;width:auto;margin-right:4px}
.mono-mark{filter:brightness(0);opacity:.72}
.dark-theme .mono-mark{filter:brightness(0) invert(1);opacity:.82}
.pf-rows{display:flex;flex-direction:column;gap:12px}
.pf-row{display:grid;grid-template-columns:130px 150px minmax(0,1fr) 80px;gap:14px;align-items:center;font-size:14px}
.pf-bank{font-weight:600;letter-spacing:-.2px}
.pf-acct{color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.pf-row b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.pf-row .hb-track i{transition-delay:calc(var(--i)*90ms)}
.pf-row:first-child .hb-track i{background:var(--blue-9)}
@media (max-width:640px){.pf-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.pf-acct{display:none}.pf-row .hb-track{grid-column:1/-1;grid-row:2}}

/* Train a model on your own site */
.rl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.rl-steps{list-style:none;margin:0;padding:6px 22px;border-radius:24px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--border-secondary)}
.rl-steps li{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--border-secondary)}
.rl-steps li:last-child{border-bottom:0}
.rl-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--font-sans);color:var(--text-default);box-shadow:inset 0 0 0 1px var(--border-primary,var(--border-secondary));font-variant-numeric:tabular-nums}
.rl-steps b{font-size:16px;font-weight:600;letter-spacing:-.3px}
.rl-steps p{color:var(--text-secondary);font-size:14.5px;line-height:1.5;margin-top:3px}
.rl-bars{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:end;min-height:220px;padding-top:8px}
.rl-col{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.rl-col b{font:650 18px/1 var(--font-sans);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.rl-bar{position:relative;display:block;width:100%;max-width:64px;height:180px;border-radius:12px;background:var(--bg-element);overflow:hidden}
.rl-bar i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--v)*1%);border-radius:12px;background:var(--slate-8);transform:scaleY(0);transform-origin:bottom;transition:transform 1s cubic-bezier(.22,1,.36,1) calc(var(--i)*140ms)}
.rl-col.on .rl-bar i{background:var(--blue-9)}
.in .rl-bar i{transform:none}
.rl-col small{font-size:12.5px;color:var(--text-tertiary)}
@media (max-width:787.98px){.rl-grid{grid-template-columns:1fr}.rl-steps{padding:4px 18px}.rl-bar{height:150px}.rl-bars{min-height:190px}}
@media (prefers-reduced-motion: reduce){.rl-bar i{transition:none}}

/* Sign in with iMessage: smaller subtext, centered heading row, animation out of its box */
.imsg-row{margin:0 auto 20px;justify-content:center;text-align:center;flex-direction:column;gap:10px;max-width:560px}
.imsg-row img{width:40px;height:40px}
.imsg-row p{font-size:13px;line-height:1.5;color:var(--text-tertiary)}
.signin-stage{max-width:780px;margin:0 auto}
.frame.bare.signin-frame .scene{padding-left:0;padding-right:0}

/* Approve anywhere: CSS iPhone at 393:852 with bezel and dynamic island */
.aa-grid{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px}
.frame.aa-frame{aspect-ratio:auto;overflow:visible;display:flex;justify-content:center}
.iph{position:relative;width:300px;max-width:100%;aspect-ratio:393/852;padding:10px;border-radius:52px;background:#0c0c0e;box-shadow:0 0 0 1.5px #3b3b40,0 0 0 3px #17171a,0 30px 60px -10px rgb(0 0 0/.45);flex:none}
.iph::before,.iph::after{content:"";position:absolute;width:3px;border-radius:2px;background:#2b2b30}
.iph::before{left:-4.5px;top:23%;height:12%;box-shadow:0 -16% 0 #2b2b30}
.iph::after{right:-4.5px;top:28%;height:15%}
.iph-screen{position:relative;height:100%;border-radius:42px;background:#000;color:#fff;overflow:hidden;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",var(--font-sans);-webkit-font-smoothing:antialiased}
.iph-island{position:absolute;top:9px;left:50%;width:96px;height:28px;margin-left:-48px;border-radius:20px;background:#000;box-shadow:0 0 0 1px #111;z-index:2}
.iph-status{height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:4px 26px 0 30px;font-size:14px;font-weight:600;letter-spacing:-.2px}
.iph-sig{display:inline-flex;align-items:flex-end;gap:1.5px;height:10px}
.iph-sig i{display:block;width:3px;background:#fff;border-radius:1px}
.iph-sig i:nth-child(1){height:4px}.iph-sig i:nth-child(2){height:6px}.iph-sig i:nth-child(3){height:8px}.iph-sig i:nth-child(4){height:10px}
.iph-sig em{display:block;width:21px;height:10px;margin-left:6px;border-radius:3px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.45);background:linear-gradient(90deg,#fff 0 72%,transparent 72%);background-clip:content-box;padding:2px;box-sizing:border-box}
.iph-head{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px 0 10px;border-bottom:.5px solid rgb(255 255 255/.12);background:rgb(28 28 30/.6)}
.iph-head img{width:38px;height:38px;border-radius:50%}
.iph-head b{font-size:11px;font-weight:500;color:rgb(235 235 245/.8)}
.iph-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px 10px 8px}
.iph-time{align-self:center;font-size:10px;color:rgb(235 235 245/.5);margin-bottom:2px}
.iph-b{max-width:78%;padding:7px 11px;border-radius:17px;font-size:12.5px;line-height:1.32;letter-spacing:-.1px}
.iph-b.me{align-self:flex-end;background:#0a84ff;border-bottom-right-radius:5px}
.iph-b.them{align-self:flex-start;background:#26252a;border-bottom-left-radius:5px}
.iph-q{align-self:flex-start;width:84%;padding:11px 12px 12px;border-radius:17px;background:#1c1c1e;box-shadow:inset 0 0 0 .5px rgb(255 255 255/.1);font-size:11.5px}
.iq-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.iq-head b{font-size:12.5px;font-weight:600}
.iq-head span,.iq-row.sub{color:rgb(235 235 245/.55)}
.iq-row,.iq-total{display:flex;justify-content:space-between;gap:8px;padding:2.5px 0;font-variant-numeric:tabular-nums}
.iq-row b{font-weight:500}
.iq-total{margin-top:5px;padding-top:7px;border-top:.5px solid rgb(255 255 255/.14);font-size:13px;font-weight:600}
.iq-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.iq-btns span{display:grid;place-items:center;height:28px;border-radius:9px;background:#2c2c2e;font-size:12px;font-weight:600}
.iq-btns .pri{background:#fff;color:#000}
.iph-input{flex:none;display:flex;align-items:center;gap:8px;padding:6px 12px 4px}
.iph-plus{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#26252a;color:rgb(235 235 245/.6);font-size:18px;line-height:1}
.iph-field{flex:1;height:30px;border-radius:15px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.16);display:flex;align-items:center;padding:0 12px;font-size:12.5px;color:rgb(235 235 245/.35)}
.iph-home{flex:none;width:110px;height:4px;border-radius:3px;background:#fff;margin:10px auto 8px}
.aa-list{list-style:none;margin:0;padding:4px 0;gap:0;border-radius:24px;background:var(--bg-subtle);box-shadow:inset 0 0 0 1px var(--border-secondary)}
.aa-list li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border-secondary)}
.aa-list li:last-child{border-bottom:0}
.aa-list img{width:40px;height:40px;border-radius:11px}
.aa-list b{display:block;font-size:15px;font-weight:600;letter-spacing:-.2px}
.aa-list p{font-size:14px;line-height:1.45;color:var(--text-secondary);margin-top:2px}
.aa-list .aa-me{display:inline-block;padding:1px 8px;border-radius:10px;background:var(--bg-element);box-shadow:inset 0 0 0 1px var(--border-secondary);color:var(--text-default);font-weight:600;font-size:13px}
.aa-st{font-size:12.5px;font-weight:600;color:var(--text-default);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.aa-st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-9)}
.aa-st.muted{color:var(--text-tertiary)}.aa-st.muted::before{background:var(--slate-8)}
@media (max-width:787.98px){.aa-grid{grid-template-columns:1fr;gap:28px}.aa-list li{grid-template-columns:36px minmax(0,1fr);padding:16px 18px;gap:4px 14px}.aa-list img{width:36px;height:36px;grid-row:span 2}.aa-st{grid-column:2}}
@media (max-width:360px){.iph{width:272px}}

/* Quote success by store (hypothetical), monochrome wordmarks and animated bars */
.ss-scene{display:flex;flex-direction:column;gap:3cqw;font-size:3cqw}
.ss-head{display:flex;justify-content:space-between;align-items:flex-start;gap:3cqw}
.ss-tag{font-size:2.5cqw;font-weight:600;padding:.9cqw 2.2cqw;border-radius:999px;background:var(--bg-element);box-shadow:inset 0 0 0 1px var(--border-secondary);color:var(--text-secondary)}
.ss-rows{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:1.4cqw}
.ss-row{display:grid;grid-template-columns:27cqw minmax(0,1fr) 13cqw;grid-template-areas:"wm bar val" "cat bar val";column-gap:3.4cqw;align-items:center;opacity:0;transform:translateY(1.4cqw);transition:opacity .5s ease calc(var(--i)*80ms),transform .6s cubic-bezier(.22,1,.36,1) calc(var(--i)*80ms)}
.frame.play .ss-row{opacity:1;transform:none}
.ss-wm{grid-area:wm;font-size:3.5cqw;line-height:1.05;color:var(--text-default);white-space:nowrap;display:flex;align-items:baseline;gap:.8cqw}
.ss-cat{grid-area:cat;font-size:2.3cqw;color:var(--text-tertiary);white-space:nowrap;margin-top:.3cqw}
.ss-bar{grid-area:bar;height:2cqw;border-radius:1cqw;background:var(--bg-element);overflow:hidden}
.ss-bar i{display:block;height:100%;width:calc((var(--v) - 80) * 5%);border-radius:1cqw;background:var(--slate-10);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.22,1,.36,1) calc(var(--i)*80ms + 250ms)}
.ss-row:first-child .ss-bar i{background:var(--blue-9)}
.frame.play .ss-bar i{transform:none}
.ss-row>b{grid-area:val;text-align:right;font-size:3.1cqw;font-weight:600;font-variant-numeric:tabular-nums}
.ss-foot{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;padding-top:2.6cqw;border-top:1px solid var(--border-secondary)}
.ss-foot div{display:flex;flex-direction:column;gap:.6cqw}
.ss-foot span{font-size:2.4cqw;color:var(--text-tertiary)}
.ss-foot b{font-size:4cqw;font-weight:650;letter-spacing:-.04em}
.ss-ot{font-weight:700;letter-spacing:-.03em}
.ss-sg{font-weight:600;letter-spacing:-.04em}
.ss-bb{font-weight:900;letter-spacing:-.01em}
.ss-jd{font-weight:900;font-style:italic;letter-spacing:-.04em}
.ss-jd small{font-size:.55em;font-weight:800;font-style:normal;letter-spacing:.12em}
.ss-co{font-weight:900;font-style:italic;letter-spacing:.01em}
.ss-fa{font-weight:800;font-style:italic;letter-spacing:.05em}
.ss-sh{font-weight:700;letter-spacing:.2em}
@media (prefers-reduced-motion: reduce){.ss-row,.ss-bar i{transition:none;opacity:1;transform:none}}

/* Bank and payment marquee: gray silhouettes, bank names as type */
.bank-mq{margin-top:8px}
.mq-word{flex:none;font:700 4.4cqw/1 var(--font-sans);letter-spacing:-.03em;white-space:nowrap;color:#000;opacity:.55}
.dark-theme .mq-word{color:#fff;opacity:.62}
@media (max-width:600px){
  .frame.ss-frame{aspect-ratio:auto}
  .ss-scene{gap:4.4cqw}
  .ss-rows{gap:4cqw}
  .ss-row{grid-template-columns:34cqw minmax(0,1fr) 16cqw}
  .ss-wm{font-size:4.6cqw}.ss-cat{font-size:3.3cqw}.ss-row>b{font-size:4.2cqw}
  .ss-bar{height:2.6cqw}
  .ss-tag{font-size:3.2cqw}.ss-foot span{font-size:3.3cqw}.ss-foot b{font-size:5.4cqw}
}

/* ===== Round 8 ===== */
/* Stats: one clean row of four (equal columns, thin dividers) and a 2×2 grid on phones */
.stats{padding:56px 0 24px}
.stats .container{padding-left:16px;padding-right:16px}
.stat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 auto;max-width:1040px;border-top:1px solid var(--border-secondary);border-bottom:1px solid var(--border-secondary)}
.stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px 8px;text-align:center;min-width:0}
.stat:nth-child(even){border-left:1px solid var(--border-secondary)}
.stat:nth-child(n+3){border-top:1px solid var(--border-secondary)}
.stat-n{font:600 44px/1 var(--font-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;color:var(--text-default)}
.stat-l{margin:0;font:400 14px/1.3 var(--font-sans);color:var(--text-secondary);white-space:nowrap;letter-spacing:0}
@media (min-width:788px){
  .stats{padding:88px 0 40px}
  .stats .container{padding-left:24px;padding-right:24px}
  .stat-row{grid-template-columns:repeat(4,minmax(0,1fr));border:0}
  .stat{padding:8px 16px;gap:12px}
  .stat:nth-child(n+2){border-left:1px solid var(--border-secondary)}
  .stat:nth-child(n+3){border-top:0}
  .stat-n{font-size:56px}
  .stat-l{font-size:15px}
}
@media (min-width:1008px){.stat-n{font-size:64px}}

/* Dia line on phones: every line, including the rotating word, is centered on the line box.
   The word is its own shrink-wrapped centered line (fit-content beats the JS slot width), and its
   padding is symmetric so the glyphs sit at the exact middle. Three lines at every word, so no jump. */
@media (max-width:943.98px){
  .dia-line .dia-reveal{display:block;width:fit-content!important;margin:0 auto;padding-left:.04em;padding-right:.04em;text-align:center}
}

/* Audience buttons + dialogs (audience-dialogs.js) */
.dia-aud{list-style:none;margin:28px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.aud-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;height:40px;padding:0 14px 0 16px;border-radius:999px;border:0;background:var(--bg-element);box-shadow:inset 0 0 0 1px var(--border-secondary);color:var(--text-default);font:500 14px/1 var(--font-sans);letter-spacing:-.1px;cursor:pointer;transition:background .15s ease,box-shadow .15s ease}
.aud-btn::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--text-tertiary);border-bottom:1.5px solid var(--text-tertiary);transform:rotate(-45deg);margin-left:2px}
.aud-btn:hover{background:var(--bg-hover);box-shadow:inset 0 0 0 1px var(--border-default)}
.aud-btn:focus-visible{outline:2px solid var(--text-default);outline-offset:2px}
@media (max-width:787.98px){
  .dia-aud{display:grid;grid-template-columns:1fr;gap:8px;max-width:358px;margin:28px auto 0;text-align:left}
  .dia-aud li{display:block}
  .aud-btn{width:100%;height:48px;border-radius:12px;padding:0 18px;justify-content:space-between;text-align:left;font-size:15px}
}
.aud-dlg{margin:auto;padding:0;border:0;background:transparent;color:var(--text-default);width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:visible}
.aud-dlg::backdrop{background:rgb(0 0 0/.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.aud-card{position:relative;background:var(--bg-default);border:1px solid var(--border-secondary);border-radius:20px;padding:28px 28px 24px;box-shadow:var(--shadow-xl);text-align:left;max-height:calc(100dvh - 48px);overflow:auto}
.dark-theme .aud-card{background:var(--slate-2)}
.aud-card h3{font:600 22px/1.2 var(--font-sans);letter-spacing:-.4px;margin:0 44px 14px 0}
.aud-card p{font:400 15px/1.55 var(--font-sans);color:var(--text-secondary);margin:0 0 10px}
.aud-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:0;background:var(--bg-element);box-shadow:inset 0 0 0 1px var(--border-secondary);color:var(--text-default);display:flex;align-items:center;justify-content:center;cursor:pointer}
.aud-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.aud-x:hover{background:var(--bg-hover)}
.aud-x:focus-visible,.aud-link:focus-visible{outline:2px solid var(--text-default);outline-offset:2px}
.aud-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:500 15px/1 var(--font-sans);color:var(--text-default);text-decoration:none}
.aud-link svg{width:14px;height:14px}
.aud-link:hover{text-decoration:underline;text-underline-offset:3px}
.aud-dlg[open]{animation:audIn .2s cubic-bezier(.23,1,.32,1)}
@keyframes audIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.aud-dlg[open]{animation:none}}
html.aud-open{overflow:hidden}
@media (max-width:520px){.aud-card{padding:24px 20px 20px}.aud-card h3{font-size:20px}}