/* /solutions/leadership: "The scorecard". A bento dashboard that is the page. Scoped under .pg-leadership. */
.pg-leadership {
  --ld-ok: #0f9d68;
  --ld-warn: #b45309;
  --ld-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ld-gutter: clamp(20px, 5vw, 48px);
  --ld-rule: rgba(var(--ink-rgb), 0.13);
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(15px, 0.5vw + 13.8px, 17px);
  line-height: 1.6;
  padding-top: 104px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] .pg-leadership { --ld-ok: #4fd8a0; --ld-warn: #fbbf24; }
:where(.pg-leadership) *, :where(.pg-leadership) *::before, :where(.pg-leadership) *::after { box-sizing: border-box; }
:where(.pg-leadership) p, :where(.pg-leadership) h1, :where(.pg-leadership) h2, :where(.pg-leadership) h3, :where(.pg-leadership) ul, :where(.pg-leadership) ol, :where(.pg-leadership) figure { margin: 0; padding: 0; }
:where(.pg-leadership) ul, :where(.pg-leadership) ol { list-style: none; }
:where(.pg-leadership) a { color: inherit; text-decoration: none; }
:where(.pg-leadership) a:focus-visible, :where(.pg-leadership) button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.ld-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--ld-gutter); }
.ld-mono { font-family: var(--ld-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ld-label { font-family: var(--ld-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.ld-label--dark { color: #8fb4ff; }
.ld-h2 { font-size: clamp(1.6rem, 2.5vw + 0.6rem, 2.45rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.14; max-width: 22ch; }
.ld-h2--white { color: #fff; }
.ld-h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }

/* ---------- 1. Hero ---------- */
.ld-hero { padding-block: clamp(20px, 3vw, 40px) clamp(48px, 7vw, 92px); background: linear-gradient(180deg, var(--surface), var(--bg) 75%); }
.ld-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ld-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--ld-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.ld-crumb a:hover { color: var(--accent); }
.ld-crumb [aria-current] { color: var(--ink); }
.ld-h1 { font-size: clamp(2.05rem, 3.2vw + 0.8rem, 3.4rem); font-weight: 600; letter-spacing: -0.032em; line-height: 1.07; }
.ld-lede { margin-top: 20px; color: var(--muted); max-width: 44ch; }
.ld-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ld-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 12px; font-weight: 600; font-size: 0.92rem; border: 1.5px solid transparent; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; }
.pg-leadership .ld-btn--solid { background: var(--accent-fill, var(--accent)); color: #fff; }
.pg-leadership .ld-btn--solid:hover { background: var(--navy); transform: translateY(-1px); }
.pg-leadership .ld-btn--line { border-color: var(--ld-rule); background: var(--card); }
.pg-leadership .ld-btn--line:hover { border-color: var(--accent); color: var(--accent); }

.ld-board { padding: 18px; border-radius: 26px; background: var(--card); border: 1px solid var(--ld-rule); box-shadow: 0 30px 60px -36px rgba(var(--ink-rgb), 0.4); }
.ld-board__bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 12px; color: var(--muted); }
.ld-example { padding: 3px 9px; border: 1px solid var(--ld-rule); border-radius: 999px; font-size: 0.64rem; }
.ld-board__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; padding: 0 6px 14px; }
.ld-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ld-tile { position: relative; display: grid; align-content: start; gap: 6px; min-height: 148px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--ld-rule); }
.ld-tile__head { display: flex; align-items: center; gap: 9px; }
.ld-tile__name { font-size: 0.98rem; font-weight: 600; line-height: 1.25; }
.ld-tile__meta { font-family: var(--ld-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ld-tile__big { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ld-warn); margin-top: 6px; }
.ld-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ld-ok); box-shadow: 0 0 0 4px rgba(15, 157, 104, 0.16); }
.ld-dot--warn { background: var(--ld-warn); box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.16); }
.ld-viz { margin-top: auto; }
.ld-viz--bar { height: 8px; border-radius: 99px; background: rgba(var(--ink-rgb), 0.1); overflow: hidden; }
.ld-viz--bar span { display: block; height: 100%; width: 72%; border-radius: 99px; background: var(--accent); }
.ld-viz--ring { width: 56px; height: 56px; }
.ld-ring-bg { fill: none; stroke: rgba(var(--ink-rgb), 0.1); stroke-width: 6; }
.ld-ring-fg { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 68 100; }
.ld-viz--cols { display: flex; align-items: flex-end; gap: 6px; height: 48px; }
.ld-viz--cols span { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: rgba(var(--accent-rgb), 0.35); }
.ld-viz--cols span:nth-child(4) { background: var(--accent); }
.ld-viz--lines { display: grid; gap: 6px; }
.ld-viz--lines span { height: 6px; border-radius: 99px; background: rgba(var(--ink-rgb), 0.12); }
.ld-viz--lines span:nth-child(2) { width: 82%; } .ld-viz--lines span:nth-child(3) { width: 58%; }
.ld-tile--deco { display: grid; place-items: center; min-height: 0; background: var(--accent-soft); border-color: transparent; }
.ld-spark { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ld-spark-dot { fill: var(--accent); }
.ld-tile--deco svg { width: 100%; max-width: 160px; height: auto; }
.ld-tile--key { background: var(--navy); border-color: transparent; align-content: center; min-height: 0; }
.ld-key { color: #fff; font-weight: 500; font-size: 0.94rem; line-height: 1.45; }

/* tiles flip to "updated" in sequence on load (motion allowed only) */
@media (prefers-reduced-motion: no-preference) {
  .ld-tile { animation: ld-flip 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.15s + var(--i, 0) * 0.2s); transform-origin: 50% 0; }
  .ld-tile .ld-dot { animation: ld-dotflip 0.8s ease both; animation-delay: calc(0.55s + var(--i, 0) * 0.2s); }
  @keyframes ld-flip { from { opacity: 0; transform: perspective(700px) rotateX(-62deg) translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes ld-dotflip { 0% { background: #9aa6bd; box-shadow: 0 0 0 4px rgba(154, 166, 189, 0.2); } 55% { transform: scale(1.7); } 100% { transform: none; } }
}

/* ---------- 2. Problem ---------- */
.ld-problem { padding-block: clamp(56px, 8vw, 104px); background: var(--surface); border-block: 1px solid var(--ld-rule); }
.ld-problem__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ld-pains { margin-top: 32px; display: grid; border-top: 2px solid var(--ink); }
.ld-pains li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--ld-rule); align-items: baseline; }
.ld-pains .ld-mono { color: var(--accent); font-weight: 700; }
.ld-pains p { font-weight: 500; }
.ld-sheets { --p: 1; position: relative; width: 100%; max-width: 520px; aspect-ratio: 5 / 4; justify-self: center; }
.ld-win { position: absolute; inset: 12% 14% 14%; z-index: var(--z); border-radius: 14px; background: var(--card); border: 1px solid var(--ld-rule); box-shadow: 0 18px 32px -20px rgba(var(--ink-rgb), 0.45); overflow: hidden;
  background-image: linear-gradient(var(--ld-rule) 1px, transparent 1px), linear-gradient(90deg, var(--ld-rule) 1px, transparent 1px); background-size: 100% 26px, 25% 100%; background-position: 0 36px, 0 0;
  transform: translate(calc((1 - var(--p)) * var(--x)), calc((1 - var(--p)) * var(--y))) rotate(calc((1 - var(--p)) * var(--r))); }
.ld-win:not(.ld-win--front) { opacity: calc(1 - var(--p) * 0.94); }
.ld-win i { position: absolute; inset: 0 0 auto 0; height: 36px; background: rgba(var(--ink-rgb), 0.06); border-bottom: 1px solid var(--ld-rule); }
.ld-win b { position: absolute; height: 12px; border-radius: 4px; background: rgba(var(--accent-rgb), 0.32); }
.ld-win b:nth-of-type(1) { left: 6%; top: 48%; width: 22%; }
.ld-win b:nth-of-type(2) { left: 52%; top: 62%; width: 30%; background: rgba(var(--ink-rgb), 0.16); }
.ld-win b:nth-of-type(3) { left: 30%; top: 78%; width: 24%; }
.ld-win--front b:nth-of-type(1) { background: var(--accent); }
.ld-win__ok { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--ld-ok); opacity: clamp(0, calc((var(--p) - 0.6) * 2.5), 1); }
.ld-win__ok::after { content: ""; position: absolute; left: 11px; top: 10px; width: 12px; height: 7px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); }

/* ---------- 3. Features: tab rail + large preview ---------- */
.ld-build { padding-block: clamp(56px, 8vw, 104px); }
.ld-feats { display: grid; gap: 18px; margin-top: 36px; }
.ld-feat { display: grid; gap: 10px; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--ld-rule); }
.ld-feat__h { margin: 0; }
.ld-feat__tab { all: unset; box-sizing: border-box; font: inherit; font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--ink); cursor: default; }
.ld-feat__txt { color: var(--muted); }
.ld-preview { margin-top: 8px; }
.ld-pv { padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--ld-rule); min-height: 150px; }
.ld-pv--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: stretch; }
.ld-pv--grid span { min-height: 62px; border-radius: 12px; background: var(--surface); border: 1px solid var(--ld-rule); }
.ld-pv--grid .is-acc { background: var(--accent-soft); border-color: var(--accent); }
.ld-pv--owners { display: grid; gap: 10px; align-content: center; }
.ld-pv--owners span { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--surface); }
.ld-pv--owners i { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); border: 2px solid var(--accent); }
.ld-pv--owners b { height: 10px; border-radius: 99px; background: rgba(var(--ink-rgb), 0.16); width: 70%; }
.ld-pv--owners span:nth-child(2) b { width: 52%; } .ld-pv--owners span:nth-child(3) b { width: 62%; } .ld-pv--owners span:nth-child(4) b { width: 44%; }
.ld-pv--clock { display: grid; place-items: center; }
.ld-pv--clock svg { width: 130px; height: 130px; fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ld-pv--list { display: grid; gap: 10px; align-content: center; }
.ld-pv--list span { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface); }
.ld-pv--list i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent); }
.ld-pv--list b { height: 10px; border-radius: 99px; background: rgba(var(--ink-rgb), 0.16); width: 78%; }
.ld-pv--list .is-warn i { border-color: var(--ld-warn); background: rgba(180, 83, 9, 0.15); }

/* with JavaScript: a rail of tabs on the left and one large preview on the right */
.ld-js .ld-feats { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 56px); row-gap: 6px; align-items: start; }
.ld-js .ld-feat { display: contents; }
.ld-js .ld-feat__h, .ld-js .ld-feat__txt { grid-column: 1; }
.ld-js .ld-feat__h { margin-top: 6px; }
.ld-js .ld-feat__tab { display: block; width: 100%; padding: 16px 18px; border-radius: 16px; border: 1px solid transparent; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.ld-js .ld-feat__tab:hover { background: rgba(var(--accent-rgb), 0.06); }
.ld-js .ld-feat.is-active .ld-feat__tab { background: var(--card); border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.ld-js .ld-feat__txt { padding: 0 18px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease; }
.ld-js .ld-feat.is-active .ld-feat__txt { max-height: 120px; opacity: 1; padding-bottom: 8px; }
.ld-js .ld-preview { grid-column: 2; grid-row: 1 / span 8; margin: 0; align-self: stretch; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s; }
.ld-js .ld-feat.is-active .ld-preview { opacity: 1; visibility: visible; }
.ld-js .ld-pv { height: 100%; min-height: 340px; padding: 28px; border-radius: 24px; background: linear-gradient(160deg, var(--card), var(--surface)); }
.ld-js .ld-pv--grid span { min-height: 120px; }
.ld-js .ld-pv--clock svg { width: 200px; height: 200px; }
@media (prefers-reduced-motion: no-preference) { .ld-arr { animation: ld-spin 6s linear infinite; transform-origin: 60px 60px; } @keyframes ld-spin { to { transform: rotate(360deg); } } }

/* ---------- 4. Loop ---------- */
.ld-loop { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 104px); background: var(--surface); border-top: 1px solid var(--ld-rule); }
.ld-loop__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 36px; }
.ld-ring { width: 100%; max-width: 360px; height: auto; justify-self: center; overflow: visible; }
.ld-ring__path { fill: none; stroke: rgba(var(--accent-rgb), 0.35); stroke-width: 3; stroke-dasharray: 3 9; stroke-linecap: round; }
.ld-ring__arrow { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ld-n circle { fill: var(--accent-fill, var(--accent)); }
.ld-n--end circle { fill: var(--navy); }
.ld-n text { fill: #fff; font-weight: 700; font-size: 20px; font-family: inherit; }
.ld-ring__dot { fill: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .ld-ring__orbit { transform-origin: 160px 160px; animation: ld-orbit 14s linear infinite; } @keyframes ld-orbit { to { transform: rotate(360deg); } } }
.ld-steps { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.ld-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--ld-rule); }
.ld-steps__n { grid-row: span 2; color: var(--accent); font-weight: 700; padding-top: 3px; }
.ld-steps p { color: var(--muted); margin-top: 4px; }

/* ---------- 5. People (navy band) ---------- */
.ld-people { background: var(--navy); color: #fff; padding-block: clamp(64px, 9vw, 120px); }
.ld-big { margin-top: 28px; font-size: clamp(1.6rem, 2.8vw + 0.6rem, 2.9rem); font-weight: 600; letter-spacing: -0.028em; line-height: 1.16; max-width: 26ch; }
.ld-people__cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); margin-top: clamp(32px, 5vw, 56px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.ld-benefit { color: rgba(255, 255, 255, 0.85); }
.ld-benefit .ld-mono { display: block; color: #8fb4ff; margin-bottom: 6px; }
.ld-checks { display: grid; gap: 14px; }
.ld-checks li { position: relative; padding-left: 32px; color: rgba(255, 255, 255, 0.92); }
.ld-checks li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 14px; height: 8px; border-left: 2.5px solid #8fb4ff; border-bottom: 2.5px solid #8fb4ff; transform: rotate(-45deg); }

/* ---------- 6 and 7. Related cards (scroll snap) and the call to action tile ---------- */
.ld-related { padding-block: clamp(56px, 8vw, 104px); }
.ld-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; margin-top: 32px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ld-cards > li { scroll-snap-align: start; }
.ld-cards a { display: grid; gap: 8px; align-content: start; height: 100%; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--ld-rule); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.ld-cards a:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 20px 34px -24px rgba(var(--ink-rgb), 0.55); }
.ld-cards span:not(.ld-mono) { color: var(--muted); font-size: 0.94rem; }
.ld-cards b { color: var(--accent); font-weight: 600; margin-top: 4px; }
.pg-leadership .ld-cards__cta a { background: var(--navy); color: #fff; border-color: transparent; align-content: space-between; }
.pg-leadership .ld-cards__cta a:hover { background: var(--accent-fill, var(--accent)); }
.ld-cards__cta .ld-mono { color: rgba(255, 255, 255, 0.75); }
.ld-cards__cta strong { font-size: 1.35rem; line-height: 1.2; }
.pg-leadership .ld-cards__cta b { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .ld-hero__grid, .ld-problem__grid, .ld-loop__grid, .ld-people__cols { grid-template-columns: 1fr; }
  .ld-js .ld-feats { grid-template-columns: 1fr; }
  .ld-js .ld-feat { display: grid; }
  .ld-js .ld-feat__h, .ld-js .ld-feat__txt { grid-column: auto; }
  .ld-js .ld-feat__tab { cursor: default; padding: 0; background: none !important; border: 0 !important; box-shadow: none !important; }
  .ld-js .ld-feat__txt { max-height: none; opacity: 1; padding: 0; }
  .ld-js .ld-preview { grid-column: auto; grid-row: auto; opacity: 1; visibility: visible; margin-top: 8px; }
  .ld-js .ld-pv { min-height: 150px; padding: 18px; }
  .ld-js .ld-pv--grid span { min-height: 62px; }
  .ld-js .ld-feat { padding: 20px; }
}
@media (max-width: 560px) {
  .ld-tiles { gap: 10px; }
  .ld-tile { min-height: 132px; padding: 14px; }
  .ld-tile__name { font-size: 0.92rem; }
  .ld-board { padding: 12px; border-radius: 22px; }
  .ld-actions .ld-btn { width: 100%; }
  .ld-cards { grid-auto-columns: 82%; }
}