/* The white label page, part "finale": the brand'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 and its
   foot, laid out as the product pages' finale card lays a card with values (assets/css/product.css .pp-card-vals): the
   rows share one grid of label, value and state, and on a phone the value goes under its label with the state beside
   both. 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, the open row the board's amber, and YourBrand's tile is the lime with the ink stroke, as it is worn on a
   dark ground. Every rule is scoped to .pg-white-label and every class of its own starts with wl-fin-. Nothing moves. */

.pg-white-label .wl-fin{--wl-fin-ok:#2CC283;--wl-fin-line:#1D2147;--wl-fin-ink:#F4F1E6}
.pg-white-label .wl-fin-card{max-width:560px;margin:0 auto 60px;padding:18px 24px 6px}
.pg-white-label .wl-fin-card figcaption{display:flex;align-items:center;gap:12px;padding:2px 0 16px;border-bottom:1px solid var(--k-navy-line)}
.pg-white-label .wl-fin-yb{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:#C8F051;color:#15171E}
.pg-white-label .wl-fin-yb svg{display:block;width:17px;height:17px}
.pg-white-label .wl-fin-ttl{min-width:0;font:600 16px/1.25 var(--sans);color:#FFFFFF}
.pg-white-label .wl-fin-card .k-sample{margin-left:auto}
.pg-white-label .wl-fin-rows{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:20px;margin:0;padding:0;list-style:none}
.pg-white-label .wl-fin-rows li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;min-height:56px;margin:0;padding:10px 0;border-bottom:1px solid var(--wl-fin-line)}
.pg-white-label .wl-fin-rows li:last-child{border-bottom:0}
.pg-white-label .wl-fin-l{min-width:0;font:500 16.5px/1.3 var(--sans);color:var(--k-on-navy);text-wrap:pretty}
.pg-white-label .wl-fin-v{justify-self:end;font:500 14.5px/1.3 var(--mono);color:#FFFFFF;text-align:right;white-space:nowrap}
/* a row without a value lends its value column to the label */
.pg-white-label .wl-fin-v:empty{display:none}
@media (min-width:761px){.pg-white-label .wl-fin-l:has(+.wl-fin-v:empty){grid-column:1/3}}
.pg-white-label .wl-fin-s{display:inline-flex;align-items:center;gap:10px;justify-self:start;font:500 13.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wl-fin-ink);white-space:nowrap}
.pg-white-label .wl-fin-tick{display:block;flex:none;width:22px;height:22px;padding:3px;border-radius:50%;background:color-mix(in srgb,var(--wl-fin-ok) 16%,transparent)}
.pg-white-label .wl-fin-tick path{fill:none;stroke:var(--wl-fin-ok);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pg-white-label .wl-fin-go .wl-fin-l{color:#FFFFFF;font-weight:600}
.pg-white-label .wl-fin-go .wl-fin-s{color:var(--k-amber)}
.pg-white-label .wl-fin-ring{display:block;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--k-amber)}
.pg-white-label .wl-fin-foot{margin:0;padding:14px 0 12px;border-top:1px solid var(--k-navy-line);font:400 14.5px/1.5 var(--sans);color:var(--k-navy-mute);text-wrap:pretty}

@media (max-width:760px){
  .pg-white-label .wl-fin-card{margin-bottom:44px;padding:16px 16px 4px}
  .pg-white-label .wl-fin-ttl{font-size:15px}
  .pg-white-label .wl-fin-rows{grid-template-columns:minmax(0,1fr) auto;column-gap:14px}
  .pg-white-label .wl-fin-rows li{row-gap:3px;min-height:52px}
  .pg-white-label .wl-fin-l{grid-column:1;grid-row:1;font-size:15.5px}
  .pg-white-label .wl-fin-v{grid-column:1;grid-row:2;justify-self:start;font-size:13.5px;color:var(--k-navy-eye);text-align:left;white-space:normal;overflow-wrap:anywhere}
  .pg-white-label .wl-fin-s{grid-column:2;grid-row:1/span 2;font-size:12.5px;letter-spacing:.06em}
  .pg-white-label .wl-fin-foot{font-size:14px}
}
/* the narrowest phones: an address takes the row's whole width under its label and its state */
@media (max-width:360px){
  .pg-white-label .wl-fin-v{grid-column:1/-1;overflow-wrap:normal}
  .pg-white-label .wl-fin-s{grid-row:1}
}