/* ============================================================
   The LeanScale Standard: partner deck, project layer.
   Loads after ls-foundations + ls-charts + ls-deck and never forks
   them. v2 (24 Sep 2026) follows the four-practice sales deck: a
   header row of eyebrow, two-line headline and standfirst over a
   rule, then one white card holding one visual. Aubergine is for the
   cover, the one hero slide and the close. Nothing else is dark.
   ============================================================ */

:root {
  /* the practice colours, same as the sales deck, in span order */
  --p-growth: #9A5B12;    --p-growth-t: #F9EBD6;    --p-growth-e: #C77D2E;
  --p-marketing: #3F6B24; --p-marketing-t: #E8F3DC; --p-marketing-e: #8FBF63;
  --p-revenue: #642585;   --p-revenue-t: #EFE3F5;   --p-revenue-e: #B057D8;
  --p-financial: #1F6B6B; --p-financial-t: #DCEDED; --p-financial-e: #2E8585;
  --p-platform: #46548A;  --p-platform-t: #E4E8F5;  --p-platform-e: #7C8BC6;
  --px-shadow: 0 14px 34px rgba(74, 26, 102, 0.08);
  --pd-good: var(--chart-2);
  --pd-bad: var(--status-warning);
  --lime-wash: #F7FDEF; --lime-edge: #C8E89E;
}

body { background: var(--ls-near-black); }
.pd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pd-ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The kit darkens .ls-mark under ANY [data-theme="dark"] ancestor. Hosts that
   stamp the viewer's theme on <html> (the claude.ai artifact viewer does) would
   turn every light slide's highlight into lime text on a light field. */
deck-stage > section[data-theme="light"] .ls-mark { color: inherit; -webkit-text-fill-color: currentColor; text-shadow: none; }
deck-stage > section[data-theme="light"] .ls-mark::after { content: ""; }

/* ---------- the sales-deck header row ---------- */
deck-stage > section[data-theme="light"] { padding: 46px 88px 30px; }
.px-top { display: flex; justify-content: space-between; align-items: baseline; flex-shrink: 0; }
.px-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.px-logo { height: 15px; width: auto; object-fit: contain; filter: brightness(0); opacity: 0.42; }
.px-title-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; flex-shrink: 0;
  margin-top: 9px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle);
}
.px-title { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 38px; font-weight: 700; letter-spacing: -0.032em; line-height: 1.07; }
.px-stand { margin: 0; flex: 0 0 300px; padding-bottom: 4px; font-size: 12.5px; line-height: 1.5; color: var(--fg-secondary); }
.px-title-row.stack { flex-direction: column; align-items: flex-start; gap: 8px; }
.px-title-row.stack .px-stand { flex: none; max-width: 640px; }
.px-card { background: var(--m-card); border: 1px solid var(--border-subtle); border-radius: 18px; box-shadow: var(--px-shadow); }
.px-k { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }
deck-stage > section[data-theme="light"] .ds-foot { font-size: 10.5px; }

/* ---------- logo tile: every logo on every slide ---------- */
.pd-lt {
  --s: 40px; width: var(--s); height: var(--s); flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: calc(var(--s) * 0.26); padding: calc(var(--s) * 0.15);
  background: var(--m-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs);
}
/* max sizes, not 100%: a mark taller than its tile (Amplemarket's symbol in a wide
   tile) must shrink to fit, and a grid track would have grown to its height instead */
.pd-lt img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.pd-lt.lm { padding: 0; border: 0; background: var(--m-grad-purple); color: var(--fg-on-dark); font-weight: var(--fw-heavy); font-size: calc(var(--s) * 0.42); }

/* ============================================================
   COVER, HERO, CLOSE (the only dark slides)
   ============================================================ */
.pd-cover { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
.pd-cover-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.pd-cover-h1 { margin-top: 22px; max-width: 640px; font-size: 56px; letter-spacing: -0.038em; line-height: 1.02; text-wrap: balance; }
.pd-cover-sub { margin-top: 18px; max-width: 520px; text-wrap: pretty; }
.pd-cover-stats { display: flex; gap: 34px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border-on-dark); }
.pd-cover-stats b { display: block; font-size: 40px; font-weight: var(--fw-bold); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.pd-cover-stats span { display: block; margin-top: 6px; font-size: 12px; color: var(--fg-on-dark-2); }

/* the floating board: every category, lit where a Standard holds it */
.pd-cover-card {
  flex: 0 0 450px; padding: 18px 20px 16px; border-radius: 18px;
  background: rgba(251, 248, 252, 0.06); border: 1px solid var(--border-on-dark);
  backdrop-filter: blur(10px); box-shadow: 0 30px 70px rgba(10, 3, 14, 0.45);
}
.pd-cb-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pd-cb-head b { font-size: 13px; font-weight: var(--fw-bold); }
.pd-cb-pill { font-size: 10.5px; font-weight: var(--fw-bold); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--ls-lime); color: var(--m-ink); }
.pd-cb-rows { display: grid; gap: 11px; margin-top: 16px; }
.pd-cb-row { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 10px; }
.pd-cb-name { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--fg-on-dark-a86); white-space: nowrap; }
.pd-cb-name::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.pd-cb-tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.pd-cb-tiles i { width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(251, 248, 252, 0.28); }
.pd-cb-tiles i.ct { background: rgba(199, 155, 222, 0.45); border-color: transparent; }
.pd-cb-tiles i.st { background: var(--ls-lime); border-color: var(--ls-lime); box-shadow: 0 0 10px rgba(200, 232, 158, 0.7); }
.pd-cb-foot { display: flex; gap: 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-on-dark); font-size: 10.5px; color: var(--fg-on-dark-2); }
.pd-cb-foot span { display: inline-flex; align-items: center; gap: 6px; }
.pd-cb-foot i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(251, 248, 252, 0.28); }
.pd-cb-foot i.st { background: var(--ls-lime); border-color: var(--ls-lime); }
.pd-cb-foot i.ct { background: rgba(199, 155, 222, 0.45); border-color: transparent; }

.pd-hero-title { font-size: 64px; max-width: 640px; }
.pd-div-sub { margin-top: 20px; max-width: 46ch; text-wrap: pretty; }
.pd-locks {
  position: absolute; right: -24px; top: 70px; bottom: 70px; width: 540px;
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; align-content: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.pd-lock { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; border: 1px dashed rgba(232, 255, 207, 0.34); color: rgba(232, 255, 207, 0.6); }
.pd-lock .pd-ic { width: 16px; height: 16px; }

.pd-close { align-items: center; text-align: center; }
.pd-close-h { max-width: 16ch; font-size: 60px; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
.pd-close-sub { margin: 18px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.6; }
.pd-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; }
.pd-cta .m-btn { font-size: 15px; padding: 14px 26px; }
.pd-email { display: inline-flex; align-items: center; gap: 10px; padding: 7px 7px 7px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-on-dark-2); font-size: 15px; font-weight: var(--fw-semibold); color: var(--fg-on-dark); }
.pd-email > span { user-select: all; }
.pd-copy { cursor: pointer; font: inherit; font-size: 12px; font-weight: var(--fw-bold); padding: 7px 13px; border: 0; border-radius: var(--radius-pill); background: var(--ls-lime-a18); color: var(--ls-lime); }
.pd-copy:hover { background: var(--ls-lime-a22); }

/* ============================================================
   01 · WHY LEANSCALE, 02 · THE ARSENAL
   ============================================================ */
/* our clients: a sample of the go-to-markets we've run, beside three facts */
.pd-clients { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 14px 26px; padding: 22px 26px 18px; }
.pd-clients-main { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0; }
.pd-clients-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; align-content: start; }
.pd-cl { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; height: 60px; padding: 0 12px;
  border-radius: 12px; background: var(--m-surface); border: 1px solid var(--border-subtle); }
.pd-cl.word img { max-height: 22px; max-width: 78%; object-fit: contain; }
.pd-cl img.ic { width: 26px; height: 26px; flex: none; border-radius: 6px; object-fit: contain; }
.pd-cl > span { min-width: 0; font-size: 13.5px; font-weight: var(--fw-bold); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-clients-side { display: grid; gap: 10px; align-content: start; }
.pd-cstat { padding: 14px 18px 15px; border-radius: 14px; background: var(--m-lavender-wash); }
.pd-cstat b { display: block; font-size: 40px; font-weight: var(--fw-heavy); letter-spacing: -0.045em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.pd-cstat b small { font-size: 18px; letter-spacing: -0.02em; color: var(--fg-secondary); }
.pd-cstat span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; font-weight: var(--fw-semibold); color: var(--fg-secondary); }
.pd-clients-sectors { margin: 0; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--fg-secondary); }

/* who we are: four facts, one card style */
.pd-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pd-who-card { display: flex; flex-direction: column; gap: 9px; min-height: 206px; padding: 20px 20px 18px; border-radius: 16px;
  background: var(--m-card); border: 1px solid var(--border-subtle); box-shadow: var(--px-shadow); }
.pd-who-card .px-k { color: var(--accent); }
.pd-who-card b { font-size: 19px; letter-spacing: -0.02em; line-height: 1.22; }
.pd-who-card p { margin: auto 0 0; font-size: 13.5px; line-height: 1.45; color: var(--fg-secondary); }
.pd-who-pr { display: flex; flex-wrap: wrap; gap: 5px; }
.pd-who-pr span { font-size: 11px; font-weight: var(--fw-bold); padding: 3px 9px; border-radius: var(--radius-pill); background: var(--t); color: var(--c); }
.pd-who-note { margin-top: 24px; }

.pd-tracks { display: grid; gap: 10px; padding: 18px 22px 20px; }
.pd-track { display: grid; grid-template-columns: 200px 1fr; align-items: start; padding: 16px 18px; border-radius: 14px; }
.pd-track-axis { padding: 0 18px 2px; }
.pd-track.bad { background: var(--m-surface); }
.pd-track.good { background: var(--lime-wash); border: 1px solid var(--lime-edge); }
.pd-track-steps { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.pd-track-axis .pd-track-steps span { text-align: center; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--fg-faint); }
.pd-track:not(.pd-track-axis) .pd-track-steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 7px; height: 3px; border-radius: 3px; transform-origin: left center; }
.pd-track.bad .pd-track-steps::before { background: linear-gradient(90deg, var(--accent), var(--pd-bad)); }
.pd-track.good .pd-track-steps::before { background: linear-gradient(90deg, var(--accent), var(--pd-good)); }
deck-stage > section[data-deck-active] .pd-track-steps::before { animation: lsGrowX 1100ms 280ms var(--ease) both; }
deck-stage > section[data-deck-active] .pd-track.good .pd-track-steps::before { animation-delay: 620ms; }
.pd-track-label b { display: block; margin-top: -1px; font-size: 14px; font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.pd-track.bad .pd-track-label b { color: var(--m-pink-ink); }
.pd-track.good .pd-track-label b { color: var(--m-lime-ink); }
.pd-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; position: relative; z-index: 1; }
.pd-step i { width: 17px; height: 17px; border-radius: 50%; background: var(--m-card); border: 3px solid var(--accent); }
.pd-step b { margin-top: 11px; font-size: 14.5px; font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.25; }
.pd-track.bad .pd-step:nth-child(2) i { border-color: var(--m-purple-500); }
.pd-track.bad .pd-step:nth-child(3) i { border-color: var(--m-pink-ink); }
.pd-track.bad .pd-step.end i { background: var(--pd-bad); border-color: var(--pd-bad); box-shadow: 0 0 0 6px rgba(176, 86, 143, 0.16); }
.pd-track.good .pd-step.end i { background: var(--pd-good); border-color: var(--pd-good); box-shadow: 0 0 0 6px rgba(111, 175, 62, 0.18); }
.pd-track.bad .pd-step.end b { color: var(--m-pink-ink); }
.pd-track.good .pd-step.end b { color: var(--m-lime-ink); }

/* three moments, as one flow */
.px-flow { padding: 34px 40px 26px; }
.px-flow-nodes { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.px-flow-nodes::before {
  content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 38px; height: 0;
  border-top: 2px dashed var(--m-purple-300);
}
.px-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.px-node-ic {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px;
  background: var(--m-card); color: var(--accent); border: 1px solid var(--m-purple-300);
  box-shadow: 0 0 0 8px var(--m-lavender-wash), var(--shadow-md);
}
.px-node-ic .pd-ic { width: 32px; height: 32px; }
.px-node-k { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.px-node b { font-size: 20px; letter-spacing: -0.02em; }
.px-flow-note {
  margin: 30px auto 0; width: fit-content; padding: 10px 20px; border-radius: var(--radius-pill);
  background: var(--lime-wash); border: 1px solid var(--lime-edge); font-size: 13.5px; color: var(--fg-primary);
}
.px-flow-note b { color: var(--m-lime-ink); }
.px-flow-nodes.four { grid-template-columns: repeat(4, 1fr); }
.px-flow-nodes.four::before { left: 12.5%; right: 12.5%; }
.px-node p { margin: 0; max-width: 22ch; font-size: 13.5px; line-height: 1.45; color: var(--fg-secondary); text-wrap: pretty; }
.pd-access { padding: 32px 30px 24px; }
.pd-access .px-node b { font-size: 19px; }

/* the Arsenal: a real question, what the engine checks, what it answered */
.pd-ars { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1.14fr; gap: 12px; align-items: stretch; padding: 22px 24px; }
.pd-ars-col { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; border-radius: 14px; background: var(--m-surface); border: 1px solid var(--border-subtle); }
.pd-ars-q { margin: 0; font-size: 20px; font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.3; text-wrap: pretty; }
.pd-ars-logos { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.pd-ars-logos .pd-lt { --s: 44px; }
.pd-ars-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pd-ars-checks li { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; }
.pd-ars-checks .pd-crit-ic { grid-row: span 2; }
.pd-ars-checks b { font-size: 15px; letter-spacing: -0.01em; }
.pd-ars-checks small { font-size: 12px; color: var(--fg-secondary); }
.pd-ars-a { background: var(--lime-wash); border-color: var(--lime-edge); }
.pd-ars-a .px-k { color: var(--m-lime-ink); }
.pd-ars-big { font-size: 32px; font-weight: var(--fw-heavy); letter-spacing: -0.035em; line-height: 1; }
.pd-ars-a p { margin: 0; font-size: 14.5px; line-height: 1.45; font-weight: var(--fw-semibold); text-wrap: pretty; }
.pd-ars-path { gap: 6px; align-items: flex-start; }
.pd-ars-g { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pd-ars-gl { display: flex; gap: 4px; }
.pd-ars-g small { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-lime-ink); }
.pd-ars-path .pd-lt { --s: 34px; }
.pd-ars-to { width: 16px; height: 16px; margin-top: 9px; color: var(--m-lime-ink); }
.pd-ars-arrow { display: grid; place-items: center; color: var(--accent); }
.pd-ars-arrow .pd-ic { width: 22px; height: 22px; }
#neutralNote { margin-top: 20px; }
.pd-nowrap { white-space: nowrap; }

/* ============================================================
   03 · THE STANDARD: the seats
   ============================================================ */

/* the category map: the span on top, four practices under it, the
   Data & AI platform across the bottom because every practice runs on it */
.pd-map { padding: 26px 18px 14px; }
.pd-map-grid { display: grid; grid-template-columns: 0.8fr 1.18fr 1.36fr 0.92fr; column-gap: 12px; }
.pd-seg { position: relative; padding-top: 18px; }
.pd-seg::before { content: ""; position: absolute; left: 0; right: -12px; top: 5px; height: 3px; border-radius: 2px; background: var(--c); }
.pd-seg:last-child::before { right: 0; }
.pd-seg::after { content: ""; position: absolute; left: -1px; top: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--m-card); border: 2.5px solid var(--c); }
.pd-seg-l { position: absolute; top: -12px; left: 0; font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); white-space: nowrap; }
.pd-seg-end { position: absolute; top: -12px; right: 0; font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); }
.pd-seg-dot-end { position: absolute; right: -1px; top: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--m-card); border: 2.5px solid var(--c); }
.pd-pcard {
  display: flex; flex-direction: column; gap: 9px; padding: 11px 11px 12px; border-radius: 16px;
  background: linear-gradient(180deg, var(--t) 0%, var(--m-card) 62%); border: 1px solid var(--border-subtle);
}
.pd-pcard-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pd-pcard-h b { font-size: 15px; font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c); }
.pd-pcard-h span { font-size: 11px; font-weight: var(--fw-semibold); color: var(--fg-faint); }
.pd-anchor {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 11px 10px;
  border-radius: 12px; background: var(--m-card); border: 1.5px solid var(--e); box-shadow: var(--px-shadow);
}
.pd-anchor.standard { background: var(--lime-wash); border-color: var(--m-lime-ink); }
.pd-anchor-k { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.pd-anchor-name { font-size: 19px; font-weight: var(--fw-heavy); letter-spacing: -0.025em; line-height: 1.1; }
.pd-anchor-logos { display: flex; gap: 5px; }
.pd-anchor-logos .pd-lt { border-radius: 8px; padding: 3px; box-shadow: none; }
.pd-anchor-st { font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); }
.pd-anchor-st.standard { background: var(--ls-lime); color: var(--m-ink); border: 1px solid var(--m-lime-ink); }
.pd-anchor-st.open { background: var(--m-card); color: var(--c); border: 1px dashed var(--e); }
.pd-anchor.match { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 4px 3px; align-content: flex-start; }
.pd-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: var(--radius-pill);
  font-size: 10.6px; font-weight: var(--fw-semibold); line-height: 1.35; white-space: nowrap;
  background: var(--m-card); color: var(--fg-secondary); border: 1px dashed var(--border-strong);
}
.pd-tag.contested { color: var(--fg-primary); border: 1px solid var(--e); background: var(--t); }
.pd-tag.standard { color: var(--m-ink); font-weight: var(--fw-bold); background: var(--ls-lime); border: 1px solid var(--m-lime-ink); box-shadow: 0 0 0 3px rgba(232, 255, 207, 0.6); }
.pd-tag.standard img { width: 13px; height: 13px; object-fit: contain; border-radius: 3px; background: var(--m-card); }
.pd-tag.match { outline: 2px solid var(--accent); outline-offset: 1px; }
.pd-legend-foot { display: inline-flex; align-items: center; gap: 6px; }
.pd-legend-foot i { width: 16px; height: 9px; border-radius: var(--radius-pill); border: 1px dashed var(--border-strong); background: var(--m-card); margin-left: 8px; }
.pd-legend-foot i:first-child { margin-left: 0; }
.pd-legend-foot i.standard { background: var(--ls-lime); border: 1px solid var(--m-lime-ink); }
.pd-legend-foot i.contested { border: 1px solid var(--m-purple-300); background: linear-gradient(90deg, var(--p-growth-t) 0 25%, var(--p-marketing-t) 25% 50%, var(--p-revenue-t) 50% 75%, var(--p-financial-t) 75%); }
.pd-map-legend { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 10.5px; color: var(--fg-secondary); }
.pd-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pd-map-legend i { width: 18px; height: 10px; border-radius: var(--radius-pill); border: 1px dashed var(--border-strong); background: var(--m-card); }
.pd-map-legend i.standard { background: var(--ls-lime); border: 1px solid var(--m-lime-ink); }
.pd-map-legend i.contested { border: 1px solid var(--m-purple-300); background: linear-gradient(90deg, var(--p-growth-t) 0 25%, var(--p-marketing-t) 25% 50%, var(--p-revenue-t) 50% 75%, var(--p-financial-t) 75%); }

/* the ladder: the Standard on top, the network under it, and an entry rung
   at the bottom that anyone can reach without a build */
.pd-pyramid { display: grid; gap: 12px; }
.pd-tier { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 22px; }
.pd-tier-meta { display: flex; flex-direction: column; gap: 3px; }
.pd-tier-name { font-size: 22px; font-weight: var(--fw-heavy); letter-spacing: -0.025em; }
.pd-tier-count { font-size: 12.5px; color: var(--fg-secondary); }
.pd-tier-count b { color: var(--fg-primary); }
.pd-tier-band { display: flex; justify-content: center; }
.pd-tier-logos { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; border-radius: 16px; box-shadow: var(--px-shadow); }
.pd-tier.t1 .pd-tier-logos { width: 36%; gap: 12px; padding: 22px 16px 16px; background: var(--lime-wash); border: 1px solid var(--lime-edge); }
.pd-tier.t1 .pd-lt { --s: 52px; }
.pd-tier.t1 .ls-badge { right: 50%; transform: translateX(50%); white-space: nowrap; }
.pd-tier.t2 .pd-tier-logos { width: 68%; gap: 8px; padding: 14px; background: var(--m-lavender-wash); border: 1px solid var(--border-subtle); }
.pd-tier.t2 .pd-lt { --s: 36px; }
.pd-tier.t3 .pd-tier-logos { width: 100%; gap: 5px; padding: 12px; background: var(--m-card); border: 1px solid var(--border-subtle); }
.pd-tier.t3 .pd-lt { --s: 22px; border-radius: 6px; padding: 3px; box-shadow: none; }
.pd-tier-how { margin-top: 2px; max-width: 168px; font-size: 11.5px; line-height: 1.35; color: var(--fg-secondary); }
.pd-tier.t0 .pd-tier-name { font-size: 18px; }
.pd-tier-entry { width: 100%; display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 16px; border: 1.5px dashed var(--m-purple-300); background: var(--m-card); }
.pd-entry-tiles { display: flex; gap: 5px; flex: none; }
.pd-entry-tiles i { width: 22px; height: 22px; border-radius: 6px; border: 1.5px dashed var(--m-purple-300); }
.pd-tier-entry p { margin: 0; font-size: 13.5px; font-weight: var(--fw-semibold); color: var(--fg-primary); }
.pd-here-tag { align-self: flex-start; margin-top: 6px; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap;
  font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; background: var(--accent); color: var(--fg-on-dark); }
.pd-tier.here .pd-tier-name { color: var(--accent); }
.pd-tier.t0.here .pd-tier-entry { border-color: var(--accent); background: var(--m-lavender-wash); }
.pd-lt.me { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   03 · THE STANDARD: what it gets
   ============================================================ */
.px-tile-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 8px; background: var(--m-lavender-wash); color: var(--accent); }

/* the benefit hub: the Standard in the middle, what it gets around it */
.pd-hub {
  position: relative; display: grid; grid-template-columns: 1fr 196px 1fr; grid-template-rows: auto auto;
  column-gap: 60px; row-gap: 6px; align-items: center; padding: 22px 36px 18px;
}
.pd-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.pd-hub-lines path { fill: none; stroke: var(--m-purple-300); stroke-width: 1.6; }
deck-stage > section[data-deck-active] .pd-draw { stroke-dasharray: 1; animation: pdDraw 900ms var(--ease) both; }
@keyframes pdDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pd-hub-side { position: relative; z-index: 1; display: grid; gap: 16px; }
.pd-hub-side.left { grid-column: 1; grid-row: 1; }
.pd-hub-side.right { grid-column: 3; grid-row: 1; }
.pd-hub-side.left .pd-hub-k { text-align: right; }
.pd-hub-node { display: flex; align-items: center; gap: 13px; }
.pd-hub-side.left .pd-hub-node { flex-direction: row-reverse; text-align: right; }
.pd-hub-ic {
  width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--m-card); color: var(--accent); border: 1px solid var(--m-purple-300); box-shadow: 0 0 0 5px var(--m-lavender-wash);
}
.pd-hub-ic .pd-ic { width: 21px; height: 21px; }
.pd-hub-node b { display: block; font-size: 16px; letter-spacing: -0.015em; }
.pd-hub-node small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg-secondary); }
.pd-hub-core {
  position: relative; z-index: 1; grid-column: 2; grid-row: 1; justify-self: center;
  width: 186px; height: 186px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  text-align: center; color: var(--m-ink); background: radial-gradient(circle at 50% 30%, var(--lime-wash), var(--ls-lime));
  border: 1.5px solid var(--m-lime-ink); box-shadow: 0 0 0 12px rgba(232, 255, 207, 0.5), 0 0 0 26px rgba(232, 255, 207, 0.2), var(--shadow-lg);
}
.pd-hub-core .pd-ic { width: 30px; height: 30px; color: var(--m-lime-ink); }
.pd-hub-core b { font-size: 21px; letter-spacing: -0.02em; }
.pd-hub-core small { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-lime-ink); }
.pd-hub-bottom { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 22px; }

/* the reference Standard */
.pd-proof { display: grid; grid-template-columns: 290px 1fr; gap: 30px; align-items: center; padding: 30px 34px; }
.pd-proof-id { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-right: 26px; border-right: 1px solid var(--border-subtle); }
.pd-proof-id .pd-lt { width: 176px; height: 76px; padding: 14px 18px; border-radius: 16px; }
.pd-proof-name { margin-top: 12px; font-size: 30px; font-weight: var(--fw-heavy); letter-spacing: -0.03em; }
.pd-proof-sub { font-size: 13px; color: var(--fg-secondary); margin-bottom: 4px; }
.pd-rels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pd-rel { font-size: 11px; font-weight: var(--fw-bold); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--p-growth-t); color: var(--p-growth); }
.pd-proof-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pd-proof-fact { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 14px; background: var(--m-surface); border: 1px solid var(--border-subtle); }
.pd-proof-fact .px-tile-ic { margin: 0; flex: none; }
.pd-proof-fact p { margin: 2px 0 0; font-size: 15px; line-height: 1.45; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }

/* the Field Report: light, like everything else that is not the cover */
.pd-report { display: grid; grid-template-columns: 196px 1fr; gap: 18px; align-items: stretch; }
.pd-rpick { display: flex; flex-direction: column; gap: 8px; }
.pd-rp {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; cursor: pointer; text-align: left;
  font: inherit; font-size: 14px; font-weight: var(--fw-bold); color: var(--fg-primary);
  background: var(--m-card); border: 1px solid var(--border-subtle); border-radius: 14px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pd-rp:hover { border-color: var(--m-purple-300); }
.pd-rp .pd-lt { --s: 30px; }
.pd-rp[aria-pressed="true"] { background: var(--m-lavender-wash); border-color: var(--accent); box-shadow: var(--px-shadow); }
.pd-rcard { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 18px; border-radius: 18px; background: var(--m-card); border: 1px solid var(--border-subtle); box-shadow: var(--px-shadow); }
.pd-rhead { display: flex; align-items: center; gap: 14px; }
.pd-rhead .pd-lt { --s: 44px; }
.pd-rname { font-size: 21px; font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.pd-rsub { font-size: 12.5px; color: var(--fg-secondary); margin-top: 2px; }
.pd-rtier { margin-left: auto; }
.pd-rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pd-rm { padding: 10px 14px 11px; border-radius: 14px; background: var(--m-surface); border: 1px solid var(--border-subtle); }
.pd-rm-l { display: block; font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--fg-faint); }
.pd-rm-v { display: block; margin-top: 6px; font-size: 27px; font-weight: var(--fw-heavy); letter-spacing: -0.03em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.pd-rm-v small { font-size: 13px; color: var(--fg-secondary); font-weight: var(--fw-semibold); }
.pd-rm-v.prose { font-size: 15.5px; line-height: 1.25; letter-spacing: -0.01em; color: var(--fg-primary); }
.pd-rm-s { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--fg-secondary); }
.pd-rnote { padding: 11px 14px; border-radius: 12px; background: var(--lime-wash); border: 1px solid var(--lime-edge); }
.pd-rnote .px-k { color: var(--m-lime-ink); }
.pd-rnote p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--fg-primary); }
.pd-tierpill { flex: none; font-size: 9px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--radius-pill); background: var(--m-lavender-wash); color: var(--m-purple-700); }
.pd-tierpill.t1 { background: var(--ls-lime); color: var(--m-ink); }

/* ============================================================
   04 · THE BAR
   ============================================================ */
.pd-gates { display: grid; grid-template-columns: repeat(4, 1fr) 1.12fr; gap: 16px; align-items: start; padding: 34px 30px 30px; }
.pd-gate { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.pd-gate:not(.final)::after { content: ""; position: absolute; top: 33px; left: 68px; width: calc(100% - 68px + 16px); height: 3px; background: var(--accent); border-radius: 3px; transform-origin: left center; z-index: 0; }
.pd-gate:nth-child(4)::after { background: linear-gradient(90deg, var(--accent), var(--pd-good)); }
deck-stage > section[data-deck-active] .pd-gate::after { animation: lsGrowX 520ms var(--ease) both; }
deck-stage > section[data-deck-active] .pd-gate:nth-child(1)::after { animation-delay: 420ms; }
deck-stage > section[data-deck-active] .pd-gate:nth-child(2)::after { animation-delay: 620ms; }
deck-stage > section[data-deck-active] .pd-gate:nth-child(3)::after { animation-delay: 820ms; }
deck-stage > section[data-deck-active] .pd-gate:nth-child(4)::after { animation-delay: 1020ms; }
.pd-gate-ic { position: relative; z-index: 1; width: 68px; height: 68px; border-radius: 22px; display: grid; place-items: center; color: var(--accent); background: var(--m-card); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); }
.pd-gate-ic .pd-ic { width: 30px; height: 30px; }
.pd-gate-n { margin-top: 16px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--accent); }
.pd-gate h3 { margin-top: 6px; font-size: 19px; }
.pd-gate p { margin: 6px 0 0; padding-right: 10px; font-size: 13.5px; line-height: 1.5; color: var(--fg-secondary); }
.pd-gate p b { color: var(--fg-primary); }
.pd-gate.final .pd-gate-ic { width: 76px; height: 76px; margin-top: -4px; border-radius: 50%; border: 1px solid var(--m-lime-ink); background: var(--ls-lime); color: var(--m-ink); box-shadow: 0 0 0 8px var(--lime-wash), var(--shadow-md); }
.pd-gate.final .pd-gate-n { color: var(--m-lime-ink); }

.pd-rate { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.pd-rate-n { display: flex; align-items: flex-start; font-size: 200px; font-weight: var(--fw-heavy); letter-spacing: -0.065em; line-height: 0.86; color: var(--accent); font-variant-numeric: tabular-nums; }
.pd-rate-n small { margin: 14px 0 0 8px; font-size: 92px; letter-spacing: -0.04em; }
.pd-rate-cap { margin-top: 14px; font-size: 19px; font-weight: var(--fw-bold); letter-spacing: -0.015em; }
.pd-why { display: grid; gap: 12px; }
.pd-why-row { padding: 16px 20px; border-radius: 16px; background: var(--m-card); border: 1px solid var(--border-subtle); box-shadow: var(--px-shadow); }
.pd-why-row .px-k { color: var(--accent); }
.pd-why-row p { margin: 6px 0 0; font-size: 16px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--fg-primary); }
.pd-why-row.key { background: var(--lime-wash); border-color: var(--lime-edge); }
.pd-why-row.key .px-k { color: var(--m-lime-ink); }

/* one stack, one rate */
.pd-scmp { display: grid; grid-template-columns: 0.9fr 40px 1.2fr; gap: 14px; align-items: stretch; }
.pd-today { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.pd-scatter { position: relative; flex: 1; min-height: 240px; }
.pd-scard { position: absolute; width: 48%; padding: 10px 14px; border-radius: 12px; background: var(--m-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.pd-scard b { display: block; font-size: 14px; font-weight: var(--fw-bold); }
.pd-scard span { display: block; margin-top: 2px; font-size: 12px; font-weight: var(--fw-semibold); color: var(--m-pink-ink); }
.pd-arrow { display: grid; place-items: center; color: var(--accent); }
.pd-arrow .pd-ic { width: 30px; height: 30px; }
.pd-tomorrow { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; border-radius: 18px; background: var(--m-card); border: 1px solid var(--border-subtle); box-shadow: var(--px-shadow); }
.pd-layers { display: grid; gap: 4px; }
.pd-layer {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; min-height: 31px;
  padding: 3px 8px 3px 12px; border-radius: 9px; border-left: 4px solid var(--c); background: var(--t);
}
.pd-layer b { font-size: 13px; font-weight: var(--fw-bold); }
.pd-layer small { font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--c); margin-left: 6px; }
.pd-layer-logos { display: flex; gap: 5px; }
.pd-layer-logos .pd-lt { --s: 24px; border-radius: 6px; padding: 2px; box-shadow: none; }
.pd-layer.std { background: var(--lime-wash); }
.pd-seat { font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); padding: 2px 8px; border-radius: var(--radius-pill); border: 1px dashed var(--e); background: var(--m-card); }
.pd-one-rate { margin-top: 2px; padding: 9px 14px; border-radius: 10px; text-align: center; background: var(--ls-lime); color: var(--m-ink); font-size: 13.5px; font-weight: var(--fw-heavy); letter-spacing: -0.01em; }

/* the review */
.pd-review { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: center; padding: 26px 28px; }
.pd-crit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pd-crit > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 16px 15px; min-height: 104px; border-radius: 14px; background: var(--m-surface); border: 1px solid var(--border-subtle); }
.pd-crit-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--m-lavender-wash); color: var(--accent); }
.pd-crit-ic .pd-ic { width: 20px; height: 20px; }
.pd-crit b { font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; }
.pd-facts { display: grid; gap: 14px; padding: 20px 22px; border-radius: 16px; background: var(--m-lavender-wash); }
.pd-facts b { display: block; margin-top: 4px; font-size: 19px; letter-spacing: -0.015em; line-height: 1.25; }
.pd-facts > div + div { padding-top: 14px; border-top: 1px solid var(--border-subtle); }

/* ============================================================
   READING MODE (phones, and any window too small to scale into)
   Below this size a 1280×720 slide shrinks past legibility, so the
   deck stops being a stage and becomes a scrolling page.
   ============================================================ */
@media (max-width: 820px), (max-height: 500px) {
  html, body { height: auto; overflow: auto; }
  body { background: var(--ls-near-black) !important; }
  #lsnav, #lsnotes { display: none !important; }
  deck-stage { position: static; display: block; width: auto; height: auto; margin: 0; transform: none !important; }
  deck-stage > section { position: relative !important; inset: auto; width: auto; height: auto; opacity: 1; pointer-events: auto; }
  deck-stage > section[data-theme="light"] { padding: 34px 20px 28px; }
  deck-stage > section[data-theme="dark"] { padding: 44px 20px 36px; }
  deck-stage > section > *, deck-stage .ls-cell, deck-stage .ls-bar, deck-stage .ls-hbar,
  deck-stage .pd-track-steps::before, deck-stage .pd-gate::after { animation: none !important; }

  .ds-body { margin-top: 20px; }
  .ds-foot { margin-top: 22px; gap: 16px; }
  .ds-head img, .ls-logo-mark { height: 22px; }
  .px-title-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .px-title { font-size: 26px; }
  .px-title br { display: none; }
  .px-stand { flex: none; max-width: none; }
  .pd-cover { flex-direction: column; align-items: stretch; gap: 26px; }
  .pd-cover-h1 { font-size: 40px; }
  .pd-cover-card { flex: none; width: 100%; }
  .pd-cover-stats { gap: 20px; }
  .pd-cover-stats b { font-size: 30px; }
  .pd-hero-title { font-size: 38px; }
  .pd-locks { opacity: 0.2; }
  .pd-close-h { font-size: 36px; }
  .pd-close-sub { font-size: 16px; }

  .pd-clients { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .pd-clients-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-clients-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-cstat { padding: 10px 12px; }
  .pd-cstat b { font-size: 26px; }
  .pd-who { grid-template-columns: minmax(0, 1fr); }
  .pd-who-card { min-height: 0; }
  .pd-tracks { padding: 12px; }
  .pd-track { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .pd-track-axis { display: none; }
  .pd-track-steps { grid-template-columns: 1fr; gap: 10px; padding-left: 4px; }
  .pd-track:not(.pd-track-axis) .pd-track-steps::before { left: 11px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
  .pd-step { flex-direction: row; align-items: center; text-align: left; gap: 10px; padding: 0; }
  .pd-step b { margin-top: 0; }

  .px-flow { padding: 22px 16px; }
  .px-flow-nodes, .px-flow-nodes.four { grid-template-columns: 1fr; gap: 22px; }
  .px-node p { max-width: none; }
  .px-flow-nodes::before { display: none; }
  .px-flow-note { width: auto; border-radius: 14px; }

  .pd-ars { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  /* the question already names the sources, so the phone path starts at the warehouse */
  .pd-ars-path > .pd-ars-g:first-child, .pd-ars-path > .pd-ars-to:first-of-type { display: none; }
  .pd-ars-arrow { transform: rotate(90deg); padding: 2px 0; }
  .pd-map { padding: 14px; }
  .pd-hub { grid-template-columns: 1fr; padding: 18px; row-gap: 18px; }
  .pd-hub-lines { display: none; }
  .pd-hub-core { grid-column: 1; grid-row: auto; width: 150px; height: 150px; }
  .pd-hub-side.left, .pd-hub-side.right, .pd-hub-bottom { grid-column: 1; grid-row: auto; justify-self: stretch; margin-top: 0; }
  .pd-hub-side.left .pd-hub-node { flex-direction: row; text-align: left; }
  .pd-hub-side.left .pd-hub-k { text-align: left; }
  .pd-proof { grid-template-columns: 1fr; padding: 18px; }
  .pd-proof-id { border-right: 0; padding-right: 0; }
  .pd-proof-facts { grid-template-columns: 1fr; }
  .pd-map-grid { grid-template-columns: 1fr; row-gap: 14px; }
  .pd-map-grid.pd-map-span { display: none; }
  .pd-tier { grid-template-columns: 1fr; gap: 10px; }
  .pd-tier.t1 .pd-tier-logos, .pd-tier.t2 .pd-tier-logos { width: 100%; }
  .pd-tier-how { max-width: none; }
  .pd-tier-entry { flex-wrap: wrap; }

  .pd-report { grid-template-columns: 1fr; }
  .pd-rpick { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .pd-rp { flex: none; }
  .pd-rgrid { grid-template-columns: 1fr 1fr; }
  .pd-rhead { flex-wrap: wrap; }
  .pd-rtier { margin-left: 0; }

  .pd-gates { grid-template-columns: 1fr; gap: 22px; padding: 22px 18px; }
  .pd-gate:not(.final)::after { display: none; }
  .pd-rate { grid-template-columns: 1fr; gap: 20px; }
  .pd-rate-n { font-size: 120px; }
  .pd-rate-n small { font-size: 56px; }
  .pd-scmp { grid-template-columns: 1fr; }
  .pd-scatter { position: static; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pd-scard { position: static; width: auto; transform: none !important; }
  .pd-arrow { transform: rotate(90deg); padding: 4px 0; }
  .pd-review { grid-template-columns: 1fr; padding: 16px; }
  .pd-crit { grid-template-columns: 1fr 1fr; }
}
