/* =====================================
   LEGAL PAGE — PREMIUM / RESPONSIVE
===================================== */

.legal-page{
    padding:clamp(64px, 8vw, 96px) 0;
}

/* =====================================
   HERO
===================================== */

.legal-hero{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:30px;
}

.legal-hero h1{
    margin:0;
    max-width:12ch;
}

.legal-intro{
    max-width:760px;
    margin:0;
    font-size:clamp(1rem, 1.2vw, 1.05rem);
    line-height:1.75;
    color:var(--text-soft);
}

/* =====================================
   LAYOUT
===================================== */

.legal-layout{
    display:grid;
    grid-template-columns:minmax(0, 1.2fr) minmax(280px, 360px);
    gap:24px;
    align-items:start;
}

.legal-side,
.legal-card-main{
    min-width:0;
}

/* =====================================
   CARDS
===================================== */

.legal-card{
    padding:28px;
    background:rgba(255,255,255,0.92);
    border:1px solid var(--line);
    border-radius:28px;
    box-shadow:var(--shadow-sm);
}

.legal-card-main{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.legal-section{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.legal-section:not(:last-child){
    padding-bottom:24px;
    border-bottom:1px solid var(--line);
}

.legal-section h2{
    margin:0;
    font-size:clamp(1.2rem, 2vw, 1.5rem);
}

.legal-section p{
    margin:0;
    line-height:1.8;
}

/* =====================================
   LEGAL GRID
===================================== */

.legal-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}

.legal-item{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:16px 18px;
    background:var(--bg-soft);
    border:1px solid var(--line);
    border-radius:18px;
}

.legal-label{
    color:var(--text-muted);
    font-size:0.82rem;
    font-weight:600;
}

.legal-value{
    color:var(--text);
    font-size:1rem;
    font-weight:700;
    line-height:1.45;
    word-break:break-word;
}

/* =====================================
   SIDE
===================================== */

.legal-side{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.legal-side-head{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
}

.legal-side-head h2{
    margin:0;
    font-size:clamp(1.15rem, 2vw, 1.4rem);
}

.legal-side-head p{
    margin:0;
    line-height:1.7;
    color:var(--text-soft);
}

.legal-side-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.legal-card .btn-secondary{
    background:#ffffff;
    color:var(--primary);
    border-color:var(--line-strong);
}

.legal-card .btn-secondary:hover{
    background:var(--primary);
    border-color:var(--primary);
    color:#ffffff;
}

/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 1080px){
    .legal-layout{
        grid-template-columns:minmax(0, 1fr) 320px;
    }
}

@media (max-width: 900px){
    .legal-page{
        padding:60px 0;
    }

    .legal-layout{
        grid-template-columns:1fr;
    }

    .legal-hero h1{
        max-width:100%;
    }
}

@media (max-width: 680px){
    .legal-page{
        padding:54px 0 48px;
    }

    .legal-intro{
        font-size:0.98rem;
        line-height:1.7;
    }

    .legal-card{
        padding:22px;
        border-radius:22px;
    }

    .legal-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .legal-section:not(:last-child){
        padding-bottom:20px;
    }
}

@media (max-width: 480px){
    .legal-page{
        padding:46px 0 42px;
    }

    .legal-card{
        padding:20px;
        border-radius:20px;
    }

    .legal-item{
        padding:16px;
        border-radius:16px;
    }

    .legal-intro{
        font-size:0.95rem;
    }
}