.ac-card,.ac-row,.ac-devices{
  --ac-frame:#231f20;
  --ac-frame-ink:#f2efea;
  --ac-ink:#231f20;
  --ac-gold:#d0ad4c;
  --ac-on-gold:#1a1404;
  --ac-badge-request:#231f20;
  --ac-badge-quote:#6e6024;
  --ac-badge-job:#3a3312;
  --ac-badge-invoice:#ad912f;
  --ac-badge-open:#57514f;
  --ac-ring:0 0 0 1px rgb(255 255 255 / .38);
  --ac-head-font:var(--head,"Roboto Condensed","RC Narrow Fallback","Arial Narrow",Arial,sans-serif);
  --ac-text-font:var(--text,"Barlow","Barlow Fallback",system-ui,-apple-system,"Segoe UI",Arial,sans-serif);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}

.ac-ico{--n:20;display:block;flex:none;width:calc(var(--n) * 1px);height:calc(var(--n) * 1px);overflow:visible;
  fill:none;stroke:currentColor;stroke-width:calc(48 / var(--n));stroke-linecap:square;stroke-linejoin:miter}

.ac-badge{display:inline-grid;place-items:center;flex:none;padding:4px;border-radius:6px;background:var(--ac-fill);color:#fff}
.ac-badge--request{--ac-fill:var(--ac-badge-request)}
.ac-badge--quote{--ac-fill:var(--ac-badge-quote)}
.ac-badge--job{--ac-fill:var(--ac-badge-job)}
.ac-badge--invoice{--ac-fill:var(--ac-badge-invoice)}
.ac-badge--open{--ac-fill:var(--ac-badge-open)}

.ac-head .ac-badge,.ac-on-dark .ac-badge{box-shadow:var(--ac-ring)}

.ac-card{position:absolute;z-index:3;box-sizing:border-box;width:max-content;min-width:150px;max-width:calc(100% - 20px);margin:0;
  overflow:hidden;border-radius:4px;background:#fff;color:var(--ac-ink);text-align:left;pointer-events:none;
  font:500 14px/1.2 var(--ac-text-font);letter-spacing:0;text-transform:none;
  box-shadow:0 0 0 1px rgb(35 31 32 / .9),0 2px 4px rgb(0 0 0 / .28),0 14px 26px -10px rgb(0 0 0 / .7)}
.ac-head{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;background:var(--ac-frame);color:var(--ac-frame-ink)}
.ac-head .ac-ico{--n:14}
.ac-title{font:700 12.5px/1 var(--ac-head-font);letter-spacing:.045em;text-transform:uppercase;white-space:nowrap}
.ac-body{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px 7px 10px}
.ac-what{font:600 15px/1.1 var(--ac-text-font);white-space:nowrap}
.ac-amt{font:700 23px/1 var(--ac-head-font);letter-spacing:.005em;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}

.ac-chip{flex:none;padding:3px 6px 3px;background:var(--ac-gold);color:var(--ac-on-gold);
  font:700 11px/1 var(--ac-head-font);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.ac-tick{display:grid;place-items:center;flex:none;width:22px;height:22px;background:var(--ac-gold);color:var(--ac-on-gold)}
.ac-tick .ac-ico{--n:14}

.ac-at-tl{top:12px;left:12px}
.ac-at-tr{top:12px;right:12px}
.ac-at-bl{bottom:12px;left:12px}
.ac-at-br{bottom:12px;right:12px}

.ac-on-snap{top:auto;left:auto;max-width:none;transform:rotate(calc(var(--r,0deg) * -1));transform-origin:100% 100%}

@media (max-width:999px){
  .ac-on-snap{min-width:0;width:max-content;bottom:-13px;right:-6px}
  .ac-on-snap .ac-head{gap:5px;padding:2px 7px 2px 2px}
  .ac-on-snap .ac-head .ac-ico{--n:12}
  .ac-on-snap .ac-title{font-size:11px}
  .ac-on-snap .ac-body{gap:6px;padding:4px 5px 4px 7px}
  .ac-on-snap .ac-what{font-size:13px}
  .ac-on-snap .ac-chip{font-size:10.5px;padding:2px 4px}
}

@media (min-width:400px) and (max-width:719px){.ac-on-snap{right:-20px;bottom:-5px}}

@media (min-width:720px) and (max-width:999px){.ac-on-snap{right:auto;left:42%;bottom:10px;transform-origin:0 100%}}

@media (max-width:719px){
  .ac-on-snap{top:53.4px;top:max(52.5px,min(54.3px - (100cqi - 328px) * .06,54.3px + (100cqi - 328px) * .06));bottom:auto;transform-origin:100% 0}
  .ac-on-snap .ac-head{padding:1.5px 7px 1.5px 2px}
  .ac-on-snap .ac-body{padding:2px 5px 2px 7px}
  .ac-on-snap .ac-what{line-height:1}
  .ac-on-snap .ac-chip{padding:1.5px 4px}
}
@media (min-width:400px) and (max-width:719px){.ac-on-snap{top:50.8px}}

@media (max-width:359px){
  .ac-card{min-width:136px}
  .ac-title{font-size:11.5px}
  .ac-what{font-size:14px}
  .ac-amt{font-size:21px}
  .ac-at-tl{top:10px;left:10px}.ac-at-tr{top:10px;right:10px}.ac-at-bl{bottom:10px;left:10px}.ac-at-br{bottom:10px;right:10px}
}

@media (max-width:389px){
  .ac-at-tl,.ac-at-tr,.ac-at-bl,.ac-at-br{min-width:0}
  :is(.ac-at-tl,.ac-at-tr,.ac-at-bl,.ac-at-br) .ac-head{gap:5px;padding:2px 7px 2px 2px}
  :is(.ac-at-tl,.ac-at-tr,.ac-at-bl,.ac-at-br) .ac-head .ac-ico{--n:12}
  :is(.ac-at-tl,.ac-at-tr,.ac-at-bl,.ac-at-br) .ac-title{font-size:11px}
  :is(.ac-at-tl,.ac-at-tr,.ac-at-bl,.ac-at-br) .ac-body{gap:8px;padding:4px 5px 4px 7px}
  :is(.ac-at-tl,.ac-at-tr,.ac-at-bl,.ac-at-br) .ac-what{font-size:13px}
  :is(.ac-at-tl,.ac-at-tr,.ac-at-bl,.ac-at-br) .ac-amt{font-size:19px}
  :is(.ac-at-tl,.ac-at-tr,.ac-at-bl,.ac-at-br) .ac-tick{width:18px;height:18px}
  :is(.ac-at-tl,.ac-at-tr,.ac-at-bl,.ac-at-br) .ac-tick .ac-ico{--n:12}
  .ac-at-tl{top:8px;left:8px}.ac-at-tr{top:8px;right:8px}.ac-at-bl{bottom:8px;left:8px}.ac-at-br{bottom:8px;right:8px}
}
@media (max-width:359px){
  :is(.ac-at-tl,.ac-at-tr,.ac-at-bl,.ac-at-br) .ac-title{width:min-content;font-size:10.5px;line-height:1.08;white-space:normal}
  :is(.ac-at-tl,.ac-at-tr,.ac-at-bl,.ac-at-br) .ac-amt{font-size:18px}
}

.ac-row{display:flex;justify-content:space-between;gap:4px;box-sizing:border-box;width:100%;max-width:400px;margin:14px 0 0;padding:0 0 10px;list-style:none}
.ac-feat{display:flex;flex:1 1 0;min-width:0;flex-direction:column;align-items:center;gap:6px;margin:0;padding:0}
.ac-feat .ac-ico{--n:20}
.ac-word{font:700 13px/1 var(--ac-head-font);letter-spacing:.01em;white-space:nowrap;color:#fff}
.ac-on-light .ac-word{color:var(--ac-ink)}
@media (max-width:359px){
  .ac-row{gap:0;margin-top:12px}
  .ac-word{font-size:12px}
  .ac-feat .ac-ico{--n:18}
}

@media (max-width:319.98px){.ac-row .ac-feat{flex:1 1 auto}}

.ac-devices{display:flex;align-items:center;gap:9px;margin:14px 0 0;font:600 15px/1.25 var(--ac-text-font);color:var(--snow,#e6e7ea)}
.ac-dev-icons{display:inline-flex;align-items:flex-end;gap:3px;flex:none}
.ac-dev-icons .ac-ico{--n:20}
.ac-dev-icons .ac-ico + .ac-ico{--n:24}
.ac-devices.ac-on-light{color:var(--ink,#17171b)}
@media (max-width:359px){.ac-devices{font-size:14px;gap:7px}}

@media (min-width:1000px){
  .ac-card{min-width:196px;border-radius:4px}
  .ac-head{gap:9px;padding:5px 12px 5px 5px}
  .ac-head .ac-ico{--n:18}
  .ac-title{font-size:14.5px}
  .ac-body{padding:9px 10px 9px 12px;gap:14px}
  .ac-what{font-size:17px}
  .ac-amt{font-size:29px}
  .ac-chip{font-size:12px;padding:4px 7px}
  .ac-tick{width:28px;height:28px}
  .ac-tick .ac-ico{--n:18}
  .ac-at-tl{top:18px;left:18px}.ac-at-tr{top:18px;right:18px}.ac-at-bl{bottom:18px;left:18px}.ac-at-br{bottom:18px;right:18px}

  .ac-on-shot{top:auto;right:auto;left:74%;bottom:16px;max-width:none;transform:rotate(calc(var(--r,0deg) * -1));transform-origin:0 100%}

  .ac-row{justify-content:flex-start;gap:26px;max-width:none;margin:18px 0 0;padding:0}
  .ac-feat{flex:none;gap:8px}
  .ac-feat .ac-ico{--n:24}
  .ac-word{font-size:15px}

  .ac-devices{font-size:16px;margin-top:16px}
}

@media (min-width:1000px) and (max-width:1279px){
  .ac-on-shot{min-width:0}
  .ac-on-shot .ac-head .ac-ico{--n:14}
  .ac-on-shot .ac-title{font-size:12.5px}
  .ac-on-shot .ac-body{flex-direction:column;align-items:flex-start;padding:6px 8px 7px 10px;gap:5px}
  .ac-on-shot .ac-what{font-size:15px}
  .ac-on-shot .ac-chip{font-size:11px;padding:3px 6px}
}