@deepgram/styles 0.0.9 → 0.1.2

package/dist/deepgram.expanded.css

@@ -10,7 +10,7 @@
  * - BEM methodology with Tailwind utilities
  * - Consistent spacing and typography
  *
- * @version 3.0.0 - Tailwind Migration
+ * @version 1.0
  * @author Deepgram Starter UIs Team
  */
 
@@ -649,7 +649,7 @@ a:hover {
   opacity: 0.8;
 }
 
-/* Button Base Styles */
+/* Primary Button */
 
 .dg-btn {
   display: inline-flex;
@@ -660,19 +660,19 @@ a:hover {
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
   line-height: 2;
+  white-space: nowrap;
+  border-radius: 0.25rem;
   font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 600;
-  white-space: nowrap;
-  border-radius: 0.25rem;
   text-transform: capitalize;
+  width: -moz-fit-content;
+  width: fit-content;
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  width: -moz-fit-content;
-  width: fit-content;
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -687,8 +687,6 @@ a:hover {
   height: 3rem;
 }
 
-/* Button Modifier: Small */
-
 .dg-btn--sm {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -700,8 +698,6 @@ a:hover {
   height: 2.25rem;
 }
 
-/* Button Modifier: Primary - Gradient border with glow effect */
-
 .dg-btn--primary {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -720,10 +716,10 @@ a:hover {
 
 .dg-btn--primary:hover {
   border-color: transparent;
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
   background-image: none;
   background-origin: padding-box;
   background-clip: border-box;
@@ -733,8 +729,6 @@ a:hover {
   box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
 }
 
-/* Button Modifier: Secondary - White background with black text */
-
 .dg-btn--secondary {
   border-width: 1px;
   border-color: transparent;
@@ -754,8 +748,6 @@ a:hover {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
 
-/* Button Modifier: Ghost - Transparent with grey border */
-
 .dg-btn--ghost {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -767,10 +759,10 @@ a:hover {
 
 .dg-btn--ghost:hover {
   border-color: transparent;
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
   background-image: none;
   background-origin: padding-box;
   background-clip: border-box;
@@ -780,8 +772,6 @@ a:hover {
   box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
 }
 
-/* Button Modifier: Danger Ghost - For destructive actions */
-
 .dg-btn--danger-ghost {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -799,8 +789,6 @@ a:hover {
   background-color: rgb(240 68 56 / var(--tw-bg-opacity, 1));
 }
 
-/* Button Modifier: Icon Only */
-
 .dg-btn--icon-only {
   width: 3rem;
   height: 3rem;
@@ -813,8 +801,6 @@ a:hover {
   height: 1.5rem;
 }
 
-/* Button Modifier: Collapse - Responsive mobile-adaptive */
-
 .dg-btn--collapse {
   display: inline-flex;
 }
@@ -826,18 +812,43 @@ a:hover {
   }
 }
 
-/* Button Icon Spacing - Prevent icons from shrinking */
-
-.dg-btn i,
-  .dg-btn svg {
+.dg-btn i, .dg-btn svg {
   flex-shrink: 0;
 }
 
-/* ==========================================================================
-     LAYOUT COMPONENTS
-     ========================================================================== */
+/* Secondary Button */
+
+/* Ghost Button */
+
+/* Danger Ghost Button */
+
+/* Icon Button */
+
+/* Small Button */
+
+/* Collapse Button */
+
+/* Button Group */
+
+.dg-action-group {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+}
+
+@media (max-width: 640px) {
+  .dg-action-group {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .dg-action-group .dg-btn {
+    width: 100%;
+  }
+}
 
-/* Section Component - Reusable content section */
+/* Section */
 
 .dg-section {
   width: 100%;
@@ -904,8 +915,6 @@ a:hover {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-/* Fieldset-style section with legend title */
-
 .dg-section--fieldset {
   position: relative;
   border-radius: 0.5rem;
@@ -915,12 +924,6 @@ a:hover {
   padding-top: 2rem;
 }
 
-@media (min-width: 640px) {
-  .dg-section--fieldset {
-    padding-top: 2.5rem;
-  }
-}
-
 .dg-section--fieldset .dg-section-heading {
   --tw-text-opacity: 1;
   color: rgb(148 148 152 / var(--tw-text-opacity, 1));
@@ -940,17 +943,20 @@ a:hover {
 }
 
 @media (min-width: 640px) {
+  .dg-section--fieldset {
+    padding-top: 2.5rem;
+  }
+
   .dg-section--fieldset .dg-section-heading {
     font-size: 1.125rem;
   }
 }
 
-/* Card Component */
+/* Card */
 
 .dg-card {
   display: flex;
   width: 100%;
-  flex-direction: column;
   border-radius: 0.5rem;
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -958,6 +964,7 @@ a:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
   margin-bottom: 0.75rem;
+  flex-direction: column;
   padding: 0.75rem;
   --tw-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
   --tw-shadow-colored: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color);
@@ -967,6 +974,12 @@ a:hover {
   transition-duration: 200ms;
 }
 
+.dg-card:hover {
+  --tw-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06);
+  --tw-shadow-colored: 0 0.25rem 0.375rem -0.0625rem var(--tw-shadow-color), 0 0.125rem 0.25rem -0.0625rem var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 @media (min-width: 640px) {
   .dg-card {
     margin-bottom: 1rem;
@@ -980,14 +993,6 @@ a:hover {
   }
 }
 
-.dg-card:hover {
-  --tw-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06);
-  --tw-shadow-colored: 0 0.25rem 0.375rem -0.0625rem var(--tw-shadow-color), 0 0.125rem 0.25rem -0.0625rem var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-/* Card Modifiers */
-
 .dg-card--compact {
   padding: 0.5rem;
 }
@@ -1020,23 +1025,19 @@ a:hover {
   border-color: rgb(148 148 152 / var(--tw-border-opacity, 1));
 }
 
-/* Card with structured layout (image, header, body, footer) */
-
 .dg-card--structured {
   justify-content: space-between;
   padding: 0px;
 }
 
-/* Selectable Card */
-
 .dg-card--selectable {
   cursor: pointer;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
   border-width: 2px;
   --tw-border-opacity: 1;
   border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
   padding: 1.25rem;
 }
 
@@ -1050,8 +1051,6 @@ a:hover {
   background: rgba(19, 239, 149, 0.05);
 }
 
-/* Screen reader only utility */
-
 .dg-sr-only {
   position: absolute;
   width: 1px;
@@ -1093,14 +1092,6 @@ a:hover {
   gap: 0.25rem;
 }
 
-@media (max-width: 767px) {
-  .dg-card--selectable__content {
-    flex-direction: row;
-    align-items: center;
-    gap: 0.75rem;
-  }
-}
-
 .dg-card--selectable .dg-item-title {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1111,19 +1102,6 @@ a:hover {
   align-items: center;
 }
 
-@media (max-width: 767px) {
-  .dg-card--selectable .dg-item-title {
-    margin-bottom: 0;
-    flex-shrink: 0;
-  }
-}
-
-@media (min-width: 768px) {
-  .dg-card--selectable .dg-item-title {
-    margin-bottom: 0.25rem;
-  }
-}
-
 .dg-card--selectable .dg-prose {
   --tw-text-opacity: 1;
   color: rgb(148 148 152 / var(--tw-text-opacity, 1));
@@ -1132,6 +1110,17 @@ a:hover {
 }
 
 @media (max-width: 767px) {
+  .dg-card--selectable__content {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .dg-card--selectable .dg-item-title {
+    margin-bottom: 0;
+    flex-shrink: 0;
+  }
+
   .dg-card--selectable .dg-prose {
     flex: 1;
     white-space: nowrap;
@@ -1140,17 +1129,21 @@ a:hover {
   }
 }
 
-/* File Upload Card */
+@media (min-width: 768px) {
+  .dg-card--selectable .dg-item-title {
+    margin-bottom: 0.25rem;
+  }
+}
 
 .dg-card--file-upload {
   cursor: pointer;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
   border-width: 2px;
   border-style: dashed;
   --tw-border-opacity: 1;
   border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
   padding: 1.25rem;
 }
 
@@ -1165,8 +1158,7 @@ a:hover {
   background: rgba(19, 239, 149, 0.05);
 }
 
-.dg-card--file-upload input[type="file"],
-  .dg-card--file-upload input[type="checkbox"] {
+.dg-card--file-upload input[type="file"], .dg-card--file-upload input[type="checkbox"] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -1191,14 +1183,6 @@ a:hover {
   gap: 0.25rem;
 }
 
-@media (max-width: 767px) {
-  .dg-card--file-upload__content {
-    flex-direction: row;
-    align-items: center;
-    gap: 0.75rem;
-  }
-}
-
 .dg-card--file-upload .dg-item-title {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1209,19 +1193,6 @@ a:hover {
   align-items: center;
 }
 
-@media (max-width: 767px) {
-  .dg-card--file-upload .dg-item-title {
-    margin-bottom: 0;
-    flex-shrink: 0;
-  }
-}
-
-@media (min-width: 768px) {
-  .dg-card--file-upload .dg-item-title {
-    margin-bottom: 0.25rem;
-  }
-}
-
 .dg-card--file-upload .dg-prose {
   --tw-text-opacity: 1;
   color: rgb(148 148 152 / var(--tw-text-opacity, 1));
@@ -1230,6 +1201,17 @@ a:hover {
 }
 
 @media (max-width: 767px) {
+  .dg-card--file-upload__content {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .dg-card--file-upload .dg-item-title {
+    margin-bottom: 0;
+    flex-shrink: 0;
+  }
+
   .dg-card--file-upload .dg-prose {
     flex: 1;
     white-space: nowrap;
@@ -1238,14 +1220,17 @@ a:hover {
   }
 }
 
-/* Card Image */
+@media (min-width: 768px) {
+  .dg-card--file-upload .dg-item-title {
+    margin-bottom: 0.25rem;
+  }
+}
 
 .dg-card__image {
   width: 100%;
   flex-shrink: 0;
   overflow: hidden;
   border-radius: 0.5rem 0.5rem 0 0;
-  /* Rounded top corners only */
 }
 
 .dg-card__image img {
@@ -1256,8 +1241,6 @@ a:hover {
      object-fit: cover;
 }
 
-/* Card Image Size Modifiers */
-
 .dg-card__image--small {
   height: 7.5rem;
 }
@@ -1275,8 +1258,6 @@ a:hover {
   height: auto;
 }
 
-/* Card Icon */
-
 .dg-card__icon {
   display: flex;
   align-items: center;
@@ -1284,31 +1265,12 @@ a:hover {
   padding-top: 1.5rem;
 }
 
-@media (min-width: 640px) {
-  .dg-card__icon {
-    padding: 1rem;
-    padding-top: 2rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .dg-card__icon {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    padding-bottom: 1.5rem;
-    padding-top: 2.5rem;
-  }
-}
-
-.dg-card__icon i,
-  .dg-card__icon svg {
+.dg-card__icon i, .dg-card__icon svg {
   color: var(--dg-primary, #13ef95);
   font-size: 3rem;
   line-height: 1;
 }
 
-/* Card Icon Alignment Modifiers */
-
 .dg-card__icon--left {
   justify-content: flex-start;
 }
@@ -1321,7 +1283,21 @@ a:hover {
   justify-content: flex-end;
 }
 
-/* Card Header */
+@media (min-width: 640px) {
+  .dg-card__icon {
+    padding: 1rem;
+    padding-top: 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .dg-card__icon {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-bottom: 1.5rem;
+    padding-top: 2.5rem;
+  }
+}
 
 .dg-card__header {
   display: flex;
@@ -1345,8 +1321,6 @@ a:hover {
   }
 }
 
-/* Card Body */
-
 .dg-card__body {
   display: flex;
   flex: 1 1 0%;
@@ -1370,16 +1344,19 @@ a:hover {
   }
 }
 
-/* Card Footer */
-
 .dg-card__footer {
-  margin-top: auto;
   display: flex;
   align-items: center;
   gap: 0.75rem;
   border-top-width: 1px;
   border-color: transparent;
   padding: 0.75rem;
+  margin-top: auto;
+}
+
+.dg-card__footer--bordered {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
 }
 
 @media (min-width: 640px) {
@@ -1394,14 +1371,7 @@ a:hover {
   }
 }
 
-/* Card Footer with Border */
-
-.dg-card__footer--bordered {
-  --tw-border-opacity: 1;
-  border-top-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
-}
-
-/* Code Block Component */
+/* Code Block */
 
 .dg-code-block {
   width: 100%;
@@ -1419,41 +1389,39 @@ a:hover {
   -webkit-overflow-scrolling: touch;
 }
 
-@media (min-width: 640px) {
-  .dg-code-block {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    max-height: 15.625rem;
-    padding: 0.75rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .dg-code-block {
-    max-height: 18.75rem;
-  }
-}
-
 .dg-code-block pre {
   --tw-text-opacity: 1;
   color: rgb(237 237 226 / var(--tw-text-opacity, 1));
   margin: 0px;
   white-space: pre-wrap;
-  overflow-wrap: break-word;
   padding: 0px;
   font-family: Fira Code, Monaco, Consolas, Courier New, monospace;
   font-size: 0.75rem;
   line-height: 1rem;
+  overflow-wrap: break-word;
   line-height: 1.3;
 }
 
 @media (min-width: 640px) {
+  .dg-code-block {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    max-height: 15.625rem;
+    padding: 0.75rem;
+  }
+
   .dg-code-block pre {
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
 }
 
+@media (min-width: 1024px) {
+  .dg-code-block {
+    max-height: 18.75rem;
+  }
+}
+
 .dg-code-block--compact {
   max-height: 7.5rem;
   padding: 0.25rem;
@@ -1487,11 +1455,7 @@ a:hover {
   overflow: visible;
 }
 
-/* ==========================================================================
-     TYPOGRAPHY COMPONENTS
-     ========================================================================== */
-
-/* Hero Title */
+/* Hero Section */
 
 .dg-hero-title {
   margin-bottom: 1.5rem;
@@ -1513,29 +1477,6 @@ a:hover {
   font-kerning: normal;
 }
 
-@media (max-width: 1024px) {
-  .dg-hero-title {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .dg-hero-title {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-}
-
-@media (max-width: 640px) {
-  .dg-hero-title {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-}
-
-/* Hero Section Container */
-
 .dg-hero {
   width: 100%;
   padding-top: 4rem;
@@ -1545,26 +1486,6 @@ a:hover {
   text-align: center;
 }
 
-@media (max-width: 768px) {
-  .dg-hero {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-}
-
-@media (max-width: 640px) {
-  .dg-hero {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-}
-
-/* Hero Content Container */
-
 .dg-hero__content {
   margin-left: auto;
   margin-right: auto;
@@ -1574,34 +1495,26 @@ a:hover {
   gap: 1.5rem;
 }
 
-@media (max-width: 768px) {
-  .dg-hero__content {
-    gap: 1.25rem;
-  }
-}
-
-/* Hero Announcement Banner */
-
 .dg-hero__announcement {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 9999px;
   border-width: 1px;
+  background-color: rgba(0, 0, 0, 0.5);
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0.5rem;
   border-color: rgb(148 148 152 / 0.3);
-  background-color: rgba(0, 0, 0, 0.5);
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 1.25rem;
   padding-right: 1.25rem;
+  text-decoration-line: none;
   width: -moz-fit-content;
   width: fit-content;
   cursor: pointer;
   gap: 0.75rem;
-  text-decoration-line: none;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
@@ -1624,14 +1537,6 @@ a:hover {
   font-weight: 400;
 }
 
-@media (max-width: 640px) {
-  .dg-hero__announcement-text {
-    white-space: normal;
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-}
-
 .dg-hero__announcement-cta {
   color: var(--dg-secondary, #149afb);
   display: inline-flex;
@@ -1649,28 +1554,51 @@ a:hover {
   gap: 0.75rem;
 }
 
-@media (max-width: 640px) {
-  .dg-hero__announcement-cta {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-}
-
-/* Hero Body Text */
-
 .dg-hero__body {
   --tw-text-opacity: 1;
   color: rgb(237 237 226 / var(--tw-text-opacity, 1));
   margin-left: auto;
   margin-right: auto;
-  max-width: 53.125rem;
   text-align: center;
   font-size: 1.125rem;
   font-weight: 400;
   line-height: 1.75rem;
+  max-width: 53.125rem;
+}
+
+.dg-hero__actions {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+@media (max-width: 1024px) {
+  .dg-hero-title {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
 }
 
 @media (max-width: 768px) {
+  .dg-hero-title {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .dg-hero {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .dg-hero__content {
+    gap: 1.25rem;
+  }
+
   .dg-hero__body {
     font-size: 1rem;
     line-height: 1.5rem;
@@ -1679,24 +1607,34 @@ a:hover {
 }
 
 @media (max-width: 640px) {
+  .dg-hero-title {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .dg-hero {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .dg-hero__announcement-text {
+    white-space: normal;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .dg-hero__announcement-cta {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
   .dg-hero__body {
     font-size: 0.9375rem;
     line-height: 1.5;
   }
-}
-
-/* Hero Actions */
-
-.dg-hero__actions {
-  margin-top: 0.5rem;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-}
 
-@media (max-width: 640px) {
   .dg-hero__actions {
     width: 100%;
     flex-direction: column;
@@ -1707,33 +1645,22 @@ a:hover {
   }
 }
 
-/* Section Heading */
+/* Section Header */
 
 .dg-section-heading {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
   margin-bottom: 1.5rem;
+  display: flex;
   font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   font-size: 1.5rem;
   line-height: 2rem;
   font-weight: 600;
-  display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 0.5rem;
 }
 
-@media (max-width: 640px) {
-  .dg-section-heading {
-    margin-bottom: 0.75rem;
-    gap: 0.375rem;
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-}
-
-/* Small text within section heading */
-
 .dg-section-heading small {
   --tw-text-opacity: 1;
   color: rgb(148 148 152 / var(--tw-text-opacity, 1));
@@ -1743,6 +1670,13 @@ a:hover {
 }
 
 @media (max-width: 640px) {
+  .dg-section-heading {
+    margin-bottom: 0.75rem;
+    gap: 0.375rem;
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
   .dg-section-heading small {
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -1755,12 +1689,6 @@ a:hover {
   margin-bottom: 2rem;
 }
 
-@media (max-width: 640px) {
-  .dg-page-heading {
-    margin-bottom: 1.5rem;
-  }
-}
-
 .dg-page-heading__title {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1772,20 +1700,6 @@ a:hover {
   line-height: 1.25;
 }
 
-@media (max-width: 768px) {
-  .dg-page-heading__title {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-}
-
-@media (max-width: 640px) {
-  .dg-page-heading__title {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-}
-
 .dg-page-heading__description {
   --tw-text-opacity: 1;
   color: rgb(148 148 152 / var(--tw-text-opacity, 1));
@@ -1797,6 +1711,11 @@ a:hover {
 }
 
 @media (max-width: 768px) {
+  .dg-page-heading__title {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
   .dg-page-heading__description {
     font-size: 1rem;
     line-height: 1.5rem;
@@ -1804,6 +1723,15 @@ a:hover {
 }
 
 @media (max-width: 640px) {
+  .dg-page-heading {
+    margin-bottom: 1.5rem;
+  }
+
+  .dg-page-heading__title {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
   .dg-page-heading__description {
     font-size: 0.9375rem;
   }
@@ -1815,18 +1743,16 @@ a:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
   margin-bottom: 0.75rem;
+  display: flex;
   font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   font-size: 1.25rem;
   line-height: 1.75rem;
   font-weight: 500;
-  display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 0.375rem;
 }
 
-/* Small text within card heading */
-
 .dg-card-heading small {
   --tw-text-opacity: 1;
   color: rgb(148 148 152 / var(--tw-text-opacity, 1));
@@ -1841,18 +1767,16 @@ a:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
   margin-bottom: 0.25rem;
+  display: flex;
   font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 500;
-  display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 0.25rem;
 }
 
-/* Small text within item title */
-
 .dg-item-title small {
   --tw-text-opacity: 1;
   color: rgb(148 148 152 / var(--tw-text-opacity, 1));
@@ -1861,7 +1785,7 @@ a:hover {
   font-weight: 400;
 }
 
-/* Prose Text */
+/* Prose */
 
 .dg-prose {
   --tw-text-opacity: 1;
@@ -1873,6 +1797,11 @@ a:hover {
   line-height: 1.375;
 }
 
+.dg-prose.dg-prose--block {
+  width: 100%;
+  max-width: none;
+}
+
 @media (min-width: 640px) {
   .dg-prose {
     margin-bottom: 1rem;
@@ -1882,11 +1811,6 @@ a:hover {
   }
 }
 
-.dg-prose.dg-prose--block {
-  width: 100%;
-  max-width: none;
-}
-
 .dg-prose--large {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1920,11 +1844,7 @@ a:hover {
   }
 }
 
-/* ==========================================================================
-     FORM COMPONENTS
-     ========================================================================== */
-
-/* Form Input Base Styles */
+/* Input Group */
 
 .dg-input {
   width: 100%;
@@ -1932,14 +1852,14 @@ a:hover {
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
-  --tw-bg-opacity: 1;
-  background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
   font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1947,10 +1867,10 @@ a:hover {
   outline-offset: 2px;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
   --tw-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
   --tw-shadow-colored: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-duration: 300ms;
   height: 2.75rem;
 }
 
@@ -1982,10 +1902,7 @@ a:hover {
   max-width: none;
 }
 
-/* Select (dropdown) specific */
-
-.dg-input[type="select"],
-  select.dg-input {
+.dg-input[type="select"], select.dg-input {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -2004,14 +1921,14 @@ a:hover {
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
-  --tw-bg-opacity: 1;
-  background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
   font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -2019,10 +1936,10 @@ a:hover {
   outline-offset: 2px;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
   --tw-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
   --tw-shadow-colored: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-duration: 300ms;
   height: 2.75rem;
 }
 
@@ -2046,8 +1963,7 @@ a:hover {
   opacity: 0.5;
 }
 
-.dg-textarea[type="select"],
-  select.dg-textarea {
+.dg-textarea[type="select"], select.dg-textarea {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -2086,13 +2002,13 @@ a:hover {
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
+  flex-shrink: 0;
+  cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
-  cursor: pointer;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
-  flex-shrink: 0;
   position: relative;
 }
 
@@ -2119,8 +2035,6 @@ a:hover {
   box-shadow: 0 0 0 0.125rem var(--dg-primary, #13ef95);
 }
 
-/* Checkbox Label */
-
 .dg-checkbox-label {
   --tw-text-opacity: 1;
   color: rgb(237 237 226 / var(--tw-text-opacity, 1));
@@ -2137,23 +2051,19 @@ a:hover {
   border-color: rgb(148 148 152 / var(--tw-border-opacity, 1));
 }
 
-/* Checkbox Description Container */
-
 .dg-checkbox-description {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-/* Checkbox Group Container */
-
 .dg-checkbox-group {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 
-/* Form Field */
+/* Form Section */
 
 .dg-form-field {
   margin-bottom: 1rem;
@@ -2163,20 +2073,11 @@ a:hover {
   gap: 0.75rem;
 }
 
-@media (min-width: 640px) {
-  .dg-form-field {
-    max-width: 28rem;
-  }
-}
-
 .dg-form-field--full {
   max-width: none;
 }
 
-/* Form Field Error State */
-
-.dg-form-field--error .dg-input,
-  .dg-form-field--error .dg-textarea {
+.dg-form-field--error .dg-input, .dg-form-field--error .dg-textarea {
   --tw-border-opacity: 1;
   border-color: rgb(240 68 56 / var(--tw-border-opacity, 1));
 }
@@ -2186,10 +2087,7 @@ a:hover {
   color: rgb(240 68 56 / var(--tw-text-opacity, 1));
 }
 
-/* Form Field Success State */
-
-.dg-form-field--success .dg-input,
-  .dg-form-field--success .dg-textarea {
+.dg-form-field--success .dg-input, .dg-form-field--success .dg-textarea {
   --tw-border-opacity: 1;
   border-color: rgb(18 183 106 / var(--tw-border-opacity, 1));
 }
@@ -2199,8 +2097,6 @@ a:hover {
   color: rgb(18 183 106 / var(--tw-text-opacity, 1));
 }
 
-/* Form Label */
-
 .dg-form-label {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -2209,8 +2105,6 @@ a:hover {
   font-weight: 500;
 }
 
-/* Form Error Message (deprecated - use dg-form-helper with dg-form-field--error) */
-
 .dg-form-error {
   --tw-text-opacity: 1;
   color: rgb(240 68 56 / var(--tw-text-opacity, 1));
@@ -2220,8 +2114,6 @@ a:hover {
   margin: 0;
 }
 
-/* Form Helper Text */
-
 .dg-form-helper {
   --tw-text-opacity: 1;
   color: rgb(148 148 152 / var(--tw-text-opacity, 1));
@@ -2231,7 +2123,13 @@ a:hover {
   margin: 0;
 }
 
-/* File Upload / Drag & Drop Zone */
+@media (min-width: 640px) {
+  .dg-form-field {
+    max-width: 28rem;
+  }
+}
+
+/* File Upload Zone */
 
 .dg-drag-drop-zone {
   position: relative;
@@ -2242,15 +2140,15 @@ a:hover {
   border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
   --tw-bg-opacity: 1;
   background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.75rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
   cursor: pointer;
+  gap: 0.75rem;
   padding: 3rem 2rem;
   min-height: 12.5rem;
 }
@@ -2302,17 +2200,11 @@ a:hover {
   line-height: 1.25rem;
 }
 
-/* ==========================================================================
-     STATUS & FEEDBACK COMPONENTS
-     ========================================================================== */
-
 /* Status Banner */
 
 .dg-status {
   --tw-text-opacity: 1;
   color: rgb(237 237 226 / var(--tw-text-opacity, 1));
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
   width: 100%;
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -2320,6 +2212,8 @@ a:hover {
   line-height: 1.25rem;
   font-style: italic;
   line-height: 1.375;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 @media (min-width: 640px) {
@@ -2392,6 +2286,8 @@ a:hover {
 /* Spinner */
 
 .dg-spinner {
+  margin-left: auto;
+  margin-right: auto;
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 9999px;
@@ -2399,8 +2295,6 @@ a:hover {
   --tw-border-opacity: 1;
   border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
   border-top-color: var(--dg-primary, #13ef95);
-  margin-left: auto;
-  margin-right: auto;
   margin-bottom: 0.75rem;
 }
 
@@ -2414,18 +2308,6 @@ a:hover {
   animation: spin 1s linear infinite;
 }
 
-@keyframes dg-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Processing Title */
-
 .dg-processing-title {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -2436,20 +2318,19 @@ a:hover {
   font-weight: 500;
 }
 
-/* Modal Overlay */
+/* Modal */
 
 .dg-modal-overlay {
   position: fixed;
   inset: 0px;
-  z-index: 50;
   display: none;
   align-items: center;
   justify-content: center;
   background-color: rgb(0 0 0 / 0.8);
+  z-index: 50;
 }
 
-.dg-modal-overlay.visible,
-  .dg-modal-overlay--visible {
+.dg-modal-overlay.visible, .dg-modal-overlay--visible {
   display: flex;
 }
 
@@ -2459,16 +2340,17 @@ a:hover {
   text-align: center;
 }
 
-/* ==========================================================================
-     UTILITY COMPONENTS
-     ========================================================================== */
-
-/* Constrained Width Container */
+/* Constrained Container */
 
 .dg-constrain-width {
   width: 100%;
 }
 
+.dg-center-h {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 @media (min-width: 640px) {
   .dg-constrain-width {
     margin-left: auto;
@@ -2477,13 +2359,6 @@ a:hover {
   }
 }
 
-/* Center Horizontally - Complements dg-constrain-width */
-
-.dg-center-h {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 /* Responsive Grid */
 
 .dg-grid-mobile-stack {
@@ -2492,6 +2367,10 @@ a:hover {
   gap: 1rem;
 }
 
+.dg-grid-mobile-stack > * {
+  flex: 1 1 0%;
+}
+
 @media (min-width: 640px) {
   .dg-grid-mobile-stack {
     flex-direction: row;
@@ -2499,27 +2378,128 @@ a:hover {
   }
 }
 
-.dg-grid-mobile-stack > * {
+/* Three-Column Layout */
+
+.dg-columns {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+.dg-columns__wrapper {
+  display: flex;
+  min-width: 0px;
   flex: 1 1 0%;
+  flex-direction: column;
 }
 
-/* Action Group */
+.dg-column {
+  min-width: 0px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
 
-.dg-action-group {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 1rem;
+.dg-column--main {
+  flex: 1 1 0%;
 }
 
-@media (max-width: 640px) {
-  .dg-action-group {
-    flex-direction: column;
-    align-items: stretch;
+.dg-column--sidebar-left {
+}
+
+.dg-column--sidebar-right {
+  position: relative;
+}
+
+@media (min-width: 640px) {
+  .dg-column {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
   }
+}
 
-  .dg-action-group .dg-btn {
-    width: 100%;
+@media (min-width: 768px) {
+  .dg-columns {
+    flex-direction: row;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1279px) {
+  .dg-column--sidebar-right {
+    position: fixed;
+    top: 65px;
+    right: 0;
+    height: calc(100vh - 65px);
+    width: 16rem;
+    flex-shrink: 0;
+    transition: transform 300ms ease;
+    z-index: 20;
+    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
+  }
+
+  .dg-column--sidebar-right.dg-column--sm {
+    width: 20rem;
+  }
+
+  .dg-column--sidebar-right.dg-column--lg {
+    width: 24rem;
+  }
+
+  .dg-column--sidebar-right.dg-column--xl {
+    width: 32rem;
+  }
+
+  .dg-column--sidebar-right.collapsed {
+    transform: translateX(calc(100% - 2rem));
+  }
+}
+
+@media (min-width: 1024px) {
+  .dg-columns__wrapper {
+    flex-direction: row;
+  }
+
+  .dg-column--sidebar-left {
+    width: 12rem;
+    flex-shrink: 0;
+  }
+
+  .dg-column--sidebar-left.dg-column--sm {
+    width: 16rem;
+    flex-shrink: 0;
+  }
+
+  .dg-column--sidebar-left.dg-column--lg {
+    width: 24rem;
+    flex-shrink: 0;
+  }
+
+  .dg-column--sidebar-left.dg-column--xl {
+    width: 32rem;
+    flex-shrink: 0;
+  }
+}
+
+@media (min-width: 1280px) {
+  .dg-column--sidebar-right {
+    width: 16rem;
+    flex-shrink: 0;
+  }
+
+  .dg-column--sidebar-right.dg-column--sm {
+    width: 20rem;
+    flex-shrink: 0;
+  }
+
+  .dg-column--sidebar-right.dg-column--lg {
+    width: 24rem;
+    flex-shrink: 0;
+  }
+
+  .dg-column--sidebar-right.dg-column--xl {
+    width: 32rem;
+    flex-shrink: 0;
   }
 }
 
@@ -2528,7 +2508,6 @@ a:hover {
 .dg-header {
   width: 100%;
   background: #050506;
-  /* dg-almost-black */
   padding: 1rem 1.5rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
@@ -2606,14 +2585,39 @@ a:hover {
   text-align: center;
 }
 
-/* Text Center Utility */
+/* Link */
+
+.dg-link {
+  color: var(--dg-primary, #13ef95);
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.dg-link:hover {
+  opacity: 0.8;
+}
+
+.dg-social-link {
+  --tw-text-opacity: 1;
+  color: rgb(237 237 226 / var(--tw-text-opacity, 1));
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.dg-social-link:hover {
+  color: var(--dg-primary, #13ef95);
+}
+
+/* Text Utilities */
 
 .dg-text-center {
   text-align: center;
 }
 
-/* Text Color Utilities */
-
 .dg-text-danger {
   --tw-text-opacity: 1;
   color: rgb(240 68 56 / var(--tw-text-opacity, 1));
@@ -2652,94 +2656,6 @@ a:hover {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-/* Newsletter Layout */
-
-.dg-newsletter-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.dg-newsletter-container--compact {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.dg-newsletter-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.dg-newsletter-form--compact {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.dg-newsletter-form--inline {
-  display: flex;
-  width: 100%;
-  gap: 0.5rem;
-}
-
-@media (min-width: 640px) {
-  .dg-newsletter-form--inline {
-    width: auto;
-  }
-}
-
-.dg-newsletter-header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.75rem;
-}
-
-@media (min-width: 640px) {
-  .dg-newsletter-header {
-    flex-direction: row;
-    align-items: center;
-  }
-}
-
-.dg-newsletter-header__content {
-  flex: 1 1 0%;
-}
-
-.dg-newsletter-header__actions {
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .dg-newsletter-header__actions {
-    width: auto;
-  }
-}
-
-/* Logo Container */
-
-.dg-logo-container {
-  display: flex;
-  justify-content: center;
-}
-
-.dg-logo {
-  height: 2rem;
-  width: auto;
-}
-
-/* Social Links Container */
-
-.dg-social-links {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-}
-
-/* Typography Utilities */
-
 .dg-text-tagline {
   --tw-text-opacity: 1;
   color: rgb(237 237 226 / var(--tw-text-opacity, 1));
@@ -2780,196 +2696,86 @@ a:hover {
   line-height: 1rem;
 }
 
-/* ==========================================================================
-     MULTI-COLUMN LAYOUT COMPONENTS
-
-     Responsive collapse pattern:
-     - Mobile (< 768px): All columns stacked vertically
-     - Tablet (768px+): Right sidebar moves to side, left stacked on top
-     - Desktop (1024px+): All three columns side-by-side
-     ========================================================================== */
-
-/* Column Container - parent wrapper for all columns */
+/* Newsletter Signup */
 
-.dg-columns {
+.dg-newsletter-container {
   display: flex;
-  width: 100%;
   flex-direction: column;
+  gap: 1rem;
 }
 
-/* At tablet: show right sidebar on the side */
-
-@media (min-width: 768px) {
-  .dg-columns {
-    flex-direction: row;
-  }
+.dg-newsletter-container--compact {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
-/* Column Wrapper - groups left sidebar and main content together */
-
-.dg-columns__wrapper {
+.dg-newsletter-form {
   display: flex;
-  min-width: 0px;
-  flex: 1 1 0%;
   flex-direction: column;
+  gap: 1rem;
 }
 
-/* At desktop: show left sidebar on the side */
-
-@media (min-width: 1024px) {
-  .dg-columns__wrapper {
-    flex-direction: row;
-  }
+.dg-newsletter-form--compact {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
-/* Base Column - padding for all columns */
-
-.dg-column {
-  min-width: 0px;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
+.dg-newsletter-form--inline {
+  display: flex;
+  width: 100%;
+  gap: 0.5rem;
 }
 
-@media (min-width: 640px) {
-  .dg-column {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
+.dg-newsletter-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.75rem;
 }
 
-/* Main Content Column - always fills available space */
-
-.dg-column--main {
+.dg-newsletter-header__content {
   flex: 1 1 0%;
 }
 
-/* Left Sidebar - fixed width on desktop, full width on mobile/tablet */
-
-.dg-column--sidebar-left {
-  /* Layout only - no colors */
+.dg-newsletter-header__actions {
+  width: 100%;
 }
 
-@media (min-width: 1024px) {
-  .dg-column--sidebar-left {
-    width: 12rem;
-    flex-shrink: 0;
-  }
-
-  .dg-column--sidebar-left.dg-column--sm {
-    width: 16rem;
-    flex-shrink: 0;
-  }
-
-  .dg-column--sidebar-left.dg-column--lg {
-    width: 24rem;
-    flex-shrink: 0;
-  }
-
-  .dg-column--sidebar-left.dg-column--xl {
-    width: 32rem;
-    flex-shrink: 0;
-  }
+.dg-logo-container {
+  display: flex;
+  justify-content: center;
 }
 
-/* Right Sidebar - fixed width on tablet+, full width on mobile */
-
-.dg-column--sidebar-right {
-  /* Layout only - no colors */
-  position: relative;
+.dg-logo {
+  height: 2rem;
+  width: auto;
 }
 
-/* Between 768px and 1280px: Floating sidebar with toggle */
-
-@media (min-width: 768px) and (max-width: 1279px) {
-  .dg-column--sidebar-right {
-    position: fixed;
-    top: 65px;
-    /* Account for header height */
-    right: 0;
-    height: calc(100vh - 65px);
-    width: 16rem;
-    flex-shrink: 0;
-    transition: transform 300ms ease;
-    z-index: 20;
-    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
-  }
-
-  .dg-column--sidebar-right.dg-column--sm {
-    width: 20rem;
-  }
-
-  .dg-column--sidebar-right.dg-column--lg {
-    width: 24rem;
-  }
-
-  .dg-column--sidebar-right.dg-column--xl {
-    width: 32rem;
-  }
-
-  /* Collapsed state - slide mostly off screen but leave button visible */
-
-  .dg-column--sidebar-right.collapsed {
-    transform: translateX(calc(100% - 2rem));
-  }
+.dg-social-links {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
 }
 
-/* Above 1280px: Normal sidebar behavior */
-
-@media (min-width: 1280px) {
-  .dg-column--sidebar-right {
-    width: 16rem;
-    flex-shrink: 0;
-  }
-
-  .dg-column--sidebar-right.dg-column--sm {
-    width: 20rem;
-    flex-shrink: 0;
+@media (min-width: 640px) {
+  .dg-newsletter-form--inline {
+    width: auto;
   }
 
-  .dg-column--sidebar-right.dg-column--lg {
-    width: 24rem;
-    flex-shrink: 0;
+  .dg-newsletter-header {
+    flex-direction: row;
+    align-items: center;
   }
 
-  .dg-column--sidebar-right.dg-column--xl {
-    width: 32rem;
-    flex-shrink: 0;
+  .dg-newsletter-header__actions {
+    width: auto;
   }
 }
 
-/* ==========================================================================
-     LINK COMPONENTS
-     ========================================================================== */
-
-/* Primary Link with hover effect */
-
-.dg-link {
-  color: var(--dg-primary, #13ef95);
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-}
-
-.dg-link:hover {
-  opacity: 0.8;
-}
-
-/* Social Icon Link */
-
-.dg-social-link {
-  --tw-text-opacity: 1;
-  color: rgb(237 237 226 / var(--tw-text-opacity, 1));
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-}
-
-.dg-social-link:hover {
-  color: var(--dg-primary, #13ef95);
+.visible {
+  visibility: visible;
 }
 
 .dg-gradient-border {