/* Long-form legal pages (privacy). Body is centred for the landing page, so
   the container is pinned to the top here and given readable prose spacing. */

body.legal {
justify-content: flex-start;
}

.legal-page {
max-width: 760px;
}

.legal-head {
text-align: center;
margin-bottom: 36px;
}

.legal-head h1 {
font-size: 1.8rem;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 10px;
}

.legal-updated {
color: #888;
font-size: 0.85rem;
letter-spacing: 1px;
}

.legal-page h2 {
font-size: 1.05rem;
letter-spacing: 2px;
text-transform: uppercase;
color: #667eea;
margin: 32px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(102, 126, 234, 0.3);
}

.legal-page p,
.legal-page li {
color: #ccc;
line-height: 1.7;
margin-bottom: 12px;
}

.legal-page ul {
padding-left: 22px;
margin-bottom: 12px;
}

.legal-page a {
color: #667eea;
}

.legal-page a:hover {
color: #fff;
}

.legal-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 16px;
font-size: 0.92rem;
}

.legal-table th,
.legal-table td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
color: #ccc;
vertical-align: top;
}

.legal-table th {
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.8rem;
}

/* Competition key facts. The bits that change between comps, pulled out of the
   prose so they are findable at a glance and editable in one place. */
.comp-key {
border: 1px solid rgba(102, 126, 234, 0.35);
border-radius: 8px;
padding: 18px 20px;
margin-bottom: 24px;
background: rgba(102, 126, 234, 0.07);
}

.comp-key-line {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
margin-bottom: 8px;
}

.comp-key-line:last-child {
margin-bottom: 0;
}

.comp-key-line span {
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.75rem;
min-width: 120px;
padding-top: 2px;
}

.comp-key-line strong {
color: #fff;
}

.comp-shout {
text-align: center;
color: #fff;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 0.95rem;
margin-bottom: 8px;
}

.comp-signoff {
margin-top: 28px;
text-align: center;
letter-spacing: 2px;
text-transform: uppercase;
color: #ccc;
}

.comp-signoff strong {
color: #667eea;
}

.legal-back {
display: inline-block;
margin-top: 32px;
color: #667eea;
text-decoration: none;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 0.85rem;
}

.legal-back:hover {
color: #fff;
}

@media (max-width: 560px) {
.legal-table,
.legal-table tbody,
.legal-table tr,
.legal-table td {
display: block;
width: 100%;
}

.legal-table thead {
display: none;
}

.legal-table tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
padding: 8px 0;
}

.legal-table td {
border: none;
padding: 4px 0;
}
}