/*
 * Shared chrome for the privacy policy, terms of use and data pages.
 * Colours are the app's "Snow" theme (assets/themes/themes.json) so the legal
 * pages read as the same product as the landing page.
 */
@font-face {
    font-family: 'Fredoka';
    src: url('/fonts/Fredoka.ttf') format('truetype-variations');
    font-weight: 300 700;
    font-display: swap;
}

@font-face {
    font-family: 'Titan One';
    src: url('/fonts/TitanOne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

:root {
    --bg: #FFFFFF;
    --bg-end: #E8EEF6;
    --panel: #FFFFFF;
    --line: #C9D2E0;
    --ink: #14181F;
    --accent: #0D6EBF;
    --accent-deep: #0D47A1;
    --muted: #5A6478;
    --warn: #B26A00;
    --shadow: rgba(20, 40, 80, .1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(13, 110, 191, .09), transparent 65%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-end) 60%) fixed;
    background-color: var(--bg-end);
    color: var(--ink);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

/* ---- Header ---- */
header {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: .9rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: 'Titan One', 'Fredoka', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-deep);
    text-decoration: none;
    letter-spacing: .5px;
}

.logo img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

nav a {
    margin-left: 1.25rem;
    text-decoration: none;
    color: var(--muted);
    font-weight: 500;
    transition: color .2s;
}

nav a:hover, nav a:focus-visible { color: var(--accent); }

/* ---- Document ---- */
.container {
    max-width: 900px;
    margin: 3rem auto 0;
    padding: 0 1.5rem;
}

.doc {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 18px 44px var(--shadow);
    /* The support address is the only unbroken string here; let it wrap
       rather than widen the page on a narrow phone. */
    overflow-wrap: anywhere;
}

h1 {
    font-family: 'Titan One', sans-serif;
    font-weight: 400;
    font-size: clamp(1.7rem, 4.5vw, 2.3rem);
    line-height: 1.25;
    text-align: center;
    letter-spacing: .5px;
    color: var(--accent-deep);
}

.last-updated {
    text-align: center;
    color: var(--muted);
    font-size: .9rem;
    margin-top: .75rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2.25rem;
}

h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: 2.5rem;
    margin-bottom: .75rem;
}

h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent);
    margin-top: 1.75rem;
    margin-bottom: .5rem;
}

p { margin-bottom: 1rem; color: var(--muted); }

.doc > p:first-of-type { color: var(--ink); }

ul, ol { margin: 0 0 1.25rem 1.5rem; }

li { margin-bottom: .5rem; color: var(--muted); }

li::marker { color: var(--accent); }

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

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

a:hover { text-decoration: none; }

.callout {
    background: #EEF4FB;
    border: 1px solid #CFE0F5;
    border-left: 4px solid var(--accent);
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin: 1.75rem 0;
}

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

.callout.warn {
    background: #FDF4E6;
    border-color: #F0DDBC;
    border-left-color: var(--warn);
}

.steps {
    counter-reset: step;
    list-style: none;
    margin-left: 0;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding-left: 2.75rem;
    margin-bottom: 1rem;
}

.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: .15rem;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: #E6EDF7;
    border: 1px solid #AFCDEF;
    color: var(--accent-deep);
    font-size: .85rem;
    font-weight: 600;
    display: grid;
    place-items: center;
    line-height: 1;
}

.back-row { margin-top: 3rem; text-align: center; }

.back-button {
    display: inline-block;
    /* Every stop stays dark enough for white text to clear AA at this size. */
    background: linear-gradient(180deg, #1C77C9, var(--accent) 45%, #0A579A);
    color: #FFFFFF;
    padding: .7rem 2rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 0 #0A4F8B, 0 8px 18px rgba(13, 110, 191, .25);
    transition: transform .12s, box-shadow .12s;
}

.back-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #0A4F8B, 0 12px 24px rgba(13, 110, 191, .3);
}

/* ---- Footer ---- */
footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    text-align: center;
    padding: 2.5rem 1.5rem;
    margin-top: 4rem;
    font-size: .9rem;
}

footer p { color: var(--muted); margin-bottom: .4rem; }

.footer-links { margin-top: .9rem; }

.footer-links a { text-decoration: none; margin: 0 .5rem; }

.footer-links a:hover { text-decoration: underline; }

@media (max-width: 720px) {
    header { padding: .8rem 1rem; }
    .header-content { justify-content: center; }
    nav a { margin: 0 .55rem; }
    .container { margin-top: 1.75rem; padding: 0 1rem; }
    .doc { padding: 1.75rem 1.35rem; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}