/* Momentas Book — shared styling for the legal pages. Loaded after styles.css,
   which supplies the palette, the masthead, the footer and the cookie banner. */

.legal {
    max-width: 760px;
    margin: 0 auto;
    padding: 46px 24px 20px;
}

.legal__eyebrow {
    margin: 0 0 10px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--violet-deep);
}

.legal h1 {
    max-width: none;
    margin: 0 0 12px;
    font-size: clamp(2rem, 4.4vw, 2.9rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    text-align: left;
}

.legal__meta {
    margin: 0 0 34px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    font-size: .88rem;
    color: var(--ink-soft);
}

.legal h2 {
    margin: 38px 0 12px;
    font-size: 1.3rem;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.legal h3 {
    margin: 26px 0 8px;
    font-family: 'Ubuntu', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.legal p, .legal li { color: #443F3A; }
.legal p { margin: 0 0 14px; }

.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }

.legal a { color: var(--violet-deep); }
.legal a:hover { color: var(--violet); }

.legal strong { color: var(--ink); }

/* a fact the operator still has to fill in — deliberately loud so it cannot ship
   unnoticed */
.fill {
    background: #FFF3D6;
    border-bottom: 1.5px dashed #C9A227;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 500;
    color: #6B5309;
}

.callout {
    margin: 0 0 24px;
    padding: 16px 18px;
    background: var(--violet-wash);
    border: 1px solid #E0D2FA;
    border-radius: 14px;
    font-size: .93rem;
}

.callout p { margin: 0; color: #3F2C63; }
.callout p + p { margin-top: 8px; }

/* plain-language summary that opens each policy */
.summary {
    margin: 0 0 30px;
    padding: 18px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.summary h2 { margin: 0 0 10px; font-size: 1.05rem; }
.summary ul { margin: 0; }
.summary li { font-size: .93rem; }

.legal table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: .9rem;
}

.legal .tablewrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    margin-bottom: 20px;
}

.legal .tablewrap table { margin: 0; min-width: 520px; }

/* a two-column key/value table reads better stacked than side-scrolled on a phone */
.legal .table--kv { min-width: 0; }

.legal th, .legal td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid #EFEAE0;
    vertical-align: top;
}

.legal th {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: #FBF9F4;
}

.legal tr:last-child td { border-bottom: 0; }

.legal__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.legal__nav a {
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
}

.legal__nav a:hover { border-color: var(--violet); color: var(--violet-deep); }
.legal__nav a[aria-current="page"] { background: var(--violet); color: #fff; border-color: var(--violet); }

@media (max-width: 620px) {
    .legal { padding: 32px 20px 12px; }
    .legal h2 { margin-top: 30px; }

    .legal .table--kv,
    .legal .table--kv tbody,
    .legal .table--kv tr,
    .legal .table--kv th,
    .legal .table--kv td { display: block; width: 100%; }

    .legal .table--kv th {
        background: transparent;
        border-bottom: 0;
        padding: 12px 14px 2px;
    }

    .legal .table--kv td { padding: 0 14px 12px; }
    .legal .table--kv tr + tr { border-top: 1px solid #EFEAE0; }
    .legal .table--kv td { border-bottom: 0; }
}