/* ==========================================================================
   white-label.css — /white-label (2026-09-05). Loads after feature-v2.css,
   feature-v3.css, show.css and home.css.

   Four things worth knowing before editing:
   1. The hero console is the page's only device. Nothing here touches
      .console, .feed, .kpis or .float: that markup is the contract with
      feature-v2.js and feature-v2.css.
   2. The page's rhythm changes every section on purpose: a two-column pain
      list, the shared .plan timeline, one big quote plus a small coda quote,
      then two cards, a two-column ledger, a full-width social-proof mock, a
      six-row get/build ledger, and the FAQ. No two neighbouring sections are
      the same shape.
   3. Nothing here is under 13px. The shared .shot and .shot-h are 12px and
      11.5px, so this page raises them rather than inheriting them, and no
      muted text is lighter than #6b7088 on white.
   4. Every mock is a still image: the toggle, the buttons and the login
      fields are visibly inert (no cursor, no hover, no focus ring).
   ========================================================================== */

/* ---------- shared bits this page tunes ---------- */
.wl-page .v2-logos img.is-tall { max-height: 30px; }
.wl-head { max-width: 760px; margin-bottom: 44px; }
.wl-page .shot { font-size: 13px; }
.wl-page .plan-step b { font-size: 13px; }
.wl-page .shot-h { font-size: 13px; }
.wl-page .shot-h span { font-size: 12.5px; }

/* ---------- the four pains: a two-column list, no icons and no cards ---------- */
.wl-pains { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 72px); border-top: 1px solid var(--v2-line); }
.wl-pain-i { padding: 28px 0 30px; border-bottom: 1px solid var(--v2-line); }
.wl-pain-i h3 { font: 500 21px/1.25 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.wl-pain-i p { margin-top: 10px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }

/* ---------- proof: the claim, one line of framing, then the big quote and the coda ---------- */
/* the h2, its one line of framing and the coda quote share the big quote's 780px measure and its left edge */
.wl-page .wl-proof .col > .h { max-width: 780px; margin: 0 auto; }
.wl-proof-sub { max-width: 780px; margin: 14px auto 0; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); }
/* The three proof sections are one full-bleed tinted band: the page runs white from the logo strip to the Closing
   otherwise, about 6,500px with no tonal floor. Same move as the compare pages' .cmp-proof block in compare.css,
   written here with this page's classes. The band carries a full section of air above and below, and the section
   after it (.wl-inc) gets a full section top back, since every section on this page sets padding-top: 0. */
.wl-page .wl-proof { padding: clamp(80px, 8.5vw, 120px) 0 0; background: var(--v2-card); }
.wl-page .tq-section { padding: clamp(28px, 3vw, 40px) 0 0; background: var(--v2-card); }
.wl-page .tq-section .tq figcaption { border-top-color: rgba(15, 13, 25, .1); }
.wl-page .tq blockquote p { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; font-weight: 400; }
.wl-page .tq figcaption { margin-top: 26px; }

/* the coda quote: the second customer, at half the weight of the first, on the same left edge */
.wl-page .wl-coda { padding: clamp(26px, 3vw, 38px) 0 clamp(80px, 8.5vw, 120px); background: var(--v2-card); }
.wl-page .wl-inc { padding-top: clamp(80px, 8.5vw, 120px); }
/* white, not --v2-card: the card would disappear into the band's own ground */
.wl-coda-q { max-width: 780px; margin: 0 auto; padding: 24px 26px 26px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); }
.wl-coda-q blockquote p { font: 400 17px/1.5 var(--font-body); color: var(--ink); text-wrap: pretty; }
.wl-coda-q blockquote strong { font-weight: 600; }
.wl-coda-q figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.wl-coda-q figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.wl-coda-q figcaption b { display: block; font: 600 14.5px/1.3 var(--font-display); color: var(--ink); }
.wl-coda-q figcaption span span { display: block; margin-top: 2px; font: 400 13.5px/1.3 var(--font-body); color: #6b7088; }

/* ---------- included, card one: the partner's own sign-in page ---------- */
.wl-login { display: grid; gap: 9px; padding: 4px 2px 0; }
.wl-mark { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--font-display); color: var(--ink); }
.wl-mark i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--blue); font: 700 13px/1 var(--font-display); font-style: normal; color: #fff; }
.wl-mark--sm { font-size: 13px; }
.wl-login-h { margin-top: 4px; font: 500 17px/1.2 var(--font-serif); color: var(--ink); }
.wl-field { padding: 9px 11px; border-radius: 9px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); font: 400 13px/1.3 var(--font-body); color: #6b7088; }
.wl-field--dots { letter-spacing: .08em; }
.wl-btn { margin-top: 2px; padding: 9px 11px; border-radius: 9px; background: var(--blue); text-align: center; font: 600 13px/1.3 var(--font-display); color: #fff; }
.wl-login-f { margin-top: 5px; font: 400 13px/1.4 var(--font-body); color: #6b7088; }

/* ---------- included, card two: the Clients list ---------- */
.wl-cl { display: grid; gap: 7px; }
.wl-cl-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 9px 11px; border-radius: 10px; background: var(--v2-card); }
.wl-cl-r b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.3 var(--font-display); color: var(--ink); }
.wl-cl-m { grid-column: 1 / -1; font: 400 13px/1.3 var(--font-body); color: #6b7088; font-variant-numeric: tabular-nums; }
.wl-chip { flex: none; padding: 3px 8px; border-radius: 999px; font: 600 12.5px/1.35 var(--font-display); white-space: nowrap; }
 /* healthChip.js's three levels, and its own rule: an `action` row gets a stronger amber, never red, and no label
   reads as a verdict. is-act is the stronger amber (#7a4400 on #ffdfa8 = 7.4:1), is-warn the cooling one. */
.wl-chip.is-good { background: #ddf7ea; color: #0c7a52; }
.wl-chip.is-warn { background: #fff0cc; color: #8a5a00; }
.wl-chip.is-act { background: #ffdfa8; color: #7a4400; }

/* ---------- what runs inside a client account: a headline over a two-column ledger ---------- */
.wl-runs { margin-top: clamp(40px, 5vw, 64px); }
.wl-runs-h { max-width: 24ch; font: 500 clamp(23px, 2.5vw, 30px)/1.2 var(--font-serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.wl-led2 { display: grid; grid-template-columns: 1fr 1fr; margin-top: 26px; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); }
.wl-led2-c { padding: 30px 30px 32px; }
.wl-led2-c + .wl-led2-c { border-left: 1px solid var(--v2-line); }
.wl-led2-c h4 { font: 500 21px/1.25 var(--font-serif); letter-spacing: -.01em; color: var(--ink); }
.wl-led2-c ul { display: grid; gap: 13px; margin-top: 18px; }
.wl-led2-c li { position: relative; padding-left: 18px; font: 400 15px/1.55 var(--font-body); color: var(--v2-body); }
.wl-led2-c li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.wl-led2-c li b { color: var(--ink); font-weight: 600; }

/* ---------- social proof: copy left, one full-width mock under it ---------- */
.wl-social { margin-top: clamp(40px, 5vw, 64px); }
.wl-social-copy h3 { max-width: 20ch; font: 500 clamp(23px, 2.5vw, 30px)/1.2 var(--font-serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.wl-social-copy p { margin-top: 14px; max-width: 64ch; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.wl-social-copy p b { color: var(--ink); font-weight: 600; }
.wl-social-mock { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-top: 28px; }
.wl-sw { padding: 16px 18px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); }
.wl-sw-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--v2-line); font: 600 13px/1.3 var(--font-display); color: var(--ink); }
.wl-sw-h span { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--ghost); font: 600 13px/1.3 var(--font-display); color: var(--blue); }
.wl-sw-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.wl-sw-c { display: flex; flex-direction: column; padding: 12px 13px 13px; border-radius: 12px; background: var(--v2-card); }
.wl-stars { display: block; font-size: 13px; letter-spacing: .04em; color: #f5a623; }
.wl-sw-c p { margin-top: 7px; font: 400 13.5px/1.5 var(--font-body); color: var(--ink); text-wrap: pretty; }
.wl-sw-c small { display: block; margin-top: auto; padding-top: 9px; font: 400 13px/1.3 var(--font-body); color: #6b7088; }
.wl-sw-f { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--v2-line); text-align: center; font: 500 13px/1.3 var(--font-body); color: #6b7088; }

.wl-side { display: grid; gap: 16px; align-content: start; }
.wl-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); font: 600 13.5px/1.35 var(--font-display); color: var(--ink); }
.wl-sw-on { flex: none; position: relative; width: 34px; height: 20px; border-radius: 999px; background: #d7dbe8; }
.wl-sw-on::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.wl-rp { display: grid; gap: 8px; padding: 16px 18px 18px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); }
.wl-rp-h { margin: 4px 0 4px; font: 500 17px/1.2 var(--font-serif); color: var(--ink); text-wrap: balance; }
.wl-rp-b { padding: 9px 11px; border-radius: 9px; background: var(--v2-card); text-align: center; font: 600 13px/1.35 var(--font-display); color: var(--ink); }
.wl-rp-b--g { background: #1a8a4b; color: #fff; }
.wl-rp-b--o { background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .16); font-weight: 500; color: #4a5065; }

/* ---------- the get / build ledger ---------- */
.wl-led { border-top: 1px solid var(--v2-line); }
.wl-led-lab { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wl-led-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 4vw, 56px); padding: 14px 0 12px; border-bottom: 1px solid var(--v2-line); font: 600 13px/1.3 var(--font-display); letter-spacing: .02em; color: #6b7088; }
.wl-led-r { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 4vw, 56px); padding: 20px 0 22px; border-bottom: 1px solid var(--v2-line); }
.wl-led-a b { display: block; font: 600 16px/1.35 var(--font-display); color: var(--ink); }
.wl-led-a p { margin-top: 7px; font: 400 15px/1.55 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.wl-led-b { position: relative; padding-left: clamp(20px, 4vw, 56px); border-left: 1px solid var(--v2-line); margin-left: calc(clamp(20px, 4vw, 56px) * -1); }
.wl-led-b p { font: 400 15px/1.55 var(--font-body); color: #6b7088; text-wrap: pretty; }

/* ---------- the FAQ, and the gap into the Closing ---------- */
/* Every section on this page sets padding-top: 0, so the run into the shared .closing was the FAQ's own bottom
   padding plus the panel's top: 202px against the page's 110/112px rhythm. */
.wl-page .wl-faq { padding-bottom: 8px; }

/* ---------- narrow ---------- */
/* Between 768 and 991 the shared hero stacks, the console goes full width (max 720px, so the percentage is stable
   across the range) and both float chips move to the top corners, where chip 1 lands on the console's own top bar
   with the lead portrait (.pp--tl, left:0/top:0) over its first character. The same collision is on every HeroLive
   page; /solutions/finance fixed it per page in solutions-finance.css for the same reason it is fixed per page
   here, rather than in feature-v2.css: chip 1's width is a different string on every page, so one shared left value
   cannot be proved safe against chip 2 without re-capturing all of them. 26% of 720px clears the 64px portrait by
   about 120px and stays well clear of chip 2. */
@media (min-width: 768px) and (max-width: 991px) { .wl-page .float--1 { left: 26%; } }

@media (max-width: 991px) {
  .wl-pains { grid-template-columns: 1fr; }
  .wl-led2 { grid-template-columns: 1fr; }
  .wl-led2-c + .wl-led2-c { border-left: 0; border-top: 1px solid var(--v2-line); }
  .wl-social-mock { grid-template-columns: minmax(0, 1fr); }
  /* the two-up .wl-side put a 60px toggle card beside a 330px review-page card and stranded ~270px of white under
     it; the column stays stacked all the way down */
  .wl-runs-h, .wl-social-copy h3 { max-width: none; }
}
@media (max-width: 640px) {
  .wl-head { margin-bottom: 32px; }
  .wl-led2-c { padding: 26px 0 28px; }
  .wl-sw-g { grid-template-columns: minmax(0, 1fr); }
  .wl-coda-q { padding: 20px 20px 22px; }
  .wl-led-head { display: none; }
  .wl-led-r { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wl-led-b { padding-left: 16px; margin-left: 0; border-left: 2px solid var(--v2-line); }
  /* the same label the sr-only span carries above 640, now visible: one element, one string, no duplicate for a
     screen reader (it replaced a ::before that assistive tech may not announce) */
  .wl-led-lab { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; font-weight: 600; color: var(--ink); }
}

/* ---------- phone ---------- */
/* The console bar is a flex row of four items, and at 390 there is not room for all four on one line, so each one
   broke inside itself: "Northlight / Digital", "· Partner / portal", "This / month". The window dots are the only
   part that carries no words, so they go, and the three phrases fit on the one line. */
@media (max-width: 479px) {
  .wl-page .console-bar { gap: 8px; padding: 11px 13px; }
  .wl-page .console-bar i { display: none; }
  .wl-page .console-bar b { margin-left: 0; white-space: nowrap; }
}