/* ===== DECORATIVE SHAPE LAYER (Solutions section header) =====
   A scattered field of small floating shapes (star, circle, rounded
   square, sparkle, blob) behind the "Now Available for You!" header.
   - Idle state: each shape gently floats/rotates/scales on a loop.
   - The loop only runs while the section is in the viewport
     (IntersectionObserver toggles .decor-in-view) to save CPU/battery.
   - Scroll-direction based open/close: js/decor-scroll.js adds/removes
     .is-closing on the section as the user scrolls the header past the
     top of the viewport, which this file animates via clip-path + a
     per-shape scale/opacity/rotate transition (staggered via --stagger).
   - Fully inert visuals (position/animation only) — text stays on top
     and is never affected. */

.feature-band-header {
  position: relative;
  isolation: isolate; /* keeps text stacking above .decor-layer without a manual z-index war */
}

.feature-band-header > .eyebrow,
.feature-band-header > h2,
.feature-band-header > p {
  position: relative;
  z-index: 1;
}

.decor-layer {
  position: absolute;
  inset: -56px -16px -36px -16px;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
  clip-path: circle(150% at 50% 40%);
  transition: clip-path 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.decor-shape {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  opacity: 0.92;
  animation: decorFloat var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
  animation-play-state: paused;
  will-change: transform, opacity;
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1) var(--stagger),
              opacity 650ms cubic-bezier(0.22, 1, 0.36, 1) var(--stagger);
}

.decor-layer.decor-in-view .decor-shape {
  animation-play-state: running;
}

@keyframes decorFloat {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-12px) rotate(12deg) scale(1.08); }
}

/* --- Shape geometry & color --- */
.decor-star {
  background: #ff8a42;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.decor-circle {
  background: var(--accent);
  border-radius: 50%;
}

.decor-square {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 28%;
  transform: rotate(12deg);
}

.decor-sparkle {
  background: #ff4fa3;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}

.decor-blob {
  background: #ffd873;
  border-radius: 63% 37% 54% 46% / 55% 45% 55% 45%;
}

/* --- Closing (scrolled past) state --- */
.feature-band.is-closing .decor-layer {
  clip-path: circle(0% at 50% 40%);
}

.feature-band.is-closing .decor-shape {
  opacity: 0;
  transform: scale(0.15) rotate(30deg) !important;
  animation-play-state: paused;
}

/* --- Responsive: fewer, smaller shapes on small screens --- */
@media (max-width: 809px) {
  .decor-layer {
    inset: -40px -8px -24px -8px;
  }
  .decor-c5, .decor-c9, .decor-c10 {
    display: none;
  }
  .decor-shape {
    opacity: 0.75;
  }
}

@media (max-width: 480px) {
  .decor-c3, .decor-c8 {
    display: none;
  }
}

/* ===== ANNOUNCE STRIP ("CEFAT Now Available for You!") =====
   Light section sitting right above the Solutions band. It stays in
   normal flow (not sticky) while the Solutions band below it is
   `position: sticky`, so on scroll the blue band rises and visually
   overlaps/closes over this strip — matching the reference layout. */
.announce-strip {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  padding: 64px 0;
  z-index: 1;
}

.announce-inner {
  position: relative;
  z-index: 1;
  will-change: transform, opacity;
  transition: opacity 120ms linear, transform 120ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .announce-inner {
    transition: none;
  }
}

.announce-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
}

.announce-brand {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--fw-bold);
  color: var(--primary);
  letter-spacing: -0.01em;
}

.announce-highlight {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: var(--fw-bold);
  color: var(--secondary);
}

/* --- Decorative arcs / blobs, inspired by HAER's playful ring shapes --- */
.announce-arc {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.announce-arc--blue {
  width: 340px;
  height: 340px;
  left: -120px;
  top: -140px;
  border: 26px solid var(--secondary);
  border-right-color: transparent;
  border-bottom-color: transparent;
  opacity: 0.85;
  transform: rotate(-20deg);
}

.announce-arc--orange {
  width: 220px;
  height: 220px;
  right: 8%;
  top: -90px;
  border: 20px solid #FF8A42;
  border-left-color: transparent;
  border-top-color: transparent;
  opacity: 0.85;
  transform: rotate(12deg);
}

.announce-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.announce-blob--yellow {
  width: 260px;
  height: 260px;
  right: -80px;
  top: -60px;
  background: var(--accent);
  opacity: 0.16;
}

.announce-blob--pink {
  width: 46px;
  height: 46px;
  right: 2%;
  bottom: -6px;
  background: #ff4fa3;
  opacity: 0.85;
  border-radius: 63% 37% 54% 46% / 55% 45% 55% 45%;
}

.announce-sq {
  background: var(--secondary);
  border-radius: 28%;
  opacity: 0.9;
}

.announce-note {
  background: #ffd873;
  opacity: 0.9;
}

@media (max-width: 809px) {
  .announce-strip {
    padding: 44px 0;
  }
  .announce-arc--blue {
    width: 220px;
    height: 220px;
    left: -90px;
    top: -100px;
    border-width: 18px;
  }
  .announce-arc--orange {
    width: 150px;
    height: 150px;
    right: -20px;
    top: -60px;
    border-width: 14px;
  }
  .announce-blob--yellow {
    width: 170px;
    height: 170px;
  }
}

@media (max-width: 480px) {
  .announce-text {
    flex-direction: column;
    gap: 2px;
  }
}

/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
  .decor-shape {
    animation: none !important;
    transition: opacity 300ms ease !important;
  }
  .decor-layer {
    transition: opacity 300ms ease !important;
    clip-path: none !important;
  }
  .feature-band.is-closing .decor-layer {
    opacity: 0;
    clip-path: none !important;
  }
  .feature-band.is-closing .decor-shape {
    transform: none !important;
  }
}

/* ===== CEFAT ANNOUNCEMENT — PLAYFUL INTERACTIVE HERO ===== */
.announce-strip {
  min-height: 480px;
  display: grid;
  place-items: center;
  padding: clamp(90px, 10vw, 150px) 0 clamp(100px, 12vw, 170px);
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 45%, rgba(47,128,237,.045), transparent 34%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

.announce-inner {
  width: min(1180px, calc(100% - 40px));
  text-align: center;
  transform: translate3d(var(--announce-mx,0px), var(--announce-my,0px), 0);
  transition: opacity 120ms linear, transform 120ms linear;
}

.announce-text {
  position: relative;
  z-index: 5;
  gap: clamp(8px, 1vw, 18px);
  line-height: .95;
  filter: drop-shadow(0 12px 30px rgba(47,128,237,.08));
}

.announce-brand,
.announce-highlight {
  display: inline-block;
  will-change: transform;
}

.announce-brand {
  font-size: clamp(3.4rem, 7.5vw, 7rem);
  letter-spacing: -.07em;
  color: #242424;
  animation: announceBrandIn 900ms cubic-bezier(.16,1,.3,1) both;
}

.announce-highlight {
  font-size: clamp(2.8rem, 6.4vw, 6.2rem);
  letter-spacing: -.055em;
  color: var(--secondary);
  animation: announceHighlightIn 1100ms .12s cubic-bezier(.16,1,.3,1) both;
}

.announce-strip:not(.is-active) .announce-brand,
.announce-strip:not(.is-active) .announce-highlight {
  animation-play-state: paused;
}

@keyframes announceBrandIn {
  from { opacity:0; transform:translateY(40px) rotate(-4deg) scale(.94); }
  to { opacity:1; transform:translateY(0) rotate(0) scale(1); }
}
@keyframes announceHighlightIn {
  from { opacity:0; transform:translateY(55px) scale(.88); filter:blur(8px); }
  to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}

/* Ambient glow behind the title */
.announce-glow {
  position:absolute;
  width:clamp(280px,35vw,560px);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(55px);
  opacity:.18;
  animation: announceGlow 7s ease-in-out infinite alternate;
}
.announce-glow--one { background:#2f80ed; left:18%; top:20%; }
.announce-glow--two { background:#ffca0a; right:16%; bottom:4%; animation-delay:-2.5s; }
@keyframes announceGlow {
  from { transform:scale(.85) translate3d(0,0,0); opacity:.10; }
  to { transform:scale(1.12) translate3d(20px,-15px,0); opacity:.22; }
}

/* Playful rings */
.announce-arc--blue {
  width:clamp(260px,28vw,520px);
  height:clamp(260px,28vw,520px);
  left:-9%; top:42%;
  border-width:clamp(18px,2vw,32px);
  border-color:var(--secondary);
  border-right-color:transparent;
  border-bottom-color:transparent;
  transform:rotate(-28deg);
}
.announce-arc--orange {
  width:clamp(180px,20vw,340px);
  height:clamp(180px,20vw,340px);
  right:7%; top:-26%;
  border-width:clamp(14px,1.6vw,24px);
  border-color:#ff8a42;
  border-left-color:transparent;
  border-bottom-color:transparent;
  transform:rotate(16deg);
}
.announce-arc--yellow {
  width:clamp(190px,23vw,390px);
  height:clamp(190px,23vw,390px);
  right:-5%; bottom:-43%;
  border-width:clamp(16px,1.8vw,28px);
  border-color:#ffca0a;
  border-left-color:transparent;
  border-top-color:transparent;
  transform:rotate(-16deg);
}

.announce-blob--yellow { width:90px; height:90px; right:19%; top:28%; background:#ffca0a; opacity:.95; animation: announceBlob 4.8s ease-in-out infinite; }
.announce-blob--pink { width:34px; height:34px; right:8%; top:35%; background:#ff3eaa; opacity:.95; animation: announceBlob 5.4s .5s ease-in-out infinite; }
.announce-blob--cyan { width:26px; height:26px; left:18%; top:23%; background:#55aefe; opacity:.95; animation: announceBlob 4.2s 1s ease-in-out infinite; }
@keyframes announceBlob { 0%,100%{transform:translateY(0) rotate(0) scale(1)} 50%{transform:translateY(-18px) rotate(12deg) scale(1.12)} }

/* Confetti */
.announce-confetti,
.announce-spark {
  position:absolute;
  display:block;
  pointer-events:none;
  z-index:2;
  will-change:transform;
}
.announce-confetti { width:18px; height:34px; border-radius:999px; opacity:.9; animation:confettiFloat 5.5s ease-in-out infinite; }
.announce-confetti--1{left:10%;top:4%;background:#ff8a42;transform:rotate(-18deg);}
.announce-confetti--2{left:27%;top:16%;width:24px;height:24px;background:#55aefe;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation-delay:-1.2s;}
.announce-confetti--3{left:42%;top:6%;width:18px;height:18px;background:#ff8a42;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);animation-delay:-2s;}
.announce-confetti--4{right:10%;top:20%;width:22px;height:22px;background:#ff3eaa;clip-path:polygon(50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%);animation-delay:-.7s;}
.announce-confetti--5{left:5%;bottom:18%;width:16px;height:32px;background:#ffca0a;transform:rotate(22deg);animation-delay:-3s;}
.announce-confetti--6{right:24%;bottom:8%;width:26px;height:26px;background:#55aefe;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation-delay:-4s;}
@keyframes confettiFloat {0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -22px;rotate:14deg}}

.announce-spark { width:14px;height:14px;background:#ffca0a;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);animation:sparkPulse 2.6s ease-in-out infinite; }
.announce-spark--1{left:20%;bottom:18%;}
.announce-spark--2{right:15%;bottom:28%;animation-delay:.8s;background:#ff3eaa;}
.announce-spark--3{left:35%;top:30%;animation-delay:1.4s;background:#55aefe;}
@keyframes sparkPulse {0%,100%{opacity:.35;transform:scale(.65) rotate(0)}50%{opacity:1;transform:scale(1.4) rotate(45deg)}}

/* When the next blue section starts rising, make the announcement feel
   physically pushed away rather than simply disappearing. */
.announce-strip.is-closing .announce-text { filter:blur(2px); }
.announce-strip.is-closing .announce-confetti,
.announce-strip.is-closing .announce-spark { opacity:0; transform:scale(.2) rotate(90deg); transition:opacity .45s ease, transform .65s ease; }

/* Strong visual cover from the following section */
.feature-band--sticky {
  position:sticky;
  top:0;
  z-index:20;
  box-shadow:0 -26px 60px rgba(16,24,40,.18);
  border-radius:32px 32px 0 0;
  overflow:hidden;
}
.feature-band--sticky::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:10px;
  background:linear-gradient(90deg,#2f80ed,#55aefe,#ffca0a,#ff8a42,#ff3eaa,#2f80ed);
  background-size:240% 100%;
  animation:coverGradient 8s linear infinite;
  z-index:3;
}
@keyframes coverGradient {to{background-position:240% 0}}

@media (max-width: 700px) {
  .announce-strip { min-height:420px; padding:90px 0 120px; }
  .announce-text { flex-direction:column; }
  .announce-brand { font-size:clamp(3rem,14vw,5rem); }
  .announce-highlight { font-size:clamp(2.3rem,11vw,4.5rem); }
  .announce-arc--orange,.announce-arc--yellow { opacity:.55; }
  .announce-blob--yellow { width:55px;height:55px;right:10%; }
  .feature-band--sticky { border-radius:22px 22px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .announce-glow,.announce-confetti,.announce-spark,.announce-blob,.feature-band--sticky::before { animation:none !important; }
  .announce-brand,.announce-highlight { animation:none !important; }
}

/* ===== PERFORMANCE PASS: CEFAT ANNOUNCEMENT =====
   Keep the playful look, but reduce paint cost, motion count and section height. */
.announce-strip {
  min-height: 300px;
  padding: 58px 0 70px;
  overflow: hidden;
  background: #fff;
}

.announce-inner {
  width: min(1080px, calc(100% - 32px));
  transform: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.announce-text {
  gap: 10px;
  line-height: .98;
  filter: none;
}

.announce-brand,
.announce-highlight {
  will-change: opacity, transform;
}

.announce-brand {
  font-size: clamp(2.35rem, 5.2vw, 4.7rem);
  letter-spacing: -.065em;
  animation: announceBrandIn 650ms cubic-bezier(.2,.8,.2,1) both;
}

.announce-highlight {
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  letter-spacing: -.05em;
  animation: announceHighlightIn 720ms 60ms cubic-bezier(.2,.8,.2,1) both;
}

/* Remove expensive blurred ambient layers. */
.announce-glow { display:none; }

/* Keep only a few lightweight decorative shapes. */
.decor-layer > * { display:none; }
.decor-layer > .announce-arc--orange,
.decor-layer > .announce-arc--blue,
.decor-layer > .announce-blob--yellow,
.decor-layer > .announce-confetti--2,
.decor-layer > .announce-confetti--4,
.decor-layer > .announce-spark--1 { display:block; }

.announce-arc--blue {
  width: 250px;
  height: 250px;
  left: -105px;
  top: 22%;
  border-width: 16px;
  opacity: .75;
  animation: none;
}

.announce-arc--orange {
  width: 180px;
  height: 180px;
  right: 7%;
  top: -105px;
  border-width: 14px;
  opacity: .72;
  animation: none;
}

.announce-blob--yellow {
  width: 52px;
  height: 52px;
  right: 17%;
  top: 27%;
  opacity: .9;
  animation: announceBlobLite 4.8s ease-in-out infinite;
}

.announce-confetti--2,
.announce-confetti--4,
.announce-spark--1 {
  animation: announceFloatLite 4.5s ease-in-out infinite;
}

.announce-confetti--2 { left: 18%; top: 20%; width: 18px; height:18px; }
.announce-confetti--4 { right: 10%; top: 25%; width:18px; height:18px; }
.announce-spark--1 { left: 30%; bottom: 16%; width:10px; height:10px; }

@keyframes announceBlobLite {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.06); }
}
@keyframes announceFloatLite {
  0%,100% { transform: translate3d(0,0,0) rotate(0); }
  50% { transform: translate3d(0,-8px,0) rotate(7deg); }
}

/* Lightweight cover transition: no blur, no large transforms. */
.announce-strip.is-closing .announce-text {
  filter: none;
  opacity: .28;
  transform: translateY(-18px) scale(.985);
}

.announce-strip.is-closing .announce-arc,
.announce-strip.is-closing .announce-blob,
.announce-strip.is-closing .announce-confetti,
.announce-strip.is-closing .announce-spark {
  opacity: .15;
}

.feature-band--sticky {
  top: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 28px rgba(16,24,40,.12);
}

.feature-band--sticky::before {
  height: 4px;
  animation: none;
  background: linear-gradient(90deg, #2f80ed, #55aefe, #ffca0a, #2f80ed);
}

@media (max-width: 700px) {
  .announce-strip {
    min-height: 235px;
    padding: 48px 0 56px;
  }
  .announce-inner { width: min(100% - 24px, 720px); }
  .announce-text { flex-direction: column; gap: 2px; }
  .announce-brand { font-size: clamp(2rem, 11vw, 3.5rem); }
  .announce-highlight { font-size: clamp(1.7rem, 9vw, 3rem); }
  .announce-arc--blue { width:180px; height:180px; left:-85px; top:25%; border-width:12px; }
  .announce-arc--orange { width:130px; height:130px; right:-30px; top:-70px; border-width:10px; }
  .announce-blob--yellow { width:34px; height:34px; right:12%; }
  .feature-band--sticky { border-radius: 16px 16px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .announce-brand,
  .announce-highlight,
  .announce-confetti,
  .announce-spark,
  .announce-blob { animation: none !important; }
}

/* ===== FINAL BALANCED PASS: FESTIVE + COMPACT =====
   More visual energy without heavy filters, parallax or continuous gradients.
   The announcement is intentionally compact on mobile to avoid excessive
   whitespace between the headline and the following section. */
.announce-strip {
  min-height: 250px;
  padding: 42px 0 52px;
}

.announce-inner {
  width: min(1040px, calc(100% - 32px));
}

.announce-text {
  gap: 4px 10px;
  line-height: .9;
  align-items: baseline;
}

.announce-brand {
  font-size: clamp(2.25rem, 5vw, 4.15rem);
}

.announce-highlight {
  font-size: clamp(1.9rem, 4.35vw, 3.75rem);
}

/* Re-introduce a few lightweight decorations for a livelier composition. */
.decor-layer > .announce-arc--yellow,
.decor-layer > .announce-confetti--1,
.decor-layer > .announce-confetti--3,
.decor-layer > .announce-confetti--5,
.decor-layer > .announce-confetti--6,
.decor-layer > .announce-spark--2,
.decor-layer > .announce-spark--3,
.decor-layer > .announce-sq,
.decor-layer > .announce-note {
  display: block;
}

.announce-arc--yellow {
  width: 210px;
  height: 210px;
  right: -72px;
  bottom: -132px;
  border-width: 15px;
  opacity: .68;
  transform: rotate(-16deg);
}

.announce-confetti--1,
.announce-confetti--3,
.announce-confetti--5,
.announce-confetti--6,
.announce-spark--2,
.announce-spark--3,
.announce-sq,
.announce-note {
  animation: announceFloatLite 5.8s ease-in-out infinite;
}

.announce-confetti--1 { left: 9%; top: 13%; width: 13px; height: 28px; }
.announce-confetti--3 { left: 28%; top: 16%; width: 15px; height: 15px; }
.announce-confetti--5 { left: 6%; bottom: 13%; width: 13px; height: 26px; }
.announce-confetti--6 { right: 23%; bottom: 10%; width: 18px; height: 18px; }
.announce-spark--2 { right: 14%; bottom: 27%; width: 11px; height: 11px; animation-delay: -.8s; }
.announce-spark--3 { left: 38%; top: 25%; width: 9px; height: 9px; animation-delay: -2s; }
.announce-sq { left: 16%; top: 25%; width: 18px; height: 18px; opacity: .82; animation-delay: -1.4s; }
.announce-note { right: 8%; top: 45%; width: 16px; height: 16px; animation-delay: -2.6s; }

@keyframes announceFloatLite {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(0,-7px,0) rotate(8deg); }
}

/* A tiny decorative pulse behind the title; no blur/filter. */
.announce-inner::before {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  left: 18%;
  top: 50%;
  border: 2px solid rgba(47,128,237,.18);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  animation: announcePulse 3.8s ease-in-out infinite;
}

.announce-inner::after {
  content: "✦";
  position: absolute;
  right: 19%;
  top: 22%;
  font-size: 18px;
  color: #ffca0a;
  pointer-events: none;
  animation: announceTwinkle 2.8s ease-in-out infinite;
}

@keyframes announcePulse {
  0%,100% { transform: translateY(-50%) scale(.9); opacity: .45; }
  50% { transform: translateY(-50%) scale(1.12); opacity: .9; }
}

@keyframes announceTwinkle {
  0%,100% { opacity: .35; transform: scale(.75) rotate(0); }
  50% { opacity: 1; transform: scale(1.15) rotate(18deg); }
}

/* Closing remains intentionally subtle: the blue section does the actual cover. */
.announce-strip.is-closing .announce-text {
  opacity: .32;
  transform: translateY(-12px) scale(.99);
}

@media (max-width: 700px) {
  .announce-strip {
    min-height: 210px;
    padding: 34px 0 42px;
  }

  .announce-inner {
    width: min(100% - 24px, 520px);
  }

  /* Keep the two phrases visually tight. They can wrap naturally, but
     do not stack as two large flex rows with a large vertical gap. */
  .announce-text {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 0;
    max-width: 360px;
    margin-inline: auto;
  }

  .announce-brand {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .announce-highlight {
    font-size: clamp(1.65rem, 8.1vw, 2.65rem);
  }

  .announce-arc--blue {
    width: 150px;
    height: 150px;
    left: -78px;
    top: 28%;
    border-width: 10px;
  }

  .announce-arc--orange {
    width: 105px;
    height: 105px;
    right: -32px;
    top: -58px;
    border-width: 9px;
  }

  .announce-arc--yellow {
    width: 130px;
    height: 130px;
    right: -48px;
    bottom: -86px;
    border-width: 10px;
  }

  .announce-blob--yellow { width: 28px; height: 28px; right: 10%; top: 24%; }
  .announce-confetti--1 { left: 8%; top: 9%; }
  .announce-confetti--2 { left: 18%; top: 17%; width: 14px; height: 14px; }
  .announce-confetti--3 { left: 29%; top: 11%; width: 12px; height: 12px; }
  .announce-confetti--4 { right: 8%; top: 19%; width: 14px; height: 14px; }
  .announce-confetti--5 { left: 7%; bottom: 12%; width: 11px; height: 22px; }
  .announce-confetti--6 { right: 20%; bottom: 9%; width: 15px; height: 15px; }
  .announce-spark--1 { left: 26%; bottom: 13%; width: 8px; height: 8px; }
  .announce-spark--2 { right: 12%; bottom: 25%; width: 9px; height: 9px; }
  .announce-spark--3 { left: 36%; top: 23%; width: 7px; height: 7px; }
  .announce-sq { left: 14%; top: 25%; width: 14px; height: 14px; }
  .announce-note { right: 7%; top: 43%; width: 12px; height: 12px; }

  .announce-inner::before {
    width: 48px;
    height: 48px;
    left: 8%;
  }

  .announce-inner::after {
    right: 10%;
    top: 19%;
    font-size: 13px;
  }

  .feature-band--sticky {
    border-radius: 16px 16px 0 0;
  }
}

@media (max-width: 390px) {
  .announce-strip {
    min-height: 195px;
    padding: 29px 0 36px;
  }

  .announce-text {
    max-width: 330px;
  }

  .announce-brand { font-size: 1.85rem; }
  .announce-highlight { font-size: 1.48rem; }

  /* Reduce visual clutter slightly on very small screens while retaining
     enough movement to keep the announcement festive. */
  .announce-confetti--1,
  .announce-confetti--5,
  .announce-sq,
  .announce-note { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .announce-inner::before,
  .announce-inner::after { animation: none !important; }
}

/* ===== MOBILE TYPOGRAPHY CORRECTION =====
   Keep the festive composition, but prevent the announcement headline from
   becoming oversized or creating awkward line breaks on narrow screens. */
@media (max-width: 700px) {
  .announce-strip {
    min-height: 198px;
    padding: 30px 0 34px;
  }

  .announce-inner {
    width: calc(100% - 28px);
  }

  .announce-text {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 100%;
    max-width: 390px;
    margin-inline: auto;
    line-height: .94;
  }

  .announce-brand {
    font-size: clamp(2.15rem, 9vw, 2.65rem);
    line-height: .95;
    letter-spacing: -.055em;
  }

  .announce-highlight {
    display: block;
    width: min(100%, 390px);
    max-width: 390px;
    font-size: clamp(1.65rem, 7.1vw, 2.15rem);
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
  }
}

@media (max-width: 480px) {
  .announce-strip {
    min-height: 188px;
    padding: 27px 0 32px;
  }

  .announce-text {
    max-width: 360px;
  }

  .announce-brand {
    font-size: clamp(2rem, 9.5vw, 2.4rem);
  }

  .announce-highlight {
    max-width: 350px;
    font-size: clamp(1.55rem, 7.3vw, 1.9rem);
  }
}

@media (max-width: 390px) {
  .announce-strip {
    min-height: 178px;
    padding: 24px 0 29px;
  }

  .announce-text {
    max-width: 340px;
  }

  .announce-brand {
    font-size: 2rem;
  }

  .announce-highlight {
    max-width: 335px;
    font-size: 1.55rem;
    line-height: 1;
  }
}