/* Talknlock success-metrics strip v2 (Creative Studio design B), HELD 2026-10-24.
   Every selector is scoped under .tnl-metrics; custom props are --tm-* on the section only. */
.tnl-metrics{--tm-purple:#7A3FE0;--tm-gold:#FFBE36;--tm-cream:#F6F4EF;--tm-ink:#141413;--tm-ink2:#4A4740;
  background:var(--tm-cream);color:var(--tm-ink);padding:clamp(48px,7vw,96px) 0;font-family:var(--font-body,"DM Sans Variable","DM Sans",system-ui,sans-serif)}
.tnl-metrics :where(*){box-sizing:border-box;margin:0}
.tnl-metrics__inner{max-width:1320px;margin:0 auto} /* .wrap also applied in markup so the strip aligns with the site grid */
.tnl-metrics__eyebrow{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tm-purple);margin-bottom:12px}
.tnl-metrics__title{font-family:var(--font-display,"Instrument Serif","Times New Roman",serif);font-weight:400;font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.01em;margin-bottom:clamp(32px,4vw,48px)}
.tnl-metrics__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px} /* CTO: 6-up overflowed inside the site .wrap (numbers collided), so 3-up on desktop */
.tnl-metrics__item{border-top:4px solid var(--tm-gold);padding-top:20px;min-width:0}
.tnl-metrics__num{display:block;font-family:var(--font-display,"Instrument Serif","Times New Roman",serif);font-weight:400;font-size:clamp(48px,4.6vw,68px);line-height:1;letter-spacing:-.02em;color:var(--tm-purple);font-variant-numeric:tabular-nums;white-space:nowrap}
.tnl-metrics__label{display:block;margin-top:12px;font-size:18px;line-height:1.35;font-weight:500;color:var(--tm-ink)}
@media (max-width:640px){.tnl-metrics__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .tnl-metrics__num{font-size:clamp(40px,12vw,52px)}.tnl-metrics__label{font-size:17px}}
.tnl-metrics__sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (forced-colors:active){.tnl-metrics__item{border-top-color:CanvasText}.tnl-metrics__num,.tnl-metrics__eyebrow{color:CanvasText}}

/* dark theme: follow site data-theme toggle */
[data-theme=dark] .tnl-metrics{
  --tm-cream:var(--paper,#121211);
  --tm-ink:var(--ink,#F2EFE8);
  --tm-ink2:var(--ink-2,#A9A49A);
  /* purple + gold accents stay — readable on dark paper */
}