/* ============================================================
   Zaptik: IPTV Player — legal pages (Terms, Privacy).

   Self-contained on purpose: it does NOT import landingpage-style.css.
   That sheet is built around a light paper background, and these two pages
   run dark to match the app itself, which is a full-screen video player and
   is dark everywhere. Layering a dark theme over a light base means fighting
   it selector by selector, and the first rule anybody adds to the shared
   sheet later would land here unannounced.

   Palette comes off the app icon, not from a generator:
   #0F172A is the icon's field, #22D3EE is its screen band.
   ============================================================ */

:root {
    --zap-cyan: #22D3EE;
    --zap-cyan-dim: #67E8F9;
    --zap-navy: #0F172A;
    --zap-navy-deep: #080D19;
    --zap-surface: #131C2F;
    --zap-surface-hi: #1B2740;
    --zap-border: rgba(148, 187, 233, 0.16);
    --zap-border-hi: rgba(34, 211, 238, 0.38);

    /* Text tiers. Measured against --zap-surface, not against pure black:
       ink 15.1:1, muted 7.4:1, faint 4.7:1 — the last one is used only for
       dates and captions, never for body copy. */
    --zap-ink: #EEF4FF;
    --zap-muted: #A9BAD4;
    --zap-faint: #7C8CA8;

    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
}

body.zaptik-legal-page {
    margin: 0;
    min-width: 320px;
    /* One cyan bloom off the top-right, then a faint grid. The grid is what
       keeps a very long single-column document from reading as a void — it
       gives the eye something fixed to measure the scroll against. */
    background:
        radial-gradient(circle at 90% -4%, rgba(34, 211, 238, 0.16), transparent 32rem),
        linear-gradient(90deg, rgba(148, 187, 233, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 187, 233, 0.03) 1px, transparent 1px),
        var(--zap-navy);
    background-size: auto, 76px 76px, 76px 76px, auto;
    background-attachment: fixed, scroll, scroll, scroll;
    color: var(--zap-ink);
    font-family: 'Be Vietnam Pro', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- header ---------- */

.zaptik-legal-page .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 12px 0;
    border-bottom: 1px solid var(--zap-border);
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.legal-nav,
.legal-brand {
    display: flex;
    align-items: center;
}

.legal-nav {
    min-height: 48px;
    justify-content: space-between;
    gap: 16px;
}

.legal-brand {
    gap: 12px;
    color: var(--zap-ink);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
}

/* The product name is long, and in a sticky header a wrapped brand reads as a
   broken layout rather than a designed one. Below 620px the header shows just
   "Zaptik" and the tail is dropped: the full name is still in the link's
   aria-label, in the footer, and in the <title>, so nothing is actually lost. */
.brand-name {
    white-space: nowrap;
}

.legal-brand img {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    box-shadow: 0 8px 22px rgba(34, 211, 238, 0.22);
}

.nav-action {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid var(--zap-border);
    border-radius: 12px;
    background: var(--zap-surface);
    color: var(--zap-ink);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.nav-action:hover {
    border-color: var(--zap-border-hi);
    background: var(--zap-surface-hi);
    transform: translateY(-1px);
}

.nav-action:active {
    transform: translateY(0);
}

.zaptik-legal-page a:focus-visible,
.zaptik-legal-page button:focus-visible {
    outline: 2px solid var(--zap-cyan);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- hero ---------- */

.legal-layout {
    padding: 56px 24px 88px;
}

.legal-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--zap-border);
}

.legal-hero-copy {
    max-width: 46rem;
}

.section-kicker {
    margin: 0 0 10px;
    color: var(--zap-cyan);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.legal-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.legal-hero p:not(.section-kicker) {
    margin: 0 0 18px;
    max-width: 40rem;
    color: var(--zap-muted);
    font-size: 1.075rem;
}

.legal-hero span {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--zap-border);
    border-radius: 999px;
    background: var(--zap-surface);
    color: var(--zap-faint);
    font-size: 13.5px;
    font-weight: 600;
}

.legal-hero-icon {
    flex-shrink: 0;
    width: 148px;
    height: 148px;
    border-radius: 34px;
    box-shadow: 0 20px 48px rgba(8, 13, 25, 0.6);
}

/* ---------- body grid ---------- */

.legal-content-grid {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    align-items: start;
    gap: 44px;
    margin-top: 44px;
}

.legal-toc {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px;
    border: 1px solid var(--zap-border);
    border-radius: 18px;
    background: rgba(19, 28, 47, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.legal-toc strong {
    margin-bottom: 10px;
    color: var(--zap-faint);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.legal-toc a {
    padding: 7px 10px;
    border-radius: 9px;
    border-left: 2px solid transparent;
    color: var(--zap-muted);
    font-size: 14.5px;
    text-decoration: none;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.legal-toc a:hover {
    border-left-color: var(--zap-cyan);
    background: rgba(34, 211, 238, 0.08);
    color: var(--zap-ink);
}

.legal-card {
    padding: clamp(24px, 3.4vw, 46px);
    border: 1px solid var(--zap-border);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(27, 39, 64, 0.6), rgba(19, 28, 47, 0.86));
    box-shadow: 0 24px 60px rgba(8, 13, 25, 0.42);
}

/* ---------- prose ---------- */

.zaptik-legal-page .legal-card .prose {
    max-width: 68ch;
    color: var(--zap-muted);
}

.zaptik-legal-page .legal-card .prose h2 {
    margin: 44px 0 14px;
    color: var(--zap-ink);
    font-size: 1.42rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    scroll-margin-top: 96px;
}

.zaptik-legal-page .legal-card .prose h2:first-child {
    margin-top: 0;
}

.zaptik-legal-page .legal-card .prose h3 {
    margin: 28px 0 10px;
    color: var(--zap-ink);
    font-size: 1.075rem;
    font-weight: 700;
}

.zaptik-legal-page .legal-card .prose p {
    margin: 0 0 16px;
}

.zaptik-legal-page .legal-card .prose ul {
    margin: 0 0 18px;
    padding-left: 22px;
}

.zaptik-legal-page .legal-card .prose li {
    margin-bottom: 9px;
}

.zaptik-legal-page .legal-card .prose li::marker {
    color: var(--zap-cyan);
}

.zaptik-legal-page .legal-card .prose strong {
    color: var(--zap-ink);
    font-weight: 700;
}

.zaptik-legal-page .legal-card .prose a {
    color: var(--zap-cyan-dim);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.zaptik-legal-page .legal-card .prose a:hover {
    color: var(--zap-cyan);
}

/* A callout is for the sentence somebody skimming must not miss. Two on the
   Terms page, two on Privacy — any more and the emphasis stops meaning
   anything. */
.legal-callout {
    margin: 22px 0;
    padding: 18px 20px;
    border: 1px solid var(--zap-border-hi);
    border-left: 3px solid var(--zap-cyan);
    border-radius: 14px;
    background: rgba(34, 211, 238, 0.07);
}

.legal-callout strong {
    display: block;
    margin-bottom: 6px;
    color: var(--zap-cyan-dim);
}

.legal-callout p:last-child {
    margin-bottom: 0;
}

.legal-definition-list {
    margin: 0 0 20px;
    padding: 0;
}

.legal-definition-list dt {
    margin-top: 16px;
    color: var(--zap-ink);
    font-weight: 700;
}

.legal-definition-list dd {
    margin: 4px 0 0;
    padding: 0;
}

/* ---------- footer ---------- */

.zaptik-legal-page footer {
    border-top: 1px solid var(--zap-border);
    background: var(--zap-navy-deep);
    padding: 48px 0 28px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.3fr;
    gap: 36px;
}

.footer-about .logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--zap-ink);
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
}

.footer-about .logo img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.footer-about p {
    margin: 12px 0 0;
    max-width: 26rem;
    color: var(--zap-faint);
    font-size: 15px;
}

.footer-links h4,
.footer-support h4 {
    margin: 0 0 12px;
    color: var(--zap-faint);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-links a,
.footer-support a {
    display: block;
    margin-bottom: 8px;
    color: var(--zap-muted);
    font-size: 15px;
    text-decoration: none;
}

.footer-links a:hover,
.zaptik-legal-page .footer-support a:hover {
    color: var(--zap-cyan);
}

.footer-links a[aria-current='page'] {
    color: var(--zap-cyan);
}

.footer-support p {
    margin: 0 0 8px;
    color: var(--zap-faint);
    font-size: 15px;
}

.footer-bottom {
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid var(--zap-border);
    color: var(--zap-faint);
    font-size: 14px;
}

.footer-bottom p {
    margin: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 960px) {
    .legal-content-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .legal-toc {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 4px;
    }

    .legal-toc strong {
        grid-column: 1 / -1;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .footer-about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .brand-tail {
        display: none;
    }
}

@media (max-width: 720px) {
    body.zaptik-legal-page {
        font-size: 16px;
    }

    .legal-layout {
        padding: 36px 20px 64px;
    }

    .legal-hero {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 24px;
    }

    .legal-hero-icon {
        width: 92px;
        height: 92px;
        border-radius: 22px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zaptik-legal-page *,
    .zaptik-legal-page *::before,
    .zaptik-legal-page *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    body.zaptik-legal-page {
        background: #fff;
        color: #000;
    }

    .zaptik-legal-page .site-header,
    .legal-toc,
    .zaptik-legal-page footer,
    .legal-hero-icon {
        display: none;
    }

    .legal-card {
        border: none;
        background: none;
        box-shadow: none;
        padding: 0;
    }

    .zaptik-legal-page .legal-card .prose,
    .zaptik-legal-page .legal-card .prose h2,
    .zaptik-legal-page .legal-card .prose h3 {
        color: #000;
        max-width: none;
    }
}