@primer/brand-css 0.64.1-rc.9bfb4676 → 0.65.0-rc.0895cfab

package/components/Accordion/Accordion.css

@@ -8,13 +8,67 @@
 }
 
 .Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__summary {
-  border-bottom: var(--brand-borderWidth-thicker) solid var(--brand-Accordion-border-color-emphasis);
+  background-color: var(--brand-color-canvas-subtle);
+  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  padding-block: var(--base-size-20);
+  padding-inline: var(--base-size-20);
+  gap: 0;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.Accordion__summary--emphasis::before {
+  content: '';
+  display: block;
+  width: calc(var(--base-size-8) - 1px);
+  height: var(--base-size-12);
+  flex-shrink: 0;
+  margin-inline-end: var(--base-size-12);
+  background-color: var(--brand-Accordion-indicator-idle);
+}
+
+.Accordion__summary--emphasis:hover::before {
+  background-color: var(--brand-Accordion-indicator-hover);
+}
+
+details[open] > .Accordion__summary--emphasis::before {
+  background-color: var(--brand-Accordion-indicator-active);
+}
+
+.Accordion__summary--emphasis :is(h3, h4, h5, h6) {
+  font-family: var(--brand-fontStack-monospace);
+  font-size: var(--brand-text-size-100);
+  font-weight: var(--brand-text-weight-500);
+  line-height: var(--brand-text-lineHeight-100);
+  letter-spacing: 0.15px;
+  text-transform: uppercase;
+}
+
+.Accordion--emphasis:not(.Accordion .Accordion)
+  + .Accordion--emphasis:not(.Accordion .Accordion)
+  > .Accordion__summary {
+  border-block-start: none;
+}
+
+.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content {
+  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  padding-block-start: var(--base-size-12);
+  padding-block-end: var(--base-size-12);
+  padding-inline: var(--base-size-20);
+}
+
+.Accordion--emphasis .Accordion--default:last-child {
+  border-bottom: none;
+}
+
+.Accordion--emphasis .Accordion--default:last-child::after {
+  display: none;
 }
 
 .Accordion--default::after {
   content: '';
-  border: 3px solid var(--brand-Accordion-border-color-default);
-  height: 0;
+  background-color: var(--brand-Accordion-border-color-default);
+  height: var(--brand-borderWidth-thin);
   transition: var(--brand-animation-duration-fast) transform;
   transform: scaleY(0);
   transform-origin: 50% 100%;
@@ -24,8 +78,10 @@
   left: 0;
 }
 
-.Accordion--default:hover::after {
-  transform: scaleY(0.35);
+.Accordion--default:hover::after,
+details[open].Accordion--default::after {
+  background-color: var(--brand-color-accent-primary);
+  transform: scaleY(1);
 }
 
 .Accordion__summary {
@@ -48,20 +104,27 @@
   outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
 }
 
+/* When open, move focus ring to the details element to wrap summary + content as one unit */
+details[open].Accordion:has(> summary:focus-visible) {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-2);
+}
+
+details[open].Accordion > .Accordion__summary:focus-visible {
+  outline: none;
+}
+
 .Accordion__summary--collapsed,
 .Accordion__summary--expanded {
-  font-family: var(--brand-fontStack-sansSerif);
-  font-weight: 500;
   cursor: pointer;
-  font-size: 32px;
-  line-height: 24px;
-  text-align: center;
-  height: 24px;
-  width: 24px;
-  -webkit-text-fill-color: transparent;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--base-size-24);
+  width: var(--base-size-24);
+  color: var(--brand-color-text-default);
   position: absolute;
+  transition: opacity var(--brand-animation-duration-faster) ease;
 }
 
 .Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary--collapsed,
@@ -69,134 +132,110 @@
   right: 0;
 }
 
+.Accordion__summary--emphasis .Accordion__summary--collapsed,
+.Accordion__summary--emphasis .Accordion__summary--expanded {
+  position: static;
+  order: 1;
+}
+
+.Accordion__summary--emphasis .Accordion__summary--collapsed {
+  margin-inline-start: auto;
+}
+
+.Accordion__summary--emphasis .Accordion__summary--expanded {
+  margin-inline-start: calc(-1 * var(--base-size-24));
+}
+
 .Accordion__summary--reversed-toggles .Accordion__summary--collapsed,
 .Accordion__summary--reversed-toggles .Accordion__summary--expanded {
   left: 0;
 }
 
-.Accordion__summary--default .Accordion__summary--collapsed::before,
-.Accordion__summary--default .Accordion__summary--expanded::after {
-  transition: transform var(--brand-animation-duration-fast) ease, opacity var(--brand-animation-duration-faster) ease;
-  display: block;
-  background: linear-gradient(
-    -70deg,
-    var(--brand-Accordion-toggle-color-start) 0%,
-    var(--brand-Accordion-toggle-color-end) 100%
-  );
-  -webkit-background-clip: text;
-  background-clip: text;
+.Accordion__summary--default .Accordion__summary--collapsed,
+.Accordion__summary--default .Accordion__summary--expanded {
+  color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-default));
 }
 
 .Accordion__summary--toggleColor-default {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-default);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-default);
 }
 
 .Accordion__summary--toggleColor-blue {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-blue);
 }
 
 .Accordion__summary--toggleColor-blue-purple {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue-purple-start);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-blue-purple-end);
 }
 
 .Accordion__summary--toggleColor-coral {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-coral);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-coral);
 }
 
 .Accordion__summary--toggleColor-green {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-green);
 }
 
 .Accordion__summary--toggleColor-green-blue {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green-blue-start);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-green-blue-end);
 }
 
 .Accordion__summary--toggleColor-gray {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-gray);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-gray);
 }
 
 .Accordion__summary--toggleColor-indigo {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-indigo);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-indigo);
 }
 
 .Accordion__summary--toggleColor-lemon {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lemon);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-lemon);
 }
 
 .Accordion__summary--toggleColor-lime {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lime);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-lime);
 }
 
 .Accordion__summary--toggleColor-orange {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-orange);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-orange);
 }
 
 .Accordion__summary--toggleColor-pink {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-pink);
 }
 
 .Accordion__summary--toggleColor-pink-blue {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink-blue-start);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-pink-blue-end);
 }
 
 .Accordion__summary--toggleColor-purple {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-purple);
 }
 
 .Accordion__summary--toggleColor-purple-red {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple-red-start);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-purple-red-end);
 }
 
 .Accordion__summary--toggleColor-red {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-red);
 }
 
 .Accordion__summary--toggleColor-red-orange {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red-orange-start);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-red-orange-end);
 }
 
 .Accordion__summary--toggleColor-teal {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-teal);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-teal);
 }
 
 .Accordion__summary--toggleColor-yellow {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-yellow);
 }
 
-.Accordion__summary--default .Accordion__summary--collapsed::before {
-  font-weight: var(--base-text-weight-medium);
-  content: '–';
+.Accordion__summary.Accordion__summary--default .Accordion__summary--expanded {
   opacity: 0;
 }
 
-.Accordion__summary--default .Accordion__summary--expanded::after {
-  content: '+';
-}
-
-.Accordion__summary.Accordion__summary--emphasis .Accordion__summary--collapsed,
-.Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {
-  transform: translate(0, -2px);
-}
-
 .Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {
   opacity: 0;
 }
@@ -209,17 +248,15 @@ details[open] .Accordion__summary.Accordion__summary--emphasis .Accordion__summa
   opacity: 0;
 }
 
-details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--collapsed::before {
+details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--expanded {
   opacity: 1;
-  transform: rotateZ(180deg);
 }
 
-details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--expanded::after {
+details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--collapsed {
   opacity: 0;
-  transform: rotateZ(180deg);
 }
 
-.Accordion__summary:not(.Accordion__summary--reversed-toggles) {
+.Accordion__summary--default:not(.Accordion__summary--reversed-toggles) {
   padding-inline-end: var(--base-size-48);
 }
 
@@ -281,7 +318,7 @@ details[open] > .Accordion__content {
 }
 
 .Accordion__summary--default + .Accordion__content {
-  margin-top: calc(var(--base-size-16) * -1); /* for 8px gap between question and answer */
+  margin-top: calc(var(--base-size-12) * -1); /* for 12px gap between question and answer */
 }
 
 details[open] > .Accordion__summary--reversed-toggles + .Accordion__content {

package/components/Card/Card.css

@@ -190,19 +190,11 @@
   grid-area: heading;
 }
 
-.Card--fullWidth:not(.Card--align-center) .Card__heading {
-  max-width: 320px;
-}
-
 .Card__description {
   margin-bottom: var(--base-size-32);
   grid-area: description;
 }
 
-.Card--fullWidth:not(.Card--align-center) .Card__description {
-  max-width: 400px;
-}
-
 .Card__action {
   grid-area: action;
   margin-top: auto;

package/components/FAQ/FAQ.css

@@ -3,6 +3,22 @@
   margin: 0 auto;
 }
 
+.FAQ--variant-gridline {
+  padding-block-end: var(--base-size-40);
+  border-block-end: var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;
+  max-width: 100%;
+}
+
+.FAQ__content-wrapper--gridline {
+  max-width: var(--brand-FAQ-maxWidth-list);
+  margin: 0 auto;
+}
+
+.FAQ__heading-wrapper--gridline {
+  border-block-end: var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;
+  margin-block-end: var(--base-size-40);
+}
+
 .FAQ__heading {
   color: var(--brand-FAQ-color-heading);
   margin-bottom: var(--brand-FAQ-heading-marginBottom);
@@ -11,6 +27,9 @@
 .FAQ__subheading {
   margin-bottom: var(--base-size-16);
   color: var(--brand-color-text-muted);
+  text-transform: uppercase;
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-100);
 }
 
 .FAQ__heading--start {
@@ -49,3 +68,13 @@
   padding: 0;
   margin: 0;
 }
+
+@media screen and (min-width: 63.25rem) {
+  .FAQ__heading-wrapper--gridline {
+    margin-block-end: var(--base-size-48);
+  }
+
+  .FAQ--variant-gridline {
+    padding-block-end: var(--base-size-64);
+  }
+}

package/components/FAQ/FAQGroup.css

@@ -4,18 +4,15 @@
   gap: var(--brand-stack-gap-spacious);
 }
 
-@media screen and (min-width: 48rem) {
-  .FAQGroup {
-    display: grid;
-  }
-
-  .FAQGroup__accordion {
-    display: none;
-  }
+.FAQGroup__accordion {
+  margin-block-start: var(--base-size-48);
 }
 
 .FAQGroup__panel-subHeading {
   margin-block-start: calc(var(--base-size-8) + 1px);
+  text-transform: uppercase;
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-100);
 }
 
 .FAQGroup__tablist .FAQ__heading {
@@ -23,26 +20,62 @@
 }
 
 .FAQGroup__tablist-button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
   background-color: transparent;
-  justify-content: flex-start;
-}
-
-.FAQGroup__tablist-button > span {
+  padding-block: var(--base-size-8);
+  padding-inline: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-12);
+  width: 100%;
+  font-family: var(--brand-fontStack-monospace);
+  font-size: var(--brand-text-size-100);
+  font-weight: var(--brand-text-weight-500);
+  line-height: var(--brand-text-lineHeight-100);
+  letter-spacing: 0.15px;
+  text-transform: uppercase;
+  text-align: start;
+  color: var(--brand-color-text-muted);
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: gap var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
 }
 
-.FAQGroup__tablist-button[aria-selected='true'] {
-  background-color: var(--brand-FAQ-color-tabBg-selected);
+.FAQGroup__tablist-button:focus-visible {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: 2px;
 }
 
-.FAQGroup__tablist-button span {
-  color: var(--brand-color-text-muted);
+.FAQGroup__tablist-button::before {
+  content: '';
+  display: block;
+  width: calc(var(--base-size-8) + var(--base-size-2));
+  height: var(--base-size-12);
+  flex-shrink: 0;
+  background-color: var(--brand-FAQGroup-buttonIndicator-idle);
+  transform: scaleX(0.7);
+  transform-origin: left;
+  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default),
+    background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
 }
 
-.FAQGroup__tablist-button[aria-selected='true'] span {
+.FAQGroup__tablist-button:hover::before {
+  background-color: var(--brand-FAQGroup-buttonIndicator-hover);
+}
+
+.FAQGroup__tablist-button[aria-selected='true'] {
   color: var(--brand-FAQ-color-tabLabel-selected);
+  gap: calc(var(--base-size-12) + 3px);
+}
+
+.FAQGroup__tablist-button[aria-selected='true']::before {
+  transform: scaleX(1);
+  background-color: var(--brand-FAQGroup-buttonIndicator-active);
 }
 
 .FAQGroup__nested-accordion-item summary h4 {
@@ -51,6 +84,20 @@
   line-height: var(--brand-text-lineHeight-200);
 }
 
+/* Gridline variant */
+
+.FAQGroup__tablist--gridline {
+  padding-inline-start: var(--base-size-48);
+  padding-block: var(--base-size-80);
+}
+
+.FAQGroup__content--gridline {
+  border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  padding-inline: var(--base-size-64);
+  padding-block-start: var(--base-size-80);
+  padding-block-end: var(--base-size-96);
+}
+
 @media (forced-colors: active) {
   .FAQGroup__tablist-button[aria-selected='true'] {
     border-color: Highlight;
@@ -58,3 +105,69 @@
     color: HighlightText;
   }
 }
+
+.FAQGroup__heading {
+  padding-inline: var(--base-size-20);
+}
+
+/* Custom tablet breakpoint */
+@media screen and (min-width: 618px) {
+  .FAQGroup__gridline-wrapper {
+    border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+
+  .FAQGroup__accordion {
+    margin-block-start: 0;
+    max-width: 618px;
+    margin-inline: auto;
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+  .FAQGroup__heading {
+    max-width: 618px;
+    margin: 0 auto;
+  }
+
+  .FAQGroup__heading-wrapper {
+    padding-block-end: var(--base-size-40);
+  }
+  .FAQGroup__heading-wrapper--gridline {
+    border-block-end: var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;
+  }
+
+  .FAQGroup__accordion--gridline:first-child summary {
+    border-block-start: none !important;
+  }
+
+  .FAQGroup__accordion--gridline:last-child summary {
+    border-block-end: none !important;
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .FAQGroup {
+    display: grid;
+  }
+
+  .FAQGroup__accordion {
+    display: none;
+  }
+
+  .FAQGroup__heading {
+    padding-inline: 0;
+    max-width: 100%;
+  }
+
+  .FAQGroup__heading-wrapper {
+    padding-block-end: var(--base-size-64);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .FAQGroup__tablist--gridline {
+    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+
+  .FAQGroup__content--gridline {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}

package/components/Grid/Grid.css

@@ -1,13 +1,26 @@
 .Grid {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-row-gap: var(--brand-Grid-spacing-row);
-  grid-column-gap: var(--brand-Grid-spacing-column-gap);
-  padding-inline: var(--brand-Grid-spacing-margin);
   max-width: 1280px;
   margin: 0 auto;
 }
 
+.Grid--columnGap-default {
+  grid-column-gap: var(--brand-Grid-spacing-column-gap);
+}
+
+.Grid--columnGap-none {
+  grid-column-gap: 0;
+}
+
+.Grid--rowGap-default {
+  grid-row-gap: var(--brand-Grid-spacing-row);
+}
+
+.Grid--rowGap-none {
+  grid-row-gap: 0;
+}
+
 .Grid--full-width {
   width: 100%;
   max-width: none;
@@ -31,6 +44,10 @@
   min-height: var(--base-size-24);
 }
 
+.Grid--has-gutters {
+  padding-inline: var(--brand-Grid-spacing-margin);
+}
+
 /**
  * Non-responsive, default values
  */

package/components/LogoSuite/LogoSuite.css

@@ -2,10 +2,21 @@
   padding-block-end: var(--brand-LogoSuite-logobar-rowGap);
 }
 
-.LogoSuite + .LogoSuite {
+.LogoSuite--default + .LogoSuite--default {
   padding-block-start: var(--brand-LogoSuite-logobar-rowGap);
 }
 
+/* Small monospace heading when standalone (no description) */
+.LogoSuite:not(:has(.LogoSuite__description)) .LogoSuite__heading {
+  font-family: var(--brand-fontStack-monospace);
+  font-weight: var(--brand-text-weight-100);
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-100);
+  letter-spacing: var(--brand-text-letterSpacing-100);
+  text-transform: uppercase;
+  color: var(--brand-color-text-muted);
+}
+
 .LogoSuite__heading + .LogoSuite__description {
   padding-block-start: var(--base-size-16);
 }
@@ -19,7 +30,7 @@
   text-align: center;
 }
 
-.LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__logobar {
+.LogoSuite--default:not(.LogoSuite + .LogoSuite) .LogoSuite__logobar {
   padding-block-start: var(--base-size-32);
 }
 
@@ -47,7 +58,7 @@
   + .LogoSuite__logobar,
 .LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__description + .LogoSuite__logobar {
   padding-block-start: 0;
-  margin-block-start: var(--base-size-80);
+  margin-block-start: var(--base-size-44);
 }
 
 .LogoSuite__logobar--variant-muted svg,
@@ -66,12 +77,6 @@
   .LogoSuite__logobar--variant-muted a {
     height: var(--base-size-40);
   }
-
-  .LogoSuite__logobar--variant-emphasis svg,
-  .LogoSuite__logobar--variant-emphasis img,
-  .LogoSuite__logobar--variant-emphasis a {
-    height: var(--base-size-48);
-  }
 }
 
 .LogoSuite__logobar--variant-muted svg,
@@ -102,8 +107,10 @@
   }
 }
 
-.LogoSuite--start .LogoSuite__logobar a:focus-visible {
-  outline-color: var(--brand-color-focus);
+.LogoSuite__logobar a:focus-visible {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-2);
+  border-radius: var(--base-size-4);
 }
 
 .LogoSuite--hasDivider {
@@ -113,8 +120,9 @@
 .LogoSuite__logobar--has-marquee {
   position: relative;
   display: flex;
-  flex-direction: column;
-  gap: var(--base-size-40);
+  flex-direction: row;
+  align-items: center;
+  gap: var(--base-size-24);
   margin: auto;
   max-width: 100dvw;
 }
@@ -152,18 +160,22 @@
   }
 }
 
-.LogoSuite__logobar-marquee:hover .LogoSuite__logobar-marqueeGroup {
+.LogoSuite__logobar-marquee:hover .LogoSuite__logobar-marqueeGroup,
+.LogoSuite__logobar-marquee:focus-within .LogoSuite__logobar-marqueeGroup {
   animation-play-state: paused;
 }
 
 .LogoSuite__logobar-marquee {
   display: flex;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: visible;
+  padding-block: var(--base-size-4);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   gap: var(--marquee-gap);
-  width: calc(100% - var(--base-size-40));
+  flex: 1;
+  min-width: 0;
   -webkit-mask-image: linear-gradient(
     to right,
     hsl(0 0% 0% / 0),
@@ -178,19 +190,23 @@
   animation-play-state: paused !important;
 }
 
+.LogoSuite__logobar-marquee--focused .LogoSuite__logobar-marqueeGroup {
+  animation-name: none;
+}
+
 .LogoSuite__logobar-playPauseButton {
   cursor: pointer;
-  position: absolute;
-  right: 0;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--base-size-48);
-  height: var(--base-size-48);
+  width: var(--base-size-32);
+  height: var(--base-size-32);
   margin: 0;
   padding: 0;
   border: none;
   border-radius: var(--base-size-48);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
   background-color: var(--brand-LogoSuite-color-control-rest);
   transition: background-color var(--brand-animation-duration-faster);
 }
@@ -207,8 +223,137 @@
 .LogoSuite__logobar-playPauseButton svg {
   width: var(--base-size-16);
   height: var(--base-size-16);
+  fill: var(--brand-color-text-muted);
 }
 
 .LogoSuite__logobar-playPauseButton path {
-  fill: var(--brand-button-subtle-fgColor-rest);
+  fill: var(--brand-color-text-muted);
+}
+
+/* Gridline expressive variant styles */
+.LogoSuite--gridline-expressive {
+  padding: 0;
+}
+
+.LogoSuite--gridline-expressive .LogoSuite__content {
+  padding-inline: 0;
+  gap: 0;
+  max-width: 618px; /* From the Figma design */
+}
+
+.LogoSuite--gridline-expressive .LogoSuite__textContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--base-size-20);
+}
+
+.LogoSuite--gridline-expressive .LogoSuite__logobar {
+  margin-block-start: auto;
+}
+.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);
+}
+
+.LogoSuite--gridline-expressive .LogoSuite__logobar,
+.LogoSuite--gridline-expressive .LogoSuite__logobar--has-marquee {
+  max-width: none;
+  width: 100%;
+}
+
+.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {
+  padding-block-start: var(--base-size-8);
+}
+
+.LogoSuite--gridline-expressive .LogoSuite__logobar {
+  padding-block-start: 0;
+}
+
+@media screen and (min-width: 48rem) {
+  .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {
+    padding: var(--base-size-36);
+  }
+  .LogoSuite--gridline-expressive .LogoSuite__content {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+  .LogoSuite--gridline-expressive .LogoSuite__textContainer {
+    border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
+@media screen and (min-width: 64rem) {
+  .LogoSuite--gridline-expressive .LogoSuite__content {
+    max-width: 1280px;
+  }
+
+  .LogoSuite--gridline-expressive .LogoSuite__textContainer {
+    text-align: left;
+    padding: var(--base-size-64);
+  }
+
+  .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {
+    padding: var(--base-size-64);
+  }
+}
+
+@media screen and (min-width: 1281px) {
+  .LogoSuite--gridline-expressive .LogoSuite__content {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+
+  /* When the logobar is the only column visible (no adjacent text), this removes start border */
+  .LogoSuite--gridline-expressive .LogoSuite__logobarContainer:first-child {
+    border-inline-start: none;
+  }
+}
+
+.LogoSuite__logobar--has-takeover {
+  position: relative;
+  overflow: visible;
+}
+
+/* Glass blur overlay effect */
+.LogoSuite__logobar--has-takeover::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--base-size-16)) 0;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0;
+  backdrop-filter: blur(var(--base-size-6));
+  -webkit-backdrop-filter: blur(var(--base-size-6));
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.LogoSuite__logobar--has-takeover:hover::before,
+.LogoSuite__logobar--has-takeover:focus-within::before {
+  opacity: 1;
+}
+
+.LogoSuite__logobar--has-takeover:hover svg,
+.LogoSuite__logobar--has-takeover:focus-within svg,
+.LogoSuite__logobar--has-takeover:hover img,
+.LogoSuite__logobar--has-takeover:focus-within img {
+  opacity: 0.7;
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.LogoSuite__logobar-takeoverButtonContainer {
+  opacity: 0;
+  visibility: hidden;
+  z-index: 2;
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.LogoSuite__logobar--has-takeover:hover .LogoSuite__logobar-takeoverButtonContainer,
+.LogoSuite__logobar--has-takeover:focus-within .LogoSuite__logobar-takeoverButtonContainer {
+  opacity: 1;
+  visibility: visible;
 }

package/components/PricingOptions/PricingOptions.css

@@ -445,6 +445,7 @@
 .PricingOptions__feature-list-accordion .PricingOptions__feature-list-accordion-heading :is(h1, h2, h3, h4, h5, h6) {
   font-size: var(--feature-list-font-size);
   line-height: var(--feature-list-line-height);
+  font-weight: var(--brand-text-subhead-weight-large);
   gap: var(--base-size-8);
   display: inline-flex;
   align-items: center;

package/components/Statistic/Statistic.css

@@ -74,7 +74,6 @@
 }
 
 .Statistic__heading {
-  font-stretch: 75%;
   position: relative;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.64.1-rc.9bfb4676",
+  "version": "0.65.0-rc.0895cfab",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",