/* Launch-special announcement bar for the $999 bundle (Tasks 8-9).
   Signal Tower tokens per DESIGN.md: Depth Ink #0f172a background, white
   text (high contrast), Signal Teal #0891b2 solid CTA on the homepage,
   Signal Teal -> Market Green #059669 gradient CTA in the app shell.

   Layout: in-flow (not fixed/sticky) so it scrolls away with the page --
   see assets/announcement-banner.asp and assets/js/announcement-banner.js
   for why. It is given a fixed, non-wrapping height (44px, with the
   secondary copy dropped and the row tightened below 560px) so the
   fixed homepage nav (.topbar) and the fixed app-shell sidebar
   (.client-sidebar) can be nudged down by a single known value instead of
   needing a JS-measured height. While the banner is in the initial
   viewport, announcement-banner.js toggles html.sd-announce-visible
   (same sentinel + IntersectionObserver technique default.asp already
   uses for nav-elevation-on-scroll) so the nav/sidebar snap back to their
   normal top:0 once the banner scrolls out of view, and the dismiss
   button removes the class immediately for a snappy layout response.

   Without JS the class never applies, so the fixed nav/sidebar stay at
   top:0 and may visually sit in front of/behind the banner for its own
   height on first paint; the banner is given a z-index above both so its
   real <a href="/bundle/"> CTA remains visible and reachable either way. */

.sd-announce {
    position: relative;
    z-index: 50;
    height: 44px;
    background: #0f172a;
    color: #f7f9fd;
    overflow: hidden;
}
.sd-announce.is-dismissed { display: none; }

.sd-announce-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.sd-announce-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-family: Manrope, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #e2e8f0;
    white-space: nowrap;
}
.sd-announce-copy > i {
    flex: 0 0 auto;
    color: #0891b2;
    font-size: 12px;
}
.sd-announce-copy strong { color: #fff; font-weight: 800; }
.sd-announce-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-announce-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.sd-announce-cta {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 999px;
    color: #fff;
    font-family: Manrope, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sd-announce-cta--solid { background: #0e7490; }
.sd-announce-cta--gradient { background: linear-gradient(135deg, #0891b2, #059669); }
.sd-announce-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(8, 145, 178, 0.35);
}
.sd-announce-cta:focus-visible {
    outline: 2px solid #0891b2;
    outline-offset: 2px;
}

.sd-announce-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.sd-announce-dismiss:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.sd-announce-dismiss:focus-visible {
    outline: 2px solid #0891b2;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .sd-announce-cta, .sd-announce-dismiss { transition: none; }
    .sd-announce-cta:hover { transform: none; }
}

@media (max-width: 560px) {
    .sd-announce-extra { display: none; }
    .sd-announce-row { gap: 10px; padding: 0 12px; }
    .sd-announce-cta { padding: 6px 12px; font-size: 12px; }
}

/* Keep the fixed homepage nav / app-shell sidebar clear of the banner
   while it is in view; see announcement-banner.js for how/when this
   class toggles. Selector specificity (html.class + descendant) wins
   over the base .topbar / .client-sidebar rules regardless of <link>
   order, so this is safe even if a page's stylesheet order changes. */
html.sd-announce-visible .topbar { top: 44px; }
html.sd-announce-visible .client-sidebar { top: 44px; }

/* ==================================================================
   First-load popup modal.
   Rendered display:none by default (costs nothing for no-JS visitors /
   crawlers, no CLS/LCP). announcement-banner.js opens it in TWO steps so
   the entrance actually animates: it adds .is-open (display:flex) then,
   on the next frame, .is-visible (which drives the transitions below).
   You cannot transition an element out of display:none in a single
   frame, which is why the earlier single-class version popped in flat.

   Motion: a springy overshoot entrance (back-out cubic-bezier) with a
   blurring Depth-Ink scrim -- deliberate "pop". The card carries a
   teal->green gradient accent bar + a pulsing "launch special" badge as
   the one gradient echo (DESIGN.md); the CTA stays SOLID teal so the
   popup never adds a second full-strength gradient CTA over the hero.
   All motion is disabled under prefers-reduced-motion (plain fade only).
   ================================================================== */

.sd-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sd-popup.is-open { display: flex; }

.sd-popup-scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.68);
    opacity: 0;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}
.sd-popup.is-visible .sd-popup-scrim {
    opacity: 1;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.sd-popup-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 40px 32px 32px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 32px 80px rgba(15, 23, 42, 0.38), 0 6px 20px rgba(15, 23, 42, 0.18);
    text-align: center;
    opacity: 0;
    transform: translateY(28px) scale(0.86);
    transition: opacity 0.32s ease, transform 0.44s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
}
.sd-popup.is-visible .sd-popup-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* teal->green gradient accent bar across the top edge of the card */
.sd-popup-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(135deg, #0891b2, #06b6d4, #059669);
    border-radius: 20px 20px 0 0;
}

.sd-popup-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 6px 14px 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0891b2, #059669);
    color: #ffffff;
    font-family: Manrope, Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sd-popup-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: sdPopupPulse 1.8s ease-out infinite;
}
@keyframes sdPopupPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.sd-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f0f4f9;
    color: #334155;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.sd-popup-close:hover { background: #e2e8f0; color: #0f172a; }
.sd-popup-close:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }

.sd-popup-title {
    margin: 0 0 12px;
    padding: 0 4px;
    font-family: "Red Hat Display", sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.sd-popup-count { color: #0891b2; }

.sd-popup-copy {
    margin: 0 0 8px;
    font-family: Manrope, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #334155;
}
.sd-popup-copy strong { color: #0f172a; font-weight: 800; }

.sd-popup-price {
    margin: 0 0 24px;
    font-family: Manrope, Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0891b2;
}
.sd-popup-price strong { font-family: "Red Hat Display", sans-serif; font-size: 1.35rem; }
.sd-popup-price span { font-weight: 500; color: #64748b; }

.sd-popup-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sd-popup-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    border-radius: 12px;
    background: #0891b2;
    color: #ffffff;
    font-family: Manrope, Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.24);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.sd-popup-cta:hover {
    background: #0a7c99;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(8, 145, 178, 0.34);
}
.sd-popup-cta:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }

.sd-popup-later {
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: #64748b;
    font-family: Manrope, Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.sd-popup-later:hover { color: #334155; }
.sd-popup-later:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .sd-popup-scrim {
        transition: opacity 0.15s ease;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .sd-popup.is-visible .sd-popup-scrim {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .sd-popup-card {
        transform: none;
        transition: opacity 0.15s ease;
    }
    .sd-popup.is-visible .sd-popup-card { transform: none; }
    .sd-popup-dot { animation: none; }
    .sd-popup-cta { transition: none; }
    .sd-popup-cta:hover { transform: none; }
}