diff --git a/src/shared/versions.js b/src/shared/versions.js
index 0a1cb7c..0af5670 100644
--- a/src/shared/versions.js
+++ b/src/shared/versions.js
@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.7.17',
-  gatewayClient: '0.7.17',
+  macClient: '0.7.18',
+  gatewayClient: '0.7.18',
   gatewayBackend: '0.7.1',
 });
 
diff --git a/src/web/styles.css b/src/web/styles.css
index b71f37c..ee77910 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -1681,7 +1681,7 @@ p {
 }
 
 .client-panel.has-subscription .client-form {
-  height: min(640px, calc(100vh - 120px));
+  height: var(--client-work-height);
 }
 
 .client-power-section p {
@@ -2076,8 +2076,21 @@ p {
 }
 
 @media (min-width: 921px) {
+  .client-panel.has-subscription {
+    --client-work-height: min(640px, calc(100vh - 120px));
+    --client-power-top: calc((var(--client-work-height) - 96px) / 2);
+  }
+
+  .client-panel.has-subscription .client-power-section {
+    align-self: center;
+    align-content: start;
+    box-sizing: border-box;
+    height: var(--client-work-height);
+    padding-top: var(--client-power-top);
+  }
+
   .client-panel.has-subscription .client-form-content {
-    padding-top: 36px;
+    padding-top: var(--client-power-top);
   }
 }
 
diff --git a/test/web/responsive-layout-contract.test.js b/test/web/responsive-layout-contract.test.js
index d929ee8..4b0e177 100644
--- a/test/web/responsive-layout-contract.test.js
+++ b/test/web/responsive-layout-contract.test.js
@@ -21,9 +21,11 @@ test('desktop layout keeps the power control on a symmetric center axis', () =>
   assert.match(form, /grid-column:\s*3/);
   assert.match(form, /position:\s*static/);
   assert.doesNotMatch(form, /\bleft\s*:|translateX|transition:[^;]*(?:left|width|transform)/);
-  assert.match(styles, /\.client-panel\.has-subscription \.client-form \{[\s\S]*height:\s*min\(640px, calc\(100vh - 120px\)\)/);
+  assert.match(styles, /\.client-panel\.has-subscription \.client-form \{[\s\S]*height:\s*var\(--client-work-height\)/);
   assert.match(rule('.client-form-content'), /align-content:\s*start/);
-  assert.match(styles, /@media \(min-width: 921px\)[\s\S]*\.client-panel\.has-subscription \.client-form-content \{[\s\S]*padding-top:\s*36px/);
+  assert.match(styles, /--client-power-top:\s*calc\(\(var\(--client-work-height\) - 96px\) \/ 2\)/);
+  assert.match(styles, /\.client-panel\.has-subscription \.client-power-section \{[\s\S]*height:\s*var\(--client-work-height\);[\s\S]*padding-top:\s*var\(--client-power-top\)/);
+  assert.match(styles, /\.client-panel\.has-subscription \.client-form-content \{[\s\S]*padding-top:\s*var\(--client-power-top\)/);
 });
 
 test('tablet and mobile regions use normal flow with viewport-safe widths', () => {