/* ============================================================
   MarketIQ Newsletter Ad — Stylesheet v1.4.0
   Brand: #212D45 | #FFC03D | #FFAE00 | #ffffff | #4B4F58
   All selectors scoped to .mqna-wrap to beat theme overrides
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---- CSS Variables per theme ---- */
.mqna-wrap.mqna-theme-dark {
    --mqna-bg:           #212D45;
    --mqna-border:       rgba(255,192,61,0.25);
    --mqna-accent:       #FFC03D;
    --mqna-accent-hover: #FFAE00;
    --mqna-text:         #ffffff;
    --mqna-muted:        rgba(255,255,255,0.6);
    --mqna-badge-bg:     rgba(255,192,61,0.15);
    --mqna-badge-color:  #FFC03D;
    --mqna-logo-bg:      #FFC03D;
    --mqna-logo-color:   #212D45;
    --mqna-btn-bg:       #FFC03D;
    --mqna-btn-color:    #212D45;
    --mqna-btn-hover:    #FFAE00;
    --mqna-input-bg:     rgba(255,255,255,0.08);
    --mqna-input-border: rgba(255,192,61,0.35);
    --mqna-input-color:  #ffffff;
    --mqna-spark-color:  #FFC03D;
    --mqna-stat-pos:     #4cde8c;
    --mqna-stat-neg:     #ff7070;
    --mqna-stats-border: rgba(255,255,255,0.08);
    --mqna-shadow:       0 20px 60px rgba(0,0,0,0.45);
}
.mqna-wrap.mqna-theme-light {
    --mqna-bg:           #ffffff;
    --mqna-border:       rgba(33,45,69,0.12);
    --mqna-accent:       #FFC03D;
    --mqna-accent-hover: #FFAE00;
    --mqna-text:         #212D45;
    --mqna-muted:        #4B4F58;
    --mqna-badge-bg:     rgba(255,192,61,0.12);
    --mqna-badge-color:  #FFAE00;
    --mqna-logo-bg:      #212D45;
    --mqna-logo-color:   #FFC03D;
    --mqna-btn-bg:       #FFC03D;
    --mqna-btn-color:    #212D45;
    --mqna-btn-hover:    #FFAE00;
    --mqna-input-bg:     #f1f4f8;
    --mqna-input-border: rgba(33,45,69,0.2);
    --mqna-input-color:  #212D45;
    --mqna-spark-color:  #FFC03D;
    --mqna-stat-pos:     #16a34a;
    --mqna-stat-neg:     #dc2626;
    --mqna-stats-border: rgba(33,45,69,0.08);
    --mqna-shadow:       0 8px 32px rgba(33,45,69,0.1);
}
.mqna-wrap.mqna-theme-gold {
    --mqna-bg:           #212D45;
    --mqna-border:       rgba(255,192,61,0.5);
    --mqna-accent:       #FFC03D;
    --mqna-accent-hover: #FFAE00;
    --mqna-text:         #ffffff;
    --mqna-muted:        rgba(255,255,255,0.65);
    --mqna-badge-bg:     rgba(255,192,61,0.2);
    --mqna-badge-color:  #FFC03D;
    --mqna-logo-bg:      linear-gradient(135deg,#FFC03D,#FFAE00);
    --mqna-logo-color:   #212D45;
    --mqna-btn-bg:       linear-gradient(135deg,#FFC03D,#FFAE00);
    --mqna-btn-color:    #212D45;
    --mqna-btn-hover:    linear-gradient(135deg,#FFAE00,#FFC03D);
    --mqna-input-bg:     rgba(255,255,255,0.07);
    --mqna-input-border: rgba(255,192,61,0.45);
    --mqna-input-color:  #ffffff;
    --mqna-spark-color:  #FFC03D;
    --mqna-stat-pos:     #86efac;
    --mqna-stat-neg:     #fca5a5;
    --mqna-stats-border: rgba(255,192,61,0.15);
    --mqna-shadow:       0 24px 80px rgba(0,0,0,0.6);
}

/* ---- Wrapper — hardened against theme overrides ---- */
.mqna-wrap {
    display:      block !important;
    position:     relative !important;
    background:   var(--mqna-bg) !important;
    border:       1px solid var(--mqna-border) !important;
    border-radius:16px !important;
    overflow:     hidden !important;
    box-shadow:   var(--mqna-shadow) !important;
    font-family:  'Inter', sans-serif !important;
    color:        var(--mqna-text) !important;
    margin:       1.5em 0 !important;
    isolation:    isolate !important;
    box-sizing:   border-box !important;
    width:        100% !important;
    max-width:    100% !important;
}
.mqna-wrap *, .mqna-wrap *::before, .mqna-wrap *::after {
    box-sizing: border-box !important;
}

/* ---- Decorative background chart ---- */
.mqna-wrap .mqna-bg-chart {
    position:       absolute !important;
    bottom:         0 !important; right: 0 !important;
    width:          50% !important; height: 100% !important;
    opacity:        0.1 !important;
    color:          var(--mqna-spark-color) !important;
    pointer-events: none !important;
    z-index:        0 !important;
}
.mqna-wrap .mqna-bg-chart svg { width: 100% !important; height: 100% !important; display: block !important; }
.mqna-wrap .mqna-spark-dot    { animation: mqna-pulse 2s ease-in-out infinite; }
@keyframes mqna-pulse { 0%,100% { r:4; opacity:1; } 50% { r:6; opacity:.7; } }

.mqna-wrap .mqna-grid-overlay {
    position:         absolute !important; inset: 0 !important;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                      linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) !important;
    background-size:  40px 40px !important;
    pointer-events:   none !important; z-index: 0 !important;
}
.mqna-theme-light .mqna-grid-overlay {
    background-image: linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),
                      linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px) !important;
}

/* ---- Inner ---- */
.mqna-wrap .mqna-inner {
    position:       relative !important; z-index: 1 !important;
    display:        flex !important; flex-direction: column !important;
    gap:            18px !important; padding: 32px 36px 24px !important; margin: 0 !important;
}

/* ---- Logo + badge ---- */
.mqna-wrap .mqna-top-row {
    display: flex !important; align-items: center !important;
    gap: 10px !important; flex-wrap: wrap !important;
}
.mqna-wrap .mqna-logo {
    display: flex !important; align-items: center !important;
    gap: 7px !important; text-decoration: none !important;
}
.mqna-wrap .mqna-logo-mark {
    display: inline-block !important;
    background: var(--mqna-logo-bg, var(--mqna-accent)) !important;
    color: var(--mqna-logo-color) !important;
    font-family: 'Inter', sans-serif !important; font-weight: 800 !important;
    font-size: 12px !important; letter-spacing: .1em !important;
    padding: 5px 8px !important; border-radius: 6px !important; line-height: 1 !important;
}
.mqna-wrap .mqna-logo-text {
    font-family: 'Inter', sans-serif !important; font-size: 14px !important;
    font-weight: 400 !important; color: var(--mqna-muted) !important;
}
.mqna-wrap .mqna-logo-text strong { font-weight: 700 !important; color: var(--mqna-text) !important; }
.mqna-wrap .mqna-badge {
    display: inline-block !important;
    background: var(--mqna-badge-bg) !important; color: var(--mqna-badge-color) !important;
    font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em !important;
    text-transform: uppercase !important; padding: 4px 10px !important;
    border-radius: 20px !important; border: 1px solid var(--mqna-badge-color) !important; line-height: 1.4 !important;
}

/* ---- Copy ---- */
.mqna-wrap .mqna-headline {
    font-family: 'Inter', sans-serif !important; display: block !important;
    font-size: clamp(20px, 3.5vw, 32px) !important; font-weight: 800 !important;
    line-height: 1.15 !important; color: var(--mqna-text) !important;
    letter-spacing: -.02em !important; margin: 0 0 8px !important;
}
.mqna-wrap .mqna-subheadline {
    display: block !important; font-size: 15px !important; font-weight: 600 !important;
    color: var(--mqna-accent) !important; margin: 0 0 6px !important; line-height: 1.4 !important;
}
.mqna-wrap .mqna-body {
    display: block !important; font-size: 13.5px !important;
    line-height: 1.65 !important; color: var(--mqna-muted) !important; margin: 0 !important;
}

/* ---- CTA ---- */
.mqna-wrap .mqna-cta-area {
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; gap: 8px !important;
}
.mqna-wrap .mqna-btn {
    display:      inline-flex !important; align-items: center !important;
    justify-content: center !important; gap: 6px !important;
    background:   var(--mqna-btn-bg) !important; color: var(--mqna-btn-color) !important;
    font-family:  'Inter', sans-serif !important; font-size: 15px !important;
    font-weight:  700 !important; padding: 13px 26px !important;
    border-radius:10px !important; border: none !important; cursor: pointer !important;
    text-decoration: none !important; letter-spacing: .01em !important;
    box-shadow:   0 2px 12px rgba(0,0,0,.25) !important; line-height: 1 !important;
    transition:   background .2s, transform .15s, box-shadow .2s !important;
}
.mqna-wrap .mqna-btn:hover {
    background: var(--mqna-btn-hover) !important; transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(0,0,0,.35) !important;
}

/* Form */
.mqna-wrap .mqna-form-wrap { width: 100% !important; max-width: 520px !important; }
.mqna-wrap .mqna-input-row { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.mqna-wrap .mqna-email-input {
    flex: 1 1 200px !important;
    background: var(--mqna-input-bg) !important; border: 1px solid var(--mqna-input-border) !important;
    border-radius: 10px !important; color: var(--mqna-input-color) !important;
    font-family: 'Inter', sans-serif !important; font-size: 14px !important;
    padding: 12px 15px !important; outline: none !important; min-height: 44px !important; line-height: 1.4 !important;
}
.mqna-wrap .mqna-email-input::placeholder { color: var(--mqna-muted) !important; }
.mqna-wrap .mqna-email-input:focus {
    border-color: var(--mqna-accent) !important; box-shadow: 0 0 0 3px rgba(255,192,61,.15) !important;
}
.mqna-wrap .mqna-success-msg { font-size: 14px !important; font-weight: 600 !important; color: var(--mqna-stat-pos,#4cde8c) !important; padding: 8px 0 0 !important; }
.mqna-wrap .mqna-error-msg   { font-size: 13px !important; color: var(--mqna-stat-neg,#ff6b6b) !important; padding: 6px 0 0 !important; }
.mqna-wrap .mqna-disclaimer  { display: block !important; font-size: 12px !important; color: var(--mqna-muted) !important; opacity: .75 !important; margin: 0 !important; }

/* ============================================================
   LIVE TICKER — strongest possible specificity
   ============================================================ */
.mqna-wrap .mqna-ticker-wrap {
    display:     flex !important; align-items: stretch !important; flex-wrap: nowrap !important;
    border-top:  1px solid var(--mqna-stats-border) !important;
    overflow:    hidden !important;
    height:      36px !important; min-height: 36px !important; max-height: 36px !important;
    width:       100% !important; margin-top: 4px !important;
}
.mqna-wrap .mqna-ticker-label {
    flex-shrink:    0 !important; display: flex !important; align-items: center !important;
    gap:            6px !important; background: var(--mqna-accent) !important;
    color:          var(--mqna-btn-color) !important; font-size: 10px !important;
    font-weight:    800 !important; letter-spacing: .12em !important;
    padding:        0 12px !important; white-space: nowrap !important; z-index: 2 !important;
}
.mqna-wrap .mqna-ticker-live-dot {
    display: inline-block !important; flex-shrink: 0 !important;
    width: 7px !important; height: 7px !important; border-radius: 50% !important;
    background: var(--mqna-btn-color) !important;
    animation: mqna-live-pulse 1.6s ease-in-out infinite !important;
}
@keyframes mqna-live-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.75);} }

.mqna-wrap .mqna-ticker-track-outer {
    flex:      1 !important; min-width: 0 !important;
    overflow:  hidden !important; display: flex !important;
    align-items: center !important; position: relative !important;
    -webkit-mask-image: linear-gradient(to right,transparent 0%,black 3%,black 97%,transparent 100%) !important;
    mask-image:         linear-gradient(to right,transparent 0%,black 3%,black 97%,transparent 100%) !important;
}
.mqna-wrap .mqna-ticker-track {
    display:      flex !important; flex-wrap: nowrap !important; white-space: nowrap !important;
    align-items:  center !important; width: max-content !important;
    animation:    mqna-scroll 45s linear infinite !important; will-change: transform !important;
}
.mqna-wrap .mqna-ticker-track:hover { animation-play-state: paused !important; }
@keyframes mqna-scroll { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

.mqna-wrap .mqna-ticker-item {
    display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important;
    gap: 5px !important; padding: 0 6px !important; white-space: nowrap !important;
    font-size: 12px !important; font-variant-numeric: tabular-nums !important;
}
.mqna-wrap .mqna-ticker-name   { color: var(--mqna-muted) !important; font-weight: 500 !important; white-space: nowrap !important; }
.mqna-wrap .mqna-ticker-price  { color: var(--mqna-text) !important;  font-weight: 600 !important; white-space: nowrap !important; }
.mqna-wrap .mqna-ticker-change { font-weight: 600 !important; font-size: 11px !important; white-space: nowrap !important; }
.mqna-wrap .mqna-ticker-up     { color: var(--mqna-stat-pos) !important; }
.mqna-wrap .mqna-ticker-down   { color: var(--mqna-stat-neg) !important; }
.mqna-wrap .mqna-ticker-sep    {
    color: var(--mqna-muted) !important; opacity: .25 !important;
    padding: 0 3px !important; flex-shrink: 0 !important; white-space: nowrap !important;
}

/* ============================================================
   Layout variants
   ============================================================ */
.mqna-wrap.mqna-layout-card .mqna-inner    { padding: 22px 26px 18px !important; gap: 14px !important; }
.mqna-wrap.mqna-layout-card .mqna-headline { font-size: clamp(17px,3vw,24px) !important; }
.mqna-wrap.mqna-layout-card .mqna-bg-chart { width: 45% !important; opacity: .08 !important; }

.mqna-wrap.mqna-layout-inline { border-radius: 10px !important; }
.mqna-wrap.mqna-layout-inline .mqna-inner {
    flex-direction: row !important; align-items: center !important;
    padding: 16px 22px !important; gap: 18px !important; flex-wrap: wrap !important;
}
.mqna-wrap.mqna-layout-inline .mqna-top-row  { display: none !important; }
.mqna-wrap.mqna-layout-inline .mqna-copy     { flex: 1 1 240px !important; }
.mqna-wrap.mqna-layout-inline .mqna-headline { font-size: 17px !important; margin-bottom: 3px !important; }
.mqna-wrap.mqna-layout-inline .mqna-cta-area { flex: 0 0 auto !important; }

/* ============================================================
   MOBILE — 680px
   ============================================================ */
@media (max-width: 680px) {
    .mqna-wrap { border-radius: 12px !important; margin: 1em 0 !important; }
    .mqna-wrap .mqna-inner    { padding: 20px 18px 16px !important; gap: 14px !important; }
    .mqna-wrap .mqna-bg-chart { display: none !important; }
    .mqna-wrap .mqna-headline { font-size: clamp(18px,5.5vw,26px) !important; }
    .mqna-wrap .mqna-body     { font-size: 13px !important; }
    .mqna-wrap .mqna-btn      { width: 100% !important; padding: 14px 20px !important; }
    .mqna-wrap .mqna-form-wrap  { max-width: 100% !important; }
    .mqna-wrap .mqna-input-row  { flex-direction: column !important; gap: 10px !important; }
    .mqna-wrap .mqna-email-input { flex: none !important; width: 100% !important; }
    .mqna-wrap.mqna-layout-inline .mqna-inner {
        flex-direction: column !important; align-items: flex-start !important; padding: 16px 18px !important;
    }
    .mqna-wrap.mqna-layout-inline .mqna-cta-area,
    .mqna-wrap.mqna-layout-inline .mqna-btn { width: 100% !important; }
    .mqna-wrap.mqna-layout-card .mqna-inner { padding: 18px 16px 14px !important; }
}

/* ============================================================
   MOBILE — 480px phones
   ============================================================ */
@media (max-width: 480px) {
    .mqna-wrap .mqna-inner     { padding: 16px 14px 14px !important; gap: 12px !important; }
    .mqna-wrap .mqna-logo-text { display: none !important; }
    .mqna-wrap .mqna-logo-mark { font-size: 11px !important; padding: 4px 7px !important; }
    .mqna-wrap .mqna-badge     { font-size: 10px !important; padding: 3px 8px !important; }
    .mqna-wrap .mqna-headline    { font-size: clamp(17px,5.5vw,21px) !important; }
    .mqna-wrap .mqna-subheadline { font-size: 13px !important; }
    .mqna-wrap .mqna-btn { font-size: 14px !important; padding: 13px 16px !important; min-height: 46px !important; }
    /* Compact ticker — stays visible */
    .mqna-wrap .mqna-ticker-wrap { height: 30px !important; min-height: 30px !important; max-height: 30px !important; }
    .mqna-wrap .mqna-ticker-label { padding: 0 8px !important; font-size: 9px !important; gap: 4px !important; }
    .mqna-wrap .mqna-ticker-live-dot { width: 5px !important; height: 5px !important; }
    .mqna-wrap .mqna-ticker-item   { font-size: 10px !important; padding: 0 3px !important; gap: 3px !important; }
    .mqna-wrap .mqna-ticker-change { font-size: 9px !important; }
    .mqna-wrap .mqna-ticker-sep    { padding: 0 1px !important; }
    .mqna-wrap .mqna-disclaimer { font-size: 11px !important; }
}