Sync styleguide 2026.05.18.1

public/assets/styleguide.upstream.css

@@ -195,6 +195,7 @@
   --surface-content-block-card-content: var(--color-white);
   --radius-picture-full-width: var(--radius-card);
   --layout-content-cards-group-gap: var(--spacing-small);
+  --layout-public-page-pattern-call-to-action-box-width: calc(var(--dimension-public-content-width) * 0.5);
   --layout-page-layout-public-2-column-columns: repeat(2, minmax(0, 1fr));
   --layout-page-layout-public-2-column-gap: var(--spacing-large);
   --surface-card-list-drawer: var(--color-background-purple);
@@ -4682,6 +4683,20 @@ main {
   width: 100%;
 }
 
+.sg-public-page-pattern-call-to-action-box {
+  width: var(--layout-public-page-pattern-call-to-action-box-width);
+  max-width: 100%;
+  margin-inline: auto;
+}
+
+.sg-public-page-pattern-call-to-action-box__action {
+  display: flex;
+}
+
+.sg-public-page-pattern-call-to-action-box__action .sg-button--cta {
+  width: 100%;
+}
+
 .sg-public-page-pattern-text-and-picture-right {
   --layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
   --layout-public-page-pattern-text-picture-gap: var(--spacing-large);
@@ -4806,5 +4821,9 @@ main {
   .sg-public-page-pattern-text-and-picture-fullwidth > .sg-picture-full-width {
     width: 100%;
   }
+
+  .sg-public-page-pattern-call-to-action-box {
+    width: 100%;
+  }
 }