makes sponsor takeover experience tigher and more friendly to long descriptions

src/app/hero/hero.component.scss

@@ -283,7 +283,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: $spacing-lg;
+  padding: $spacing-md;
   @include fade-in;
 }
 
@@ -291,10 +291,9 @@
   position: relative;
   background: $neutral-white;
   border-radius: $radius-xl;
-  padding: $spacing-2xl $spacing-xl $spacing-xl;
-  max-width: 520px;
+  padding: $spacing-lg $spacing-md;
+  max-width: 460px;
   width: 100%;
-  text-align: center;
   box-shadow: $shadow-xl;
   animation: takeover-slide-up 0.3s ease-out;
 }
@@ -313,11 +312,11 @@
 
 .takeover-close {
   position: absolute;
-  top: $spacing-md;
-  right: $spacing-md;
+  top: $spacing-xs;
+  right: $spacing-xs;
   background: none;
   border: none;
-  font-size: 1.8rem;
+  font-size: 1.4rem;
   line-height: 1;
   cursor: pointer;
   color: $neutral-medium;
@@ -330,14 +329,15 @@
 }
 
 .takeover-content {
-  margin-top: $spacing-md;
+  text-align: left;
+  margin-top: $spacing-sm;
 }
 
 .takeover-logo {
   display: block;
-  width: clamp(200px, 40vw, 380px);
-  height: clamp(200px, 40vw, 380px);
-  margin: 0 auto $spacing-md;
+  width: clamp(150px, 30vw, 280px);
+  height: clamp(150px, 30vw, 280px);
+  margin: 0 auto $spacing-sm;
   border-radius: $radius-lg;
   object-fit: contain;
   background: $neutral-cream;
@@ -346,19 +346,34 @@
 
 .takeover-name {
   font-family: $font-heading;
-  font-size: 1.6rem;
+  font-size: 1.3rem;
   color: $primary-blue;
-  margin: 0 0 $spacing-sm;
+  margin: 0 0 0.35rem;
+  text-align: left;
 }
 
 .takeover-description {
-  font-size: 1.05rem;
+  font-size: 0.875rem;
   color: $neutral-dark;
-  line-height: 1.7;
-  margin: 0 0 $spacing-lg;
-  max-width: 420px;
-  margin-left: auto;
-  margin-right: auto;
+  line-height: 1.6;
+  margin: 0 0 $spacing-md 0;
+  text-align: left;
+  max-height: 150px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $neutral-cream;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $neutral-light;
+    border-radius: 3px;
+  }
 }
 
 .takeover-visit {
@@ -366,6 +381,7 @@
   font-size: 1rem;
   padding: $spacing-sm $spacing-xl;
   letter-spacing: 0.03em;
+  display: inline-block;
 }
 
 // ── Download CTAs ───────────────────────────────────────────