/* =====================================================================
   GLOBALIST · SYSTEMS DIAGRAM LAYER
   Direction: Engineering-Documentation aesthetic
   - Monospace metadata + coordinate labels
   - Hairline grid, leader lines with cross-tick endpoints
   - Mint is the single signal color (no large mint fills)
   - Asymmetric 12-col layouts (no centered-hero, no 3-col equal-grid)

   Applied scoped to: .sys-section · .sys-intake · .sys-manifest
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.sys-section{
  position: relative;
  padding: clamp(64px, 10vw, 140px) 0;
  --sys-mono: 'IBM Plex Mono', 'Berkeley Mono', 'SF Mono', ui-monospace, monospace;
  --sys-ink: #2a3440;
  --sys-hair: rgba(255,255,255,.08);
  --sys-paper: rgba(255,255,255,.03);
}

/* Hairline 12-col grid — visible on hover for the spec-sheet effect */
.sys-section .sys-grid{
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 48px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  position: relative;
}

/* Section header with monospace coordinate label + display headline */
.sys-header{
  grid-column: 1 / -1;
  margin-bottom: clamp(32px, 4vw, 72px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--sys-hair);
  position: relative;
}
.sys-header::after{
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 88px; height: 1px;
  background: var(--primary);
  box-shadow: 0 0 16px rgba(0,237,179,.6);
}
.sys-coord{
  font-family: var(--sys-mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sys-coord::before{
  content: '';
  width: 14px; height: 1px;
  background: var(--primary);
}
.sys-coord .idx{
  color: rgba(255,255,255,.55);
  font-weight: 400;
}

.sys-title{
  grid-column: 1 / 9;
  font-family: 'Inter', sans-serif;
  font-size: clamp(38px, 5.4vw, 84px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .98;
  color: #fff;
  text-transform: none !important;
  text-wrap: balance;
  margin: 0 !important;
  /* override the global gradient clip for these — we want solid white here */
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.sys-title .sys-em{
  color: var(--primary);
  -webkit-text-fill-color: var(--primary);
  text-shadow: 0 0 40px rgba(0,237,179,.45);
}

.sys-meta{
  grid-column: 9 / 13;
  font-family: var(--sys-mono);
  font-size: 11px;
  line-height: 1.7;
  color: rgba(255,255,255,.5);
  letter-spacing: .06em;
  padding-bottom: 6px;
}
.sys-meta b{
  color: rgba(255,255,255,.78);
  font-weight: 500;
}
.sys-meta .kv{
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 8px;
  padding: 2px 0;
  border-top: 1px dashed var(--sys-hair);
}
.sys-meta .kv:first-child{ border-top: 0; }

/* —————————— TILES (Systems Diagram flavor) —————————— */
.sys-tile{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px;
  min-height: 280px;
  background:
    linear-gradient(155deg,
      rgba(5,22,18,.85) 0%,
      rgba(3,12,10,.95) 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition:
    border-color .5s cubic-bezier(0.16,1,0.3,1),
    transform .5s cubic-bezier(0.16,1,0.3,1),
    box-shadow .5s cubic-bezier(0.16,1,0.3,1);
}

/* Cross-tick corner mark (top-left) — Systems-Diagram signature */
.sys-tile::before{
  content: '';
  position: absolute;
  top: 10px; left: 10px;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--primary), var(--primary)) no-repeat left center / 14px 1px,
    linear-gradient(var(--primary), var(--primary)) no-repeat center top  / 1px 14px;
  opacity: .7;
  transition: opacity .35s ease, transform .35s ease;
}
.sys-tile::after{
  content: '';
  position: absolute;
  bottom: 10px; right: 10px;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--primary), var(--primary)) no-repeat right center / 14px 1px,
    linear-gradient(var(--primary), var(--primary)) no-repeat center bottom / 1px 14px;
  opacity: .4;
  transition: opacity .35s ease;
}
.sys-tile:hover{
  border-color: rgba(0,237,179,.35);
  transform: translateY(-4px);
  box-shadow:
    0 30px 70px -30px rgba(0,237,179,.2),
    0 0 0 1px rgba(0,237,179,.12);
}
.sys-tile:hover::before{ opacity: 1; transform: scale(1.1); }
.sys-tile:hover::after{ opacity: .9; }

/* Leader line from tile top-right to a margin label */
.sys-tile .sys-leader{
  position: absolute;
  top: 20px; right: -90px;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  font-family: var(--sys-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--primary);
  opacity: 0;
  transition: opacity .45s cubic-bezier(0.16,1,0.3,1), right .45s cubic-bezier(0.16,1,0.3,1);
}
.sys-tile .sys-leader::before{
  content: '';
  display: block;
  width: 60px; height: 1px;
  background: var(--primary);
  box-shadow: 0 0 6px rgba(0,237,179,.55);
}
.sys-tile .sys-leader::after{
  content: '';
  display: block;
  width: 4px; height: 4px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0,237,179,.8);
}
.sys-tile:hover .sys-leader{ opacity: 1; right: 18px; }
@media(max-width: 991px){ .sys-tile .sys-leader{ display: none; } }

.sys-tile-label{
  font-family: var(--sys-mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  gap: 10px;
}
.sys-tile-label b{
  color: var(--primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sys-tile-label em{
  flex: 1;
  height: 1px;
  background: var(--sys-hair);
  font-style: normal;
}

.sys-tile h3{
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.1;
  color: #fff;
  text-transform: none;
  margin: 0;
}
.sys-tile p{
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.68);
  margin: 0;
}

.sys-sublinks{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px dashed var(--sys-hair);
  padding-top: 14px;
}
.sys-sublinks a{
  display: grid;
  grid-template-columns: 48px 1fr 14px;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: rgba(255,255,255,.84);
  border-bottom: 1px dashed var(--sys-hair);
  transition: color .3s ease, padding-left .35s cubic-bezier(0.16,1,0.3,1), background .3s ease;
}
.sys-sublinks a:last-child{ border-bottom: 0; }
.sys-sublinks a .num{
  font-family: var(--sys-mono);
  font-size: 10px;
  color: rgba(255,255,255,.4);
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
}
.sys-sublinks a .arr{
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  color: var(--primary);
  font-family: var(--sys-mono);
}
.sys-sublinks a:hover{
  color: #fff;
  padding-left: 8px;
  background:
    linear-gradient(90deg, rgba(0,237,179,.04), transparent);
}
.sys-sublinks a:hover .arr{
  opacity: 1;
  transform: translateX(2px);
  text-shadow: 0 0 10px rgba(0,237,179,.6);
}

/* —————————— 12-COL SPANS —————————— */
.sys-col-3  { grid-column: span 3; }
.sys-col-4  { grid-column: span 4; }
.sys-col-5  { grid-column: span 5; }
.sys-col-6  { grid-column: span 6; }
.sys-col-7  { grid-column: span 7; }
.sys-col-8  { grid-column: span 8; }
.sys-col-12 { grid-column: 1 / -1; }

/* Tablet: everything collapses to fewer cols */
@media(max-width: 991px){
  .sys-section .sys-grid{ grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .sys-title{ grid-column: 1 / -1; }
  .sys-meta{ grid-column: 1 / -1; }
  .sys-col-3, .sys-col-4, .sys-col-5 { grid-column: span 6; }
  .sys-col-6, .sys-col-7, .sys-col-8 { grid-column: 1 / -1; }
  .sys-tile{ min-height: 220px; padding: 22px; }
}
@media(max-width: 767px){
  /* Mobile + Phone-Landscape: einheitlicher Gutter + Gap.
     Selector benutzt [class*="sys-col-"] (substring), nicht ^= (prefix),
     weil Tiles oft mehrere Klassen haben (z.B. "mfst-tile sys-col-8") und
     dann das ^= nicht greift. */
  .sys-section .sys-grid{
    grid-template-columns: 1fr !important;
    padding-left: 12px;
    padding-right: 12px;
    gap: 14px;
  }
  .sys-section .sys-grid > *,
  .sys-section .sys-grid > [class*="sys-col-"]{
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .sys-section .sys-header{
    padding-left: 0;
    padding-right: 0;
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* =====================================================================
   INTAKE (contact) — asymmetric 5/7 + schematic on the right
   ===================================================================== */
.sys-intake{
  position: relative;
  padding: clamp(72px, 10vw, 128px) 0 clamp(48px, 6vw, 96px);
  border-top: 1px solid var(--sys-hair);
  border-bottom: 1px solid var(--sys-hair);
}

/* Corner marks — page-scope proofreader ticks */
.sys-intake::before,
.sys-intake::after{
  content: ''; position: absolute; width: 18px; height: 18px;
  background:
    linear-gradient(var(--primary), var(--primary)) no-repeat left top / 18px 1px,
    linear-gradient(var(--primary), var(--primary)) no-repeat left top / 1px 18px;
  opacity: .55;
}
.sys-intake::before{ top: 10px; left: 10px; }
.sys-intake::after{
  top: 10px; right: 10px;
  background:
    linear-gradient(var(--primary), var(--primary)) no-repeat right top / 18px 1px,
    linear-gradient(var(--primary), var(--primary)) no-repeat right top / 1px 18px;
}

.sys-intake .sys-grid{
  align-items: start;
}

.sys-intake-left{ grid-column: 1 / 6; }
.sys-intake-right{ grid-column: 7 / 13; }

.sys-intake h1{
  font-family: 'Inter', sans-serif;
  font-size: clamp(44px, 6vw, 96px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .96;
  color: #fff;
  text-transform: none !important;
  margin: 0 0 28px;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.sys-intake h1 em{
  color: var(--primary);
  font-style: normal;
  text-shadow: 0 0 60px rgba(0,237,179,.5);
}

.sys-intake-lead{
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,.75);
  max-width: 44ch;
  margin-bottom: 36px;
}

.sys-intake-bullets{
  list-style: none; padding: 0; margin: 36px 0 0;
  border-top: 1px solid var(--sys-hair);
}
.sys-intake-bullets li{
  padding: 14px 0;
  border-bottom: 1px dashed var(--sys-hair);
  font-family: var(--sys-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 16px;
  align-items: center;
}
.sys-intake-bullets li b{
  color: var(--primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sys-intake-bullets li::after{
  content: 'OK';
  font-size: 9.5px;
  letter-spacing: .3em;
  color: var(--primary);
  border: 1px solid rgba(0,237,179,.4);
  padding: 3px 8px;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0,237,179,.15);
}

/* Schematic on the right — 4-step process */
.sys-schema{
  position: relative;
  padding: 28px;
  border: 1px solid var(--sys-hair);
  border-radius: 14px;
  background:
    linear-gradient(135deg,
      rgba(5,22,18,.6) 0%,
      rgba(2,12,9,.85) 100%);
  min-height: 460px;
  display: flex;
  flex-direction: column;
}
.sys-schema-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--sys-hair);
  font-family: var(--sys-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}
.sys-schema-head .live{ color: var(--primary); display: inline-flex; align-items: center; gap: 8px; }
.sys-schema-head .live::before{
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(0,237,179,.8);
  animation: syspulse 1.4s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes syspulse{
  0%, 100% { opacity: 1; box-shadow: 0 0 12px rgba(0,237,179,.8); }
  50% { opacity: .3; box-shadow: 0 0 4px rgba(0,237,179,.3); }
}

.sys-schema-step{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px dashed var(--sys-hair);
  align-items: center;
  position: relative;
}
.sys-schema-step:first-of-type{ border-top: 0; padding-top: 0; }
.sys-schema-step .idx{
  font-family: var(--sys-mono);
  font-size: 34px;
  font-weight: 500;
  color: rgba(255,255,255,.28);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  transition: color .4s ease, text-shadow .4s ease;
}
.sys-schema-step:hover .idx{
  color: var(--primary);
  text-shadow: 0 0 20px rgba(0,237,179,.5);
}
.sys-schema-step strong{
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-transform: none;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.sys-schema-step span{
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.62);
}
.sys-schema-step .tag{
  position: absolute;
  right: 0;
  font-family: var(--sys-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  color: rgba(0,237,179,.55);
  text-transform: uppercase;
}

.sys-schema-foot{
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--sys-hair);
  font-family: var(--sys-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}
.sys-schema-foot b{ color: var(--primary); font-weight: 500; letter-spacing: .22em; }

/* =====================================================================
   INTAKE FORM — spec-sheet styling around HubSpot embed
   ===================================================================== */
.sys-form-wrap{
  padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 8vw, 128px);
}
.sys-form-wrap .sys-grid{ align-items: start; }

.sys-form-side{
  grid-column: 1 / 5;
  padding-right: 12px;
  position: sticky;
  top: 120px;
}
.sys-form-main{
  grid-column: 5 / 13;
}

.sys-form-side .sys-coord{ margin-bottom: 18px; }
.sys-form-side h2{
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 20px;
  text-transform: none !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.sys-form-side p{
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  margin: 0 0 28px;
}
.sys-form-side .sys-contacts{
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--sys-hair);
}
.sys-form-side .sys-contacts li{
  padding: 14px 0;
  border-bottom: 1px dashed var(--sys-hair);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: center;
}
.sys-form-side .sys-contacts .k{
  font-family: var(--sys-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
}
.sys-form-side .sys-contacts .v a,
.sys-form-side .sys-contacts .v{
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: color .25s ease, text-shadow .25s ease;
}
.sys-form-side .sys-contacts .v a:hover{
  color: var(--primary);
  text-shadow: 0 0 14px rgba(0,237,179,.5);
}

/* Wrap the hubspot embed — spec-sheet container */
.sys-form-main .sys-embed{
  position: relative;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--sys-hair);
  border-radius: 14px;
  background:
    linear-gradient(155deg,
      rgba(5,22,18,.55) 0%,
      rgba(2,12,9,.85) 100%);
}
.sys-form-main .sys-embed::before{
  content: 'FORM · 01';
  position: absolute;
  top: -9px; left: 20px;
  padding: 2px 10px;
  background: var(--bg);
  font-family: var(--sys-mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--primary);
  text-transform: uppercase;
}
/* Style the actual HubSpot-rendered inputs inside the embed */
.sys-form-main .sys-embed input[type="text"],
.sys-form-main .sys-embed input[type="email"],
.sys-form-main .sys-embed input[type="tel"],
.sys-form-main .sys-embed select,
.sys-form-main .sys-embed textarea,
.sys-form-main .sys-embed .hs-input{
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sys-hair) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #fff !important;
  transition: border-color .3s ease !important;
}
.sys-form-main .sys-embed input:focus,
.sys-form-main .sys-embed textarea:focus,
.sys-form-main .sys-embed select:focus,
.sys-form-main .sys-embed .hs-input:focus{
  outline: none !important;
  border-bottom-color: var(--primary) !important;
  box-shadow: 0 1px 0 0 var(--primary), 0 4px 20px -6px rgba(0,237,179,.35) !important;
}
.sys-form-main .sys-embed label,
.sys-form-main .sys-embed .hs-form-field > label{
  font-family: var(--sys-mono) !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.55) !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 6px !important;
}
.sys-form-main .sys-embed .hs-button,
.sys-form-main .sys-embed input[type="submit"]{
  background: var(--primary) !important;
  color: #011d17 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  padding: 14px 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all .3s cubic-bezier(0.16,1,0.3,1) !important;
  margin-top: 16px !important;
  box-shadow: 0 0 0 0 rgba(0,237,179,.45) !important;
}
.sys-form-main .sys-embed .hs-button:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px -8px rgba(0,237,179,.55), 0 0 32px rgba(0,237,179,.35) !important;
}
.sys-form-main .sys-embed .hs-error-msgs,
.sys-form-main .sys-embed .hs-error-msg{
  color: #ff7a7a !important;
  font-family: var(--sys-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
}

@media(max-width: 991px){
  .sys-intake-left, .sys-intake-right,
  .sys-form-side, .sys-form-main{
    grid-column: 1 / -1;
  }
  .sys-form-side{ position: static; margin-bottom: 24px; }
}

/* =====================================================================
   Counter (scroll-in animated number)
   ===================================================================== */
.sys-counter{
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  font-weight: 900;
  letter-spacing: -.03em;
  text-shadow: 0 0 40px rgba(0,237,179,.5);
}

/* =====================================================================
   Creative Ads Strip — pure CSS marquee
   ===================================================================== */
.mfst-creatives{
  margin-top: clamp(48px, 6vw, 96px);
  padding-top: clamp(36px, 4vw, 64px);
  border-top: 1px solid rgba(255,255,255,.08);
}

.mfst-creatives-hd{
  max-width: 1360px;
  margin: 0 auto clamp(24px, 3vw, 40px);
  padding: 0 clamp(16px, 3vw, 48px);
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.mfst-creatives-eyebrow{
  font-family: var(--sys-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary, #00edb3);
  white-space: nowrap;
}

.mfst-creatives-title{
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}

/* Marquee wrapper — clips overflow, fades edges */
.mfst-creatives-mask{
  position: relative;
  overflow: hidden;
}

.mfst-creatives-mask::before,
.mfst-creatives-mask::after{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 6vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.mfst-creatives-mask::before{
  left: 0;
  background: linear-gradient(to right, #0c131a 0%, transparent 100%);
}
.mfst-creatives-mask::after{
  right: 0;
  background: linear-gradient(to left, #0c131a 0%, transparent 100%);
}

/* Marquee track — two identical sets side by side, animates -50% */
@keyframes mfst-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.mfst-marquee{
  overflow: hidden;
}

.mfst-marquee-track{
  display: flex;
  gap: 14px;
  width: max-content;
  animation: mfst-marquee 60s linear infinite;
  will-change: transform;
}

.mfst-marquee-track:hover{
  animation-play-state: paused;
}

.mfst-marquee-track img{
  width: 260px;
  height: 325px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.09);
}

@media (max-width: 767px){
  .mfst-creatives-hd{ flex-direction: column; gap: 6px; }
  .mfst-marquee-track img{ width: 200px; height: 250px; border-radius: 10px; }
  .mfst-marquee-track{ gap: 10px; animation-duration: 45s; }
}

@media (max-width: 480px){
  .mfst-marquee-track img{ width: 160px; height: 200px; }
}

@media (hover: none){
  .mfst-marquee-track:hover{ animation-play-state: running; }
}