/* Shared styling for the legal pages (terms.html, privacy.html).
These are read mostly inside the app's webview on a phone, so the type is
sized for that first: a large title and body copy at 17px with room to
breathe. The page carries no header of its own — the app supplies one, and
the background matches the app's so its gradient fades into the page. */
:root {
--ink: #141412;
--muted: #757C8D;
--paper: #F4F4F2;
--primary: #FF385C;
--line: rgba(117, 124, 141, .18);
}
* { margin: 0; padding: 0; box-sizing: border-box }
/* The overscroll/bounce area takes its colour from , not — leave
this out and rubber-banding in the app's webview flashes white. */
html { background: var(--paper) }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: var(--paper);
color: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.wrap {
max-width: 720px;
margin: 0 auto;
padding: 8px 24px 72px;
}
h1 {
font-size: clamp(34px, 8vw, 46px);
line-height: 1.1;
letter-spacing: -1px;
font-weight: 800;
}
.date {
color: var(--muted);
font-size: 17px;
margin-top: 14px;
margin-bottom: 44px;
}
h2 {
font-size: clamp(22px, 5vw, 28px);
letter-spacing: -.5px;
font-weight: 800;
margin: 44px 0 14px;
}
p, li {
font-size: 17px;
color: #3c3f45;
}
p + p { margin-top: 14px }
ul {
padding-left: 22px;
margin: 10px 0;
}
li { margin-bottom: 10px }
li:last-child { margin-bottom: 0 }
a { color: var(--primary) }
.footnote {
margin-top: 48px;
padding-top: 20px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 15px;
}