/* Premium landing extension.
 * Load AFTER the existing premium/custom.css. Do not replace that stylesheet.
 * Existing .features-block, .features-icon, .one–.five, .upgrade-block and
 * .btn-gradient own the visual language. Only layout, disclosures and the
 * inactive Lifetime concept are added here.
 * Every selector is scoped to the landing SECTION, outside the auth modal.
 */

#premium-landing [hidden] { display: none !important; }
#premium-landing .pl-intro-note {
    display: block;
    margin-top: 16px;
    color: #b6cdd0;
    font-size: 12px;
    line-height: 1.6;
}

/* Keep the original 20% desktop columns, surfaces, glow and black hover icons. */
#premium-landing .features-section { margin-bottom: 12px; }
#premium-landing .features-section .row > * { display: flex; min-width: 0; }
#premium-landing .features-block {
    max-width: none;
    height: calc(100% - 15px);
    margin: 0 0 15px;
    padding-top: 26px;
    justify-content: flex-start;
    text-decoration: none;
}
#premium-landing div.features-block { cursor: default; }
#premium-landing .features-icon { flex: 0 0 59px; }
#premium-landing .features-icon img { max-width: 59px; max-height: 59px; }
#premium-landing .features-content { width: 100%; }
#premium-landing .features-content p { margin: 0; }
#premium-landing .features-content small { margin-top: 6px; font-size: 12px; line-height: 1.5; }
#premium-landing .pl-cloud-upgrade { display: inline-block; font-weight: 700; }
#premium-landing .features-block[href]:focus-visible,
#premium-landing summary:focus-visible,
#premium-landing .pl-text-link:focus-visible {
    outline: 2px solid #30f3d7;
    outline-offset: 4px;
}
#premium-landing .blur-img { pointer-events: none; }

/* Ava is one compact, closed disclosure rather than another long hero section. */
#premium-landing .pl-ava {
    margin: 0 0 64px;
    border: 1px solid rgba(101, 203, 255, .2);
    border-radius: 16px;
    background: rgba(101, 203, 255, .06);
    color: #fff;
    scroll-margin-top: 24px;
}
#premium-landing .pl-ava-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    cursor: pointer;
    border-radius: 16px;
    list-style: none;
}
#premium-landing summary::-webkit-details-marker { display: none; }
#premium-landing .pl-ava-summary > img { flex: 0 0 44px; }
#premium-landing .pl-ava-heading { flex: 1; min-width: 0; }
#premium-landing .pl-ava-heading strong { display: block; font-size: 16px; line-height: 1.5; }
#premium-landing .pl-ava-heading > span { display: block; margin-top: 3px; color: #b6cdd0; font-size: 12px; line-height: 1.6; }
#premium-landing .pl-ava-included {
    flex-shrink: 0;
    padding: 7px 12px;
    border: 1px solid rgba(48, 243, 215, .2);
    border-radius: 999px;
    color: #9cead9;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
#premium-landing .pl-chevron {
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin: -5px 3px 0 5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
}
#premium-landing details[open] > summary .pl-chevron { transform: rotate(225deg); margin-top: 5px; }
#premium-landing .pl-ava-summary:hover,
#premium-landing .pl-ava[open] > summary { background: rgba(101, 203, 255, .045); }
#premium-landing .pl-ava-body { padding: 28px 26px; border-top: 1px solid rgba(255, 255, 255, .1); }
#premium-landing .pl-ava-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
#premium-landing .pl-ava-intro > div { max-width: 680px; }
#premium-landing .pl-ava-intro h2 { margin: 0 0 10px; font-size: 23px; font-weight: 700; line-height: 1.35; }
#premium-landing .pl-ava-body p { margin: 0; color: #b6cdd0; font-size: 13px; line-height: 1.7; }
#premium-landing .pl-text-link { color: #78dfed; text-decoration: none; font-weight: 600; }
#premium-landing .pl-text-link:hover { color: #a8f3fa; text-decoration: underline; }
#premium-landing .pl-ava-intro > a { flex-shrink: 0; padding: 6px 0; font-size: 12px; line-height: 1.7; }
#premium-landing .pl-ava-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 26px 0; padding: 0; }
#premium-landing .pl-ava-capabilities > li + li { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .12); }
#premium-landing .pl-ava-capabilities h3,
#premium-landing .pl-cloud-storage-copy h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.5; }
#premium-landing .pl-cloud-storage {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 22px 0;
    border-top: 1px solid rgba(48, 243, 215, .18);
    border-bottom: 1px solid rgba(48, 243, 215, .18);
}
#premium-landing .pl-cloud-storage-size { flex: 0 0 175px; }
#premium-landing .pl-cloud-storage-size strong { display: block; color: #7de5d4; font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -1px; }
#premium-landing .pl-cloud-storage-size strong span { font-size: 22px; }
#premium-landing .pl-cloud-storage-size > span { display: block; margin-top: 6px; color: #b6cdd0; font-size: 11px; line-height: 1.5; }
#premium-landing .pl-ava-games { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
#premium-landing .pl-ava-games > p { flex-shrink: 0; font-size: 11px; font-weight: 600; }
#premium-landing .pl-ava-games ul { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
#premium-landing .pl-ava-games li { border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; padding: 5px 9px; font-size: 11px; font-weight: 600; line-height: 1.4; }

/* The real plan layout, prices, buttons and checkout classes remain original. */
#premium-landing .pl-section-note { margin: 12px 0 0; color: #b6cdd0; font-size: 13px; line-height: 1.6; }
#premium-landing .pl-plan-note { display: block; margin-top: 12px; color: #9cead9; font-size: 11px; line-height: 1.5; }
#premium-landing .pl-payment-note { margin: 22px 0 0; color: #b6cdd0; text-align: center; font-size: 12px; line-height: 1.7; }

/* A separate 794px strip: never a fourth live plan and never a checkout trigger. */
#premium-landing .pl-lifetime-shell { margin-top: 20px; }
#premium-landing .pl-lifetime {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(140px, 175px);
    align-items: center;
    gap: 12px 26px;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 24px;
}
#premium-landing .pl-lifetime .upgrade-tag p { position: static; display: inline-block; margin: 0 0 10px; box-shadow: none; }
#premium-landing .pl-lifetime .upgrade-tag p::after { content: none; }
#premium-landing .pl-lifetime .upgrade-block-top > h4 { margin: 0 0 7px; }
#premium-landing .pl-lifetime-description { margin: 0; color: #b6cdd0; font-size: 12px; line-height: 1.6; }
#premium-landing .pl-lifetime .price h4 { margin: 0; white-space: nowrap; }
#premium-landing .pl-lifetime .price > span { color: #b6cdd0; font-size: 12px; }
#premium-landing .pl-lifetime .upgrade-block-btn { margin: 0; }
#premium-landing .pl-lifetime button:disabled,
#premium-landing .pl-lifetime button:disabled:hover {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(101, 203, 255, .06);
    color: #b6cdd0;
    cursor: not-allowed;
    box-shadow: none;
    font-family: inherit;
}
#premium-landing .pl-lifetime button:disabled::before,
#premium-landing .pl-lifetime button:disabled::after { content: none; }
#premium-landing #pl-lifetime-note { grid-column: 1 / -1; color: #b6cdd0; font-size: 11px; line-height: 1.6; }

/* Native FAQ disclosures: no Bootstrap initialization or extra dependency. */
#premium-landing .pl-faq { max-width: 824px; margin: 72px auto 0; color: #fff; }
#premium-landing .pl-faq-item { border-bottom: 1px solid rgba(101, 203, 255, .18); scroll-margin-top: 24px; }
#premium-landing .pl-faq-item:first-of-type { border-top: 1px solid rgba(101, 203, 255, .18); }
#premium-landing .pl-faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 3px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    list-style: none;
    cursor: pointer;
}
#premium-landing .pl-faq-item > summary:hover,
#premium-landing .pl-faq-item[open] > summary { color: #78dfed; }
#premium-landing .pl-faq-answer { padding: 0 32px 22px 3px; color: #b6cdd0; font-size: 13px; line-height: 1.8; }
#premium-landing .pl-faq-answer p { margin: 0 0 12px; }
#premium-landing .pl-faq-answer p:last-child { margin-bottom: 0; }
#premium-landing .pl-faq-contact { margin: 24px 0 0; color: #b6cdd0; text-align: center; font-size: 12px; line-height: 1.7; }

@media (max-width: 991px) {
    #premium-landing .features-section { margin-left: 0; margin-right: 0; }
    #premium-landing .features-content p { font-size: 15px; line-height: 1.5; }
    #premium-landing .pl-ava-intro { display: block; }
    #premium-landing .pl-ava-intro > a { display: inline-block; margin-top: 10px; }
    #premium-landing .pl-ava-included { font-size: 11px; }
}
@media (max-width: 767px) {
    #premium-landing .features-block { padding: 22px 14px 20px; }
    #premium-landing .features-content p { font-size: 14px; }
    #premium-landing .features-content small { font-size: 11px; }
    #premium-landing .pl-intro-note { font-size: 11px; }
    #premium-landing .pl-ava { margin-bottom: 44px; }
    #premium-landing .pl-ava-summary { flex-wrap: wrap; gap: 12px; padding: 18px; }
    #premium-landing .pl-ava-heading strong { font-size: 14px; }
    #premium-landing .pl-ava-heading > span { font-size: 11px; }
    #premium-landing .pl-ava-included { display: none; } /* Also visible in the cloud tile and opened panel. */
    #premium-landing .pl-ava-body { padding: 22px 18px; }
    #premium-landing .pl-ava-intro h2 { font-size: 21px; }
    #premium-landing .pl-ava-capabilities { grid-template-columns: 1fr; gap: 18px; }
    #premium-landing .pl-ava-capabilities > li + li { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
    #premium-landing .pl-cloud-storage { flex-direction: column; align-items: flex-start; gap: 18px; }
    #premium-landing .pl-cloud-storage-size { flex-basis: auto; }
    #premium-landing .pl-ava-games { align-items: flex-start; flex-direction: column; gap: 10px; }
    #premium-landing .pl-lifetime-shell { margin-top: 0; }
    #premium-landing .pl-lifetime { grid-template-columns: minmax(0, 1fr) auto; gap: 18px 16px; padding: 22px 18px; }
    #premium-landing .pl-lifetime .upgrade-block-btn { grid-column: 1 / -1; }
    #premium-landing .pl-faq { margin-top: 54px; }
    #premium-landing .pl-faq-item > summary { font-size: 13px; gap: 18px; padding: 20px 3px; }
    #premium-landing .pl-faq-answer { padding-right: 3px; }
}
@media (max-width: 359px) {
    #premium-landing .features-block { padding-right: 10px; padding-left: 10px; }
    #premium-landing .features-content p { font-size: 13px; }
    #premium-landing .pl-ava-summary > img { display: none; }
    #premium-landing .pl-lifetime { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    #premium-landing .pl-chevron { transition: none; }
}
