/* The Creator page, part "finale": the campaign's checklist on the night. The section, its head, its two calls, the
   card's panel and the motto are the landing kit's (theme/assets/css/kit.css: section.k-finale, .k-eyebrow,
   .k-finale-h, .k-finale-sub, .k-btns, .k-finale-art, .k-navy-card, .k-motto); this file holds the card's rows. The
   night is the same in both themes, so the colours are the kit's fixed navy tokens; the ticks wear --ok's dark value
   and the open line the board's amber. Every rule is scoped to .pg-ai-sales-assistant and every class of its own
   starts with cr-fin-. The one motion (parts/finale.js): the ticks draw in once, together, in 600 ms. */

.pg-ai-sales-assistant .cr-fin{--cr-fin-ok:#2CC283;--cr-fin-line:#1D2147;--cr-fin-ink:#F4F1E6}
.pg-ai-sales-assistant .cr-fin-card{max-width:560px;margin:0 auto 60px;padding:18px 24px 6px}
.pg-ai-sales-assistant .cr-fin-card figcaption{display:flex;align-items:center;gap:12px;padding:2px 0 16px;border-bottom:1px solid var(--k-navy-line)}
.pg-ai-sales-assistant .cr-fin-ttl{min-width:0;font:600 16px/1.25 var(--sans);color:#FFFFFF}
.pg-ai-sales-assistant .cr-fin-card .k-sample{margin-left:auto}
.pg-ai-sales-assistant .cr-fin-rows{margin:0;padding:0;list-style:none}
.pg-ai-sales-assistant .cr-fin-rows li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;min-height:56px;margin:0;padding:10px 0;border-bottom:1px solid var(--cr-fin-line)}
.pg-ai-sales-assistant .cr-fin-rows li:last-child{border-bottom:0}
.pg-ai-sales-assistant .cr-fin-l{font:500 16.5px/1.3 var(--sans);color:var(--k-on-navy)}
.pg-ai-sales-assistant .cr-fin-s{display:inline-flex;align-items:center;gap:10px;margin-left:auto;font:500 13.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cr-fin-ink);white-space:nowrap}
.pg-ai-sales-assistant .cr-tick{display:block;flex:none;width:22px;height:22px;padding:3px;border-radius:50%;background:color-mix(in srgb,var(--cr-fin-ok) 16%,transparent)}
.pg-ai-sales-assistant .cr-tick path{fill:none;stroke:var(--cr-fin-ok);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pg-ai-sales-assistant .cr-fin-go .cr-fin-l{color:#FFFFFF;font-weight:600}
.pg-ai-sales-assistant .cr-fin-go .cr-fin-s{color:var(--k-amber)}
.pg-ai-sales-assistant .cr-ring{display:block;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--k-amber)}
.pg-ai-sales-assistant .cr-fin-then{margin:0;padding:12px 0 14px;border-top:1px solid var(--cr-fin-line);font:400 14.5px/1.4 var(--sans);color:var(--k-navy-mute);text-align:left}
/* the script arms the ticks only when the card is still below the fold, then draws them once it is seen */
.pg-ai-sales-assistant .cr-fin-arm .cr-tick path{stroke-dasharray:1;stroke-dashoffset:1}
.pg-ai-sales-assistant .cr-fin-arm.cr-fin-drawn .cr-tick path{stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.3,.7,.2,1)}

@media (max-width:760px){
  .pg-ai-sales-assistant .cr-fin-card{margin-bottom:44px;padding:16px 16px 4px}
  .pg-ai-sales-assistant .cr-fin-ttl{font-size:15px}
  .pg-ai-sales-assistant .cr-fin-rows li{min-height:52px}
  .pg-ai-sales-assistant .cr-fin-l{font-size:15.5px}
  .pg-ai-sales-assistant .cr-fin-s{font-size:12.5px;letter-spacing:.06em}
  .pg-ai-sales-assistant .cr-fin-then{font-size:14px}
}