:root {
  --hpmcx-slate: #596671;
  --hpmcx-blue: #1c9ad6;
  --hpmcx-navy: #222e67;
  --hpmcx-orange: #f58220;
  --hpmcx-ink: #17202a;
  --hpmcx-muted: #61707e;
  --hpmcx-paper: #f7f5ef;
  --hpmcx-panel: rgba(255,255,255,.74);
  --hpmcx-panel-strong: rgba(255,255,255,.93);
  --hpmcx-line: rgba(34,46,103,.14);
  --hpmcx-shadow: 0 20px 60px rgba(34,46,103,.11);
}

[data-hpmcx-theme="dark"] {
  --hpmcx-ink: #f5f8fb;
  --hpmcx-muted: #aab6c5;
  --hpmcx-paper: #101525;
  --hpmcx-panel: rgba(23,32,50,.72);
  --hpmcx-panel-strong: rgba(23,32,50,.94);
  --hpmcx-line: rgba(255,255,255,.14);
  --hpmcx-shadow: 0 24px 80px rgba(0,0,0,.32);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  color: var(--hpmcx-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--hpmcx-paper);
}
button { font: inherit; }
a { color: inherit; }

.hpmcx-app {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr) 58px;
  gap: 12px;
  padding: 16px 22px;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  color: var(--hpmcx-ink);
  background:
    radial-gradient(circle at 12% 20%, rgba(28,154,214,.16), transparent 27%),
    radial-gradient(circle at 87% 77%, rgba(245,130,32,.13), transparent 31%),
    linear-gradient(135deg, #fbfaf7 0%, var(--hpmcx-paper) 50%, #edf4f7 100%);
}
[data-hpmcx-theme="dark"] .hpmcx-app {
  background: linear-gradient(135deg, #0d1220 0%, #121a2d 55%, #0f1726 100%);
}
.hpmcx-app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(34,46,103,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,46,103,.038) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 45%, black, transparent 84%);
  opacity: .75;
  z-index: -2;
}

.hpmcx-topbar,
.hpmcx-footer {
  position: relative;
  z-index: 20;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--hpmcx-line);
  border-radius: 999px;
  background: var(--hpmcx-panel-strong);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(34,46,103,.08);
}
.hpmcx-topbar { padding: 0 12px 0 16px; }
.hpmcx-footer { padding: 0 12px 0 20px; }
.hpmcx-brand { min-width: 0; display: flex; gap: 12px; align-items: center; text-decoration: none; }
.hpmcx-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 34px;
  border-radius: 13px;
  color: white;
  background: linear-gradient(135deg, var(--hpmcx-navy), var(--hpmcx-blue));
  font-weight: 900;
  letter-spacing: -.045em;
}
.hpmcx-brand-copy { display: grid; line-height: 1; }
.hpmcx-brand-copy strong { font-size: .95rem; letter-spacing: -.02em; }
.hpmcx-brand-copy small { margin-top: 4px; color: var(--hpmcx-muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 850; }
.hpmcx-actions,
.hpmcx-arrows { display: flex; gap: 8px; align-items: center; }
.hpmcx-icon,
.hpmcx-arrows button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hpmcx-line);
  border-radius: 999px;
  color: var(--hpmcx-ink);
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, opacity .18s ease;
}
.hpmcx-icon:hover,
.hpmcx-arrows button:hover { transform: translateY(-1px); border-color: rgba(28,154,214,.55); }
.hpmcx-arrows button:last-child { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--hpmcx-navy), var(--hpmcx-blue)); }
.hpmcx-arrows button:disabled { opacity: .35; cursor: not-allowed; transform: none; }

.hpmcx-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
}
.hpmcx-slide {
  display: none;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
  align-content: center;
  gap: clamp(14px, 2vh, 22px);
  padding: clamp(24px, 4.2vw, 58px) clamp(30px, 6.3vw, 90px);
  animation: hpmcxFade .25s ease both;
}
.hpmcx-slide.hpmcx-active { display: grid; }
@keyframes hpmcxFade { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.hpmcx-eyebrow {
  margin: 0;
  color: var(--hpmcx-orange);
  font-size: clamp(.64rem, .72vw, .78rem);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hpmcx-slide h1,
.hpmcx-slide h2,
.hpmcx-slide h3,
.hpmcx-slide p { margin: 0; }
.hpmcx-slide h1 {
  max-width: 770px;
  font-size: clamp(2.7rem, 5.1vw, 4.65rem);
  line-height: .92;
  letter-spacing: -.072em;
}
.hpmcx-slide h2 {
  max-width: 1010px;
  font-size: clamp(1.9rem, 3.05vw, 3.05rem);
  line-height: 1;
  letter-spacing: -.058em;
}
.hpmcx-slide h3 {
  font-size: clamp(.98rem, 1.1vw, 1.15rem);
  line-height: 1.08;
  letter-spacing: -.032em;
}
.hpmcx-lead,
.hpmcx-body {
  max-width: 720px;
  color: var(--hpmcx-muted);
  font-size: clamp(1.02rem, 1.33vw, 1.24rem);
  line-height: 1.38;
}
.hpmcx-copy { display: grid; gap: 18px; min-width: 0; }

.hpmcx-glow { position: absolute; border-radius: 999px; filter: blur(18px); opacity: .65; z-index: -1; pointer-events: none; }
.hpmcx-glow-blue { width: min(330px, 27vw); height: min(330px, 27vw); right: 8%; top: 9%; background: rgba(28,154,214,.16); }
.hpmcx-glow-orange { width: min(250px, 22vw); height: min(250px, 22vw); left: 7%; bottom: 10%; background: rgba(245,130,32,.14); }

.hpmcx-cover-grid,
.hpmcx-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  gap: clamp(24px, 4.4vw, 64px);
  align-items: center;
  min-height: 0;
}
.hpmcx-reverse { grid-template-columns: minmax(330px, .9fr) minmax(0, 1.1fr); }

.hpmcx-statement,
.hpmcx-callout,
.hpmcx-closing,
.hpmcx-card-grid article,
.hpmcx-points article,
.hpmcx-principle-grid article,
.hpmcx-roadmap-grid article,
.hpmcx-priority-grid article,
.hpmcx-capability-grid article,
.hpmcx-model-flow article {
  border: 1px solid var(--hpmcx-line);
  background: var(--hpmcx-panel);
  box-shadow: var(--hpmcx-shadow);
  backdrop-filter: blur(16px);
}
.hpmcx-statement { border-radius: 30px; padding: clamp(22px, 3vw, 34px); }
.hpmcx-statement span { display:block; margin-bottom: 14px; color: var(--hpmcx-blue); font-size: .72rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.hpmcx-statement strong { display:block; font-size: clamp(1.35rem, 1.9vw, 2.05rem); line-height: 1.08; letter-spacing: -.045em; }

.hpmcx-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  max-width: 960px;
}
.hpmcx-metrics article { border-top: 1px solid var(--hpmcx-line); padding-top: 13px; }
.hpmcx-metrics b { display:block; color: var(--hpmcx-navy); font-size: clamp(1.75rem, 2.85vw, 3.1rem); line-height: .86; letter-spacing: -.05em; }
[data-hpmcx-theme="dark"] .hpmcx-metrics b { color: #70c9ef; }
.hpmcx-metrics span { display:block; margin-top: 7px; color: var(--hpmcx-muted); font-size: .88rem; line-height: 1.22; font-weight: 750; }

.hpmcx-points { display: grid; gap: 12px; min-width: 0; }
.hpmcx-points article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  border-radius: 23px;
  padding: 17px;
}
.hpmcx-compact-points article { padding: 15px; }
.hpmcx-points span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--hpmcx-navy), var(--hpmcx-blue));
  font-size: .68rem;
  font-weight: 900;
}
.hpmcx-points p,
.hpmcx-card-grid p,
.hpmcx-roadmap-grid p,
.hpmcx-capability-grid p {
  margin-top: 6px;
  color: var(--hpmcx-muted);
  font-size: clamp(.84rem, .9vw, .95rem);
  line-height: 1.32;
}

.hpmcx-model-flow,
.hpmcx-card-grid,
.hpmcx-roadmap-grid,
.hpmcx-principle-grid,
.hpmcx-priority-grid,
.hpmcx-capability-grid { display: grid; gap: 13px; min-height: 0; }
.hpmcx-model-flow { grid-template-columns: repeat(4, minmax(0,1fr)); }
.hpmcx-card-grid.hpmcx-four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.hpmcx-card-grid.hpmcx-three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.hpmcx-roadmap-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 11px; }
.hpmcx-principle-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.hpmcx-priority-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.hpmcx-capability-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }

.hpmcx-model-flow article { position: relative; min-height: 142px; padding: 20px; border-radius: 26px; background: linear-gradient(180deg, var(--hpmcx-panel-strong), var(--hpmcx-panel)); overflow: hidden; }
.hpmcx-model-flow article::after { content:""; position:absolute; right:-19px; top:48%; width: 42px; height: 2px; background: var(--hpmcx-blue); opacity:.45; }
.hpmcx-model-flow article:last-child::after { display:none; }
.hpmcx-model-flow span,
.hpmcx-card-grid span,
.hpmcx-priority-grid span { color: var(--hpmcx-blue); font-size: .7rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.hpmcx-model-flow strong { display:block; margin-top: 26px; font-size: 1.18rem; letter-spacing: -.04em; }
.hpmcx-model-flow small { display:block; margin-top: 7px; color: var(--hpmcx-muted); font-size: .86rem; }
.hpmcx-model-flow .hpmcx-highlight { border-color: rgba(245,130,32,.35); }
.hpmcx-callout { display:flex; gap: 14px; align-items:center; max-width: 980px; padding: 16px 20px; border-radius: 22px; }
.hpmcx-callout strong { color: var(--hpmcx-navy); white-space: nowrap; }
[data-hpmcx-theme="dark"] .hpmcx-callout strong { color: #70c9ef; }
.hpmcx-callout span { color: var(--hpmcx-muted); line-height: 1.35; }

.hpmcx-card-grid article { min-height: 164px; border-radius: 25px; padding: 18px; }
.hpmcx-card-grid h3 { margin-top: 28px; }
.hpmcx-principle-grid article { display:grid; gap:7px; border-radius: 22px; padding: 16px 18px; }
.hpmcx-principle-grid strong { font-size: .98rem; letter-spacing: -.025em; }
.hpmcx-principle-grid span { color: var(--hpmcx-muted); font-size: .9rem; line-height: 1.28; }
.hpmcx-roadmap-grid article { min-height: 166px; border-radius: 23px; padding: 16px; }
.hpmcx-roadmap-grid span { display:grid; place-items:center; width: 34px; height: 34px; border-radius: 50%; color:#fff; background: var(--hpmcx-slate); font-weight: 900; }
.hpmcx-roadmap-grid .hpmcx-current span { background: linear-gradient(135deg, var(--hpmcx-navy), var(--hpmcx-blue)); }
.hpmcx-roadmap-grid h3 { margin-top: 22px; }
.hpmcx-priority-grid article { min-height: 102px; border-radius: 21px; padding: 15px; }
.hpmcx-priority-grid strong { display:block; margin-top: 15px; font-size: clamp(.82rem, .88vw, .94rem); line-height: 1.15; letter-spacing: -.02em; }
.hpmcx-capability-grid article { min-height: 172px; border-radius: 25px; padding: 20px; }
.hpmcx-capability-grid h3 { color: var(--hpmcx-navy); }
[data-hpmcx-theme="dark"] .hpmcx-capability-grid h3 { color: #70c9ef; }
.hpmcx-capability-grid p { margin-top: 28px; }
.hpmcx-closing { max-width: 950px; border-radius: 28px; padding: 23px 28px; }
.hpmcx-closing strong { display:block; max-width: 850px; font-size: clamp(1.16rem, 1.7vw, 1.72rem); line-height: 1.14; letter-spacing: -.04em; }

.hpmcx-footer-meta { display: flex; align-items: center; gap: 16px; min-width: 220px; font-size: .84rem; }
.hpmcx-footer-meta span { color: var(--hpmcx-muted); font-weight: 750; white-space: nowrap; }
.hpmcx-footer-meta b { color: var(--hpmcx-navy); }
[data-hpmcx-theme="dark"] .hpmcx-footer-meta b { color: #70c9ef; }
.hpmcx-dots { display:flex; justify-content:center; align-items:center; gap:7px; flex: 1; }
.hpmcx-dots button { width:7px; height:7px; padding:0; border:0; border-radius:999px; background: rgba(89,102,113,.35); cursor:pointer; }
.hpmcx-dots button.hpmcx-dot-active { width: 24px; background: var(--hpmcx-blue); }
.hpmcx-progress { position:absolute; left: 26px; right: 26px; top: -5px; height:3px; border-radius:999px; background: rgba(89,102,113,.14); overflow:hidden; }
.hpmcx-progress span { display:block; height:100%; width:0; background: linear-gradient(90deg, var(--hpmcx-blue), var(--hpmcx-orange)); transition: width .25s ease; }

.hpmcx-notes { position: fixed; inset: 0; z-index: 100; display:grid; place-items:center; padding: 24px; background: rgba(16,21,37,.38); backdrop-filter: blur(10px); }
.hpmcx-notes[hidden] { display:none; }
.hpmcx-notes-card { position:relative; width:min(620px, calc(100vw - 40px)); border:1px solid var(--hpmcx-line); border-radius:28px; background: var(--hpmcx-panel-strong); box-shadow: 0 24px 80px rgba(0,0,0,.22); padding:28px; }
.hpmcx-notes-card button { position:absolute; top:14px; right:14px; width:34px; height:34px; border:1px solid var(--hpmcx-line); border-radius:50%; background: transparent; color:var(--hpmcx-ink); cursor:pointer; }
.hpmcx-notes-card span { color: var(--hpmcx-orange); font-size:.76rem; font-weight:900; letter-spacing:.15em; text-transform: uppercase; }
.hpmcx-notes-card p { margin-top: 12px; color: var(--hpmcx-muted); font-size: 1.04rem; line-height: 1.5; }

.hpmcx-slide.hpmcx-compact { gap: 10px; padding-block: 22px; }
.hpmcx-slide.hpmcx-compact h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); }
.hpmcx-slide.hpmcx-compact h2 { font-size: clamp(1.72rem, 2.65vw, 2.6rem); }
.hpmcx-slide.hpmcx-compact .hpmcx-card-grid article { min-height: 142px; }
.hpmcx-slide.hpmcx-compact .hpmcx-roadmap-grid article { min-height: 148px; }
.hpmcx-slide.hpmcx-compact .hpmcx-priority-grid article { min-height: 88px; }
.hpmcx-slide.hpmcx-tight .hpmcx-card-grid p,
.hpmcx-slide.hpmcx-tight .hpmcx-roadmap-grid p,
.hpmcx-slide.hpmcx-tight .hpmcx-capability-grid p { font-size: .78rem; line-height: 1.2; }

@media (max-height: 760px) {
  .hpmcx-app { grid-template-rows: 50px minmax(0,1fr) 50px; gap: 9px; padding: 12px 18px; }
  .hpmcx-slide { gap: 12px; padding-block: 22px; }
  .hpmcx-slide h1 { font-size: clamp(2.45rem, 4.7vw, 4.2rem); }
  .hpmcx-slide h2 { font-size: clamp(1.75rem, 2.72vw, 2.7rem); }
  .hpmcx-lead, .hpmcx-body { font-size: clamp(.96rem, 1.1vw, 1.12rem); }
  .hpmcx-card-grid article { min-height: 142px; }
  .hpmcx-card-grid h3 { margin-top: 20px; }
  .hpmcx-roadmap-grid article { min-height: 145px; }
  .hpmcx-priority-grid article { min-height: 88px; }
  .hpmcx-capability-grid article { min-height: 145px; }
}

@media (max-width: 1080px) {
  .hpmcx-app { grid-template-rows: 54px minmax(0,1fr) 54px; padding: 12px 16px; gap: 9px; }
  .hpmcx-slide { padding: 24px; gap: 12px; }
  .hpmcx-slide h1 { font-size: clamp(2.35rem, 8vw, 4rem); }
  .hpmcx-slide h2 { font-size: clamp(1.55rem, 4.5vw, 2.65rem); }
  .hpmcx-cover-grid,
  .hpmcx-split-grid,
  .hpmcx-reverse { grid-template-columns: 1fr; gap: 16px; }
  .hpmcx-statement { padding: 18px; }
  .hpmcx-statement strong { font-size: 1.32rem; }
  .hpmcx-metrics,
  .hpmcx-card-grid.hpmcx-four,
  .hpmcx-card-grid.hpmcx-three,
  .hpmcx-model-flow,
  .hpmcx-roadmap-grid,
  .hpmcx-capability-grid,
  .hpmcx-priority-grid,
  .hpmcx-principle-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hpmcx-card-grid article,
  .hpmcx-roadmap-grid article,
  .hpmcx-capability-grid article,
  .hpmcx-model-flow article { min-height: 124px; }
  .hpmcx-card-grid h3,
  .hpmcx-roadmap-grid h3,
  .hpmcx-capability-grid p,
  .hpmcx-model-flow strong { margin-top: 12px; }
  .hpmcx-callout { display:block; }
  .hpmcx-callout span { display:block; margin-top: 5px; }
  .hpmcx-footer-meta { min-width: auto; }
  .hpmcx-footer-meta > span { display:none; }
}

@media (max-width: 650px) {
  .hpmcx-app { min-height: 520px; grid-template-rows: 46px minmax(0,1fr) 46px; padding: 8px 10px; gap: 7px; }
  .hpmcx-brand-copy small,
  .hpmcx-dots { display:none; }
  .hpmcx-mark { width: 38px; height: 30px; border-radius: 12px; }
  .hpmcx-brand-copy strong { font-size: .84rem; }
  .hpmcx-actions { gap: 5px; }
  .hpmcx-icon,
  .hpmcx-arrows button { width: 32px; height: 32px; }
  .hpmcx-topbar { padding-left: 10px; padding-right: 8px; }
  .hpmcx-footer { padding-left: 14px; padding-right: 8px; }
  .hpmcx-slide { padding: 12px; gap: 8px; }
  .hpmcx-eyebrow { font-size: .58rem; letter-spacing: .15em; }
  .hpmcx-slide h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .hpmcx-slide h2 { font-size: clamp(1.25rem, 6vw, 1.85rem); line-height: 1.02; }
  .hpmcx-slide h3 { font-size: .84rem; }
  .hpmcx-lead,
  .hpmcx-body { font-size: .82rem; line-height: 1.25; }
  .hpmcx-copy { gap: 8px; }
  .hpmcx-cover-grid,
  .hpmcx-split-grid,
  .hpmcx-reverse { gap: 8px; }
  .hpmcx-statement,
  .hpmcx-card-grid article,
  .hpmcx-points article,
  .hpmcx-principle-grid article,
  .hpmcx-roadmap-grid article,
  .hpmcx-priority-grid article,
  .hpmcx-capability-grid article,
  .hpmcx-model-flow article,
  .hpmcx-callout,
  .hpmcx-closing { padding: 10px; border-radius: 16px; min-height: 0; }
  .hpmcx-statement span { margin-bottom: 6px; font-size: .58rem; }
  .hpmcx-statement strong { font-size: 1rem; }
  .hpmcx-metrics,
  .hpmcx-card-grid.hpmcx-four,
  .hpmcx-card-grid.hpmcx-three,
  .hpmcx-model-flow,
  .hpmcx-roadmap-grid,
  .hpmcx-capability-grid,
  .hpmcx-priority-grid,
  .hpmcx-principle-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
  .hpmcx-metrics b { font-size: 1.5rem; }
  .hpmcx-metrics span { font-size: .64rem; line-height: 1.12; }
  .hpmcx-points { gap: 7px; }
  .hpmcx-points article { grid-template-columns: 32px 1fr; gap: 8px; }
  .hpmcx-points span { width: 28px; height: 28px; border-radius: 10px; font-size: .54rem; }
  .hpmcx-points p,
  .hpmcx-card-grid p,
  .hpmcx-roadmap-grid p,
  .hpmcx-capability-grid p,
  .hpmcx-principle-grid span { font-size: .68rem; line-height: 1.18; }
  .hpmcx-card-grid h3,
  .hpmcx-roadmap-grid h3,
  .hpmcx-capability-grid p,
  .hpmcx-priority-grid strong,
  .hpmcx-model-flow strong { margin-top: 6px; }
  .hpmcx-model-flow span,
  .hpmcx-card-grid span,
  .hpmcx-priority-grid span { font-size: .54rem; }
  .hpmcx-model-flow strong { font-size: .82rem; }
  .hpmcx-model-flow small { font-size: .62rem; margin-top: 2px; }
  .hpmcx-principle-grid strong,
  .hpmcx-priority-grid strong { font-size: .72rem; line-height: 1.08; }
  .hpmcx-roadmap-grid span { width: 26px; height: 26px; font-size: .68rem; }
  .hpmcx-closing strong { font-size: .95rem; }
  .hpmcx-footer-meta { font-size: .76rem; }
}

@media (max-width: 430px) and (max-height: 720px) {
  .hpmcx-slide { padding: 10px; }
  .hpmcx-slide h2 { font-size: 1.22rem; }
  .hpmcx-lead,
  .hpmcx-body { font-size: .74rem; }
  .hpmcx-points p,
  .hpmcx-card-grid p,
  .hpmcx-roadmap-grid p,
  .hpmcx-capability-grid p,
  .hpmcx-principle-grid span { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}