/* Privacy Policy and Terms & Conditions pages (loaded on top of main.css) */

/* Light page background with the footer pinned to the bottom on short pages */
.page-legal { background: var(--bg-soft); min-height: 100vh; display: flex; flex-direction: column; }
.page-legal main { flex: 1; }

/* Page header band */
.page-head {
    position: relative; overflow: hidden;
    padding: calc(var(--nav-h) + 64px) 0 120px;
    background:
        radial-gradient(900px 500px at 85% 0%, rgba(255, 117, 58, .14), transparent 60%),
        radial-gradient(700px 500px at 0% 100%, rgba(3, 8, 102, .08), transparent 60%),
        linear-gradient(180deg, #FBFBFF 0%, #F3F4FC 100%);
}
.page-head::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(3, 8, 102, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(3, 8, 102, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 30%, transparent 75%);
}
.page-head .container { position: relative; max-width: 900px; }
.back-link {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px;
    font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--navy); text-decoration: none;
}
.back-link .ic { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.back-link:hover { color: var(--orange-600); }
.back-link:hover .ic { transform: translateX(-4px); }
.head-row { display: flex; align-items: center; gap: 20px; }
.head-icon {
    width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0; display: grid; place-items: center;
    color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-600));
    box-shadow: 0 14px 30px -12px rgba(255, 117, 58, .8);
}
.head-icon .ic { width: 30px; height: 30px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px;
    font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-600);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: .5; }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; color: var(--navy); }

/* Policy card */
.legal { position: relative; margin-top: -72px; padding-bottom: 96px; }
.legal .container { max-width: 900px; }
.legal-card {
    padding: 48px 52px; border-radius: var(--radius-lg);
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.legal-card p {
    position: relative; padding: 18px 0 18px 28px; color: var(--muted); font-size: 1.05rem; line-height: 1.8;
}
.legal-card p + p { border-top: 1px solid var(--line); }
.legal-card p:first-child { padding-top: 0; }
.legal-card p:first-child::before { top: calc(.9em - 5px); }
.legal-card p:last-child { padding-bottom: 0; }
.legal-card p::before {
    content: ""; position: absolute; left: 0; top: calc(18px + .9em - 5px); width: 10px; height: 10px; border-radius: 50%;
    background: var(--orange); box-shadow: 0 0 0 4px var(--orange-50);
}
.legal-card a { color: var(--orange-600); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(242, 95, 31, .35); }
.legal-card a:hover { border-bottom-color: currentColor; }

/* the header label sits left-aligned, so only the line before it */
.page-head .eyebrow { margin-bottom: 6px; }
.page-head .eyebrow::after { display: none; }

/* Entrance animation */
.page-legal [data-enter] { opacity: 0; transform: translateY(24px); animation: enter .9s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 110ms + 80ms); }

@media (max-width: 680px) {
    .page-head { padding: calc(var(--nav-h) + 40px) 0 100px; }
    .head-row { gap: 14px; }
    .head-icon { width: 52px; height: 52px; border-radius: 15px; }
    .legal-card { padding: 30px 22px; }
    .legal-card p { font-size: 1rem; padding-left: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .page-legal [data-enter] { opacity: 1; transform: none; }
}