/*
 * Shared styling for the privacy policy and terms.
 *
 * Deliberately plain. These are documents somebody reads once, usually because
 * a store made them, and occasionally because they are worried — and a page
 * that is worried-about should be easy to read, not designed at. Palette is
 * the app's own, so arriving here from the app does not feel like leaving it.
 */

:root {
    --pitch: #180010;
    --raised: #20051a;
    --surface: #330b29;
    --gold: #f9c861;
    --shadow-gold: #b5844c;
    --ink: #f6e8e4;
    --ink-dim: #c4a5b3;
    --ink-faint: #8e7280;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0 24px 96px;
    background: var(--pitch);
    color: var(--ink);
    font: 400 17px/1.65 Georgia, "Times New Roman", serif;
    -webkit-text-size-adjust: 100%;
}

main {
    max-width: 40rem;
    margin: 0 auto;
}

/* The word mark needs a light plate on this dark ground: measured, its chrome
   half sits at 1.38:1 against the page background, against a 3:1 minimum.
   Same treatment as the app -- see mobile/lib/widgets/logo.dart. */
.logo-plate {
    display: inline-block;
    background: var(--ink);
    border: 1px solid rgba(181, 132, 76, 0.35);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 0 0 28px;
    line-height: 0;
}

.logo-plate img {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
}

header {
    padding: 64px 0 8px;
}

.eyebrow {
    font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shadow-gold);
    margin: 0 0 18px;
}

h1 {
    font-size: 2.1rem;
    line-height: 1.15;
    margin: 0 0 12px;
    font-weight: 400;
}

h2 {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--gold);
    margin: 44px 0 12px;
}

h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 28px 0 8px;
}

p,
li {
    color: var(--ink-dim);
}

li {
    margin-bottom: 8px;
}

strong {
    color: var(--ink);
    font-weight: 700;
}

a {
    color: var(--gold);
}

.updated {
    color: var(--ink-faint);
    font: 400 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 0 0 8px;
}

/* For the "what we collect" list, where the point is scanning. */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
}

th,
td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--surface);
    vertical-align: top;
    color: var(--ink-dim);
}

th {
    color: var(--ink);
    font: 600 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.note {
    background: var(--raised);
    border-left: 3px solid var(--shadow-gold);
    padding: 16px 20px;
    margin: 28px 0;
    border-radius: 0 8px 8px 0;
}

.note p {
    margin: 0;
}

footer {
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid var(--surface);
    color: var(--ink-faint);
    font: 400 14px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

footer a {
    color: var(--shadow-gold);
}