* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #F6F9F9; color: #0F2A33; font-family: 'Hanken Grotesk', system-ui, sans-serif; }
.pp-shell { min-height: 100vh; }
.pp-container { max-width: 1180px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.pp-hero { background: #0F2A33; color: #E9EFF0; }
.pp-hero .pp-container { padding-top: 92px; padding-bottom: 88px; }
.pp-hero-compact .pp-container { padding-top: 72px; padding-bottom: 76px; }
.pp-hero-compact .pp-h1 { max-width: 780px; font-size: clamp(40px, 4vw, 58px); }
.pp-eyebrow { display: block; margin-bottom: 20px; color: #0D9488; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.pp-dark .pp-eyebrow, .pp-hero .pp-eyebrow { color: #5EEAD4; }
.pp-h1 { max-width: 900px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(42px, 5vw, 66px); font-weight: 500; line-height: 1.04; letter-spacing: -.04em; }
.pp-h2 { max-width: 820px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(34px, 4vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.pp-lead { max-width: 780px; margin-top: 20px; color: #41595F; font-size: 18px; line-height: 1.7; }
.pp-hero .pp-lead, .pp-dark .pp-lead { color: rgba(243,244,246,.72); }
.pp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.pp-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1px solid #0D9488; border-radius: 4px; background: #0D9488; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; }
.pp-button:hover, .pp-button:focus-visible { background: #0B8276; outline: none; }
.pp-button-secondary { border-color: rgba(243,244,246,.28); background: transparent; color: #fff; }
.pp-button-light { border-color: #0D9488; background: transparent; color: #0D9488; }
.pp-section .pp-container { padding-top: 96px; padding-bottom: 96px; }
.pp-dark { background: #0F2A33; color: #E9EFF0; }
.pp-white { background: #fff; border-top: 1px solid #D3DEE0; border-bottom: 1px solid #D3DEE0; }
.pp-figure { margin-top: 44px; overflow: hidden; border: 1px solid #D3DEE0; border-radius: 14px; background: #fff; }
.pp-figure img { display: block; width: 100%; height: auto; }
.pp-caption { padding: 14px 18px; color: #60757A; font-size: 13px; line-height: 1.55; }
.pp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.pp-card { padding: 26px; border: 1px solid #D3DEE0; border-radius: 12px; background: #fff; }
.pp-card-label { display: block; margin-bottom: 12px; color: #0D9488; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.pp-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 600; line-height: 1.25; }
.pp-card p { margin-top: 10px; color: #41595F; font-size: 15px; line-height: 1.6; }
.pp-explore { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 40px; }
.pp-explore a { display: block; min-height: 178px; padding: 30px; border: 1px solid #D3DEE0; border-radius: 14px; background: #fff; color: #0F2A33; text-decoration: none; }
.pp-explore a:hover, .pp-explore a:focus-visible { border-color: #0D9488; outline: none; transform: translateY(-2px); }
.pp-explore span { color: #0D9488; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.pp-explore h3 { margin-top: 16px; font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 600; }
.pp-explore p { margin-top: 10px; color: #50666B; font-size: 15px; line-height: 1.6; }
.pp-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.pp-four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.pp-four .pp-card { padding: 24px; }
.pp-prototype { margin-top: 42px; }
.pp-prototype-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
.pp-prototype-tabs::-webkit-scrollbar { display: none; }
.pp-prototype-tab { flex: 0 0 auto; min-height: 42px; padding: 0 14px; border: 1px solid rgba(243,244,246,.22); border-radius: 4px; background: transparent; color: rgba(243,244,246,.7); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; cursor: pointer; }
.pp-prototype-tab:hover, .pp-prototype-tab:focus-visible { border-color: #5EEAD4; color: #fff; outline: none; }
.pp-prototype-tab[aria-selected='true'] { border-color: #5EEAD4; background: #0D9488; color: #fff; }
.pp-prototype-frame { margin-top: 16px; overflow: auto; border: 1px solid rgba(243,244,246,.2); border-radius: 14px; background: #071B21; box-shadow: 0 28px 80px rgba(0,0,0,.28); }
.pp-prototype-image { display: block; width: 100%; min-width: 820px; height: auto; }
.pp-prototype-meta { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px; margin-top: 18px; }
.pp-prototype-count { display: block; margin-bottom: 6px; color: #5EEAD4; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .13em; }
.pp-prototype-title { display: block; margin-bottom: 4px; color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 600; }
.pp-prototype-description { display: block; max-width: 720px; color: rgba(243,244,246,.68); font-size: 14.5px; line-height: 1.6; }
.pp-prototype-controls { display: flex; gap: 8px; }
.pp-icon-button, .pp-full-image { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 13px; border: 1px solid rgba(243,244,246,.22); border-radius: 4px; background: transparent; color: #fff; font-size: 13px; text-decoration: none; cursor: pointer; }
.pp-icon-button:hover, .pp-icon-button:focus-visible, .pp-full-image:hover, .pp-full-image:focus-visible { border-color: #5EEAD4; outline: none; }
.pp-note { margin-top: 26px; color: rgba(243,244,246,.55); font-size: 13px; line-height: 1.6; }
.pp-system-view { display: grid; grid-template-columns: 1fr auto 1.35fr auto 1fr; align-items: stretch; gap: 14px; margin-top: 42px; }
.pp-system-column { padding: 28px; border: 1px solid #D3DEE0; border-radius: 12px; background: #fff; }
.pp-system-column h3 { font-family: 'Space Grotesk', sans-serif; font-size: 22px; }
.pp-system-column ul { margin-top: 18px; list-style: none; }
.pp-system-column li { padding: 8px 0; border-bottom: 1px solid #E6ECEC; color: #41595F; font-size: 14.5px; }
.pp-system-arrow { align-self: center; color: #0D9488; font-size: 24px; }
.pp-responsibility { margin-top: 22px; padding: 22px 26px; border-radius: 10px; background: #0F2A33; color: #E9EFF0; font-size: 18px; font-weight: 600; line-height: 1.5; }
.pp-harness { margin-top: 40px; overflow-x: auto; border: 1px solid rgba(94,234,212,.26); border-radius: 14px; background: #0F2A33; }
.pp-harness img { display: block; width: 100%; min-width: 860px; height: auto; }
.pp-next { background: #D9F3EF; }
.pp-next .pp-container { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 54px; padding-bottom: 54px; }
.pp-next h2 { font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 600; line-height: 1.15; }
.pp-next p { margin-top: 8px; color: #41595F; font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) {
  .pp-steps, .pp-three { grid-template-columns: 1fr; }
  .pp-four, .pp-explore { grid-template-columns: 1fr 1fr; }
  .pp-system-view { grid-template-columns: 1fr; }
  .pp-system-arrow { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 760px) {
  .pp-container { padding-left: 20px; padding-right: 20px; }
  .pp-hero .pp-container { padding-top: 70px; padding-bottom: 66px; }
  .pp-hero-compact .pp-container { padding-top: 58px; padding-bottom: 64px; }
  .pp-section .pp-container { padding-top: 72px; padding-bottom: 72px; }
  .pp-h1 { font-size: 44px; }
  .pp-h2 { font-size: 35px; }
  .pp-lead { font-size: 17px; }
  .pp-four, .pp-explore { grid-template-columns: 1fr; }
  .pp-prototype-image { min-width: 780px; }
  .pp-prototype-meta { grid-template-columns: 1fr; }
  .pp-prototype-controls { flex-wrap: wrap; }
  .pp-next .pp-container { align-items: flex-start; flex-direction: column; }
}