/* =========================================================
   ASC Cinematic Advert Video Builder v6
   Premium Light Motion Theme
   Complete Replacement CSS
   ========================================================= */

/* =========================================================
   Global Safety
   ========================================================= */

.asc-cinema,
.asc-cinema *,
.asc-cinema *::before,
.asc-cinema *::after {
    box-sizing: border-box;
}

.asc-cinema img {
    max-width: 100%;
}

.asc-cinema button {
    font-family: inherit;
}

/* =========================================================
   Admin Area
   ========================================================= */

.asc-admin-wrap {
    max-width: 1180px;
}

.asc-image-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.asc-image-preview .asc-preview-item {
    position: relative;
    border: 1px solid #dbe7f5;
    border-radius: 18px;
    background:
        linear-gradient(180deg, #ffffff, #f8fbff);
    padding: 8px;
    box-shadow:
        0 16px 34px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.asc-image-preview img {
    width: 100%;
    height: 96px;
    object-fit: cover;
    object-position: top center;
    border-radius: 13px;
    background: #ffffff;
}

.asc-image-preview small {
    display: block;
    margin-top: 8px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

/* =========================================================
   Main Shell
   ========================================================= */

.asc-cinema {
    --asc-blue: #2563eb;
    --asc-sky: #38bdf8;
    --asc-cyan: #06b6d4;
    --asc-teal: #14b8a6;
    --asc-green: #22c55e;
    --asc-orange: #f59e0b;
    --asc-red: #ef4444;
    --asc-ink: #0f172a;
    --asc-muted: #64748b;
    --asc-soft: #f8fbff;
    --asc-line: rgba(15, 23, 42, 0.08);

    position: relative;
    width: 100%;
    min-height: 720px;
    height: var(--asc-stage-height, 820px);
    overflow: hidden;
    border-radius: clamp(26px, 3vw, 46px);
    color: var(--asc-ink);
    background:
        radial-gradient(circle at 10% 8%, rgba(37, 99, 235, 0.16), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(20, 184, 166, 0.18), transparent 28%),
        radial-gradient(circle at 70% 96%, rgba(245, 158, 11, 0.16), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f4f8ff 48%, #eef7ff 100%);
    isolation: isolate;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    box-shadow:
        0 48px 120px rgba(15, 23, 42, 0.18),
        0 18px 48px rgba(37, 99, 235, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

.asc-record-area {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 251, 255, 0.74)),
        radial-gradient(circle at 18% 24%, rgba(37, 99, 235, 0.18), transparent 34%),
        radial-gradient(circle at 82% 22%, rgba(6, 182, 212, 0.17), transparent 32%),
        radial-gradient(circle at 55% 108%, rgba(34, 197, 94, 0.16), transparent 36%);
}

/* =========================================================
   Animated Light Background
   ========================================================= */

.asc-energy-bg,
.asc-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.asc-orb {
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 999px;
    filter: blur(64px);
    opacity: 0.72;
    mix-blend-mode: multiply;
    animation: ascOrbFloatLight 16s ease-in-out infinite alternate;
}

.asc-orb-one {
    left: -240px;
    top: -230px;
    background: rgba(96, 165, 250, 0.42);
}

.asc-orb-two {
    right: -250px;
    top: -120px;
    background: rgba(45, 212, 191, 0.34);
    animation-delay: -5s;
}

.asc-orb-three {
    left: 34%;
    bottom: -390px;
    background: rgba(251, 191, 36, 0.28);
    animation-delay: -9s;
}

.asc-grid-glow {
    position: absolute;
    inset: -10%;
    opacity: 0.55;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.055) 1px, transparent 1px);
    background-size: 58px 58px;
    transform: perspective(900px) rotateX(62deg) translateY(140px) scale(1.45);
    transform-origin: bottom;
    -webkit-mask-image: linear-gradient(to bottom, transparent 2%, black 30%, transparent 92%);
    mask-image: linear-gradient(to bottom, transparent 2%, black 30%, transparent 92%);
    animation: ascGridDrift 18s linear infinite;
}

.asc-race-line {
    position: absolute;
    height: 6px;
    width: 54vw;
    border-radius: 999px;
    transform: rotate(-16deg);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(37, 99, 235, 0.08),
            rgba(56, 189, 248, 0.74),
            rgba(34, 197, 94, 0.54),
            transparent
        );
    filter: blur(1px);
    opacity: 0.72;
    animation: ascRaceLineLight 4.6s cubic-bezier(.2, .8, .2, 1) infinite;
}

.asc-race-line-one {
    left: -62vw;
    top: 18%;
}

.asc-race-line-two {
    left: -72vw;
    top: 48%;
    animation-delay: -1.4s;
}

.asc-race-line-three {
    left: -55vw;
    top: 76%;
    animation-delay: -2.8s;
}

.asc-speed-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, transparent 0%, rgba(255, 255, 255, 0.08) 42%, rgba(226, 240, 255, 0.72) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.66), transparent 42%, rgba(255, 255, 255, 0.56));
}

.asc-noise {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.08) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 40%, rgba(20, 184, 166, 0.08) 0 1px, transparent 1px);
    background-size: 14px 14px, 18px 18px;
}

.asc-particles span {
    position: absolute;
    left: calc((var(--i) * 7%) - 20%);
    top: calc((var(--i) * 13%) % 100%);
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.52);
    box-shadow:
        0 0 18px rgba(56, 189, 248, 0.62),
        0 0 30px rgba(34, 197, 94, 0.26);
    animation: ascParticleDashLight calc(3.1s + (var(--i) * 0.11s)) linear infinite;
    animation-delay: calc(var(--i) * -0.18s);
}

/* =========================================================
   Decorative Floating Panels
   ========================================================= */

.asc-record-area::before,
.asc-record-area::after {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
    border-radius: 32px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.42));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow:
        0 24px 70px rgba(15, 23, 42, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    opacity: 0.56;
}

.asc-record-area::before {
    width: 190px;
    height: 116px;
    right: 7%;
    top: 18%;
    transform: rotate(8deg);
    animation: ascFloatCardOne 7s ease-in-out infinite alternate;
}

.asc-record-area::after {
    width: 150px;
    height: 96px;
    left: 8%;
    bottom: 17%;
    transform: rotate(-8deg);
    animation: ascFloatCardTwo 8s ease-in-out infinite alternate;
}

/* =========================================================
   Top Bar
   ========================================================= */

.asc-cinema-topbar {
    position: absolute;
    top: clamp(18px, 2.4vw, 30px);
    left: clamp(18px, 3vw, 38px);
    right: clamp(18px, 3vw, 38px);
    z-index: 90;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    pointer-events: none;
}

.asc-cinema-brand,
.asc-cinema-pill {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 11px 18px;
    border-radius: 999px;
    color: #0f172a;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.58));
    border: 1px solid rgba(148, 163, 184, 0.22);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 18px 44px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.asc-cinema-pill {
    color: #334155;
}

.asc-brand-mark {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 999px;
    background:
        conic-gradient(
            from 180deg,
            #ef4444,
            #f59e0b,
            #22c55e,
            #38bdf8,
            #6366f1,
            #ef4444
        );
    box-shadow:
        0 0 0 5px rgba(37, 99, 235, 0.07),
        0 0 28px rgba(56, 189, 248, 0.42);
    animation: ascBrandPulseLight 2.4s ease-in-out infinite alternate;
}

.asc-brand-mark.large {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
}

/* =========================================================
   Intro / Final Screens
   ========================================================= */

.asc-intro-screen,
.asc-final-screen {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: grid;
    place-items: center;
    padding:
        clamp(94px, 9vw, 128px)
        clamp(22px, 6vw, 84px)
        clamp(128px, 12vw, 160px);
    opacity: 0;
    transform: scale(1.035) translateY(18px);
    filter: blur(18px);
    pointer-events: none;
    transition:
        opacity 780ms cubic-bezier(.2, .8, .2, 1),
        transform 980ms cubic-bezier(.2, .8, .2, 1),
        filter 780ms cubic-bezier(.2, .8, .2, 1);
}

.asc-intro-screen.active,
.asc-final-screen.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    pointer-events: auto;
}

.asc-intro-screen.leaving,
.asc-final-screen.leaving {
    opacity: 0;
    transform: scale(0.975) translateY(-22px);
    filter: blur(18px);
}

.asc-intro-glass,
.asc-final-inner {
    position: relative;
    width: min(1180px, 96%);
    overflow: hidden;
    text-align: center;
    padding: clamp(36px, 6vw, 82px);
    border-radius: clamp(30px, 4vw, 56px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.56));
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow:
        0 44px 120px rgba(15, 23, 42, 0.12),
        0 18px 50px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(34px);
    -webkit-backdrop-filter: blur(34px);
}

.asc-intro-glass::before,
.asc-final-inner::before {
    content: "";
    position: absolute;
    inset: -3px;
    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255, 255, 255, 0.82) 38%,
            rgba(56, 189, 248, 0.16) 48%,
            transparent 64%
        );
    transform: translateX(-130%);
    animation: ascGlassSweepLight 4.5s ease-in-out infinite;
    pointer-events: none;
}

.asc-intro-glass::after,
.asc-final-inner::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    right: -160px;
    bottom: -200px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(37, 99, 235, 0.14), transparent 66%);
    pointer-events: none;
}

.asc-intro-count {
    position: absolute;
    top: 18px;
    right: 34px;
    color: rgba(37, 99, 235, 0.08);
    font-size: clamp(70px, 8vw, 140px);
    line-height: 1;
    font-weight: 1000;
    letter-spacing: -0.1em;
}

.asc-energy-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(62vw, 680px);
    height: min(62vw, 680px);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(56, 189, 248, 0.18);
    box-shadow:
        inset 0 0 50px rgba(56, 189, 248, 0.13),
        0 0 90px rgba(34, 197, 94, 0.11);
    animation: ascEnergyRingLight 5.5s ease-in-out infinite alternate;
    pointer-events: none;
}

.asc-eyebrow {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    color: #1d4ed8;
    background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.92), rgba(224, 242, 254, 0.72));
    border: 1px solid rgba(37, 99, 235, 0.16);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.asc-intro-glass h1,
.asc-final-inner h2 {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 0 auto 24px;
    color: #0f172a;
    font-size: clamp(44px, 7vw, 106px);
    line-height: 0.9;
    letter-spacing: -0.085em;
    font-weight: 1000;
    text-wrap: balance;
    text-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.asc-intro-glass p,
.asc-final-inner p {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 0 auto;
    color: #475569;
    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.62;
    font-weight: 620;
}

.asc-intro-tags,
.asc-final-stats {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 34px;
}

.asc-intro-tags span,
.asc-final-stats span {
    padding: 10px 15px;
    border-radius: 999px;
    color: #0f172a;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.72));
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    font-size: 13px;
    font-weight: 850;
}

.asc-final-stats strong {
    display: block;
    font-size: 25px;
    color: #2563eb;
}

/* =========================================================
   Slide Stage
   ========================================================= */

.asc-slide-stage {
    position: absolute;
    inset: 0;
    z-index: 30;
}

.asc-cinematic-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.035) translateY(18px);
    filter: blur(22px);
    pointer-events: none;
    transition:
        opacity 760ms cubic-bezier(.2, .8, .2, 1),
        transform 1000ms cubic-bezier(.2, .8, .2, 1),
        filter 760ms cubic-bezier(.2, .8, .2, 1);
}

.asc-cinematic-slide.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    pointer-events: auto;
}

.asc-cinematic-slide.leaving {
    opacity: 0;
    transform: scale(0.975) translateY(-20px);
    filter: blur(20px);
}

.asc-slide-backdrop {
    position: absolute;
    inset: -40px;
    z-index: 1;
    opacity: 0;
    transform: scale(1.08);
    transition:
        opacity 900ms ease,
        transform 6200ms ease;
}

.asc-slide-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: blur(32px) saturate(1.2) brightness(1.14) contrast(0.98);
    opacity: 0.26;
}

.asc-cinematic-slide.active .asc-slide-backdrop {
    opacity: 1;
    transform: scale(1.18);
}

.asc-slide-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 62% 42%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.52) 45%, rgba(241,245,249,0.92) 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.84));
}

.asc-impact-burst {
    position: absolute;
    right: 10%;
    top: 44%;
    z-index: 2;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(37, 99, 235, 0.26), rgba(56, 189, 248, 0.12) 32%, transparent 66%);
    transform: scale(0.5);
    opacity: 0;
    filter: blur(4px);
}

.asc-cinematic-slide.active .asc-impact-burst {
    animation: ascImpactBurstLight 950ms cubic-bezier(.2, .8, .2, 1) both;
}

/* =========================================================
   Slide Layouts
   ========================================================= */

.asc-slide-layout {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.92fr);
    align-items: center;
    gap: clamp(26px, 3.6vw, 64px);
    padding:
        clamp(94px, 9vw, 116px)
        clamp(26px, 5vw, 76px)
        clamp(132px, 12vw, 158px);
}

.asc-layout-hero .asc-slide-layout {
    grid-template-columns: minmax(280px, 0.62fr) minmax(0, 2fr);
}

.asc-layout-wide .asc-slide-layout {
    grid-template-columns: minmax(260px, 0.55fr) minmax(0, 2.16fr);
}

.asc-layout-angle .asc-slide-layout {
    grid-template-columns: minmax(300px, 0.74fr) minmax(0, 1.82fr);
}

.asc-layout-split .asc-slide-layout {
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.72fr);
}

.asc-layout-focus .asc-slide-layout {
    display: block;
    padding:
        clamp(94px, 9vw, 116px)
        clamp(26px, 5vw, 76px)
        clamp(132px, 12vw, 158px);
}

.asc-layout-focus .asc-device-wrap {
    position: absolute;
    inset:
        clamp(104px, 9vw, 118px)
        clamp(34px, 5vw, 66px)
        clamp(132px, 12vw, 158px)
        27%;
}

.asc-layout-focus .asc-copy-panel {
    position: absolute;
    left: clamp(26px, 5vw, 72px);
    bottom: clamp(126px, 12vw, 152px);
    z-index: 10;
    max-width: 470px;
}

/* =========================================================
   Copy Panel
   ========================================================= */

.asc-copy-panel {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    padding: clamp(24px, 2.6vw, 40px);
    border-radius: clamp(28px, 3vw, 36px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62));
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow:
        0 34px 90px rgba(15, 23, 42, 0.12),
        0 18px 40px rgba(37, 99, 235, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.asc-copy-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 44%),
        radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.14), transparent 46%);
    pointer-events: none;
}

.asc-copy-panel::after {
    content: "";
    position: absolute;
    left: -20%;
    right: -20%;
    top: -42%;
    height: 56%;
    transform: rotate(-8deg);
    background: rgba(255, 255, 255, 0.52);
    pointer-events: none;
}

.asc-cinematic-slide.active .asc-copy-panel {
    animation: ascCopyPunchLight 880ms cubic-bezier(.2, .8, .2, 1) both;
}

.asc-slide-number {
    position: absolute;
    right: 20px;
    top: 10px;
    color: rgba(37, 99, 235, 0.09);
    font-size: clamp(50px, 4.7vw, 82px);
    line-height: 1;
    font-weight: 1000;
    letter-spacing: -0.09em;
}

.asc-copy-panel h2 {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0 0 16px;
    color: #0f172a;
    font-size: clamp(31px, 3vw, 54px);
    line-height: 0.97;
    letter-spacing: -0.065em;
    font-weight: 1000;
    text-wrap: balance;
}

.asc-copy-panel p {
    position: relative;
    z-index: 2;
    max-width: 96%;
    margin: 0;
    color: #475569;
    font-size: clamp(14px, 1.02vw, 16.5px);
    line-height: 1.62;
    font-weight: 620;
}

.asc-mini-proof {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin-top: 24px;
    padding: 10px 13px;
    border-radius: 999px;
    color: #0f172a;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.74));
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
    font-size: 12px;
    font-weight: 900;
}

.asc-mini-proof span {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.72);
}

/* =========================================================
   Device / Screenshot
   ========================================================= */

.asc-device-wrap {
    position: relative;
    z-index: 7;
    width: 100%;
    min-width: 0;
    perspective: 2200px;
}

.asc-device-shadow {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -30px;
    height: 88px;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.22), transparent 72%);
    filter: blur(24px);
    opacity: 0.96;
}

.asc-device-glow {
    position: absolute;
    inset: -5% -3%;
    background:
        radial-gradient(circle at 48% 48%, rgba(56, 189, 248, 0.24), transparent 58%),
        radial-gradient(circle at 76% 30%, rgba(34, 197, 94, 0.18), transparent 54%),
        radial-gradient(circle at 20% 70%, rgba(245, 158, 11, 0.15), transparent 52%);
    filter: blur(64px);
    opacity: 0.96;
    transform: translateY(34px);
}

.asc-device-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: clamp(24px, 3vw, 36px);
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow:
        0 48px 120px rgba(15, 23, 42, 0.18),
        0 20px 54px rgba(37, 99, 235, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: rotateY(-4.8deg) rotateX(1.2deg);
    will-change: transform, opacity, filter;
}

.asc-cinematic-slide.active .asc-device-frame {
    animation:
        ascDeviceRocketLight 950ms cubic-bezier(.2, .8, .2, 1) both,
        ascDeviceFloatLight 6.6s ease-in-out 1000ms infinite alternate;
}

.asc-layout-angle.active .asc-device-frame {
    animation:
        ascDeviceAngleInLight 950ms cubic-bezier(.2, .8, .2, 1) both,
        ascDeviceFloatAltLight 6.6s ease-in-out 1000ms infinite alternate;
}

.asc-layout-wide.active .asc-device-frame,
.asc-layout-focus.active .asc-device-frame {
    animation:
        ascDeviceZoomInLight 950ms cubic-bezier(.2, .8, .2, 1) both,
        ascDeviceFloatSoftLight 6.6s ease-in-out 1000ms infinite alternate;
}

.asc-window-chrome {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background:
        linear-gradient(180deg, #ffffff, #f1f5f9);
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.asc-window-chrome span {
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 999px;
}

.asc-window-chrome span:nth-child(1) {
    background: #fb7185;
}

.asc-window-chrome span:nth-child(2) {
    background: #fbbf24;
}

.asc-window-chrome span:nth-child(3) {
    background: #34d399;
}

.asc-window-chrome em {
    margin-left: 8px;
    color: #64748b;
    font-style: normal;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.asc-image-mask {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    aspect-ratio: 16 / 9;
}

/* Important:
   contain prevents screenshots being cut off.
   If you prefer full-bleed/cropped screenshots, change object-fit to cover.
*/
.asc-device-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: top center;
    background: #ffffff;
    transform-origin: center;
    will-change: transform;
}

.asc-image-mask::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.05),
        inset 0 -40px 80px rgba(15, 23, 42, 0.04);
}

.asc-image-mask::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255, 255, 255, 0.62) 42%,
            transparent 72%
        );
    transform: translateX(-130%);
    animation: ascScreenSweepLight 4.2s ease-in-out infinite;
    pointer-events: none;
}

.asc-cinematic-slide.active .asc-device-frame img {
    animation: ascScreenshotEnergyLight 7.2s ease-in-out infinite alternate;
}

.asc-cinematic-slide:nth-child(3n + 2).active .asc-device-frame img {
    animation: ascScreenshotPanLeftLight 7.2s ease-in-out infinite alternate;
}

.asc-cinematic-slide:nth-child(3n + 3).active .asc-device-frame img {
    animation: ascScreenshotPanRightLight 7.2s ease-in-out infinite alternate;
}

.asc-screen-hud {
    position: absolute;
    z-index: 5;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    pointer-events: none;
}

.asc-screen-hud span {
    padding: 7px 10px;
    border-radius: 999px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

/* =========================================================
   Footer / Timeline
   ========================================================= */

.asc-cinema-footer {
    position: absolute;
    left: clamp(18px, 3vw, 38px);
    right: clamp(18px, 3vw, 38px);
    bottom: clamp(18px, 2.8vw, 30px);
    z-index: 75;
    pointer-events: none;
}

.asc-timeline {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.20);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.asc-timeline-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, #2563eb, #38bdf8, #22c55e, #f59e0b);
    box-shadow:
        0 0 28px rgba(96, 165, 250, 0.42),
        0 0 44px rgba(34, 197, 94, 0.22);
    transition: width 280ms linear;
}

.asc-footer-meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px;
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.asc-current-scene {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   Controls
   ========================================================= */

.asc-cinema-controls {
    position: absolute;
    left: 50%;
    bottom: clamp(54px, 7.8vw, 72px);
    z-index: 100;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    max-width: calc(100% - 38px);
    padding: 9px;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.62));
    border: 1px solid rgba(148, 163, 184, 0.26);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.asc-cinema-controls button {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background:
        linear-gradient(135deg, #ffffff, #f8fafc);
    color: #0f172a;
    padding: 11px 15px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease;
}

.asc-cinema-controls button:hover {
    transform: translateY(-2px);
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.24);
    box-shadow:
        0 14px 28px rgba(37, 99, 235, 0.12),
        0 8px 18px rgba(15, 23, 42, 0.08);
}

.asc-cinema-controls button:active {
    transform: translateY(0);
}

.asc-start-advert,
.asc-record-advert {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, #2563eb, #06b6d4, #10b981) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
        0 14px 34px rgba(37, 99, 235, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

.asc-record-status {
    position: absolute;
    right: clamp(18px, 3vw, 30px);
    bottom: clamp(116px, 12vw, 132px);
    z-index: 105;
    max-width: 460px;
    padding: 12px 15px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.78));
    border: 1px solid rgba(148, 163, 184, 0.24);
    color: #0f172a;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
    font-size: 13px;
    font-weight: 750;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.asc-record-status.active {
    opacity: 1;
    transform: translateY(0);
}

.asc-cinema.recording .asc-cinema-controls,
.asc-cinema.recording .asc-record-status {
    display: none;
}

/* =========================================================
   Animated State Helpers from JS
   ========================================================= */

.asc-cinema.asc-is-playing .asc-timeline-fill {
    transition-duration: 180ms;
}

.asc-cinema.asc-is-playing .asc-brand-mark {
    animation-duration: 1.2s;
}

.asc-cinema.asc-sound-off .asc-toggle-sound {
    color: #64748b;
}

.asc-cinema.asc-recording-pulse::after {
    content: "Recording";
    position: absolute;
    top: 78px;
    right: 38px;
    z-index: 120;
    padding: 9px 13px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #ef4444, #f97316);
    box-shadow: 0 14px 32px rgba(239, 68, 68, 0.26);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* =========================================================
   Keyframes
   ========================================================= */

@keyframes ascOrbFloatLight {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(70px, 46px, 0) scale(1.16);
    }
}

@keyframes ascGridDrift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 58px 58px;
    }
}

@keyframes ascRaceLineLight {
    0% {
        transform: translateX(0) rotate(-16deg);
        opacity: 0;
    }

    16% {
        opacity: 0.82;
    }

    78% {
        opacity: 0.54;
    }

    100% {
        transform: translateX(190vw) rotate(-16deg);
        opacity: 0;
    }
}

@keyframes ascParticleDashLight {
    from {
        transform: translate3d(-10vw, 0, 0);
        opacity: 0;
    }

    20% {
        opacity: 0.85;
    }

    to {
        transform: translate3d(120vw, -20vh, 0);
        opacity: 0;
    }
}

@keyframes ascFloatCardOne {
    from {
        transform: translateY(0) rotate(8deg);
    }

    to {
        transform: translateY(-22px) rotate(3deg);
    }
}

@keyframes ascFloatCardTwo {
    from {
        transform: translateY(0) rotate(-8deg);
    }

    to {
        transform: translateY(20px) rotate(-3deg);
    }
}

@keyframes ascBrandPulseLight {
    from {
        filter: saturate(1);
        transform: scale(1);
    }

    to {
        filter: saturate(1.35);
        transform: scale(1.08);
    }
}

@keyframes ascEnergyRingLight {
    from {
        transform: translate(-50%, -50%) scale(0.96) rotate(0deg);
        opacity: 0.45;
    }

    to {
        transform: translate(-50%, -50%) scale(1.08) rotate(8deg);
        opacity: 0.76;
    }
}

@keyframes ascGlassSweepLight {
    0%,
    45% {
        transform: translateX(-130%);
    }

    72%,
    100% {
        transform: translateX(130%);
    }
}

@keyframes ascImpactBurstLight {
    0% {
        opacity: 0;
        transform: scale(0.35);
    }

    30% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

@keyframes ascCopyPunchLight {
    from {
        opacity: 0;
        transform: translateX(-52px) scale(0.94) rotate(-1.3deg);
        filter: blur(16px);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1) rotate(0);
        filter: blur(0);
    }
}

@keyframes ascDeviceRocketLight {
    from {
        opacity: 0;
        transform: translateX(150px) scale(0.86) rotateY(-18deg) rotateX(4deg);
        filter: blur(22px);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(-4.8deg) rotateX(1.2deg);
        filter: blur(0);
    }
}

@keyframes ascDeviceAngleInLight {
    from {
        opacity: 0;
        transform: translateY(96px) translateX(60px) scale(0.88) rotateY(10deg) rotateX(4deg);
        filter: blur(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1) rotateY(4deg) rotateX(1.2deg);
        filter: blur(0);
    }
}

@keyframes ascDeviceZoomInLight {
    from {
        opacity: 0;
        transform: scale(0.78) rotateY(-2deg) rotateX(2deg);
        filter: blur(24px);
    }

    to {
        opacity: 1;
        transform: scale(1) rotateY(-1.5deg) rotateX(1deg);
        filter: blur(0);
    }
}

@keyframes ascDeviceFloatLight {
    from {
        transform: rotateY(-4.8deg) rotateX(1.2deg) translateY(0);
    }

    to {
        transform: rotateY(-2deg) rotateX(0.6deg) translateY(-16px);
    }
}

@keyframes ascDeviceFloatAltLight {
    from {
        transform: rotateY(4deg) rotateX(1.2deg) translateY(0);
    }

    to {
        transform: rotateY(6deg) rotateX(0.5deg) translateY(-16px);
    }
}

@keyframes ascDeviceFloatSoftLight {
    from {
        transform: rotateY(-1.5deg) rotateX(1deg) translateY(0) scale(1);
    }

    to {
        transform: rotateY(1.2deg) rotateX(0.4deg) translateY(-14px) scale(1.01);
    }
}

@keyframes ascScreenshotEnergyLight {
    from {
        transform: scale(0.995);
    }

    to {
        transform: scale(1.035);
    }
}

@keyframes ascScreenshotPanLeftLight {
    from {
        transform: scale(1.01) translateX(1.2%);
    }

    to {
        transform: scale(1.045) translateX(-1.8%);
    }
}

@keyframes ascScreenshotPanRightLight {
    from {
        transform: scale(1.01) translateX(-1.2%);
    }

    to {
        transform: scale(1.045) translateX(1.8%);
    }
}

@keyframes ascScreenSweepLight {
    0%,
    52% {
        transform: translateX(-130%);
    }

    80%,
    100% {
        transform: translateX(130%);
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1180px) {
    .asc-cinema {
        min-height: 850px;
    }

    .asc-slide-layout,
    .asc-layout-hero .asc-slide-layout,
    .asc-layout-angle .asc-slide-layout,
    .asc-layout-wide .asc-slide-layout,
    .asc-layout-split .asc-slide-layout {
        grid-template-columns: 1fr;
        align-content: center;
        gap: 28px;
        padding: 92px 5% 154px;
    }

    .asc-layout-focus .asc-slide-layout {
        display: grid;
        grid-template-columns: 1fr;
        padding: 92px 5% 154px;
    }

    .asc-layout-focus .asc-device-wrap,
    .asc-layout-focus .asc-copy-panel {
        position: relative;
        inset: auto;
        left: auto;
        bottom: auto;
    }

    .asc-copy-panel {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }

    .asc-copy-panel p {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .asc-device-wrap {
        max-width: 980px;
        margin: 0 auto;
    }

    .asc-device-frame {
        transform: none;
    }

    .asc-cinematic-slide.active .asc-device-frame,
    .asc-layout-angle.active .asc-device-frame,
    .asc-layout-wide.active .asc-device-frame,
    .asc-layout-focus.active .asc-device-frame {
        animation:
            ascDeviceTabletLight 900ms cubic-bezier(.2, .8, .2, 1) both,
            ascDeviceTabletFloatLight 6.5s ease-in-out 1000ms infinite alternate;
    }
}

@keyframes ascDeviceTabletLight {
    from {
        opacity: 0;
        transform: translateY(56px) scale(0.94);
        filter: blur(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ascDeviceTabletFloatLight {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-12px);
    }
}

@media (max-width: 760px) {
    .asc-cinema {
        min-height: 890px;
        border-radius: 24px;
    }

    .asc-cinema-topbar {
        left: 16px;
        right: 16px;
        top: 16px;
    }

    .asc-cinema-brand {
        font-size: 12px;
        padding: 10px 13px;
    }

    .asc-cinema-pill {
        display: none;
    }

    .asc-record-area::before,
    .asc-record-area::after {
        display: none;
    }

    .asc-intro-screen,
    .asc-final-screen {
        padding: 86px 18px 154px;
    }

    .asc-intro-glass,
    .asc-final-inner {
        width: 100%;
        padding: 28px;
        border-radius: 28px;
    }

    .asc-intro-glass h1,
    .asc-final-inner h2 {
        font-size: clamp(38px, 11vw, 64px);
        line-height: 0.94;
        letter-spacing: -0.062em;
    }

    .asc-intro-glass p,
    .asc-final-inner p {
        font-size: 15px;
        line-height: 1.55;
    }

    .asc-slide-layout,
    .asc-layout-hero .asc-slide-layout,
    .asc-layout-angle .asc-slide-layout,
    .asc-layout-wide .asc-slide-layout,
    .asc-layout-focus .asc-slide-layout,
    .asc-layout-split .asc-slide-layout {
        padding: 82px 16px 166px;
        gap: 22px;
    }

    .asc-copy-panel {
        padding: 23px;
        border-radius: 26px;
    }

    .asc-copy-panel h2 {
        font-size: clamp(28px, 8.6vw, 44px);
        line-height: 1;
        letter-spacing: -0.055em;
    }

    .asc-copy-panel p {
        font-size: 13.5px;
        line-height: 1.5;
    }

    .asc-window-chrome {
        height: 32px;
        padding: 0 12px;
    }

    .asc-window-chrome span {
        width: 8px;
        height: 8px;
    }

    .asc-window-chrome em {
        display: none;
    }

    .asc-screen-hud {
        display: none;
    }

    .asc-cinema-controls {
        bottom: 62px;
        width: calc(100% - 26px);
        max-width: none;
        border-radius: 22px;
        gap: 7px;
    }

    .asc-cinema-controls button {
        padding: 9px 11px;
        font-size: 11px;
    }

    .asc-cinema-footer {
        left: 16px;
        right: 16px;
        bottom: 18px;
    }

    .asc-footer-meta {
        font-size: 10px;
    }

    .asc-record-status {
        left: 18px;
        right: 18px;
        bottom: 126px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .asc-cinema {
        min-height: 860px;
    }

    .asc-copy-panel h2 {
        font-size: clamp(25px, 8vw, 38px);
    }

    .asc-copy-panel p {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .asc-mini-proof {
        font-size: 11px;
    }

    .asc-cinema-controls button {
        padding: 8px 9px;
        font-size: 10px;
    }
}

/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .asc-orb,
    .asc-race-line,
    .asc-particles span,
    .asc-brand-mark,
    .asc-energy-ring,
    .asc-intro-glass::before,
    .asc-final-inner::before,
    .asc-image-mask::after,
    .asc-device-frame,
    .asc-device-frame img,
    .asc-copy-panel,
    .asc-record-area::before,
    .asc-record-area::after,
    .asc-grid-glow {
        animation: none !important;
    }

    .asc-cinematic-slide,
    .asc-intro-screen,
    .asc-final-screen {
        transition-duration: 250ms !important;
    }
}
/* =========================================================
   ASC Premium Screenshot-First Layout Patch v7
   Replace the old "Layout Correction Patch" with this.
   Purpose:
   - Bigger screenshots
   - Cleaner caption cards
   - Different card styles per scene
   - Stronger animation variety
   ========================================================= */

/* ---------------------------------------------------------
   Stage safety
   --------------------------------------------------------- */

.asc-cinema {
    min-height: 820px !important;
    overflow: hidden !important;
}

.asc-record-area {
    overflow: hidden !important;
}

/* ---------------------------------------------------------
   Screenshot-first slide layout
   --------------------------------------------------------- */

.asc-slide-layout,
.asc-layout-hero .asc-slide-layout,
.asc-layout-angle .asc-slide-layout,
.asc-layout-wide .asc-slide-layout,
.asc-layout-focus .asc-slide-layout,
.asc-layout-split .asc-slide-layout {
    display: grid !important;
    grid-template-columns: minmax(230px, 0.42fr) minmax(0, 2.35fr) !important;
    align-items: center !important;
    gap: clamp(22px, 2.6vw, 48px) !important;

    padding:
        clamp(90px, 7vw, 112px)
        clamp(24px, 4.5vw, 70px)
        clamp(140px, 12vw, 168px) !important;
}

/* Wide/focus layouts give screenshots even more visual space */
.asc-layout-wide .asc-slide-layout,
.asc-layout-focus .asc-slide-layout {
    grid-template-columns: minmax(210px, 0.34fr) minmax(0, 2.65fr) !important;
}

/* Split layout has a balanced premium editorial look */
.asc-layout-split .asc-slide-layout {
    grid-template-columns: minmax(250px, 0.55fr) minmax(0, 2.05fr) !important;
}

/* ---------------------------------------------------------
   Modern smaller copy cards
   --------------------------------------------------------- */

.asc-copy-panel {
    max-width: 380px !important;
    padding: clamp(20px, 2vw, 30px) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    align-self: center !important;

    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.58)) !important;

    border: 1px solid rgba(148, 163, 184, 0.24) !important;

    box-shadow:
        0 28px 80px rgba(15, 23, 42, 0.11),
        0 12px 34px rgba(37, 99, 235, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;

    backdrop-filter: blur(26px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.08) !important;
}

/* Remove the old heavy glossy white slash */
.asc-copy-panel::after {
    display: none !important;
}

/* Softer inner colour wash */
.asc-copy-panel::before {
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.16), transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(20, 184, 166, 0.13), transparent 44%) !important;
}

/* Scene number becomes a small premium tab instead of a huge watermark */
.asc-slide-number {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: 3 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;
    margin-bottom: 12px !important;

    border-radius: 15px !important;
    color: #ffffff !important;
    background:
        linear-gradient(135deg, #2563eb, #06b6d4, #10b981) !important;

    box-shadow:
        0 14px 28px rgba(37, 99, 235, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
}

/* Smaller, cleaner eyebrow */
.asc-copy-panel .asc-eyebrow {
    margin-bottom: 12px !important;
    padding: 7px 11px !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
}

/* Cleaner heading */
.asc-copy-panel h2 {
    font-size: clamp(25px, 2.35vw, 40px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
    margin: 0 0 12px !important;
}

/* Cleaner paragraph */
.asc-copy-panel p {
    max-width: 100% !important;
    font-size: clamp(13px, 0.92vw, 15px) !important;
    line-height: 1.5 !important;
    color: #475569 !important;
}

/* Compact proof pill */
.asc-mini-proof {
    margin-top: 16px !important;
    padding: 8px 11px !important;
    font-size: 11px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

/* ---------------------------------------------------------
   Different card styles by layout
   --------------------------------------------------------- */

/* Hero: blue glass */
.asc-layout-hero .asc-copy-panel {
    background:
        linear-gradient(145deg, rgba(239, 246, 255, 0.88), rgba(255, 255, 255, 0.62)) !important;
    border-color: rgba(37, 99, 235, 0.20) !important;
}

/* Angle: tilted premium note */
.asc-layout-angle .asc-copy-panel {
    transform: rotate(-1.2deg) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(240, 253, 250, 0.64)) !important;
    border-color: rgba(20, 184, 166, 0.22) !important;
}

/* Wide: smaller bottom-label feeling */
.asc-layout-wide .asc-copy-panel {
    max-width: 350px !important;
    background:
        linear-gradient(145deg, rgba(255, 251, 235, 0.86), rgba(255, 255, 255, 0.62)) !important;
    border-color: rgba(245, 158, 11, 0.22) !important;
}

/* Focus: darker contrast glass */
.asc-layout-focus .asc-copy-panel {
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.84), rgba(30, 41, 59, 0.68)) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 34px 88px rgba(15, 23, 42, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

.asc-layout-focus .asc-copy-panel h2,
.asc-layout-focus .asc-copy-panel p,
.asc-layout-focus .asc-mini-proof {
    color: #ffffff !important;
}

.asc-layout-focus .asc-copy-panel p {
    color: rgba(226, 232, 240, 0.9) !important;
}

.asc-layout-focus .asc-copy-panel .asc-eyebrow {
    color: #bfdbfe !important;
    background: rgba(37, 99, 235, 0.24) !important;
    border-color: rgba(147, 197, 253, 0.22) !important;
}

/* Split: clean white business card */
.asc-layout-split .asc-copy-panel {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.76)) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

/* ---------------------------------------------------------
   Bigger screenshot/device area
   --------------------------------------------------------- */

.asc-device-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    align-self: center !important;
    perspective: 2400px !important;
}

/* Bigger, flatter, cleaner frame */
.asc-device-frame {
    width: 100% !important;
    max-height: calc(var(--asc-stage-height, 820px) - 235px) !important;

    border-radius: clamp(22px, 2.4vw, 34px) !important;

    transform: rotateY(-2.2deg) rotateX(0.6deg) !important;

    box-shadow:
        0 42px 110px rgba(15, 23, 42, 0.18),
        0 18px 48px rgba(37, 99, 235, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Bigger visible screenshot area */
.asc-image-mask {
    aspect-ratio: 16 / 9 !important;
    max-height: calc(var(--asc-stage-height, 820px) - 285px) !important;
    background: #ffffff !important;
}

/* Important: show the screenshot as large as possible without ugly cropping */
.asc-device-frame img,
.asc-image-mask img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: top center !important;
    background: #ffffff !important;
}

/* Thinner browser chrome to give image more space */
.asc-window-chrome {
    height: 34px !important;
    padding: 0 14px !important;
}

.asc-window-chrome span {
    width: 8px !important;
    height: 8px !important;
}

.asc-window-chrome em {
    font-size: 11px !important;
}

/* HUD smaller and less intrusive */
.asc-screen-hud {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
}

.asc-screen-hud span {
    padding: 6px 9px !important;
    font-size: 9px !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

/* ---------------------------------------------------------
   New animation styles
   --------------------------------------------------------- */

/* Remove previous generic device animations */
.asc-cinematic-slide.active .asc-device-frame,
.asc-layout-angle.active .asc-device-frame,
.asc-layout-wide.active .asc-device-frame,
.asc-layout-focus.active .asc-device-frame,
.asc-layout-split.active .asc-device-frame {
    animation: none !important;
}

/* Hero: elegant zoom and settle */
.asc-layout-hero.active .asc-device-frame {
    animation:
        ascFrameHeroIn 950ms cubic-bezier(.2, .9, .2, 1) both,
        ascFrameFloatSoft 6.4s ease-in-out 950ms infinite alternate !important;
}

/* Angle: slide in from right with perspective */
.asc-layout-angle.active .asc-device-frame {
    animation:
        ascFrameAngleIn 980ms cubic-bezier(.18, .88, .18, 1) both,
        ascFrameFloatAngle 6.6s ease-in-out 980ms infinite alternate !important;
}

/* Wide: cinematic scale up */
.asc-layout-wide.active .asc-device-frame {
    animation:
        ascFrameWideIn 1050ms cubic-bezier(.2, .8, .2, 1) both,
        ascFrameFloatWide 7s ease-in-out 1050ms infinite alternate !important;
}

/* Focus: dramatic punch */
.asc-layout-focus.active .asc-device-frame {
    animation:
        ascFrameFocusIn 900ms cubic-bezier(.16, .95, .2, 1) both,
        ascFrameFloatFocus 6.8s ease-in-out 900ms infinite alternate !important;
}

/* Split: smooth rise */
.asc-layout-split.active .asc-device-frame {
    animation:
        ascFrameSplitIn 900ms cubic-bezier(.2, .8, .2, 1) both,
        ascFrameFloatSplit 6.5s ease-in-out 900ms infinite alternate !important;
}

/* Card animations per layout */
.asc-cinematic-slide.active .asc-copy-panel {
    animation: none !important;
}

.asc-layout-hero.active .asc-copy-panel {
    animation: ascCardSlideUp 780ms cubic-bezier(.2, .8, .2, 1) both !important;
}

.asc-layout-angle.active .asc-copy-panel {
    animation: ascCardTiltIn 780ms cubic-bezier(.2, .8, .2, 1) both !important;
}

.asc-layout-wide.active .asc-copy-panel {
    animation: ascCardPopIn 720ms cubic-bezier(.2, .95, .2, 1) both !important;
}

.asc-layout-focus.active .asc-copy-panel {
    animation: ascCardDarkReveal 760ms cubic-bezier(.2, .8, .2, 1) both !important;
}

.asc-layout-split.active .asc-copy-panel {
    animation: ascCardLeftReveal 820ms cubic-bezier(.2, .8, .2, 1) both !important;
}

/* Screenshot motion: smaller movement so text remains readable */
.asc-cinematic-slide.active .asc-device-frame img,
.asc-cinematic-slide:nth-child(3n + 2).active .asc-device-frame img,
.asc-cinematic-slide:nth-child(3n + 3).active .asc-device-frame img {
    animation: ascScreenshotGentleZoom 7.2s ease-in-out infinite alternate !important;
}

/* ---------------------------------------------------------
   Keyframes: devices
   --------------------------------------------------------- */

@keyframes ascFrameHeroIn {
    from {
        opacity: 0;
        transform: translateY(42px) scale(0.92) rotateY(-5deg);
        filter: blur(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotateY(-2.2deg) rotateX(0.6deg);
        filter: blur(0);
    }
}

@keyframes ascFrameAngleIn {
    from {
        opacity: 0;
        transform: translateX(120px) scale(0.9) rotateY(-14deg) rotateX(3deg);
        filter: blur(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(-2.2deg) rotateX(0.6deg);
        filter: blur(0);
    }
}

@keyframes ascFrameWideIn {
    from {
        opacity: 0;
        transform: scale(0.82);
        filter: blur(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) rotateY(-1deg);
        filter: blur(0);
    }
}

@keyframes ascFrameFocusIn {
    from {
        opacity: 0;
        transform: scale(1.08) translateY(28px);
        filter: blur(22px) brightness(1.18);
    }

    to {
        opacity: 1;
        transform: scale(1) rotateY(-1.5deg);
        filter: blur(0) brightness(1);
    }
}

@keyframes ascFrameSplitIn {
    from {
        opacity: 0;
        transform: translateY(70px) scale(0.94);
        filter: blur(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotateY(-2deg);
        filter: blur(0);
    }
}

@keyframes ascFrameFloatSoft {
    from {
        transform: translateY(0) rotateY(-2.2deg) rotateX(0.6deg);
    }

    to {
        transform: translateY(-12px) rotateY(-0.8deg) rotateX(0.3deg);
    }
}

@keyframes ascFrameFloatAngle {
    from {
        transform: translateY(0) rotateY(-2.2deg) rotateX(0.6deg);
    }

    to {
        transform: translateY(-14px) rotateY(-4deg) rotateX(0.2deg);
    }
}

@keyframes ascFrameFloatWide {
    from {
        transform: translateY(0) scale(1) rotateY(-1deg);
    }

    to {
        transform: translateY(-10px) scale(1.006) rotateY(0.4deg);
    }
}

@keyframes ascFrameFloatFocus {
    from {
        transform: translateY(0) scale(1) rotateY(-1.5deg);
    }

    to {
        transform: translateY(-13px) scale(1.008) rotateY(1deg);
    }
}

@keyframes ascFrameFloatSplit {
    from {
        transform: translateY(0) rotateY(-2deg);
    }

    to {
        transform: translateY(-12px) rotateY(0.8deg);
    }
}

/* ---------------------------------------------------------
   Keyframes: cards
   --------------------------------------------------------- */

@keyframes ascCardSlideUp {
    from {
        opacity: 0;
        transform: translateY(34px) scale(0.96);
        filter: blur(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ascCardTiltIn {
    from {
        opacity: 0;
        transform: translateX(-42px) rotate(-5deg) scale(0.94);
        filter: blur(14px);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(-1.2deg) scale(1);
        filter: blur(0);
    }
}

@keyframes ascCardPopIn {
    0% {
        opacity: 0;
        transform: scale(0.82);
        filter: blur(16px);
    }

    72% {
        opacity: 1;
        transform: scale(1.035);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes ascCardDarkReveal {
    from {
        opacity: 0;
        transform: translateY(26px) scale(0.96);
        filter: blur(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ascCardLeftReveal {
    from {
        opacity: 0;
        transform: translateX(-54px);
        filter: blur(14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes ascScreenshotGentleZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.012);
    }
}

/* ---------------------------------------------------------
   Controls and footer spacing
   --------------------------------------------------------- */

.asc-cinema-controls {
    bottom: 66px !important;
    z-index: 110 !important;
}

.asc-cinema-footer {
    bottom: 22px !important;
    z-index: 80 !important;
}

.asc-footer-meta {
    margin-top: 8px !important;
    font-size: 10px !important;
}

/* ---------------------------------------------------------
   Intro/final refinement
   --------------------------------------------------------- */

.asc-intro-screen,
.asc-final-screen {
    padding:
        clamp(96px, 8vw, 118px)
        clamp(22px, 6vw, 84px)
        clamp(145px, 13vw, 172px) !important;
}

.asc-intro-glass,
.asc-final-inner {
    max-width: 1120px !important;
}

.asc-intro-glass h1,
.asc-final-inner h2 {
    font-size: clamp(42px, 6.2vw, 90px) !important;
    line-height: 0.93 !important;
    letter-spacing: -0.075em !important;
}

.asc-intro-count {
    font-size: clamp(62px, 7vw, 112px) !important;
    color: rgba(37, 99, 235, 0.065) !important;
}

/* ---------------------------------------------------------
   Tablet layout
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    .asc-cinema {
        min-height: 940px !important;
    }

    .asc-slide-layout,
    .asc-layout-hero .asc-slide-layout,
    .asc-layout-angle .asc-slide-layout,
    .asc-layout-wide .asc-slide-layout,
    .asc-layout-focus .asc-slide-layout,
    .asc-layout-split .asc-slide-layout {
        grid-template-columns: 1fr !important;
        align-content: center !important;
        gap: 24px !important;
        padding: 88px 5% 168px !important;
    }

    .asc-copy-panel,
    .asc-layout-wide .asc-copy-panel {
        max-width: 820px !important;
        margin: 0 auto !important;
        text-align: center !important;
        transform: none !important;
    }

    .asc-copy-panel h2 {
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .asc-copy-panel p {
        max-width: 720px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .asc-device-frame {
        max-height: none !important;
        transform: none !important;
    }

    .asc-image-mask {
        max-height: none !important;
    }

    .asc-layout-hero.active .asc-device-frame,
    .asc-layout-angle.active .asc-device-frame,
    .asc-layout-wide.active .asc-device-frame,
    .asc-layout-focus.active .asc-device-frame,
    .asc-layout-split.active .asc-device-frame {
        animation:
            ascTabletFrameIn 800ms cubic-bezier(.2, .8, .2, 1) both,
            ascTabletFrameFloat 6.5s ease-in-out 800ms infinite alternate !important;
    }

    .asc-layout-angle.active .asc-copy-panel {
        animation: ascCardSlideUp 760ms cubic-bezier(.2, .8, .2, 1) both !important;
    }
}

@keyframes ascTabletFrameIn {
    from {
        opacity: 0;
        transform: translateY(42px) scale(0.95);
        filter: blur(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes ascTabletFrameFloat {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10px);
    }
}

/* ---------------------------------------------------------
   Mobile layout
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .asc-cinema {
        min-height: 940px !important;
        height: 940px !important;
        border-radius: 24px !important;
    }

    .asc-slide-layout,
    .asc-layout-hero .asc-slide-layout,
    .asc-layout-angle .asc-slide-layout,
    .asc-layout-wide .asc-slide-layout,
    .asc-layout-focus .asc-slide-layout,
    .asc-layout-split .asc-slide-layout {
        padding: 82px 16px 170px !important;
        gap: 20px !important;
    }

    .asc-copy-panel {
        max-width: 100% !important;
        padding: 20px !important;
        border-radius: 24px !important;
    }

    .asc-slide-number {
        width: 36px !important;
        height: 36px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
        margin-bottom: 10px !important;
    }

    .asc-copy-panel .asc-eyebrow {
        font-size: 9px !important;
    }

    .asc-copy-panel h2 {
        font-size: clamp(25px, 7.6vw, 38px) !important;
        line-height: 1.02 !important;
    }

    .asc-copy-panel p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .asc-device-frame {
        border-radius: 20px !important;
    }

    .asc-window-chrome {
        height: 30px !important;
    }

    .asc-window-chrome em {
        display: none !important;
    }

    .asc-screen-hud {
        display: none !important;
    }

    .asc-cinema-controls {
        bottom: 62px !important;
        width: calc(100% - 26px) !important;
        border-radius: 22px !important;
    }

    .asc-cinema-footer {
        bottom: 18px !important;
    }
}

/* ---------------------------------------------------------
   Very small mobile
   --------------------------------------------------------- */

@media (max-width: 480px) {
    .asc-cinema {
        min-height: 900px !important;
        height: 900px !important;
    }

    .asc-copy-panel h2 {
        font-size: clamp(23px, 7.4vw, 34px) !important;
    }

    .asc-copy-panel p {
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .asc-mini-proof {
        display: none !important;
    }

    .asc-cinema-controls button {
        padding: 8px 9px !important;
        font-size: 10px !important;
    }
}

/* ---------------------------------------------------------
   Reduced motion compatibility
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .asc-layout-hero.active .asc-device-frame,
    .asc-layout-angle.active .asc-device-frame,
    .asc-layout-wide.active .asc-device-frame,
    .asc-layout-focus.active .asc-device-frame,
    .asc-layout-split.active .asc-device-frame,
    .asc-layout-hero.active .asc-copy-panel,
    .asc-layout-angle.active .asc-copy-panel,
    .asc-layout-wide.active .asc-copy-panel,
    .asc-layout-focus.active .asc-copy-panel,
    .asc-layout-split.active .asc-copy-panel,
    .asc-cinematic-slide.active .asc-device-frame img {
        animation: none !important;
    }
}



/* =========================================================
   ASC Stable Screenshot Layout Fix v10
   FINAL bottom override
   Purpose:
   - Proper screenshot display
   - No weird floating boxes over the image
   - Caption moved below screenshot
   - Controls moved below caption
   - Full image visible without crop or zoom
   ========================================================= */


/* ---------------------------------------------------------
   1. Stage
   --------------------------------------------------------- */

.asc-cinema {
    position: relative !important;
    width: 100% !important;
    height: var(--asc-stage-height, 900px) !important;
    min-height: var(--asc-stage-height, 900px) !important;
    overflow: hidden !important;
    border-radius: 28px !important;
}

.asc-record-area {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    border-radius: inherit !important;
}


/* ---------------------------------------------------------
   2. Slide stage reset
   --------------------------------------------------------- */

.asc-slide-stage,
.asc-cinematic-slide,
.asc-slide-layout {
    position: absolute !important;
    inset: 0 !important;
}

.asc-cinematic-slide {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
}

.asc-cinematic-slide.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.asc-cinematic-slide.leaving {
    opacity: 0 !important;
}


/* ---------------------------------------------------------
   3. Turn each slide into a clean vertical layout
   --------------------------------------------------------- */

.asc-slide-layout,
.asc-layout-hero .asc-slide-layout,
.asc-layout-angle .asc-slide-layout,
.asc-layout-wide .asc-slide-layout,
.asc-layout-focus .asc-slide-layout,
.asc-layout-split .asc-slide-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 14px !important;

    padding:
        76px
        clamp(18px, 3vw, 42px)
        118px !important;
}


/* ---------------------------------------------------------
   4. Screenshot area
   --------------------------------------------------------- */

.asc-device-wrap {
    position: relative !important;
    z-index: 6 !important;

    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    perspective: none !important;
}

.asc-device-glow,
.asc-device-shadow {
    display: none !important;
}

.asc-device-frame {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
    border-radius: 22px !important;

    transform: none !important;
    animation: ascStableFrameIn 520ms cubic-bezier(.2, .8, .2, 1) both !important;

    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;

    box-shadow:
        0 24px 70px rgba(15, 23, 42, 0.14),
        0 10px 28px rgba(37, 99, 235, 0.08) !important;
}

@keyframes ascStableFrameIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


/* ---------------------------------------------------------
   5. Browser chrome
   --------------------------------------------------------- */

.asc-window-chrome {
    height: 28px !important;
    min-height: 28px !important;
    flex: 0 0 28px !important;

    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    padding: 0 12px !important;

    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
}

.asc-window-chrome span {
    width: 7px !important;
    height: 7px !important;
}

.asc-window-chrome em {
    font-size: 10px !important;
    color: #64748b !important;
}


/* ---------------------------------------------------------
   6. Image fit — no crop, no zoom
   --------------------------------------------------------- */

.asc-image-mask {
    position: relative !important;

    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    aspect-ratio: auto !important;
    max-height: none !important;

    background: #ffffff !important;
}

.asc-image-mask::after {
    display: none !important;
}

.asc-image-mask::before {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}

.asc-device-frame img,
.asc-image-mask img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: contain !important;
    object-position: top center !important;

    transform: none !important;
    animation: none !important;

    background: #ffffff !important;
}


/* Stop every old screenshot animation */
.asc-cinematic-slide.active .asc-device-frame img,
.asc-cinematic-slide:nth-child(3n + 2).active .asc-device-frame img,
.asc-cinematic-slide:nth-child(3n + 3).active .asc-device-frame img {
    transform: none !important;
    animation: none !important;
}


/* ---------------------------------------------------------
   7. Caption card now lives BELOW the image
   --------------------------------------------------------- */

.asc-copy-panel,
.asc-layout-hero .asc-copy-panel,
.asc-layout-angle .asc-copy-panel,
.asc-layout-wide .asc-copy-panel,
.asc-layout-focus .asc-copy-panel,
.asc-layout-split .asc-copy-panel {
    position: relative !important;
    z-index: 20 !important;

    grid-row: 2 !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 12px 16px !important;

    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px 12px !important;

    transform: none !important;
    animation: ascStableCardIn 520ms cubic-bezier(.2, .8, .2, 1) both !important;

    text-align: left !important;

    border-radius: 18px !important;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92),
            rgba(248, 250, 252, 0.78)
        ) !important;

    border: 1px solid rgba(148, 163, 184, 0.25) !important;

    box-shadow:
        0 16px 42px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;

    backdrop-filter: blur(18px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

@keyframes ascStableCardIn {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.asc-copy-panel::before,
.asc-copy-panel::after {
    display: none !important;
}


/* ---------------------------------------------------------
   8. Caption contents made compact
   --------------------------------------------------------- */

.asc-slide-number {
    position: relative !important;
    grid-column: 1 !important;

    top: auto !important;
    right: auto !important;

    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    border-radius: 11px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
}

.asc-copy-panel .asc-eyebrow {
    grid-column: 2 !important;

    margin: 0 !important;
    padding: 6px 9px !important;

    white-space: nowrap !important;

    font-size: 8.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.07em !important;
}

.asc-copy-panel h2 {
    grid-column: 3 !important;

    margin: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    font-size: clamp(18px, 1.45vw, 25px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

.asc-copy-panel p {
    grid-column: 3 !important;

    margin: 4px 0 0 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;

    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #64748b !important;
}

.asc-mini-proof {
    grid-column: 4 !important;
    grid-row: 1 / span 2 !important;

    margin: 0 !important;
    padding: 7px 10px !important;

    white-space: nowrap !important;

    font-size: 10px !important;
}


/* Focus card should no longer become dark in this stable layout */
.asc-layout-focus .asc-copy-panel,
.asc-layout-focus .asc-copy-panel h2,
.asc-layout-focus .asc-copy-panel p,
.asc-layout-focus .asc-mini-proof {
    color: inherit !important;
}

.asc-layout-focus .asc-copy-panel {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92),
            rgba(248, 250, 252, 0.78)
        ) !important;
}

.asc-layout-focus .asc-copy-panel p {
    color: #64748b !important;
}


/* ---------------------------------------------------------
   9. Remove HUD and visual blockers
   --------------------------------------------------------- */

.asc-screen-hud {
    display: none !important;
}

.asc-impact-burst {
    display: none !important;
}


/* ---------------------------------------------------------
   10. Background can remain cinematic, but lighter
   --------------------------------------------------------- */

.asc-slide-backdrop img {
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 0.16 !important;
    filter: blur(34px) saturate(1.1) brightness(1.12) !important;
}

.asc-slide-backdrop::after {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.78),
            rgba(248, 250, 252, 0.88)
        ) !important;
}


/* ---------------------------------------------------------
   11. Controls below caption, not over the image
   --------------------------------------------------------- */

.asc-cinema-controls {
    left: 50% !important;
    bottom: 44px !important;
    z-index: 120 !important;

    transform: translateX(-50%) !important;

    padding: 7px !important;
    gap: 7px !important;

    border-radius: 999px !important;
}

.asc-cinema-controls button {
    padding: 9px 12px !important;
    font-size: 11px !important;
}

.asc-cinema-footer {
    left: clamp(18px, 3vw, 38px) !important;
    right: clamp(18px, 3vw, 38px) !important;
    bottom: 12px !important;
    z-index: 90 !important;
}

.asc-timeline {
    height: 6px !important;
}

.asc-footer-meta {
    margin-top: 6px !important;
    font-size: 9px !important;
}


/* ---------------------------------------------------------
   12. Top bar compact
   --------------------------------------------------------- */

.asc-cinema-topbar {
    top: 16px !important;
    left: clamp(18px, 3vw, 38px) !important;
    right: clamp(18px, 3vw, 38px) !important;
}

.asc-cinema-brand,
.asc-cinema-pill {
    min-height: 32px !important;
    padding: 7px 11px !important;
    font-size: 10px !important;
}

.asc-brand-mark {
    width: 12px !important;
    height: 12px !important;
}


/* ---------------------------------------------------------
   13. Tablet
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    .asc-cinema {
        height: var(--asc-stage-height, 900px) !important;
        min-height: var(--asc-stage-height, 900px) !important;
    }

    .asc-slide-layout,
    .asc-layout-hero .asc-slide-layout,
    .asc-layout-angle .asc-slide-layout,
    .asc-layout-wide .asc-slide-layout,
    .asc-layout-focus .asc-slide-layout,
    .asc-layout-split .asc-slide-layout {
        padding:
            70px
            18px
            124px !important;
        gap: 12px !important;
    }

    .asc-copy-panel,
    .asc-layout-hero .asc-copy-panel,
    .asc-layout-angle .asc-copy-panel,
    .asc-layout-wide .asc-copy-panel,
    .asc-layout-focus .asc-copy-panel,
    .asc-layout-split .asc-copy-panel {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
    }

    .asc-copy-panel .asc-eyebrow {
        display: none !important;
    }

    .asc-slide-number {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
    }

    .asc-copy-panel h2 {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .asc-copy-panel p {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .asc-mini-proof {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
    }
}


/* ---------------------------------------------------------
   14. Mobile
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .asc-cinema {
        height: var(--asc-stage-height, 820px) !important;
        min-height: var(--asc-stage-height, 820px) !important;
        border-radius: 22px !important;
    }

    .asc-slide-layout,
    .asc-layout-hero .asc-slide-layout,
    .asc-layout-angle .asc-slide-layout,
    .asc-layout-wide .asc-slide-layout,
    .asc-layout-focus .asc-slide-layout,
    .asc-layout-split .asc-slide-layout {
        padding:
            62px
            12px
            132px !important;
        gap: 10px !important;
    }

    .asc-window-chrome {
        height: 24px !important;
        min-height: 24px !important;
        flex-basis: 24px !important;
    }

    .asc-window-chrome em {
        display: none !important;
    }

    .asc-copy-panel,
    .asc-layout-hero .asc-copy-panel,
    .asc-layout-angle .asc-copy-panel,
    .asc-layout-wide .asc-copy-panel,
    .asc-layout-focus .asc-copy-panel,
    .asc-layout-split .asc-copy-panel {
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;

        padding: 10px 12px !important;
        border-radius: 16px !important;
    }

    .asc-mini-proof {
        display: none !important;
    }

    .asc-slide-number {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 10px !important;
    }

    .asc-copy-panel h2 {
        font-size: 17px !important;
    }

    .asc-copy-panel p {
        font-size: 11px !important;
    }

    .asc-cinema-controls {
        bottom: 46px !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
        border-radius: 18px !important;
    }

    .asc-cinema-controls button {
        padding: 8px 9px !important;
        font-size: 10px !important;
    }
}

/* =========================================================
   ASC URL-Driven Advert Presentation Patch v11
   Add this at the very bottom of asc-advert-video.css
   Purpose:
   - No image ID selector interface needed
   - Better advert slide appearance
   - Clean screenshot-first presentation
   - Caption box below image
   - Smooth premium product demo style
   ========================================================= */

/* ---------------------------------------------------------
   Hide old admin image selector leftovers if any remain
   --------------------------------------------------------- */

.asc-admin-wrap #asc-select-images,
.asc-admin-wrap #asc-clear-images,
.asc-admin-wrap #asc-image-preview,
.asc-admin-wrap input[name="asc_advert_video_images"] {
    display: none !important;
}

/* ---------------------------------------------------------
   Main advert stage refinement
   --------------------------------------------------------- */

.asc-url-driven-advert {
    position: relative !important;
    width: 100% !important;
    min-height: var(--asc-stage-height, 900px) !important;
    height: var(--asc-stage-height, 900px) !important;
    border-radius: clamp(26px, 3vw, 42px) !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(37, 99, 235, 0.18), transparent 34%),
        radial-gradient(circle at 88% 16%, rgba(20, 184, 166, 0.18), transparent 32%),
        radial-gradient(circle at 50% 110%, rgba(245, 158, 11, 0.14), transparent 42%),
        linear-gradient(135deg, #ffffff 0%, #f4f8ff 48%, #eef7ff 100%) !important;
}

/* ---------------------------------------------------------
   Intro and final screen polish
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-intro-glass,
.asc-url-driven-advert .asc-final-inner {
    max-width: 1180px !important;
    border-radius: clamp(30px, 4vw, 56px) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.62)) !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    box-shadow:
        0 46px 120px rgba(15, 23, 42, 0.13),
        0 16px 54px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.asc-url-driven-advert .asc-intro-glass h1,
.asc-url-driven-advert .asc-final-inner h2 {
    max-width: 1080px !important;
    font-size: clamp(42px, 6.4vw, 92px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.075em !important;
}

.asc-url-driven-advert .asc-intro-glass p,
.asc-url-driven-advert .asc-final-inner p {
    max-width: 900px !important;
    font-size: clamp(16px, 1.35vw, 21px) !important;
    color: #475569 !important;
}

/* ---------------------------------------------------------
   Slide stage
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-slide-stage,
.asc-url-driven-advert .asc-cinematic-slide,
.asc-url-driven-advert .asc-slide-layout {
    position: absolute !important;
    inset: 0 !important;
}

.asc-url-driven-advert .asc-cinematic-slide {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(1.015) translateY(12px) !important;
    filter: blur(14px) !important;
    transition:
        opacity 620ms cubic-bezier(.2, .8, .2, 1),
        transform 760ms cubic-bezier(.2, .8, .2, 1),
        filter 620ms cubic-bezier(.2, .8, .2, 1) !important;
}

.asc-url-driven-advert .asc-cinematic-slide.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) translateY(0) !important;
    filter: blur(0) !important;
}

.asc-url-driven-advert .asc-cinematic-slide.leaving {
    opacity: 0 !important;
    transform: scale(0.985) translateY(-12px) !important;
    filter: blur(14px) !important;
}

/* ---------------------------------------------------------
   Screenshot-first vertical layout
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-slide-layout,
.asc-url-driven-advert .asc-layout-hero .asc-slide-layout,
.asc-url-driven-advert .asc-layout-angle .asc-slide-layout,
.asc-url-driven-advert .asc-layout-wide .asc-slide-layout,
.asc-url-driven-advert .asc-layout-focus .asc-slide-layout,
.asc-url-driven-advert .asc-layout-split .asc-slide-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 15px !important;

    padding:
        74px
        clamp(18px, 3vw, 42px)
        122px !important;
}

/* ---------------------------------------------------------
   Screenshot device frame
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-device-wrap {
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    perspective: none !important;
    z-index: 8 !important;
}

.asc-url-driven-advert .asc-device-glow,
.asc-url-driven-advert .asc-device-shadow {
    display: none !important;
}

.asc-url-driven-advert .asc-device-frame {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
    border-radius: 24px !important;

    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;

    transform: none !important;

    box-shadow:
        0 32px 90px rgba(15, 23, 42, 0.16),
        0 14px 34px rgba(37, 99, 235, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.asc-url-driven-advert .asc-cinematic-slide.active .asc-device-frame {
    animation: ascUrlFrameIn 650ms cubic-bezier(.2, .85, .2, 1) both !important;
}

@keyframes ascUrlFrameIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Browser bar */
.asc-url-driven-advert .asc-window-chrome {
    height: 30px !important;
    min-height: 30px !important;
    flex: 0 0 30px !important;
    padding: 0 13px !important;
    gap: 7px !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
}

.asc-url-driven-advert .asc-window-chrome span {
    width: 7px !important;
    height: 7px !important;
}

.asc-url-driven-advert .asc-window-chrome em {
    font-size: 10px !important;
    color: #64748b !important;
}

/* Screenshot image fit */
.asc-url-driven-advert .asc-image-mask {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    aspect-ratio: auto !important;
    max-height: none !important;

    background: #ffffff !important;
}

.asc-url-driven-advert .asc-image-mask::after {
    display: none !important;
}

.asc-url-driven-advert .asc-image-mask::before {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.045) !important;
}

.asc-url-driven-advert .asc-device-frame img,
.asc-url-driven-advert .asc-image-mask img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;

    object-fit: contain !important;
    object-position: top center !important;

    background: #ffffff !important;

    transform: none !important;
    animation: none !important;
}

/* ---------------------------------------------------------
   Caption card under screenshot
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-copy-panel,
.asc-url-driven-advert .asc-layout-hero .asc-copy-panel,
.asc-url-driven-advert .asc-layout-angle .asc-copy-panel,
.asc-url-driven-advert .asc-layout-wide .asc-copy-panel,
.asc-url-driven-advert .asc-layout-focus .asc-copy-panel,
.asc-url-driven-advert .asc-layout-split .asc-copy-panel {
    position: relative !important;
    grid-row: 2 !important;
    z-index: 22 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 14px 16px !important;

    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px 12px !important;

    text-align: left !important;
    transform: none !important;

    border-radius: 20px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.80)) !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;

    box-shadow:
        0 18px 48px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;

    backdrop-filter: blur(20px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
}

.asc-url-driven-advert .asc-cinematic-slide.active .asc-copy-panel {
    animation: ascUrlCaptionIn 620ms cubic-bezier(.2, .85, .2, 1) 120ms both !important;
}

@keyframes ascUrlCaptionIn {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.asc-url-driven-advert .asc-copy-panel::before,
.asc-url-driven-advert .asc-copy-panel::after {
    display: none !important;
}

/* Caption number */
.asc-url-driven-advert .asc-slide-number {
    grid-column: 1 !important;
    position: relative !important;

    top: auto !important;
    right: auto !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    border-radius: 12px !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4, #10b981) !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;

    box-shadow:
        0 12px 26px rgba(37, 99, 235, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* Caption kicker */
.asc-url-driven-advert .asc-copy-panel .asc-eyebrow {
    grid-column: 2 !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;

    font-size: 8.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.075em !important;

    color: #1d4ed8 !important;
    background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.94), rgba(224, 242, 254, 0.72)) !important;
    border: 1px solid rgba(37, 99, 235, 0.16) !important;
}

/* Caption title */
.asc-url-driven-advert .asc-copy-panel h2 {
    grid-column: 3 !important;
    margin: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: #0f172a !important;
    font-size: clamp(18px, 1.55vw, 27px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
}

/* Caption paragraph */
.asc-url-driven-advert .asc-copy-panel p {
    grid-column: 3 !important;
    margin: 4px 0 0 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;

    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 650 !important;
}

/* Proof pill */
.asc-url-driven-advert .asc-mini-proof {
    grid-column: 4 !important;
    grid-row: 1 / span 2 !important;

    margin: 0 !important;
    padding: 8px 11px !important;
    white-space: nowrap !important;

    color: #0f172a !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.78)) !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;

    font-size: 10px !important;
    font-weight: 950 !important;
}

/* ---------------------------------------------------------
   HUD and background
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-screen-hud {
    display: none !important;
}

.asc-url-driven-advert .asc-impact-burst {
    display: none !important;
}

.asc-url-driven-advert .asc-slide-backdrop img {
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 0.16 !important;
    filter: blur(36px) saturate(1.12) brightness(1.14) !important;
}

.asc-url-driven-advert .asc-slide-backdrop::after {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.76),
            rgba(248, 250, 252, 0.90)
        ) !important;
}

/* ---------------------------------------------------------
   Controls and footer
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-cinema-controls {
    left: 50% !important;
    bottom: 44px !important;
    z-index: 120 !important;
    transform: translateX(-50%) !important;

    padding: 7px !important;
    gap: 7px !important;

    border-radius: 999px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68)) !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
}

.asc-url-driven-advert .asc-cinema-controls button {
    padding: 9px 12px !important;
    font-size: 11px !important;
}

.asc-url-driven-advert .asc-cinema-footer {
    left: clamp(18px, 3vw, 38px) !important;
    right: clamp(18px, 3vw, 38px) !important;
    bottom: 12px !important;
    z-index: 90 !important;
}

.asc-url-driven-advert .asc-timeline {
    height: 6px !important;
}

.asc-url-driven-advert .asc-footer-meta {
    margin-top: 6px !important;
    font-size: 9px !important;
}

/* ---------------------------------------------------------
   Compact top bar
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-cinema-topbar {
    top: 16px !important;
    left: clamp(18px, 3vw, 38px) !important;
    right: clamp(18px, 3vw, 38px) !important;
}

.asc-url-driven-advert .asc-cinema-brand,
.asc-url-driven-advert .asc-cinema-pill {
    min-height: 34px !important;
    padding: 8px 12px !important;
    font-size: 10px !important;
}

/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    .asc-url-driven-advert {
        height: var(--asc-stage-height, 900px) !important;
        min-height: var(--asc-stage-height, 900px) !important;
    }

    .asc-url-driven-advert .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-hero .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-angle .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-wide .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-focus .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-split .asc-slide-layout {
        padding:
            70px
            18px
            124px !important;
        gap: 12px !important;
    }

    .asc-url-driven-advert .asc-copy-panel,
    .asc-url-driven-advert .asc-layout-hero .asc-copy-panel,
    .asc-url-driven-advert .asc-layout-angle .asc-copy-panel,
    .asc-url-driven-advert .asc-layout-wide .asc-copy-panel,
    .asc-url-driven-advert .asc-layout-focus .asc-copy-panel,
    .asc-url-driven-advert .asc-layout-split .asc-copy-panel {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
    }

    .asc-url-driven-advert .asc-copy-panel .asc-eyebrow {
        display: none !important;
    }

    .asc-url-driven-advert .asc-slide-number {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
    }

    .asc-url-driven-advert .asc-copy-panel h2 {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .asc-url-driven-advert .asc-copy-panel p {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .asc-url-driven-advert .asc-mini-proof {
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
    }
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .asc-url-driven-advert {
        height: var(--asc-stage-height, 820px) !important;
        min-height: var(--asc-stage-height, 820px) !important;
        border-radius: 22px !important;
    }

    .asc-url-driven-advert .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-hero .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-angle .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-wide .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-focus .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-split .asc-slide-layout {
        padding:
            62px
            12px
            132px !important;
        gap: 10px !important;
    }

    .asc-url-driven-advert .asc-window-chrome {
        height: 24px !important;
        min-height: 24px !important;
        flex-basis: 24px !important;
    }

    .asc-url-driven-advert .asc-window-chrome em {
        display: none !important;
    }

    .asc-url-driven-advert .asc-copy-panel,
    .asc-url-driven-advert .asc-layout-hero .asc-copy-panel,
    .asc-url-driven-advert .asc-layout-angle .asc-copy-panel,
    .asc-url-driven-advert .asc-layout-wide .asc-copy-panel,
    .asc-url-driven-advert .asc-layout-focus .asc-copy-panel,
    .asc-url-driven-advert .asc-layout-split .asc-copy-panel {
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;

        padding: 10px 12px !important;
        border-radius: 16px !important;
    }

    .asc-url-driven-advert .asc-mini-proof {
        display: none !important;
    }

    .asc-url-driven-advert .asc-slide-number {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 10px !important;
    }

    .asc-url-driven-advert .asc-copy-panel h2 {
        font-size: 17px !important;
    }

    .asc-url-driven-advert .asc-copy-panel p {
        font-size: 11px !important;
    }

    .asc-url-driven-advert .asc-cinema-controls {
        bottom: 46px !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
        border-radius: 18px !important;
    }

    .asc-url-driven-advert .asc-cinema-controls button {
        padding: 8px 9px !important;
        font-size: 10px !important;
    }

    .asc-url-driven-advert .asc-cinema-pill {
        display: none !important;
    }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .asc-url-driven-advert .asc-cinematic-slide,
    .asc-url-driven-advert .asc-device-frame,
    .asc-url-driven-advert .asc-copy-panel,
    .asc-url-driven-advert .asc-orb,
    .asc-url-driven-advert .asc-race-line,
    .asc-url-driven-advert .asc-particles span,
    .asc-url-driven-advert .asc-grid-glow {
        animation: none !important;
        transition-duration: 180ms !important;
    }
}



/* =========================================================
   ASC Advert Story Card Layout Fix v12
   Add at the very bottom of asc-advert-video.css
   Purpose:
   - Left explanation cards
   - Right screenshot preview
   - Better image framing
   - More premium advert layout
   ========================================================= */

/* ---------------------------------------------------------
   Main stage
   --------------------------------------------------------- */

.asc-url-driven-advert {
    height: var(--asc-stage-height, 900px) !important;
    min-height: var(--asc-stage-height, 900px) !important;
    overflow: hidden !important;
}

/* ---------------------------------------------------------
   Slide layout: story left, screenshot right
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-slide-layout,
.asc-url-driven-advert .asc-layout-hero .asc-slide-layout,
.asc-url-driven-advert .asc-layout-angle .asc-slide-layout,
.asc-url-driven-advert .asc-layout-wide .asc-slide-layout,
.asc-url-driven-advert .asc-layout-focus .asc-slide-layout,
.asc-url-driven-advert .asc-layout-split .asc-slide-layout {
    display: grid !important;
    grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.55fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: clamp(24px, 3vw, 48px) !important;

    padding:
        78px
        clamp(22px, 4vw, 58px)
        104px !important;
}

/* ---------------------------------------------------------
   New story panel
   --------------------------------------------------------- */

.asc-story-panel {
    position: relative !important;
    z-index: 25 !important;

    width: 100% !important;
    max-width: 500px !important;

    padding: clamp(22px, 2.4vw, 34px) !important;
    border-radius: 30px !important;

    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.70)) !important;

    border: 1px solid rgba(148, 163, 184, 0.26) !important;

    box-shadow:
        0 30px 88px rgba(15, 23, 42, 0.13),
        0 14px 34px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;

    backdrop-filter: blur(24px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.08) !important;

    animation: ascStoryPanelIn 680ms cubic-bezier(.2, .85, .2, 1) both !important;
}

@keyframes ascStoryPanelIn {
    from {
        opacity: 0;
        transform: translateX(-26px) scale(0.98);
        filter: blur(12px);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

.asc-story-topline {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.asc-story-panel .asc-slide-number {
    position: relative !important;
    top: auto !important;
    right: auto !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    border-radius: 14px !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4, #10b981) !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;

    box-shadow:
        0 14px 30px rgba(37, 99, 235, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.asc-story-panel .asc-eyebrow {
    margin: 0 !important;
    padding: 8px 11px !important;

    white-space: nowrap !important;

    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
}

.asc-story-panel h2 {
    margin: 0 0 14px !important;

    color: #0f172a !important;
    font-size: clamp(30px, 3.2vw, 52px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.065em !important;
    font-weight: 1000 !important;
    text-wrap: balance !important;
}

.asc-story-lead {
    margin: 0 0 20px !important;

    color: #475569 !important;
    font-size: clamp(13px, 1vw, 15.5px) !important;
    line-height: 1.55 !important;
    font-weight: 650 !important;
}

/* ---------------------------------------------------------
   Feature explanation cards
   --------------------------------------------------------- */

.asc-feature-cards {
    display: grid !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.asc-feature-card {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;

    padding: 12px !important;
    border-radius: 18px !important;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(241, 245, 249, 0.68)) !important;

    border: 1px solid rgba(148, 163, 184, 0.22) !important;

    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.asc-feature-icon {
    width: 38px !important;
    height: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 14px !important;

    color: #ffffff !important;
    background:
        linear-gradient(135deg, #1d4ed8, #06b6d4) !important;

    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.20) !important;

    font-size: 10px !important;
    font-weight: 1000 !important;
    letter-spacing: -0.02em !important;
}

.asc-feature-card h3 {
    margin: 0 0 4px !important;

    color: #0f172a !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    letter-spacing: -0.025em !important;
}

.asc-feature-card p {
    margin: 0 !important;

    color: #64748b !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    font-weight: 620 !important;
}

.asc-story-panel .asc-mini-proof {
    margin-top: 18px !important;
    padding: 9px 12px !important;

    color: #0f172a !important;
    background:
        linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.78)) !important;

    border: 1px solid rgba(34, 197, 94, 0.18) !important;

    font-size: 11px !important;
    font-weight: 950 !important;
}

/* ---------------------------------------------------------
   Hide old caption panel styles if they remain
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-copy-panel {
    display: none !important;
}

/* ---------------------------------------------------------
   Screenshot frame on right
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-device-wrap {
    position: relative !important;
    z-index: 12 !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    perspective: 1800px !important;
}

.asc-url-driven-advert .asc-device-glow {
    display: block !important;
    position: absolute !important;
    inset: -7% !important;
    opacity: 0.7 !important;
    filter: blur(55px) !important;
    background:
        radial-gradient(circle at 45% 35%, rgba(56, 189, 248, 0.24), transparent 55%),
        radial-gradient(circle at 80% 55%, rgba(34, 197, 94, 0.16), transparent 52%) !important;
}

.asc-url-driven-advert .asc-device-shadow {
    display: block !important;
    position: absolute !important;
    left: 8% !important;
    right: 8% !important;
    bottom: -24px !important;
    height: 70px !important;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.20), transparent 72%) !important;
    filter: blur(22px) !important;
}

.asc-url-driven-advert .asc-device-frame {
    position: relative !important;

    width: 100% !important;
    height: min(100%, calc(var(--asc-stage-height, 900px) - 190px)) !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    border-radius: 26px !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;

    transform: rotateY(-3deg) rotateX(0.8deg) !important;

    box-shadow:
        0 42px 110px rgba(15, 23, 42, 0.18),
        0 18px 46px rgba(37, 99, 235, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

    animation:
        ascAdvertDeviceIn 760ms cubic-bezier(.2, .85, .2, 1) both,
        ascAdvertDeviceFloat 6.8s ease-in-out 850ms infinite alternate !important;
}

@keyframes ascAdvertDeviceIn {
    from {
        opacity: 0;
        transform: translateX(54px) scale(0.96) rotateY(-8deg);
        filter: blur(14px);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(-3deg) rotateX(0.8deg);
        filter: blur(0);
    }
}

@keyframes ascAdvertDeviceFloat {
    from {
        transform: translateY(0) rotateY(-3deg) rotateX(0.8deg);
    }

    to {
        transform: translateY(-10px) rotateY(-1deg) rotateX(0.4deg);
    }
}

.asc-url-driven-advert .asc-window-chrome {
    height: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
    padding: 0 14px !important;
}

.asc-url-driven-advert .asc-image-mask {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    background: #ffffff !important;
}

/* 
   Important:
   cover makes awkward screenshots look more like an advert.
   For full uncropped document screenshots, change cover to contain.
*/
.asc-url-driven-advert .asc-image-mask img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: top center !important;

    background: #ffffff !important;

    transform: none !important;
    animation: none !important;
}

/* Some document editor screens look better shifted slightly right */
.asc-url-driven-advert .asc-layout-focus .asc-image-mask img {
    object-position: top center !important;
}

/* ---------------------------------------------------------
   Controls and timeline
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-cinema-controls {
    bottom: 42px !important;
    z-index: 140 !important;
}

.asc-url-driven-advert .asc-cinema-footer {
    bottom: 12px !important;
    z-index: 120 !important;
}

.asc-url-driven-advert .asc-timeline {
    height: 6px !important;
}

/* ---------------------------------------------------------
   Top bar
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-cinema-topbar {
    top: 18px !important;
}

.asc-url-driven-advert .asc-cinema-brand,
.asc-url-driven-advert .asc-cinema-pill {
    min-height: 34px !important;
    padding: 8px 12px !important;
    font-size: 10px !important;
}

/* ---------------------------------------------------------
   Better background
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-slide-backdrop img {
    opacity: 0.14 !important;
    filter: blur(34px) saturate(1.15) brightness(1.12) !important;
}

.asc-url-driven-advert .asc-slide-backdrop::after {
    background:
        radial-gradient(circle at 72% 40%, rgba(255,255,255,0.22), rgba(255,255,255,0.78) 44%, rgba(248,250,252,0.92) 100%),
        linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.54), rgba(255,255,255,0.86)) !important;
}

/* ---------------------------------------------------------
   Tablet layout
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    .asc-url-driven-advert {
        height: var(--asc-stage-height, 980px) !important;
        min-height: var(--asc-stage-height, 980px) !important;
    }

    .asc-url-driven-advert .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-hero .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-angle .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-wide .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-focus .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-split .asc-slide-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: 18px !important;

        padding:
            72px
            18px
            118px !important;
    }

    .asc-story-panel {
        max-width: none !important;
        padding: 18px !important;
    }

    .asc-story-panel h2 {
        font-size: clamp(27px, 4vw, 42px) !important;
    }

    .asc-feature-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .asc-feature-card {
        grid-template-columns: 32px minmax(0, 1fr) !important;
        padding: 10px !important;
    }

    .asc-feature-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 11px !important;
    }

    .asc-feature-card p {
        font-size: 10.5px !important;
    }

    .asc-url-driven-advert .asc-device-frame {
        height: 100% !important;
        transform: none !important;
        animation:
            ascAdvertTabletDeviceIn 620ms cubic-bezier(.2, .85, .2, 1) both !important;
    }

    @keyframes ascAdvertTabletDeviceIn {
        from {
            opacity: 0;
            transform: translateY(22px) scale(0.98);
            filter: blur(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }
}

/* ---------------------------------------------------------
   Mobile layout
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .asc-url-driven-advert {
        height: var(--asc-stage-height, 940px) !important;
        min-height: var(--asc-stage-height, 940px) !important;
    }

    .asc-url-driven-advert .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-hero .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-angle .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-wide .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-focus .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-split .asc-slide-layout {
        padding:
            62px
            12px
            132px !important;
        gap: 12px !important;
    }

    .asc-story-panel {
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .asc-story-panel h2 {
        font-size: 24px !important;
        line-height: 1.02 !important;
    }

    .asc-story-lead {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }

    .asc-feature-cards {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .asc-feature-card {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .asc-feature-icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
        font-size: 9px !important;
    }

    .asc-feature-card h3 {
        font-size: 12px !important;
    }

    .asc-feature-card p {
        font-size: 10.5px !important;
        line-height: 1.3 !important;
    }

    .asc-story-panel .asc-mini-proof {
        display: none !important;
    }

    .asc-url-driven-advert .asc-device-frame {
        border-radius: 18px !important;
    }

    .asc-url-driven-advert .asc-window-chrome {
        height: 24px !important;
        min-height: 24px !important;
        flex-basis: 24px !important;
    }

    .asc-url-driven-advert .asc-window-chrome em {
        display: none !important;
    }

    .asc-url-driven-advert .asc-cinema-controls {
        bottom: 46px !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
        border-radius: 18px !important;
    }

    .asc-url-driven-advert .asc-cinema-controls button {
        padding: 8px 9px !important;
        font-size: 10px !important;
    }
}



/* =========================================================
   ASC Final Premium Presentation Patch v13
   PLACE THIS AT THE VERY BOTTOM OF asc-advert-video.css
   Purpose:
   - Full screenshot visibility
   - Cleaner left story panel
   - Better 16:9 video composition
   - No image cropping
   - More premium advert spacing
   ========================================================= */


/* ---------------------------------------------------------
   1. Main stage: true video-style composition
   --------------------------------------------------------- */

.asc-url-driven-advert {
    height: var(--asc-stage-height, 900px) !important;
    min-height: var(--asc-stage-height, 900px) !important;
    border-radius: clamp(24px, 3vw, 38px) !important;
    overflow: hidden !important;

    background:
        radial-gradient(circle at 12% 12%, rgba(37, 99, 235, 0.18), transparent 32%),
        radial-gradient(circle at 88% 16%, rgba(20, 184, 166, 0.16), transparent 30%),
        radial-gradient(circle at 50% 108%, rgba(245, 158, 11, 0.12), transparent 42%),
        linear-gradient(135deg, #ffffff 0%, #f6faff 48%, #edf7ff 100%) !important;
}


/* ---------------------------------------------------------
   2. Layout: story left, full screenshot right
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-slide-layout,
.asc-url-driven-advert .asc-layout-hero .asc-slide-layout,
.asc-url-driven-advert .asc-layout-angle .asc-slide-layout,
.asc-url-driven-advert .asc-layout-wide .asc-slide-layout,
.asc-url-driven-advert .asc-layout-focus .asc-slide-layout,
.asc-url-driven-advert .asc-layout-split .asc-slide-layout {
    display: grid !important;

    /*
       Left panel = compact story.
       Right panel = large screenshot.
    */
    grid-template-columns: minmax(310px, 430px) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;

    align-items: center !important;
    gap: clamp(22px, 3vw, 46px) !important;

    padding:
        74px
        clamp(22px, 4vw, 58px)
        96px !important;
}


/* ---------------------------------------------------------
   3. Story panel: cleaner, smaller, premium
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-story-panel {
    position: relative !important;
    z-index: 30 !important;

    width: 100% !important;
    max-width: 430px !important;

    padding: clamp(22px, 2.2vw, 30px) !important;
    border-radius: 28px !important;

    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.72)) !important;

    border: 1px solid rgba(148, 163, 184, 0.24) !important;

    box-shadow:
        0 30px 84px rgba(15, 23, 42, 0.12),
        0 12px 32px rgba(37, 99, 235, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;

    backdrop-filter: blur(24px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.08) !important;

    animation: ascV13StoryIn 720ms cubic-bezier(.2, .85, .2, 1) both !important;
}

@keyframes ascV13StoryIn {
    from {
        opacity: 0;
        transform: translateX(-26px) scale(0.98);
        filter: blur(12px);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

.asc-url-driven-advert .asc-story-topline {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
}

.asc-url-driven-advert .asc-story-panel .asc-slide-number {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;

    border-radius: 14px !important;

    font-size: 12px !important;
    font-weight: 1000 !important;

    background:
        linear-gradient(135deg, #2563eb, #06b6d4, #10b981) !important;

    box-shadow:
        0 14px 30px rgba(37, 99, 235, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.asc-url-driven-advert .asc-story-panel .asc-eyebrow {
    margin: 0 !important;
    padding: 8px 11px !important;

    color: #1d4ed8 !important;
    background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.96), rgba(224, 242, 254, 0.76)) !important;

    border: 1px solid rgba(37, 99, 235, 0.16) !important;

    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
}

.asc-url-driven-advert .asc-story-panel h2 {
    margin: 0 0 13px !important;

    color: #0f172a !important;
    font-size: clamp(31px, 3vw, 48px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.065em !important;
    font-weight: 1000 !important;

    text-wrap: balance !important;
}

.asc-url-driven-advert .asc-story-lead {
    margin: 0 0 18px !important;

    color: #475569 !important;
    font-size: clamp(13px, 1vw, 15px) !important;
    line-height: 1.5 !important;
    font-weight: 650 !important;
}


/* ---------------------------------------------------------
   4. Feature cards: less bulky
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-feature-cards {
    display: grid !important;
    gap: 9px !important;
    margin-top: 16px !important;
}

.asc-url-driven-advert .asc-feature-card {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 11px !important;

    padding: 10px !important;
    border-radius: 16px !important;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.66)) !important;

    border: 1px solid rgba(148, 163, 184, 0.20) !important;

    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.asc-url-driven-advert .asc-feature-icon {
    width: 34px !important;
    height: 34px !important;

    border-radius: 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, #1d4ed8, #06b6d4) !important;

    font-size: 9.5px !important;
    font-weight: 1000 !important;
}

.asc-url-driven-advert .asc-feature-card h3 {
    margin: 0 0 3px !important;

    color: #0f172a !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    letter-spacing: -0.02em !important;
}

.asc-url-driven-advert .asc-feature-card p {
    margin: 0 !important;

    color: #64748b !important;
    font-size: 10.8px !important;
    line-height: 1.35 !important;
    font-weight: 620 !important;
}

.asc-url-driven-advert .asc-story-panel .asc-mini-proof {
    display: inline-flex !important;
    margin-top: 16px !important;
    padding: 8px 11px !important;

    color: #0f172a !important;
    background:
        linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(255, 255, 255, 0.80)) !important;

    border: 1px solid rgba(34, 197, 94, 0.18) !important;

    font-size: 10.5px !important;
    font-weight: 950 !important;
}


/* ---------------------------------------------------------
   5. Screenshot frame: full image visible
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-device-wrap {
    position: relative !important;
    z-index: 20 !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    perspective: 1600px !important;
}

.asc-url-driven-advert .asc-device-glow {
    display: block !important;
    position: absolute !important;
    inset: -7% !important;

    opacity: 0.62 !important;
    filter: blur(58px) !important;

    background:
        radial-gradient(circle at 45% 35%, rgba(56, 189, 248, 0.24), transparent 55%),
        radial-gradient(circle at 80% 55%, rgba(34, 197, 94, 0.16), transparent 52%) !important;
}

.asc-url-driven-advert .asc-device-shadow {
    display: block !important;
    position: absolute !important;

    left: 9% !important;
    right: 9% !important;
    bottom: 2px !important;
    height: 60px !important;

    background:
        radial-gradient(ellipse at center, rgba(15, 23, 42, 0.18), transparent 72%) !important;

    filter: blur(22px) !important;
}

.asc-url-driven-advert .asc-device-frame {
    position: relative !important;

    /*
       This keeps the screenshot large but inside the visible stage.
    */
    width: 100% !important;
    height: auto !important;
    max-height: calc(var(--asc-stage-height, 900px) - 180px) !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    border-radius: 26px !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;

    transform: rotateY(-2.4deg) rotateX(0.6deg) !important;

    box-shadow:
        0 42px 110px rgba(15, 23, 42, 0.18),
        0 18px 46px rgba(37, 99, 235, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

    animation:
        ascV13DeviceIn 760ms cubic-bezier(.2, .85, .2, 1) both,
        ascV13DeviceFloat 7s ease-in-out 850ms infinite alternate !important;
}

@keyframes ascV13DeviceIn {
    from {
        opacity: 0;
        transform: translateX(46px) scale(0.97) rotateY(-7deg);
        filter: blur(14px);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(-2.4deg) rotateX(0.6deg);
        filter: blur(0);
    }
}

@keyframes ascV13DeviceFloat {
    from {
        transform: translateY(0) rotateY(-2.4deg) rotateX(0.6deg);
    }

    to {
        transform: translateY(-10px) rotateY(-0.8deg) rotateX(0.35deg);
    }
}

.asc-url-driven-advert .asc-window-chrome {
    height: 30px !important;
    min-height: 30px !important;
    flex: 0 0 30px !important;

    display: flex !important;
    align-items: center !important;

    padding: 0 13px !important;
    gap: 7px !important;

    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
}

.asc-url-driven-advert .asc-window-chrome span {
    width: 7px !important;
    height: 7px !important;
}

.asc-url-driven-advert .asc-window-chrome em {
    color: #64748b !important;
    font-size: 10px !important;
}


/* ---------------------------------------------------------
   6. Critical image rule: no cropping
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-image-mask {
    position: relative !important;

    width: 100% !important;

    /*
       Keep a predictable screenshot window.
       This avoids strange stretching and random cropping.
    */
    aspect-ratio: 16 / 9 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    background: #ffffff !important;
}

.asc-url-driven-advert .asc-image-mask::after {
    display: none !important;
}

.asc-url-driven-advert .asc-image-mask::before {
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.045),
        inset 0 -30px 60px rgba(15, 23, 42, 0.025) !important;
}

.asc-url-driven-advert .asc-device-frame img,
.asc-url-driven-advert .asc-image-mask img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    /*
       This is the important fix.
       contain = full screenshot visible.
       cover = cropped screenshot.
    */
    object-fit: contain !important;
    object-position: top center !important;

    background: #ffffff !important;

    transform: none !important;
    animation: none !important;
}


/* ---------------------------------------------------------
   7. Hide old caption panels
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-copy-panel {
    display: none !important;
}


/* ---------------------------------------------------------
   8. Background cleanup
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-slide-backdrop img {
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 0.12 !important;
    filter: blur(36px) saturate(1.12) brightness(1.14) !important;
}

.asc-url-driven-advert .asc-slide-backdrop::after {
    background:
        radial-gradient(circle at 72% 40%, rgba(255,255,255,0.20), rgba(255,255,255,0.76) 44%, rgba(248,250,252,0.92) 100%),
        linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.50), rgba(255,255,255,0.86)) !important;
}


/* ---------------------------------------------------------
   9. Controls and footer
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-cinema-controls {
    bottom: 42px !important;
    z-index: 150 !important;

    padding: 7px !important;
    gap: 7px !important;

    border-radius: 999px !important;
}

.asc-url-driven-advert .asc-cinema-controls button {
    padding: 9px 12px !important;
    font-size: 11px !important;
}

.asc-url-driven-advert .asc-cinema-footer {
    left: clamp(18px, 3vw, 38px) !important;
    right: clamp(18px, 3vw, 38px) !important;
    bottom: 12px !important;
    z-index: 120 !important;
}

.asc-url-driven-advert .asc-timeline {
    height: 6px !important;
}

.asc-url-driven-advert .asc-footer-meta {
    margin-top: 6px !important;
    font-size: 9px !important;
}


/* ---------------------------------------------------------
   10. Top bar
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-cinema-topbar {
    top: 18px !important;
}

.asc-url-driven-advert .asc-cinema-brand,
.asc-url-driven-advert .asc-cinema-pill {
    min-height: 34px !important;
    padding: 8px 12px !important;

    font-size: 10px !important;
}


/* ---------------------------------------------------------
   11. Intro/final screens
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-intro-screen,
.asc-url-driven-advert .asc-final-screen {
    padding:
        92px
        clamp(22px, 6vw, 84px)
        132px !important;
}

.asc-url-driven-advert .asc-intro-glass,
.asc-url-driven-advert .asc-final-inner {
    max-width: 1120px !important;
}

.asc-url-driven-advert .asc-intro-glass h1,
.asc-url-driven-advert .asc-final-inner h2 {
    font-size: clamp(42px, 6vw, 84px) !important;
    line-height: 0.94 !important;
}


/* ---------------------------------------------------------
   12. Tablet
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    .asc-url-driven-advert {
        height: var(--asc-stage-height, 980px) !important;
        min-height: var(--asc-stage-height, 980px) !important;
    }

    .asc-url-driven-advert .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-hero .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-angle .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-wide .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-focus .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-split .asc-slide-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;

        gap: 18px !important;

        padding:
            72px
            18px
            118px !important;
    }

    .asc-url-driven-advert .asc-story-panel {
        max-width: none !important;
        padding: 18px !important;
    }

    .asc-url-driven-advert .asc-story-panel h2 {
        font-size: clamp(27px, 4vw, 42px) !important;
    }

    .asc-url-driven-advert .asc-feature-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .asc-url-driven-advert .asc-feature-card {
        grid-template-columns: 32px minmax(0, 1fr) !important;
        padding: 9px !important;
    }

    .asc-url-driven-advert .asc-feature-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .asc-url-driven-advert .asc-device-frame {
        max-height: none !important;
        transform: none !important;

        animation: ascV13TabletDeviceIn 620ms cubic-bezier(.2, .85, .2, 1) both !important;
    }

    @keyframes ascV13TabletDeviceIn {
        from {
            opacity: 0;
            transform: translateY(22px) scale(0.98);
            filter: blur(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }
}


/* ---------------------------------------------------------
   13. Mobile
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .asc-url-driven-advert {
        height: var(--asc-stage-height, 940px) !important;
        min-height: var(--asc-stage-height, 940px) !important;
        border-radius: 22px !important;
    }

    .asc-url-driven-advert .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-hero .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-angle .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-wide .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-focus .asc-slide-layout,
    .asc-url-driven-advert .asc-layout-split .asc-slide-layout {
        padding:
            62px
            12px
            132px !important;
        gap: 12px !important;
    }

    .asc-url-driven-advert .asc-story-panel {
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .asc-url-driven-advert .asc-story-panel h2 {
        font-size: 24px !important;
        line-height: 1.02 !important;
    }

    .asc-url-driven-advert .asc-story-lead {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }

    .asc-url-driven-advert .asc-feature-cards {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .asc-url-driven-advert .asc-feature-card {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .asc-url-driven-advert .asc-feature-icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
        font-size: 9px !important;
    }

    .asc-url-driven-advert .asc-feature-card h3 {
        font-size: 12px !important;
    }

    .asc-url-driven-advert .asc-feature-card p {
        font-size: 10.5px !important;
        line-height: 1.3 !important;
    }

    .asc-url-driven-advert .asc-story-panel .asc-mini-proof {
        display: none !important;
    }

    .asc-url-driven-advert .asc-window-chrome {
        height: 24px !important;
        min-height: 24px !important;
        flex-basis: 24px !important;
    }

    .asc-url-driven-advert .asc-window-chrome em {
        display: none !important;
    }

    .asc-url-driven-advert .asc-cinema-controls {
        bottom: 46px !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
        border-radius: 18px !important;
    }

    .asc-url-driven-advert .asc-cinema-controls button {
        padding: 8px 9px !important;
        font-size: 10px !important;
    }

    .asc-url-driven-advert .asc-cinema-pill {
        display: none !important;
    }
}



/* =========================================================
   ASC Emergency Layout Fix v14
   PLACE THIS AFTER v13 AT THE VERY BOTTOM
   Purpose:
   - Force story card left
   - Force screenshot right
   - Make screenshot large
   - Stop old grid-row rules fighting the layout
   ========================================================= */


/* ---------------------------------------------------------
   1. Force a proper two-column advert layout
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-slide-layout {
    display: grid !important;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;

    align-items: center !important;
    justify-items: stretch !important;

    gap: clamp(28px, 4vw, 64px) !important;

    padding:
        74px
        clamp(28px, 5vw, 82px)
        104px !important;
}


/* ---------------------------------------------------------
   2. Force the story panel into the LEFT column
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-story-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;

    justify-self: end !important;
    align-self: center !important;

    width: 100% !important;
    max-width: 420px !important;

    margin: 0 !important;
}


/* ---------------------------------------------------------
   3. Force the screenshot into the RIGHT column
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-device-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;

    justify-self: stretch !important;
    align-self: center !important;

    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    perspective: 1600px !important;
}


/* ---------------------------------------------------------
   4. Make the screenshot frame genuinely large
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-device-frame {
    width: 100% !important;

    /*
       This is the key:
       give the frame a real visual size instead of allowing it
       to collapse around the screenshot.
    */
    height: auto !important;
    max-width: none !important;

    display: flex !important;
    flex-direction: column !important;

    border-radius: 28px !important;
    overflow: hidden !important;

    background: #ffffff !important;

    transform: rotateY(-2deg) rotateX(0.5deg) !important;

    box-shadow:
        0 46px 120px rgba(15, 23, 42, 0.18),
        0 18px 48px rgba(37, 99, 235, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}


/* ---------------------------------------------------------
   5. Use a big 16:9 screen area
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-image-mask {
    width: 100% !important;

    /*
       This gives the screenshot a large cinema-like canvas.
       The image will fill this area without being shoved into a corner.
    */
    aspect-ratio: 16 / 9 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #ffffff !important;
    overflow: hidden !important;
}


/* ---------------------------------------------------------
   6. Make the image fill the available screenshot area
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-image-mask img,
.asc-url-driven-advert .asc-device-frame img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    /*
       Option A:
       contain = full screenshot visible, no crop.
       This is safest for dashboard screenshots.
    */
    object-fit: contain !important;

    object-position: center center !important;

    background: #ffffff !important;

    transform: none !important;
    animation: none !important;
}


/* ---------------------------------------------------------
   7. Bigger browser chrome, still clean
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-window-chrome {
    height: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;

    padding: 0 14px !important;
}


/* ---------------------------------------------------------
   8. If a screenshot has large white margins, use this class
   ---------------------------------------------------------
   Add class "asc-crop-slide" to a slide only if you want
   that specific screenshot to fill more aggressively.
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-crop-slide .asc-image-mask img {
    object-fit: cover !important;
    object-position: top center !important;
}


/* ---------------------------------------------------------
   9. Desktop refinement for very wide screens
   --------------------------------------------------------- */

@media (min-width: 1400px) {
    .asc-url-driven-advert .asc-slide-layout {
        grid-template-columns: minmax(340px, 430px) minmax(0, 1fr) !important;

        padding:
            78px
            clamp(42px, 6vw, 110px)
            104px !important;
    }

    .asc-url-driven-advert .asc-story-panel {
        max-width: 430px !important;
    }
}


/* ---------------------------------------------------------
   10. Tablet: stack neatly
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    .asc-url-driven-advert .asc-slide-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;

        gap: 18px !important;

        padding:
            72px
            18px
            120px !important;
    }

    .asc-url-driven-advert .asc-story-panel {
        grid-column: 1 !important;
        grid-row: 1 !important;

        justify-self: stretch !important;

        max-width: none !important;
    }

    .asc-url-driven-advert .asc-device-wrap {
        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 100% !important;
    }

    .asc-url-driven-advert .asc-device-frame {
        transform: none !important;
    }
}


/* ---------------------------------------------------------
   11. Mobile: keep readable
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .asc-url-driven-advert .asc-slide-layout {
        padding:
            62px
            12px
            132px !important;
        gap: 12px !important;
    }

    .asc-url-driven-advert .asc-story-panel {
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .asc-url-driven-advert .asc-device-frame {
        border-radius: 18px !important;
    }

    .asc-url-driven-advert .asc-window-chrome {
        height: 24px !important;
        min-height: 24px !important;
        flex-basis: 24px !important;
    }
}


/* =========================================================
   ASC Final Slide Accuracy + Image Fit Patch v15
   PLACE AT THE VERY BOTTOM OF asc-advert-video.css
   Purpose:
   - Match screenshot types to correct visual treatment
   - Full-page screenshots display properly
   - Modal screenshots look intentional, not tiny
   - Document editor screens can crop professionally
   - Left story panel + right screenshot layout remains stable
   ========================================================= */


/* ---------------------------------------------------------
   1. Main advert stage
   --------------------------------------------------------- */

.asc-url-driven-advert {
    height: var(--asc-stage-height, 900px) !important;
    min-height: var(--asc-stage-height, 900px) !important;
    overflow: hidden !important;
    border-radius: clamp(24px, 3vw, 40px) !important;
    background:
        radial-gradient(circle at 10% 10%, rgba(37, 99, 235, 0.18), transparent 32%),
        radial-gradient(circle at 88% 16%, rgba(20, 184, 166, 0.16), transparent 30%),
        radial-gradient(circle at 52% 110%, rgba(245, 158, 11, 0.12), transparent 42%),
        linear-gradient(135deg, #ffffff 0%, #f6faff 48%, #edf7ff 100%) !important;
}


/* ---------------------------------------------------------
   2. Stable desktop composition
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-slide-layout {
    display: grid !important;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: clamp(28px, 4vw, 64px) !important;

    padding:
        74px
        clamp(28px, 5vw, 82px)
        104px !important;
}

.asc-url-driven-advert .asc-story-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;

    width: 100% !important;
    max-width: 420px !important;
    margin: 0 !important;

    padding: clamp(20px, 2.2vw, 30px) !important;
    border-radius: 28px !important;

    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.74)) !important;

    border: 1px solid rgba(148, 163, 184, 0.24) !important;

    box-shadow:
        0 30px 84px rgba(15, 23, 42, 0.12),
        0 12px 32px rgba(37, 99, 235, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;

    backdrop-filter: blur(24px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.08) !important;
}

.asc-url-driven-advert .asc-device-wrap {
    grid-column: 2 !important;
    grid-row: 1 !important;

    justify-self: stretch !important;
    align-self: center !important;

    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    perspective: 1600px !important;
}


/* ---------------------------------------------------------
   3. Story panel text
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-story-topline {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.asc-url-driven-advert .asc-story-panel .asc-slide-number {
    position: relative !important;
    top: auto !important;
    right: auto !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 14px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4, #10b981) !important;

    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;

    box-shadow:
        0 14px 30px rgba(37, 99, 235, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.asc-url-driven-advert .asc-story-panel .asc-eyebrow {
    margin: 0 !important;
    padding: 8px 11px !important;
    white-space: nowrap !important;

    color: #1d4ed8 !important;
    background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.96), rgba(224, 242, 254, 0.76)) !important;
    border: 1px solid rgba(37, 99, 235, 0.16) !important;

    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
}

.asc-url-driven-advert .asc-story-panel h2 {
    margin: 0 0 12px !important;
    color: #0f172a !important;

    font-size: clamp(30px, 3vw, 47px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.064em !important;
    font-weight: 1000 !important;

    text-wrap: balance !important;
}

.asc-url-driven-advert .asc-story-lead {
    margin: 0 0 16px !important;

    color: #475569 !important;
    font-size: clamp(13px, 1vw, 15px) !important;
    line-height: 1.48 !important;
    font-weight: 650 !important;
}

.asc-url-driven-advert .asc-feature-cards {
    display: grid !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

.asc-url-driven-advert .asc-feature-card {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;

    padding: 9px !important;
    border-radius: 15px !important;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.66)) !important;

    border: 1px solid rgba(148, 163, 184, 0.20) !important;

    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.052),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.asc-url-driven-advert .asc-feature-icon {
    width: 34px !important;
    height: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d4ed8, #06b6d4) !important;

    font-size: 9.5px !important;
    font-weight: 1000 !important;
    letter-spacing: -0.02em !important;
}

.asc-url-driven-advert .asc-feature-card h3 {
    margin: 0 0 3px !important;
    color: #0f172a !important;

    font-size: 12.5px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    letter-spacing: -0.02em !important;
}

.asc-url-driven-advert .asc-feature-card p {
    margin: 0 !important;
    color: #64748b !important;

    font-size: 10.8px !important;
    line-height: 1.34 !important;
    font-weight: 620 !important;
}

.asc-url-driven-advert .asc-story-panel .asc-mini-proof {
    display: inline-flex !important;
    margin-top: 15px !important;
    padding: 8px 11px !important;

    color: #0f172a !important;
    background:
        linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(255, 255, 255, 0.80)) !important;

    border: 1px solid rgba(34, 197, 94, 0.18) !important;

    font-size: 10.5px !important;
    font-weight: 950 !important;
}


/* ---------------------------------------------------------
   4. Device frame
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-device-glow {
    display: block !important;
    position: absolute !important;
    inset: -7% !important;
    opacity: 0.62 !important;
    filter: blur(58px) !important;
    background:
        radial-gradient(circle at 45% 35%, rgba(56, 189, 248, 0.24), transparent 55%),
        radial-gradient(circle at 80% 55%, rgba(34, 197, 94, 0.16), transparent 52%) !important;
}

.asc-url-driven-advert .asc-device-shadow {
    display: block !important;
    position: absolute !important;
    left: 9% !important;
    right: 9% !important;
    bottom: -18px !important;
    height: 64px !important;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.18), transparent 72%) !important;
    filter: blur(22px) !important;
}

.asc-url-driven-advert .asc-device-frame {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
    border-radius: 28px !important;

    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;

    transform: rotateY(-2deg) rotateX(0.5deg) !important;

    box-shadow:
        0 46px 120px rgba(15, 23, 42, 0.18),
        0 18px 48px rgba(37, 99, 235, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;

    animation:
        ascV15DeviceIn 760ms cubic-bezier(.2, .85, .2, 1) both,
        ascV15DeviceFloat 7s ease-in-out 850ms infinite alternate !important;
}

@keyframes ascV15DeviceIn {
    from {
        opacity: 0;
        transform: translateX(46px) scale(0.97) rotateY(-7deg);
        filter: blur(14px);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(-2deg) rotateX(0.5deg);
        filter: blur(0);
    }
}

@keyframes ascV15DeviceFloat {
    from {
        transform: translateY(0) rotateY(-2deg) rotateX(0.5deg);
    }

    to {
        transform: translateY(-10px) rotateY(-0.8deg) rotateX(0.25deg);
    }
}

.asc-url-driven-advert .asc-window-chrome {
    height: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;

    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    padding: 0 14px !important;

    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
}

.asc-url-driven-advert .asc-window-chrome span {
    width: 7px !important;
    height: 7px !important;
}

.asc-url-driven-advert .asc-window-chrome em {
    color: #64748b !important;
    font-size: 10px !important;
}


/* ---------------------------------------------------------
   5. Image mask and base image rules
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-image-mask {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    background: #ffffff !important;
}

.asc-url-driven-advert .asc-image-mask::after {
    display: none !important;
}

.asc-url-driven-advert .asc-image-mask::before {
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.045),
        inset 0 -30px 60px rgba(15, 23, 42, 0.025) !important;
}

.asc-url-driven-advert .asc-image-mask img,
.asc-url-driven-advert .asc-device-frame img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;
    background: #ffffff !important;

    transform: none !important;
    animation: none !important;
}


/* ---------------------------------------------------------
   6. Fit classes from PHP
   --------------------------------------------------------- */

/* Best for full-page dashboards and wide homepage sections */
.asc-url-driven-advert .asc-fit-contain .asc-image-mask img {
    object-fit: contain !important;
}

/* Best for editor screens and dashboards where cropping is acceptable */
.asc-url-driven-advert .asc-fit-cover .asc-image-mask img {
    object-fit: cover !important;
}

/* Best for modal screenshots with blurred background */
.asc-url-driven-advert .asc-fit-modal .asc-device-frame {
    max-width: min(100%, 980px) !important;
}

.asc-url-driven-advert .asc-fit-modal .asc-image-mask {
    aspect-ratio: 16 / 9 !important;
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.96), rgba(241,245,249,0.88)) !important;
}

.asc-url-driven-advert .asc-fit-modal .asc-image-mask img {
    object-fit: cover !important;
    transform: scale(1.01) !important;
}


/* ---------------------------------------------------------
   7. Focus position classes
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-focus-top .asc-image-mask img {
    object-position: top center !important;
}

.asc-url-driven-advert .asc-focus-center .asc-image-mask img {
    object-position: center center !important;
}

.asc-url-driven-advert .asc-focus-left .asc-image-mask img {
    object-position: center left !important;
}

.asc-url-driven-advert .asc-focus-right .asc-image-mask img {
    object-position: center right !important;
}


/* ---------------------------------------------------------
   8. Hide old caption panel completely
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-copy-panel {
    display: none !important;
}


/* ---------------------------------------------------------
   9. Background refinement
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-slide-backdrop img {
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 0.12 !important;
    filter: blur(36px) saturate(1.12) brightness(1.14) !important;
}

.asc-url-driven-advert .asc-slide-backdrop::after {
    background:
        radial-gradient(circle at 72% 40%, rgba(255,255,255,0.20), rgba(255,255,255,0.76) 44%, rgba(248,250,252,0.92) 100%),
        linear-gradient(90deg, rgba(255,255,255,0.92), rgba(255,255,255,0.50), rgba(255,255,255,0.86)) !important;
}

.asc-url-driven-advert .asc-impact-burst,
.asc-url-driven-advert .asc-screen-hud {
    display: none !important;
}


/* ---------------------------------------------------------
   10. Controls and footer
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-cinema-controls {
    bottom: 42px !important;
    z-index: 150 !important;
    padding: 7px !important;
    gap: 7px !important;
    border-radius: 999px !important;
}

.asc-url-driven-advert .asc-cinema-controls button {
    padding: 9px 12px !important;
    font-size: 11px !important;
}

.asc-url-driven-advert .asc-cinema-footer {
    left: clamp(18px, 3vw, 38px) !important;
    right: clamp(18px, 3vw, 38px) !important;
    bottom: 12px !important;
    z-index: 120 !important;
}

.asc-url-driven-advert .asc-timeline {
    height: 6px !important;
}

.asc-url-driven-advert .asc-footer-meta {
    margin-top: 6px !important;
    font-size: 9px !important;
}


/* ---------------------------------------------------------
   11. Top bar
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-cinema-topbar {
    top: 18px !important;
}

.asc-url-driven-advert .asc-cinema-brand,
.asc-url-driven-advert .asc-cinema-pill {
    min-height: 34px !important;
    padding: 8px 12px !important;
    font-size: 10px !important;
}


/* ---------------------------------------------------------
   12. Intro and final screens
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-intro-screen,
.asc-url-driven-advert .asc-final-screen {
    padding:
        92px
        clamp(22px, 6vw, 84px)
        132px !important;
}

.asc-url-driven-advert .asc-intro-glass,
.asc-url-driven-advert .asc-final-inner {
    max-width: 1120px !important;
}

.asc-url-driven-advert .asc-intro-glass h1,
.asc-url-driven-advert .asc-final-inner h2 {
    font-size: clamp(42px, 6vw, 84px) !important;
    line-height: 0.94 !important;
}


/* ---------------------------------------------------------
   13. Large desktop
   --------------------------------------------------------- */

@media (min-width: 1400px) {
    .asc-url-driven-advert .asc-slide-layout {
        grid-template-columns: minmax(340px, 430px) minmax(0, 1fr) !important;

        padding:
            78px
            clamp(42px, 6vw, 110px)
            104px !important;
    }

    .asc-url-driven-advert .asc-story-panel {
        max-width: 430px !important;
    }
}


/* ---------------------------------------------------------
   14. Tablet
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    .asc-url-driven-advert {
        height: var(--asc-stage-height, 980px) !important;
        min-height: var(--asc-stage-height, 980px) !important;
    }

    .asc-url-driven-advert .asc-slide-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;

        gap: 16px !important;

        padding:
            72px
            18px
            120px !important;
    }

    .asc-url-driven-advert .asc-story-panel {
        grid-column: 1 !important;
        grid-row: 1 !important;

        justify-self: stretch !important;
        max-width: none !important;
        padding: 18px !important;
    }

    .asc-url-driven-advert .asc-device-wrap {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
    }

    .asc-url-driven-advert .asc-device-frame {
        transform: none !important;
        animation: ascV15TabletDeviceIn 620ms cubic-bezier(.2, .85, .2, 1) both !important;
    }

    @keyframes ascV15TabletDeviceIn {
        from {
            opacity: 0;
            transform: translateY(22px) scale(0.98);
            filter: blur(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }

    .asc-url-driven-advert .asc-story-panel h2 {
        font-size: clamp(27px, 4vw, 42px) !important;
    }

    .asc-url-driven-advert .asc-feature-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .asc-url-driven-advert .asc-feature-card {
        grid-template-columns: 32px minmax(0, 1fr) !important;
        padding: 9px !important;
    }

    .asc-url-driven-advert .asc-feature-icon {
        width: 32px !important;
        height: 32px !important;
    }
}


/* ---------------------------------------------------------
   15. Mobile
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .asc-url-driven-advert {
        height: var(--asc-stage-height, 940px) !important;
        min-height: var(--asc-stage-height, 940px) !important;
        border-radius: 22px !important;
    }

    .asc-url-driven-advert .asc-slide-layout {
        padding:
            62px
            12px
            132px !important;
        gap: 12px !important;
    }

    .asc-url-driven-advert .asc-story-panel {
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .asc-url-driven-advert .asc-story-panel h2 {
        font-size: 24px !important;
        line-height: 1.02 !important;
    }

    .asc-url-driven-advert .asc-story-lead {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }

    .asc-url-driven-advert .asc-feature-cards {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .asc-url-driven-advert .asc-feature-card {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .asc-url-driven-advert .asc-feature-icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
        font-size: 9px !important;
    }

    .asc-url-driven-advert .asc-feature-card h3 {
        font-size: 12px !important;
    }

    .asc-url-driven-advert .asc-feature-card p {
        font-size: 10.5px !important;
        line-height: 1.3 !important;
    }

    .asc-url-driven-advert .asc-story-panel .asc-mini-proof {
        display: none !important;
    }

    .asc-url-driven-advert .asc-device-frame {
        border-radius: 18px !important;
    }

    .asc-url-driven-advert .asc-window-chrome {
        height: 24px !important;
        min-height: 24px !important;
        flex-basis: 24px !important;
    }

    .asc-url-driven-advert .asc-window-chrome em {
        display: none !important;
    }

    .asc-url-driven-advert .asc-cinema-controls {
        bottom: 46px !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
        border-radius: 18px !important;
    }

    .asc-url-driven-advert .asc-cinema-controls button {
        padding: 8px 9px !important;
        font-size: 10px !important;
    }

    .asc-url-driven-advert .asc-cinema-pill {
        display: none !important;
    }
}


/* ---------------------------------------------------------
   16. Recording mode cleanup
   --------------------------------------------------------- */

.asc-url-driven-advert.recording .asc-cinema-controls,
.asc-url-driven-advert.recording .asc-record-status {
    display: none !important;
}


/* ---------------------------------------------------------
   17. Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .asc-url-driven-advert .asc-device-frame,
    .asc-url-driven-advert .asc-story-panel,
    .asc-url-driven-advert .asc-cinematic-slide,
    .asc-url-driven-advert .asc-orb,
    .asc-url-driven-advert .asc-race-line,
    .asc-url-driven-advert .asc-particles span,
    .asc-url-driven-advert .asc-grid-glow {
        animation: none !important;
        transition-duration: 180ms !important;
    }
}

/* =========================================================
   ASC Screenshot Treatment Fix v16
   PLACE THIS AFTER v15 AT THE VERY BOTTOM
   Purpose:
   - Fix screenshots that already contain the advert layout
   - Crop into the useful browser/document area
   - Prevent advert-inside-advert appearance
   ========================================================= */


/* ---------------------------------------------------------
   1. Browser/editor screenshots captured inside full advert
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-browser-right .asc-image-mask {
    overflow: hidden !important;
    background: #ffffff !important;
}

.asc-url-driven-advert .asc-shot-browser-right .asc-image-mask img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: 78% 50% !important;

    /*
       The uploaded image already contains the whole advert stage.
       This zooms into the useful browser/editor area on the right.
    */
    transform: scale(1.42) !important;
    transform-origin: 78% 50% !important;

    background: #ffffff !important;
}


/* ---------------------------------------------------------
   2. Modal screenshots captured inside full advert
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-modal-center .asc-image-mask {
    overflow: hidden !important;
    background: #ffffff !important;
}

.asc-url-driven-advert .asc-shot-modal-center .asc-image-mask img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: 72% 50% !important;

    /*
       Modal screenshots need less right-side bias and more central focus.
    */
    transform: scale(1.55) !important;
    transform-origin: 72% 50% !important;

    background: #ffffff !important;
}


/* ---------------------------------------------------------
   3. Document checklist/editor screenshots need top emphasis
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-browser-topright .asc-image-mask {
    overflow: hidden !important;
    background: #ffffff !important;
}

.asc-url-driven-advert .asc-shot-browser-topright .asc-image-mask img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: 78% 28% !important;

    transform: scale(1.46) !important;
    transform-origin: 78% 28% !important;

    background: #ffffff !important;
}


/* ---------------------------------------------------------
   4. Keep real clean screenshots unchanged
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-fit-contain:not(.asc-shot-browser-right):not(.asc-shot-modal-center):not(.asc-shot-browser-topright) .asc-image-mask img {
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

.asc-url-driven-advert .asc-fit-cover:not(.asc-shot-browser-right):not(.asc-shot-modal-center):not(.asc-shot-browser-topright) .asc-image-mask img {
    object-fit: cover !important;
    object-position: top center !important;
    transform: none !important;
}


/* ---------------------------------------------------------
   5. Tablet adjustment
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    .asc-url-driven-advert .asc-shot-browser-right .asc-image-mask img {
        transform: scale(1.28) !important;
        object-position: 76% 50% !important;
        transform-origin: 76% 50% !important;
    }

    .asc-url-driven-advert .asc-shot-modal-center .asc-image-mask img {
        transform: scale(1.35) !important;
        object-position: 70% 50% !important;
        transform-origin: 70% 50% !important;
    }

    .asc-url-driven-advert .asc-shot-browser-topright .asc-image-mask img {
        transform: scale(1.32) !important;
        object-position: 76% 30% !important;
        transform-origin: 76% 30% !important;
    }
}


/* ---------------------------------------------------------
   6. Mobile adjustment
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .asc-url-driven-advert .asc-shot-browser-right .asc-image-mask img {
        transform: scale(1.18) !important;
        object-position: 74% 50% !important;
        transform-origin: 74% 50% !important;
    }

    .asc-url-driven-advert .asc-shot-modal-center .asc-image-mask img {
        transform: scale(1.24) !important;
        object-position: 68% 50% !important;
        transform-origin: 68% 50% !important;
    }

    .asc-url-driven-advert .asc-shot-browser-topright .asc-image-mask img {
        transform: scale(1.22) !important;
        object-position: 74% 30% !important;
        transform-origin: 74% 30% !important;
    }
}


/* =========================================================
   ASC v17 Hard Crop Fix for Advert-Inside-Advert Screenshots
   PLACE THIS AT THE VERY BOTTOM OF THE CSS FILE
   ========================================================= */


/* ---------------------------------------------------------
   1. Hard-crop full advert screenshots to the right-side app
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-editor-hardcrop .asc-image-mask {
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

/*
   These screenshots already contain:
   - left advert story card
   - bottom controls
   - full stage background
   - browser/editor on the right

   This rule zooms into the actual browser/editor area only.
*/
.asc-url-driven-advert .asc-shot-editor-hardcrop .asc-image-mask img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: 88% 42% !important;

    transform: scale(2.05) !important;
    transform-origin: 88% 42% !important;

    animation: none !important;
    background: #ffffff !important;
}


/* ---------------------------------------------------------
   2. Slightly taller frame for editor/document screenshots
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-editor-hardcrop .asc-device-frame {
    max-width: none !important;
    width: 100% !important;
}

.asc-url-driven-advert .asc-shot-editor-hardcrop .asc-image-mask {
    aspect-ratio: 16 / 9 !important;
}


/* ---------------------------------------------------------
   3. Make the right preview area bigger for these slides
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-editor-hardcrop .asc-slide-layout {
    grid-template-columns: minmax(300px, 390px) minmax(0, 1.25fr) !important;
    gap: clamp(28px, 4vw, 70px) !important;
}


/* ---------------------------------------------------------
   4. Compact the left card a little so the screenshot can breathe
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-editor-hardcrop .asc-story-panel {
    max-width: 390px !important;
    padding: 22px !important;
}

.asc-url-driven-advert .asc-shot-editor-hardcrop .asc-story-panel h2 {
    font-size: clamp(28px, 2.7vw, 42px) !important;
}

.asc-url-driven-advert .asc-shot-editor-hardcrop .asc-story-lead {
    font-size: 13px !important;
    line-height: 1.42 !important;
}

.asc-url-driven-advert .asc-shot-editor-hardcrop .asc-feature-card {
    padding: 8px !important;
}

.asc-url-driven-advert .asc-shot-editor-hardcrop .asc-feature-card p {
    font-size: 10.3px !important;
}


/* ---------------------------------------------------------
   5. Tablet correction
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    .asc-url-driven-advert .asc-shot-editor-hardcrop .asc-slide-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
    }

    .asc-url-driven-advert .asc-shot-editor-hardcrop .asc-image-mask img {
        transform: scale(1.72) !important;
        object-position: 86% 42% !important;
        transform-origin: 86% 42% !important;
    }

    .asc-url-driven-advert .asc-shot-editor-hardcrop .asc-story-panel {
        max-width: none !important;
    }
}


/* ---------------------------------------------------------
   6. Mobile correction
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .asc-url-driven-advert .asc-shot-editor-hardcrop .asc-image-mask img {
        transform: scale(1.42) !important;
        object-position: 84% 44% !important;
        transform-origin: 84% 44% !important;
    }
}
/* =========================================================
   ASC v18 Final Screenshot Crop Treatment
   PLACE THIS AT THE VERY BOTTOM OF asc-advert-video.css

   Purpose:
   - Fix screenshots that were captured from the advert itself
   - Crop into the actual useful app/browser area
   - Keep normal screenshots unchanged
   - Give editor, checklist, and modal screenshots separate treatments
   ========================================================= */


/* ---------------------------------------------------------
   1. Base rule for advert-inside-advert screenshots
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-editor-right .asc-image-mask,
.asc-url-driven-advert .asc-shot-checklist-right .asc-image-mask,
.asc-url-driven-advert .asc-shot-modal-right .asc-image-mask {
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important;
}


/* ---------------------------------------------------------
   2. Editor/document screens on the right side
   Best for:
   - Allocate-5.png
   - Management-review-2.png
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-editor-right .asc-image-mask img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: 86% 42% !important;

    transform: scale(1.92) !important;
    transform-origin: 86% 42% !important;

    background: #ffffff !important;
    animation: none !important;
}


/* ---------------------------------------------------------
   3. Checklist/editor screens with tall checklist content
   Best for:
   - Staff-2.png
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-checklist-right .asc-image-mask img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: 82% 48% !important;

    transform: scale(1.82) !important;
    transform-origin: 82% 48% !important;

    background: #ffffff !important;
    animation: none !important;
}


/* ---------------------------------------------------------
   4. Modal screenshots on the right side
   Best for:
   - Management-Review-Finanlize.png
   - Staff-4.png
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-modal-right .asc-image-mask img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: 78% 48% !important;

    transform: scale(1.72) !important;
    transform-origin: 78% 48% !important;

    background: #ffffff !important;
    animation: none !important;
}


/* ---------------------------------------------------------
   5. Make these cropped slides use slightly more screenshot space
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-editor-right .asc-slide-layout,
.asc-url-driven-advert .asc-shot-checklist-right .asc-slide-layout,
.asc-url-driven-advert .asc-shot-modal-right .asc-slide-layout {
    grid-template-columns: minmax(300px, 390px) minmax(0, 1.35fr) !important;
    gap: clamp(28px, 4vw, 72px) !important;
}


/* ---------------------------------------------------------
   6. Compact left story card on cropped screenshot slides
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-shot-editor-right .asc-story-panel,
.asc-url-driven-advert .asc-shot-checklist-right .asc-story-panel,
.asc-url-driven-advert .asc-shot-modal-right .asc-story-panel {
    max-width: 390px !important;
    padding: 22px !important;
}

.asc-url-driven-advert .asc-shot-editor-right .asc-story-panel h2,
.asc-url-driven-advert .asc-shot-checklist-right .asc-story-panel h2,
.asc-url-driven-advert .asc-shot-modal-right .asc-story-panel h2 {
    font-size: clamp(28px, 2.7vw, 42px) !important;
}

.asc-url-driven-advert .asc-shot-editor-right .asc-story-lead,
.asc-url-driven-advert .asc-shot-checklist-right .asc-story-lead,
.asc-url-driven-advert .asc-shot-modal-right .asc-story-lead {
    font-size: 13px !important;
    line-height: 1.42 !important;
}

.asc-url-driven-advert .asc-shot-editor-right .asc-feature-card,
.asc-url-driven-advert .asc-shot-checklist-right .asc-feature-card,
.asc-url-driven-advert .asc-shot-modal-right .asc-feature-card {
    padding: 8px !important;
}

.asc-url-driven-advert .asc-shot-editor-right .asc-feature-card p,
.asc-url-driven-advert .asc-shot-checklist-right .asc-feature-card p,
.asc-url-driven-advert .asc-shot-modal-right .asc-feature-card p {
    font-size: 10.3px !important;
}


/* ---------------------------------------------------------
   7. Normal clean screenshots must remain untouched
   --------------------------------------------------------- */

.asc-url-driven-advert .asc-fit-contain:not(.asc-shot-editor-right):not(.asc-shot-checklist-right):not(.asc-shot-modal-right) .asc-image-mask img {
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

.asc-url-driven-advert .asc-fit-cover:not(.asc-shot-editor-right):not(.asc-shot-checklist-right):not(.asc-shot-modal-right) .asc-image-mask img {
    object-fit: cover !important;
    object-position: top center !important;
    transform: none !important;
}


/* ---------------------------------------------------------
   8. Tablet adjustment
   --------------------------------------------------------- */

@media (max-width: 1180px) {
    .asc-url-driven-advert .asc-shot-editor-right .asc-slide-layout,
    .asc-url-driven-advert .asc-shot-checklist-right .asc-slide-layout,
    .asc-url-driven-advert .asc-shot-modal-right .asc-slide-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
    }

    .asc-url-driven-advert .asc-shot-editor-right .asc-story-panel,
    .asc-url-driven-advert .asc-shot-checklist-right .asc-story-panel,
    .asc-url-driven-advert .asc-shot-modal-right .asc-story-panel {
        max-width: none !important;
    }

    .asc-url-driven-advert .asc-shot-editor-right .asc-image-mask img {
        object-position: 84% 44% !important;
        transform: scale(1.62) !important;
        transform-origin: 84% 44% !important;
    }

    .asc-url-driven-advert .asc-shot-checklist-right .asc-image-mask img {
        object-position: 80% 48% !important;
        transform: scale(1.54) !important;
        transform-origin: 80% 48% !important;
    }

    .asc-url-driven-advert .asc-shot-modal-right .asc-image-mask img {
        object-position: 76% 48% !important;
        transform: scale(1.46) !important;
        transform-origin: 76% 48% !important;
    }
}


/* ---------------------------------------------------------
   9. Mobile adjustment
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .asc-url-driven-advert .asc-shot-editor-right .asc-image-mask img {
        object-position: 82% 44% !important;
        transform: scale(1.34) !important;
        transform-origin: 82% 44% !important;
    }

    .asc-url-driven-advert .asc-shot-checklist-right .asc-image-mask img {
        object-position: 78% 48% !important;
        transform: scale(1.30) !important;
        transform-origin: 78% 48% !important;
    }

    .asc-url-driven-advert .asc-shot-modal-right .asc-image-mask img {
        object-position: 74% 48% !important;
        transform: scale(1.26) !important;
        transform-origin: 74% 48% !important;
    }
}