/* =====================================================================
   MVLTD homepage layouts — Marquee / Primetime / Channels / Cinema / Streamline
   ---------------------------------------------------------------------
   Every rule is driven by the --mvltd-* theme variables so ALL layouts
   recolour automatically with the active theme (accents, background,
   glass, radius, fonts). The "Classic" layout keeps its own styles in
   theme.css; these are the five alternative styles.
   ===================================================================== */

.hp .mvltd-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.hp .mvltd-section { padding: 64px 0; }
.hp .mvltd-section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.hp .mvltd-section-head h2 {
    font-family: var(--mvltd-font-head, inherit);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 800; margin: 0 0 10px;
    background: var(--mvltd-head-grad, linear-gradient(120deg,#fff,#b9a9ff 55%,#7fe9ff));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hp .mvltd-section-head p { color: var(--mvltd-muted, #a2a6c8); font-size: 1rem; margin: 0; }
.hp .mvltd-btn-block { display: block; width: 100%; text-align: center; }
.hp .mvltd-btn-light {
    background: #fff; color: #111; border: none; font-weight: 800;
    padding: 12px 26px; border-radius: var(--mvltd-radius-sm, 11px);
}

/* ---------------------------------------------------------------------
   Shared hero background band (opt-in via .has-hero-bg + --hp-hero-img).
   Used by Primetime / Channels / Cinema whose heroes have no inline <img>.
   The image sits BEHIND the copy, dimmed and theme-tinted so text stays
   readable and the band still recolours with the active palette.
   --------------------------------------------------------------------- */
.hp .has-hero-bg { position: relative; overflow: hidden; }
.hp .has-hero-bg::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: var(--hp-hero-img);
    background-size: cover; background-position: center;
    opacity: .5;
}
.hp .has-hero-bg::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--mvltd-bg, #0a0a0a) 55%, transparent) 0%,
            color-mix(in srgb, var(--mvltd-bg, #0a0a0a) 78%, transparent) 55%,
            var(--mvltd-bg, #0a0a0a) 100%),
        radial-gradient(900px 420px at 70% 0%,
            color-mix(in srgb, var(--mvltd-accent, #7c5cff) 22%, transparent), transparent 60%);
}
/* keep hero contents above the background layers (shapes keep their own z) */
.hp .has-hero-bg > *:not(.hpp-shape) { position: relative; z-index: 2; }

/* =====================================================================
   MARQUEE
   ===================================================================== */
.hp-marquee .hpm-hero { padding: 72px 0 56px; position: relative; overflow: hidden; }
.hp-marquee .hpm-hero-grid {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
}
.hp-marquee .hpm-eyebrow {
    display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mvltd-accent2, #00e0ff);
    background: color-mix(in srgb, var(--mvltd-accent2, #00e0ff) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mvltd-accent2, #00e0ff) 30%, transparent);
    padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.hp-marquee .hpm-hero-copy h1 {
    font-family: var(--mvltd-font-head, inherit);
    font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.08; margin: 0 0 16px;
    color: var(--mvltd-text, #fff);
}
.hp-marquee .hpm-hero-copy h1 span {
    background: var(--mvltd-grad, linear-gradient(120deg,#7c5cff,#00e0ff));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hp-marquee .hpm-lead { color: var(--mvltd-muted, #a2a6c8); font-size: 1.08rem; line-height: 1.6; margin: 0 0 20px; max-width: 540px; }
.hp-marquee .hpm-feats { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.hp-marquee .hpm-feats li { color: var(--mvltd-text, #eef0ff); font-weight: 600; }
.hp-marquee .hpm-feats i { color: var(--mvltd-accent2, #00e0ff); margin-right: 8px; }
.hp-marquee .hpm-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hp-marquee .hpm-hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
.hp-marquee .hpm-hero-visual img {
    width: 100%; max-width: 500px; aspect-ratio: 1 / 1; height: auto;
    object-fit: contain; position: relative; z-index: 1; border-radius: 0;
    /* frameless + faded square edges so the 1024x1024 art melts into the page
       and its baked backdrop doesn't clash with the active theme colour */
    -webkit-mask-image: radial-gradient(closest-side, #000 66%, transparent 95%);
            mask-image: radial-gradient(closest-side, #000 66%, transparent 95%);
    filter: drop-shadow(0 22px 55px color-mix(in srgb, var(--mvltd-accent, #7c5cff) 30%, transparent));
}
.hp-marquee .hpm-orb {
    position: absolute; inset: -10% -6% auto auto; width: 78%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--mvltd-accent, #7c5cff) 45%, transparent), transparent 65%);
    filter: blur(30px); z-index: 0;
}
.hp-marquee .hpm-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hp-marquee .hpm-svc {
    background: var(--mvltd-glass, rgba(255,255,255,.06));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.12));
    border-radius: var(--mvltd-radius, 16px); padding: 26px 20px; text-align: center;
    transition: transform .18s ease, border-color .18s ease;
}
.hp-marquee .hpm-svc:hover { transform: translateY(-4px); border-color: var(--mvltd-accent, #7c5cff); }
.hp-marquee .hpm-svc-ic {
    width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center;
    font-size: 1.5rem; color: #fff;
    background: var(--mvltd-grad, linear-gradient(135deg,#7c5cff,#00e0ff));
}
.hp-marquee .hpm-svc h3 { color: var(--mvltd-text, #fff); font-size: 1.1rem; margin: 0 0 8px; }
.hp-marquee .hpm-svc p { color: var(--mvltd-muted, #a2a6c8); font-size: .88rem; margin: 0; line-height: 1.5; }
.hp-marquee .hpm-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; max-width: 960px; margin: 0 auto; }
.hp-marquee .hpm-plan, .hp-primetime .hpp-plan, .hp-channels .hpc-plan, .hp-cinema .hpn-plan {
    position: relative;
    background: var(--mvltd-glass, rgba(255,255,255,.06));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.12));
    border-radius: var(--mvltd-radius, 16px); padding: 30px 24px; text-align: center;
}
.hp-marquee .hpm-plan.popular, .hp-primetime .hpp-plan.popular,
.hp-channels .hpc-plan.popular, .hp-cinema .hpn-plan.popular {
    border-color: var(--mvltd-accent, #7c5cff);
    box-shadow: 0 14px 40px color-mix(in srgb, var(--mvltd-accent, #7c5cff) 24%, transparent);
    transform: scale(1.03);
}
.hp .hpm-badge, .hp .hpp-badge, .hp .hpc-badge, .hp .hpn-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--mvltd-grad, linear-gradient(120deg,#7c5cff,#00e0ff)); color: #fff;
    font-size: .72rem; font-weight: 800; padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.hp-marquee .hpm-plan h3 { color: var(--mvltd-text, #fff); margin: 0 0 10px; font-size: 1.2rem; }
.hp-marquee .hpm-price, .hp-primetime .hpp-price, .hp-channels .hpc-price, .hp-cinema .hpn-price {
    font-size: 2rem; font-weight: 900; color: var(--mvltd-accent2, #00e0ff); line-height: 1;
}
.hp-marquee .hpm-cycle, .hp-primetime .hpp-cycle, .hp-channels .hpc-cycle, .hp-cinema .hpn-cycle {
    color: var(--mvltd-muted, #a2a6c8); font-size: .85rem; margin: 6px 0 20px;
}
.hp-marquee .hpm-faq { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.hp-marquee .hpm-acc {
    background: var(--mvltd-glass, rgba(255,255,255,.06));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.12));
    border-radius: var(--mvltd-radius-sm, 11px); padding: 4px 18px;
}
.hp-marquee .hpm-acc summary {
    cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--mvltd-text, #fff); list-style: none;
}
.hp-marquee .hpm-acc summary::-webkit-details-marker { display: none; }
.hp-marquee .hpm-acc summary::after { content: '+'; float: right; color: var(--mvltd-accent2, #00e0ff); font-weight: 800; }
.hp-marquee .hpm-acc[open] summary::after { content: '–'; }
.hp-marquee .hpm-acc p { color: var(--mvltd-muted, #a2a6c8); margin: 0 0 14px; line-height: 1.55; }
.hp-marquee .hpm-cta, .hp-cinema .hpn-cta {
    text-align: center; background: var(--mvltd-glass, rgba(255,255,255,.06));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.12));
    border-radius: var(--mvltd-radius, 16px); padding: 48px 24px;
}
.hp-marquee .hpm-cta h2, .hp-cinema .hpn-cta h2 { color: var(--mvltd-text, #fff); font-size: 1.8rem; margin: 0 0 10px; }
.hp-marquee .hpm-cta p, .hp-cinema .hpn-cta p { color: var(--mvltd-muted, #a2a6c8); margin: 0 0 22px; }

/* =====================================================================
   PRIMETIME
   ===================================================================== */
.hp-primetime .hpp-hero { position: relative; overflow: hidden; padding: 90px 0 70px; text-align: center; }
.hp-primetime .hpp-hero-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.hp-primetime .hpp-shape {
    position: absolute; border-radius: 50%; filter: blur(40px); z-index: 1; opacity: .7;
}
.hp-primetime .hpp-shape-1 {
    top: -80px; left: -60px; width: 320px; height: 320px;
    background: radial-gradient(circle, color-mix(in srgb, var(--mvltd-accent, #7c5cff) 55%, transparent), transparent 70%);
}
.hp-primetime .hpp-shape-2 {
    bottom: -100px; right: -60px; width: 360px; height: 360px;
    background: radial-gradient(circle, color-mix(in srgb, var(--mvltd-accent2, #00e0ff) 45%, transparent), transparent 70%);
}
.hp-primetime .hpp-eyebrow {
    display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--mvltd-accent2, #00e0ff);
    background: color-mix(in srgb, var(--mvltd-accent2, #00e0ff) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mvltd-accent2, #00e0ff) 30%, transparent);
    padding: 5px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hp-primetime .hpp-hero h1 {
    font-family: var(--mvltd-font-head, inherit);
    font-size: clamp(2.2rem, 5.4vw, 3.6rem); font-weight: 900; line-height: 1.08; margin: 0 0 18px; color: var(--mvltd-text, #fff);
}
.hp-primetime .hpp-hero h1 span {
    background: var(--mvltd-grad, linear-gradient(120deg,#7c5cff,#00e0ff));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hp-primetime .hpp-lead { color: var(--mvltd-muted, #a2a6c8); font-size: 1.12rem; line-height: 1.6; margin: 0 auto 26px; max-width: 620px; }
.hp-primetime .hpp-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.hp-primetime .hpp-rating { display: inline-flex; align-items: center; gap: 10px; color: var(--mvltd-muted, #a2a6c8); font-size: .9rem; }
.hp-primetime .hpp-stars { color: var(--mvltd-warn, #ffcf5c); letter-spacing: 2px; }
.hp-primetime .hpp-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-primetime .hpp-benefit {
    background: var(--mvltd-glass, rgba(255,255,255,.06));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.12));
    border-radius: var(--mvltd-radius, 16px); padding: 28px 24px;
}
.hp-primetime .hpp-benefit i { font-size: 1.8rem; color: var(--mvltd-accent2, #00e0ff); margin-bottom: 14px; }
.hp-primetime .hpp-benefit h3 { color: var(--mvltd-text, #fff); margin: 0 0 8px; font-size: 1.15rem; }
.hp-primetime .hpp-benefit p { color: var(--mvltd-muted, #a2a6c8); margin: 0; line-height: 1.55; }
.hp-primetime .hpp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; max-width: 980px; margin: 0 auto; }
.hp-primetime .hpp-plan { padding-top: 36px; }
.hp-primetime .hpp-plan-ic {
    width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 14px; display: grid; place-items: center;
    font-size: 1.4rem; color: #fff; background: var(--mvltd-grad, linear-gradient(135deg,#7c5cff,#00e0ff));
}
.hp-primetime .hpp-plan h3 { color: var(--mvltd-text, #fff); margin: 0 0 10px; font-size: 1.2rem; }
.hp-primetime .hpp-testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-primetime .hpp-review {
    background: var(--mvltd-glass, rgba(255,255,255,.06));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.12));
    border-radius: var(--mvltd-radius, 16px); padding: 26px 22px;
}
.hp-primetime .hpp-review-stars { color: var(--mvltd-warn, #ffcf5c); letter-spacing: 2px; margin-bottom: 12px; }
.hp-primetime .hpp-review p { color: var(--mvltd-text, #eef0ff); font-style: italic; line-height: 1.6; margin: 0 0 16px; }
.hp-primetime .hpp-review-who { display: flex; align-items: center; gap: 10px; color: var(--mvltd-muted, #a2a6c8); font-weight: 700; }
.hp-primetime .hpp-avatar {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .8rem; font-weight: 800;
    background: var(--mvltd-grad, linear-gradient(135deg,#7c5cff,#00e0ff));
}
.hp-primetime .hpp-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: var(--mvltd-grad, linear-gradient(120deg,#7c5cff,#00e0ff));
    border-radius: var(--mvltd-radius, 16px); padding: 40px 44px;
}
.hp-primetime .hpp-cta h2 { color: #fff; margin: 0 0 6px; font-size: 1.6rem; }
.hp-primetime .hpp-cta p { color: rgba(255,255,255,.9); margin: 0; }

/* =====================================================================
   CHANNELS
   ===================================================================== */
.hp-channels .hpc-hero { padding: 66px 0 40px; }
.hp-channels .hpc-hero-copy { max-width: 720px; }
.hp-channels .hpc-hero-copy h1 {
    font-family: var(--mvltd-font-head, inherit);
    font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; line-height: 1.1; margin: 0 0 14px; color: var(--mvltd-text, #fff);
}
.hp-channels .hpc-hero-copy h1 span {
    background: var(--mvltd-grad, linear-gradient(120deg,#7c5cff,#00e0ff));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hp-channels .hpc-lead { color: var(--mvltd-muted, #a2a6c8); font-size: 1.08rem; line-height: 1.6; margin: 0 0 20px; }
.hp-channels .hpc-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hp-channels .hpc-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px;
}
.hp-channels .hpc-stat {
    text-align: center; padding: 20px 12px;
    background: var(--mvltd-glass, rgba(255,255,255,.06));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.12));
    border-radius: var(--mvltd-radius, 16px);
}
.hp-channels .hpc-stat-n { display: block; font-size: 1.7rem; font-weight: 900; color: var(--mvltd-accent2, #00e0ff); }
.hp-channels .hpc-stat-l { color: var(--mvltd-muted, #a2a6c8); font-size: .82rem; }
.hp-channels .hpc-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hp-channels .hpc-cat {
    text-align: center; padding: 26px 16px;
    background: var(--mvltd-glass, rgba(255,255,255,.06));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.12));
    border-radius: var(--mvltd-radius, 16px); transition: transform .18s ease, border-color .18s ease;
}
.hp-channels .hpc-cat:hover { transform: translateY(-4px); border-color: var(--mvltd-accent, #7c5cff); }
.hp-channels .hpc-cat i { font-size: 1.9rem; color: var(--mvltd-accent2, #00e0ff); }
.hp-channels .hpc-cat h3 { color: var(--mvltd-text, #fff); margin: 12px 0 4px; font-size: 1.05rem; }
.hp-channels .hpc-cat span { color: var(--mvltd-muted, #a2a6c8); font-size: .82rem; }
.hp-channels .hpc-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.hp-channels .hpc-plan h3 { color: var(--mvltd-text, #fff); margin: 0 0 10px; font-size: 1.15rem; }
.hp-channels .hpc-plan-feats { list-style: none; padding: 0; margin: 16px 0 20px; text-align: left; display: grid; gap: 8px; }
.hp-channels .hpc-plan-feats li { color: var(--mvltd-muted, #cdd0e6); font-size: .88rem; }
.hp-channels .hpc-plan-feats i { color: var(--mvltd-ok, #3ddc84); margin-right: 8px; }
.hp-channels .hpc-vod { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.hp-channels .hpc-poster {
    position: relative; aspect-ratio: 2/3; border-radius: var(--mvltd-radius-sm, 11px); overflow: hidden;
    background: var(--mvltd-glass, rgba(255,255,255,.06)); border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.12));
}
.hp-channels .hpc-poster img { width: 100%; height: 100%; object-fit: cover; }
.hp-channels .hpc-rating {
    position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,.7); color: var(--mvltd-warn, #ffcf5c);
    font-size: .72rem; padding: 2px 7px; border-radius: 6px;
}

/* =====================================================================
   CINEMA
   ===================================================================== */
.hp-cinema .hpn-topstrip {
    background: color-mix(in srgb, var(--mvltd-accent, #7c5cff) 10%, transparent);
    border-bottom: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.10));
    font-size: .82rem;
}
.hp-cinema .hpn-topstrip-inner { display: flex; justify-content: space-between; padding: 9px 20px; color: var(--mvltd-muted, #a2a6c8); flex-wrap: wrap; gap: 8px; }
.hp-cinema .hpn-topstrip i { color: var(--mvltd-accent2, #00e0ff); margin-right: 6px; }
.hp-cinema .hpn-hero { text-align: center; padding: 84px 0 64px; max-width: 760px; margin: 0 auto; }
.hp-cinema .hpn-eyebrow {
    display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--mvltd-accent2, #00e0ff); margin-bottom: 16px;
}
.hp-cinema .hpn-hero h1 {
    font-family: var(--mvltd-font-head, inherit);
    font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.12; margin: 0 0 18px; color: var(--mvltd-text, #fff);
}
.hp-cinema .hpn-lead { color: var(--mvltd-muted, #a2a6c8); font-size: 1.08rem; line-height: 1.65; margin: 0 auto 26px; max-width: 600px; }
.hp-cinema .hpn-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hp-cinema .hpn-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hp-cinema .hpn-feat { text-align: center; padding: 8px; }
.hp-cinema .hpn-feat i {
    font-size: 1.7rem; color: #fff; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px;
    background: var(--mvltd-grad, linear-gradient(135deg,#7c5cff,#00e0ff));
}
.hp-cinema .hpn-feat h3 { color: var(--mvltd-text, #fff); margin: 0 0 8px; font-size: 1.12rem; }
.hp-cinema .hpn-feat p { color: var(--mvltd-muted, #a2a6c8); margin: 0; line-height: 1.55; }
.hp-cinema .hpn-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; max-width: 900px; margin: 0 auto; }
.hp-cinema .hpn-plan h3 { color: var(--mvltd-text, #fff); margin: 0 0 10px; font-size: 1.15rem; }
.hp-cinema .hpn-cta { max-width: 720px; margin: 0 auto; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 980px) {
    .hp-marquee .hpm-services,
    .hp-channels .hpc-cats,
    .hp-channels .hpc-stats { grid-template-columns: repeat(2, 1fr); }
    .hp-channels .hpc-vod { grid-template-columns: repeat(4, 1fr); }
    .hp-primetime .hpp-benefits,
    .hp-primetime .hpp-testi,
    .hp-cinema .hpn-feats { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 760px) {
    .hp-marquee .hpm-hero-grid { grid-template-columns: 1fr; }
    .hp-marquee .hpm-hero-visual { order: -1; }
    .hp-marquee .hpm-services,
    .hp-channels .hpc-cats { grid-template-columns: 1fr; }
    .hp-channels .hpc-vod { grid-template-columns: repeat(3, 1fr); }
    .hp-primetime .hpp-cta { flex-direction: column; text-align: center; }
}

/* =====================================================================
   STREAMLINE  (.hp-streamline)
   ---------------------------------------------------------------------
   Split hero with a TILTED signal panel, a four-term pricing grid with a
   lifted featured card, a trial banner, a hairline how-it-works grid and
   a closing strip.

   THEME CONTRACT
   Every colour, radius, font and GRADIENT resolves from a --mvltd-*
   variable emitted by the Theme Colour Editor, including the four that
   the first cut of this layout ignored:

     --mvltd-head-grad    -> the highlighted headline word (text-clipped)
     --mvltd-grad         -> solid buttons, featured badge, step numbers,
                             featured card top edge, screen sheen
     --mvltd-glass-strong -> tilted card + trial panel surface
     --mvltd-bg3          -> screen panel + mini cell surfaces

   Hex/rgba literals appear ONLY as var() fallbacks, so switching palette
   in the editor recolours the whole layout with no code change, and the
   page still renders if the addon is disabled.

   QUIRKS (deliberate, matched to the reference layout)
     - .hps-card is rotated 1deg and un-rotates on hover / small screens
     - .hps-screen is a radial "glow" panel with an oversized numeral
     - .hps-plan.is-featured lifts 12px (reset on narrow screens)
     - the badge is a pill hanging off the TOP-RIGHT corner
     - .hps-steps-grid uses a 1px hairline gap over a line-coloured bed
     - two blurred ambient orbs sit behind everything
   ===================================================================== */

.hp-streamline {
    font-family: var(--mvltd-font, inherit);
    font-size: var(--mvltd-font-size, 1rem);
    color: var(--mvltd-text, #f4f4f6);
    background: var(--mvltd-bg, #0b0b0d);
    position: relative;
    overflow: hidden; /* contains the ambient orbs */
}

/* ---------- ambient glow orbs (decorative, theme-tinted) ---------- */
.hp-streamline .hps-ambient {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .14;
    z-index: 0;
}
.hp-streamline .hps-ambient-1 {
    width: 460px; height: 460px;
    right: -170px; top: -190px;
    background: var(--mvltd-glow-1, var(--mvltd-accent, #7c5cff));
}
.hp-streamline .hps-ambient-2 {
    width: 380px; height: 380px;
    left: -240px; top: 46%;
    background: var(--mvltd-glow-2, var(--mvltd-accent2, #00e0ff));
}
/* keep real content above the orbs */
.hp-streamline > section { position: relative; z-index: 1; }

/* ---------- shared section heading ---------- */
.hp-streamline .hps-sec-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.hp-streamline .hps-sec-eyebrow {
    display: inline-block;
    font-size: .72rem; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--mvltd-accent2, #00e0ff);
    margin-bottom: 12px;
}
.hp-streamline .hps-sec-title {
    font-family: var(--mvltd-font-head, inherit);
    font-weight: var(--mvltd-head-weight, 800);
    font-size: clamp(1.7rem, 3.4vw, 2.7rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    margin: 0 0 12px;
    color: var(--mvltd-text, #f4f4f6);
}
.hp-streamline .hps-sec-sub {
    margin: 0;
    color: var(--mvltd-muted, #9aa0aa);
    font-size: 1.02rem; line-height: 1.6;
}

/* ---------- buttons ---------- */
.hp-streamline .hps-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 26px;
    border-radius: 999px;
    font-size: .95rem; font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
/* primary = the theme gradient */
.hp-streamline .hps-btn-solid {
    background: var(--mvltd-grad, linear-gradient(120deg, #7c5cff, #00e0ff));
    color: #fff;
    box-shadow: 0 10px 30px var(--mvltd-glow-1, rgba(124,92,255,.28));
}
.hp-streamline .hps-btn-solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px var(--mvltd-glow-1, rgba(124,92,255,.38));
}
.hp-streamline .hps-btn-outline {
    background: var(--mvltd-glass, rgba(255,255,255,.05));
    border-color: var(--mvltd-glass-border, rgba(255,255,255,.14));
    color: var(--mvltd-text, #f4f4f6);
}
.hp-streamline .hps-btn-outline:hover {
    border-color: var(--mvltd-accent, #7c5cff);
    transform: translateY(-2px);
}

/* =============================== HERO =============================== */
.hp-streamline .hps-hero { padding: 84px 0 72px; }
.hp-streamline .hps-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}
.hp-streamline .hps-eyebrow {
    display: inline-block;
    font-size: .72rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--mvltd-accent2, #00e0ff);
    margin-bottom: 18px;
}
/* tight, poster-like headline */
.hp-streamline .hps-title {
    font-family: var(--mvltd-font-head, inherit);
    font-weight: var(--mvltd-head-weight, 800);
    font-size: clamp(2.6rem, 5.6vw, 4.6rem);
    line-height: .96;
    letter-spacing: -.055em;
    margin: 0 0 20px;
}
.hp-streamline .hps-title-a { display: block; color: var(--mvltd-text, #f4f4f6); }
/* the highlighted line uses the theme HEADING GRADIENT */
.hp-streamline .hps-title-b {
    display: block;
    font-style: normal;
    background: var(--mvltd-head-grad, linear-gradient(120deg, #ffffff, #c9b6ff 55%, #00e0ff));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--mvltd-accent2, #00e0ff); /* fallback if clip unsupported */
}
.hp-streamline .hps-lead {
    max-width: 46ch;
    margin: 0 0 30px;
    color: var(--mvltd-muted, #9aa0aa);
    font-size: 1.08rem; line-height: 1.65;
}
.hp-streamline .hps-hero-btns {
    display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px;
}
.hp-streamline .hps-hero-feats {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.hp-streamline .hps-hero-feats li {
    position: relative; padding-left: 20px;
    font-size: .9rem; color: var(--mvltd-muted, #9aa0aa);
}
.hp-streamline .hps-hero-feats li::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    width: 8px; height: 8px; margin-top: -4px;
    border-radius: 50%;
    background: var(--mvltd-ok, #22c55e);
    box-shadow: 0 0 12px var(--mvltd-ok, #22c55e);
}

/* ---------- THE TILTED SIGNAL CARD (the "fun quirk") ---------- */
.hp-streamline .hps-card {
    position: relative;
    padding: 24px;
    border-radius: 30px;
    background:
        linear-gradient(145deg,
            var(--mvltd-glass-strong, rgba(255,255,255,.09)),
            var(--mvltd-glass, rgba(255,255,255,.04)));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.14));
    box-shadow: 0 35px 90px rgba(0,0,0,.38);
    transform: rotate(1deg);
    transition: transform .3s ease, box-shadow .3s ease;
}
.hp-streamline .hps-card:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 40px 100px rgba(0,0,0,.46);
}
.hp-streamline .hps-card-status {
    display: flex; align-items: center; gap: 9px;
    font-size: .84rem; font-weight: 600;
    color: var(--mvltd-muted, #9aa0aa);
}
/* live dot with a real glow */
.hp-streamline .hps-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--mvltd-ok, #22c55e);
    box-shadow: 0 0 14px var(--mvltd-ok, #22c55e);
    flex: none;
}

/* the radial "screen" with an oversized numeral beside its label */
.hp-streamline .hps-screen {
    position: relative;
    height: 260px;
    margin: 20px 0;
    border-radius: var(--mvltd-radius, 22px);
    background:
        radial-gradient(circle at 65% 25%,
            var(--mvltd-card2, #1a1a1f),
            var(--mvltd-bg3, #17171a) 55%,
            var(--mvltd-bg2, #101013));
    border: 1px solid var(--mvltd-line, rgba(255,255,255,.08));
    display: flex; align-items: center; justify-content: center; gap: 18px;
    overflow: hidden;
}
/* a soft gradient sheen so the theme gradient reads on the panel too */
.hp-streamline .hps-screen::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--mvltd-grad, linear-gradient(120deg, #7c5cff, #00e0ff));
    opacity: .1;
    pointer-events: none;
}
.hp-streamline .hps-screen-num {
    position: relative;
    font-family: var(--mvltd-font-head, inherit);
    font-size: clamp(4.5rem, 11vw, 8rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.05em;
    color: var(--mvltd-accent2, #00e0ff);
}
.hp-streamline .hps-screen-label {
    position: relative;
    max-width: 8ch;
    font-size: 1.2rem; line-height: 1.25; font-weight: 600;
    color: var(--mvltd-text, #f4f4f6);
}

/* two SEPARATE rounded mini cells (not one divided box) */
.hp-streamline .hps-card-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.hp-streamline .hps-card-cell {
    background: var(--mvltd-bg3, #17171a);
    border: 1px solid var(--mvltd-line, rgba(255,255,255,.08));
    border-radius: var(--mvltd-radius-sm, 14px);
    padding: 16px;
}
.hp-streamline .hps-cell-label {
    display: block;
    font-size: .68rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--mvltd-muted, #9aa0aa);
    margin-bottom: 6px;
}
.hp-streamline .hps-cell-value {
    display: block;
    font-family: var(--mvltd-font-head, inherit);
    font-size: 1.35rem; font-weight: 800; line-height: 1.1;
    color: var(--mvltd-text, #f4f4f6);
}
.hp-streamline .hps-cell-sub {
    display: block; margin-top: 4px;
    font-size: .78rem; color: var(--mvltd-muted, #9aa0aa);
}

/* ============================== TERMS ============================== */
.hp-streamline .hps-terms { padding: 72px 0; }
.hp-streamline .hps-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    align-items: start;
}
.hp-streamline .hps-plan {
    position: relative;
    display: flex; flex-direction: column;
    padding: 28px 22px;
    border-radius: var(--mvltd-radius, 22px);
    background: var(--mvltd-card, rgba(255,255,255,.04));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.14));
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hp-streamline .hps-plan:hover {
    border-color: var(--mvltd-accent, #7c5cff);
    transform: translateY(-4px);
}
/* the lifted featured card */
.hp-streamline .hps-plan.is-featured {
    border-color: var(--mvltd-accent2, #00e0ff);
    background: var(--mvltd-card2, rgba(255,255,255,.07));
    transform: translateY(-12px);
    box-shadow: 0 20px 50px var(--mvltd-glow-2, rgba(0,224,255,.12));
    /* NOTE: no overflow:hidden here - the badge hangs off the top edge at
       top:-13px and would be sliced in half. The gradient bar below is
       rounded manually instead of being clipped by the parent. */
}
.hp-streamline .hps-plan.is-featured:hover { transform: translateY(-16px); }
/* gradient top edge on the featured card */
.hp-streamline .hps-plan.is-featured::before {
    content: '';
    position: absolute; left: 1px; right: 1px; top: 0; height: 4px;
    background: var(--mvltd-grad, linear-gradient(120deg, #7c5cff, #00e0ff));
    /* follow the card's rounded top corners without clipping the badge */
    border-top-left-radius: var(--mvltd-radius, 22px);
    border-top-right-radius: var(--mvltd-radius, 22px);
}
/* pill badge hanging off the TOP-RIGHT corner */
.hp-streamline .hps-plan-badge {
    position: absolute; top: -13px; right: 18px;
    padding: 5px 11px;
    border-radius: 30px;
    background: var(--mvltd-grad, linear-gradient(120deg, #7c5cff, #00e0ff));
    color: #fff;
    font-size: .68rem; font-weight: 900;
    letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 18px var(--mvltd-glow-1, rgba(124,92,255,.35));
    z-index: 2;
}
.hp-streamline .hps-plan-term {
    font-size: .74rem; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--mvltd-muted, #9aa0aa);
    margin-bottom: 10px;
}
.hp-streamline .hps-plan-price {
    font-family: var(--mvltd-font-head, inherit);
    font-size: 2.1rem; font-weight: 900; line-height: 1;
    letter-spacing: -.04em;
    color: var(--mvltd-text, #f4f4f6);
    margin-bottom: 6px;
}
.hp-streamline .hps-plan-note {
    font-size: .82rem; color: var(--mvltd-muted, #9aa0aa);
    margin-bottom: 18px;
}
.hp-streamline .hps-plan-feats {
    list-style: none; margin: 0 0 22px; padding: 0;
    display: flex; flex-direction: column; gap: 9px;
    flex: 1 1 auto;
}
.hp-streamline .hps-plan-feats li {
    position: relative; padding-left: 22px;
    font-size: .87rem; line-height: 1.45;
    color: var(--mvltd-muted, #9aa0aa);
}
.hp-streamline .hps-plan-feats li::before {
    content: '\2713';
    position: absolute; left: 0; top: 0;
    font-weight: 900;
    color: var(--mvltd-accent2, #00e0ff);
}
.hp-streamline .hps-plan-cta { width: 100%; padding: 11px 18px; }

/* ============================== TRIAL ============================== */
.hp-streamline .hps-trialwrap { padding: 8px 0 64px; }
.hp-streamline .hps-trial {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; flex-wrap: wrap;
    padding: 30px 34px;
    border-radius: var(--mvltd-radius, 22px);
    background:
        linear-gradient(145deg,
            var(--mvltd-glass-strong, rgba(255,255,255,.09)),
            var(--mvltd-glass, rgba(255,255,255,.04)));
    border: 1px solid var(--mvltd-glass-border, rgba(255,255,255,.14));
    position: relative;
    overflow: hidden;
}
/* gradient left edge ties the banner to the theme */
.hp-streamline .hps-trial::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--mvltd-grad, linear-gradient(120deg, #7c5cff, #00e0ff));
}
.hp-streamline .hps-trial-copy { flex: 1 1 380px; }
.hp-streamline .hps-trial-eyebrow {
    display: inline-block;
    font-size: .7rem; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--mvltd-accent2, #00e0ff);
    margin-bottom: 10px;
}
.hp-streamline .hps-trial-copy h3 {
    font-family: var(--mvltd-font-head, inherit);
    font-weight: var(--mvltd-head-weight, 800);
    font-size: 1.5rem; line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 8px;
    color: var(--mvltd-text, #f4f4f6);
}
.hp-streamline .hps-trial-copy p {
    margin: 0; max-width: 62ch;
    font-size: .95rem; line-height: 1.6;
    color: var(--mvltd-muted, #9aa0aa);
}
.hp-streamline .hps-trial-cta { flex: none; }

/* ===================== STEPS (hairline grid) ===================== */
.hp-streamline .hps-steps { padding: 0 0 78px; }
/* 1px gaps over a line-coloured bed = crisp hairline rules, no borders */
.hp-streamline .hps-steps-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--mvltd-line, rgba(255,255,255,.08));
    border: 1px solid var(--mvltd-line, rgba(255,255,255,.08));
    border-radius: var(--mvltd-radius, 22px);
    overflow: hidden;
}
.hp-streamline .hps-step {
    background: var(--mvltd-bg2, #101013);
    padding: 32px 28px;
}
.hp-streamline .hps-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--mvltd-grad, linear-gradient(120deg, #7c5cff, #00e0ff));
    color: #fff;
    font-family: var(--mvltd-font-head, inherit);
    font-size: 1rem; font-weight: 900;
    margin-bottom: 16px;
    box-shadow: 0 8px 22px var(--mvltd-glow-1, rgba(124,92,255,.3));
}
.hp-streamline .hps-step h4 {
    font-family: var(--mvltd-font-head, inherit);
    font-weight: var(--mvltd-head-weight, 800);
    font-size: 1.12rem; line-height: 1.25;
    letter-spacing: -.02em;
    margin: 0 0 8px;
    color: var(--mvltd-text, #f4f4f6);
}
.hp-streamline .hps-step p {
    margin: 0;
    font-size: .92rem; line-height: 1.6;
    color: var(--mvltd-muted, #9aa0aa);
}

/* ============================== STRIP ============================== */
.hp-streamline .hps-strip {
    padding: 26px 0 60px;
    border-top: 1px solid var(--mvltd-line, rgba(255,255,255,.08));
}
.hp-streamline .hps-strip-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-top: 22px;
}
.hp-streamline .hps-strip-note {
    font-size: .88rem; color: var(--mvltd-muted, #9aa0aa);
}
.hp-streamline .hps-strip-link {
    color: var(--mvltd-accent, #7c5cff);
    font-size: .88rem; font-weight: 600; text-decoration: none;
}
.hp-streamline .hps-strip-link:hover { text-decoration: underline; }

/* ---------- STREAMLINE RESPONSIVE ---------- */
@media (max-width: 1080px) {
    .hp-streamline .hps-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
    /* with two rows, a lifted card would collide with the row above */
    .hp-streamline .hps-plan.is-featured { transform: none; }
    .hp-streamline .hps-plan.is-featured:hover { transform: translateY(-4px); }
}
@media (max-width: 980px) {
    .hp-streamline .hps-hero { padding: 62px 0 56px; }
    .hp-streamline .hps-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    /* Keep the headline, lead and both CTAs first once the hero stacks. The
       visual card is ~470px tall, so promoting it above the copy pushes the
       offer and the buy buttons below the fold on a phone. */
    .hp-streamline .hps-card { order: 0; transform: rotate(1deg); }
    .hp-streamline .hps-screen { height: 210px; }
    .hp-streamline .hps-steps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .hp-streamline .hps-hero { padding: 48px 0 44px; }
    .hp-streamline .hps-grid { grid-template-columns: 1fr; }
    .hp-streamline .hps-hero-btns .hps-btn { width: 100%; }
    /* un-tilt on phones so nothing clips the viewport edge */
    .hp-streamline .hps-card { transform: none; padding: 18px; }
    .hp-streamline .hps-screen { height: 180px; gap: 12px; }
    .hp-streamline .hps-trial { padding: 24px 22px; }
    .hp-streamline .hps-trial-cta { width: 100%; }
    .hp-streamline .hps-strip-inner { justify-content: center; text-align: center; }
    .hp-streamline .hps-ambient { display: none; }
}

/* respect reduced-motion: drop the tilt and the lift */
@media (prefers-reduced-motion: reduce) {
    .hp-streamline .hps-card,
    .hp-streamline .hps-card:hover { transform: none; transition: none; }
    .hp-streamline .hps-plan,
    .hp-streamline .hps-plan:hover,
    .hp-streamline .hps-plan.is-featured,
    .hp-streamline .hps-plan.is-featured:hover { transform: none; transition: none; }
    .hp-streamline .hps-btn { transition: none; }
}