/* ============================================================
       Legal Pages 2026 - Premium Redesign (scoped: .lx-page)
       Plus Jakarta Sans loaded via non-blocking preload in app.blade.php
       ============================================================ */

    .lx-page{
        --lx-ink: #101828;
        --lx-body: #344054;
        --lx-mut: #475467;
        --lx-teal: #0e9384;
        --lx-teal-deep: #0a6e63;
        --lx-emerald: #12b76a;
        --lx-sky: #2e90fa;
        --lx-grad: linear-gradient(115deg, #0e9384 0%, #12b76a 52%, #2e90fa 100%);
        --lx-border: rgba(16, 24, 40, .10);
        --lx-shadow: 0 24px 60px -30px rgba(16, 24, 40, .22);
        --lx-r-lg: 32px;
        --lx-r-md: 18px;

        position: relative;
        color: var(--lx-body);
        font-size: 18px;
        line-height: 1.75;
        letter-spacing: -.011em;
        background:
            radial-gradient(1100px 540px at 88% -12%, rgba(46,144,250,.13), transparent 62%),
            radial-gradient(950px 560px at -6% -4%, rgba(18,183,106,.15), transparent 58%),
            radial-gradient(760px 420px at 55% 8%, rgba(14,147,132,.08), transparent 60%),
            linear-gradient(180deg, #f3faf7 0%, #eef4fb 58%, #f6f9f7 100%);
    }
    .lx-page, .lx-page *{
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        box-sizing: border-box;
    }
    .lx-page a{color: var(--lx-teal-deep); text-decoration: none}
    .lx-page a:hover{text-decoration: underline; text-underline-offset: 4px}
    .lx-page :focus-visible{outline: 3px solid rgba(14,147,132,.4); outline-offset: 3px; border-radius: 8px}

    /* ---------- Hero ---------- */
    .lx-hero{
        padding: clamp(48px, 7vw, 88px) clamp(18px, 5vw, 40px) clamp(30px, 4vw, 48px);
        text-align: center;
    }
    .lx-hero-inner{max-width: 900px; margin: 0 auto}
    .lx-badge{
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 9px 18px;
        border-radius: 999px;
        background: rgba(255,255,255,.82);
        -webkit-backdrop-filter: blur(10px) saturate(150%);
        backdrop-filter: blur(10px) saturate(150%);
        border: 1px solid var(--lx-border);
        box-shadow: 0 6px 20px -12px rgba(16,24,40,.28);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--lx-teal-deep);
    }
    .lx-badge-dot{
        width: 9px; height: 9px;
        border-radius: 50%;
        background: var(--lx-grad);
        animation: lxPulse 2.6s ease-in-out infinite;
    }
    @keyframes lxPulse{
        0%, 100%{box-shadow: 0 0 0 0 rgba(18,183,106,.35)}
        50%{box-shadow: 0 0 0 6px rgba(18,183,106,0)}
    }
    .lx-title{
        margin: 22px 0 18px;
        font-size: clamp(36px, 6vw, 60px);
        line-height: 1.08;
        font-weight: 800;
        letter-spacing: -.03em;
        color: var(--lx-ink);
    }
    .lx-grad-text{
        background: var(--lx-grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .lx-lede{
        margin: 0 auto;
        max-width: 780px;
        font-size: clamp(17px, 2vw, 20px);
        line-height: 1.75;
        color: var(--lx-mut);
    }
    .lx-lede strong{color: var(--lx-ink); font-weight: 700}
    .lx-meta{display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px}
    .lx-meta-item{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--lx-border);
        box-shadow: 0 4px 14px -10px rgba(16,24,40,.25);
        font-size: 15px;
        font-weight: 600;
        color: var(--lx-ink);
    }
    .lx-meta-item svg{width: 17px; height: 17px; color: var(--lx-teal); flex: 0 0 auto}

    /* ---------- Sticky chapter nav ---------- */
    .lx-nav{
        position: sticky;
        top: 10px;
        z-index: 60;
        padding: 0 clamp(12px, 3vw, 24px);
    }
    .lx-nav-track{
        display: flex;
        gap: 6px;
        max-width: 1060px;
        margin: 0 auto;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 8px;
        background: rgba(255,255,255,.86);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        backdrop-filter: blur(16px) saturate(160%);
        border: 1px solid var(--lx-border);
        border-radius: 999px;
        box-shadow: 0 12px 34px -20px rgba(16,24,40,.35);
    }
    .lx-nav-track::-webkit-scrollbar{display: none}
    .lx-nav-link{
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 44px;
        padding: 9px 16px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 600;
        color: var(--lx-ink);
        white-space: nowrap;
        transition: background .2s ease, color .2s ease;
    }
    .lx-nav-link span{
        display: grid;
        place-items: center;
        width: 24px; height: 24px;
        border-radius: 8px;
        background: rgba(14,147,132,.1);
        color: var(--lx-teal-deep);
        font-size: 14px;
        font-weight: 800;
        flex: 0 0 auto;
    }
    .lx-nav-link:hover{background: rgba(14,147,132,.09); text-decoration: none; color: var(--lx-ink)}
    .lx-nav-link.is-active{background: var(--lx-grad); color: #fff; box-shadow: 0 8px 18px -8px rgba(14,147,132,.55)}
    .lx-nav-link.is-active span{background: rgba(255,255,255,.22); color: #fff}

    /* ---------- Article sheet ---------- */
    .lx-wrap{
        max-width: 1020px;
        margin: 0 auto;
        padding: clamp(24px, 4vw, 40px) clamp(14px, 4vw, 28px) clamp(70px, 8vw, 110px);
    }
    .lx-sheet{
        background: #fff;
        border: 1px solid var(--lx-border);
        border-radius: var(--lx-r-lg);
        box-shadow: var(--lx-shadow);
        overflow: hidden;
    }
    .lx-section{
        padding: clamp(30px, 5vw, 54px) clamp(20px, 6vw, 64px);
        scroll-margin-top: 96px;
    }
    .lx-section + .lx-section{border-top: 1px solid rgba(16,24,40,.07)}
    .lx-sec-head{display: flex; align-items: center; gap: 16px; margin: 0 0 18px}
    .lx-sec-num{
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 48px; height: 48px;
        border-radius: 15px;
        background: var(--lx-grad);
        color: #fff;
        font-size: 19px;
        font-weight: 800;
        box-shadow: 0 10px 22px -10px rgba(14,147,132,.6);
    }
    .lx-section h2{
        margin: 0;
        font-size: clamp(24px, 3.2vw, 33px);
        line-height: 1.22;
        font-weight: 800;
        letter-spacing: -.022em;
        color: var(--lx-ink);
    }
    .lx-section h3{
        margin: 30px 0 10px;
        font-size: clamp(19px, 2.2vw, 23px);
        font-weight: 700;
        color: var(--lx-ink);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .lx-section h3::before{
        content: "";
        flex: 0 0 auto;
        width: 22px; height: 5px;
        border-radius: 99px;
        background: var(--lx-grad);
    }
    .lx-section p{margin: 15px 0; max-width: 74ch; font-size: 18px; line-height: 1.8; color: var(--lx-body)}
    .lx-section p strong, .lx-section li strong{color: var(--lx-ink); font-weight: 700}
    .lx-section p, .lx-section li, .lx-section a{overflow-wrap: anywhere}

    .lx-section ul{list-style: none; margin: 18px 0; padding: 0; max-width: 74ch}
    .lx-section ul > li{position: relative; margin: 13px 0; padding-left: 32px; font-size: 18px; line-height: 1.8; color: var(--lx-body)}
    .lx-section ul > li::before{
        content: "";
        position: absolute;
        left: 3px;
        top: .66em;
        width: 10px; height: 10px;
        border-radius: 3.5px;
        background: var(--lx-grad);
    }
    .lx-section ul ul{margin: 10px 0 0}
    .lx-section ul ul > li{padding-left: 26px; font-size: 17px; margin: 8px 0}
    .lx-section ul ul > li::before{width: 7px; height: 7px; border-radius: 50%; top: .7em}

    .lx-section ol{counter-reset: lx; list-style: none; margin: 18px 0; padding: 0; max-width: 74ch}
    .lx-section ol > li{counter-increment: lx; position: relative; margin: 14px 0; padding-left: 46px; font-size: 18px; line-height: 1.8; color: var(--lx-body)}
    .lx-section ol > li::before{
        content: counter(lx);
        position: absolute;
        left: 0;
        top: .14em;
        display: grid;
        place-items: center;
        width: 30px; height: 30px;
        border-radius: 10px;
        background: rgba(14,147,132,.1);
        color: var(--lx-teal-deep);
        font-size: 14px;
        font-weight: 800;
    }
    .lx-section ol ul{margin: 10px 0 0}
    .lx-section ol ul > li{font-size: 17px; margin: 8px 0}

    .lx-note{
        margin-top: 22px;
        padding: 18px 22px;
        border-radius: var(--lx-r-md);
        background: linear-gradient(135deg, rgba(14,147,132,.07), rgba(46,144,250,.07));
        border: 1px solid rgba(14,147,132,.16);
        font-size: 16px;
        line-height: 1.75;
        color: var(--lx-mut);
        max-width: 74ch;
    }
    .lx-note a{font-weight: 600}

    /* ---------- Keyword chips ---------- */
    .lx-chips{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px}
    .lx-chip{
        padding: 11px 18px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 600;
        color: var(--lx-ink);
        background: linear-gradient(#fff, #fff) padding-box, var(--lx-grad) border-box;
        border: 1.5px solid transparent;
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .lx-chip:hover{transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(14,147,132,.5)}

    /* ---------- Support CTA band ---------- */
    .lx-cta{
        position: relative;
        overflow: hidden;
        padding: clamp(36px, 5vw, 58px) clamp(20px, 6vw, 64px);
        background: linear-gradient(120deg, #0a6e63 0%, #0e9384 45%, #1d6fd1 100%);
        color: #fff;
        text-align: center;
    }
    .lx-cta::before{
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(520px 260px at 85% -10%, rgba(255,255,255,.20), transparent 60%),
            radial-gradient(420px 220px at 8% 110%, rgba(255,255,255,.12), transparent 55%);
        pointer-events: none;
    }
    .lx-cta > *{position: relative}
    .lx-cta h2{margin: 0 0 12px; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #fff}
    .lx-cta p{margin: 0 auto 26px; max-width: 640px; font-size: 17.5px; line-height: 1.7; color: rgba(255,255,255,.94)}
    .lx-cta-actions{display: flex; flex-wrap: wrap; justify-content: center; gap: 12px}
    .lx-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 50px;
        padding: 13px 26px;
        border-radius: 999px;
        font-size: 16.5px;
        font-weight: 700;
        text-decoration: none;
        transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .lx-btn svg{width: 19px; height: 19px; flex: 0 0 auto}
    .lx-btn:hover{text-decoration: none; transform: translateY(-2px)}
    .lx-btn-light{background: #fff; color: #08302a; box-shadow: 0 14px 28px -14px rgba(0,0,0,.45)}
    .lx-btn-light:hover{box-shadow: 0 18px 34px -14px rgba(0,0,0,.5); color: #08302a}
    .lx-btn-ghost{border: 1.5px solid rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.08)}
    .lx-btn-ghost:hover{background: rgba(255,255,255,.16); color: #fff}
    .lx-page .lx-cta a.lx-btn-light{color: #08302a}
    .lx-page .lx-cta a.lx-btn-ghost{color: #fff}

    .lx-copyright{margin: 26px 0 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--lx-mut)}

    /* ---------- Back to top with progress ring ---------- */
    .lx-top{
        position: fixed;
        left: 18px;
        bottom: 18px;
        z-index: 70;
        width: 56px; height: 56px;
        border-radius: 50%;
        border: 0;
        padding: 4px;
        background: conic-gradient(var(--lx-teal) calc(var(--lx-p, 0) * 1%), rgba(16,24,40,.12) 0);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transform: translateY(14px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s;
    }
    .lx-top.is-visible{opacity: 1; visibility: visible; transform: none}
    .lx-top-inner{
        display: grid;
        place-items: center;
        width: 100%; height: 100%;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 10px 26px -12px rgba(16,24,40,.4);
    }
    .lx-top svg{width: 21px; height: 21px; color: var(--lx-ink)}

    /* ---------- Responsive ---------- */
    @media (max-width: 768px){
        .lx-page{font-size: 17px}
        .lx-section{scroll-margin-top: 84px}
        .lx-sec-num{width: 42px; height: 42px; font-size: 17px; border-radius: 13px}
        .lx-section p, .lx-section ul > li, .lx-section ol > li{font-size: 17px}
        .lx-section ul ul > li, .lx-section ol ul > li{font-size: 16px}
    }
    @media (max-width: 480px){
        .lx-badge{font-size: 14px; padding: 8px 14px; letter-spacing: .07em}
        .lx-title{font-size: clamp(30px, 9vw, 36px)}
        .lx-lede{font-size: 16px}
        .lx-meta{gap: 8px; margin-top: 20px}
        .lx-meta-item{font-size: 14px; padding: 9px 13px}
        .lx-nav{top: 6px; padding: 0 10px}
        .lx-nav-link{font-size: 14px; padding: 8px 13px}
        .lx-nav-link span{width: 22px; height: 22px; font-size: 14px}
        .lx-sheet{border-radius: 22px}
        .lx-section{padding: 26px 18px; scroll-margin-top: 76px}
        .lx-sec-head{gap: 12px; margin-bottom: 14px}
        .lx-sec-num{width: 38px; height: 38px; font-size: 15.5px; border-radius: 11px}
        .lx-section h2{font-size: 22px}
        .lx-section h3{font-size: 18px; margin-top: 24px}
        .lx-section p, .lx-section ul > li, .lx-section ol > li{font-size: 16px; line-height: 1.75}
        .lx-section ul ul > li, .lx-section ol ul > li{font-size: 16px}
        .lx-section ul > li{padding-left: 26px}
        .lx-section ul > li::before{width: 9px; height: 9px}
        .lx-section ol > li{padding-left: 40px}
        .lx-section ol > li::before{width: 26px; height: 26px; font-size: 13px; border-radius: 9px}
        .lx-note{padding: 15px 16px; font-size: 16px}
        .lx-chip{font-size: 14px; padding: 9px 14px}
        .lx-cta{padding: 32px 18px}
        .lx-cta p{font-size: 16px}
        .lx-cta-actions{flex-direction: column}
        .lx-btn{width: 100%; font-size: 16px}
        .lx-copyright{font-size: 14px}
        .lx-top{width: 50px; height: 50px; left: 12px; bottom: 12px}
    }
    @media (max-width: 360px){
        .lx-title{font-size: 28px}
        .lx-section{padding: 22px 14px}
        .lx-section h2{font-size: 22px}
    }

    @media print{
        .lx-nav, .lx-top, .lx-cta, .reviewsPremiumSection{display: none !important}
        .lx-sheet{box-shadow: none; border: 0}
        .lx-page{background: #fff}
    }
    @media (prefers-reduced-motion: reduce){
        .lx-page *, .lx-page *::before{transition: none !important; animation: none !important}
    }