/* Sample diary count: a block the guide pages can drop in. The number counts up and the two bars
   fill when it scrolls into view (count-block.js). With no script, or with reduced motion, it
   shows its final state. Tokens fall back to the brand values so it works on its own. */
.cb { --cb-cobalt: var(--cobalt, #2340FF); --cb-lemon: var(--lemon, #EFFF5A); --cb-ink: var(--ink, #0B1020); --cb-mist: var(--mist, #dfe4ff); --cb-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
  margin: 32px 0; padding: 28px 28px 30px; background: var(--cb-cobalt); color: #fff; font-family: var(--body, "Figtree", sans-serif); line-height: 1.4; }
.cb p { margin: 0; }
.cb .cb__over { display: flex; justify-content: space-between; gap: 16px; color: var(--cb-lemon); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cb .cb__num { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0 -3px; font-family: var(--display, "Unbounded", sans-serif); letter-spacing: -.06em; line-height: .8; white-space: nowrap; }
.cb__big { font-weight: 700; font-size: clamp(88px, 14vw, 128px); font-variant-numeric: tabular-nums; }
.cb__of { font-weight: 650; font-size: clamp(26px, 4vw, 36px); }
.cb .cb__sentence { margin-top: 18px; max-width: 30ch; font-family: var(--display, "Unbounded", sans-serif); font-size: 18px; line-height: 1.25; letter-spacing: -.03em; }
.cb__bars { margin-top: 22px; }
.gd-count .cb__bars { margin: 18px 0 4px; max-width: 520px; }
.gd-count .cb__label { color: rgba(255,255,255,.72); }
.gd-count .cb__sum { color: #fff; }
.cb__bar { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 3.5em; align-items: center; gap: 12px; min-height: 24px; }
.cb__bar + .cb__bar { margin-top: 10px; }
.cb__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cb__track { position: relative; display: block; height: 10px; background: rgba(255,255,255,.16); }
.cb__bar--thin .cb__track { height: 5px; }
.cb__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% * var(--f, 0)); background: #fff; transform-origin: 0 50%; transition: transform 900ms var(--cb-ease); }
.cb__bar--thin .cb__fill { transition-delay: 160ms; }
.cb__sum { font-family: var(--display, "Unbounded", sans-serif); font-weight: 600; font-size: 13px; letter-spacing: -.03em; text-align: right; }
[data-count-block].arm .cb__fill { transform: scaleX(0); }
[data-count-block].arm.in .cb__fill { transform: scaleX(1); }
.cb .cb__note { display: inline-block; margin-top: 22px; padding: 6px 10px 7px; background: var(--cb-lemon); color: var(--cb-ink); font-size: 14px; font-weight: 700; }
.cb .cb__foot { margin-top: 14px; color: var(--cb-mist); font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .cb__fill { transition: none; } }