/* * Shared styling for the two legal pages. * * Framer has no page for either of these, so they are written by hand. The * colours are the exact tokens the scraped landing page defines on , and * the @font-face rules are lifted from its font CSS (latin and latin-ext, the * three weights these pages use), so both pages sit in the same typeface and * palette as the site they hang off without loading anything extra. */ @font-face { font-family: "Inter"; src: url("/assets/framerusercontent.com/assets/cRJyLNuTJR5jbyKzGi33wU9cqIQ.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF } @font-face { font-family: "Inter"; src: url("/assets/framerusercontent.com/assets/yDtI2UI8XcEg1W2je9XPN3Noo.woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD } @font-face { font-family: "Inter"; src: url("/assets/framerusercontent.com/assets/JeYwfuaPfZHQhEG8U5gtPDZ7WQ.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF } @font-face { font-family: "Inter"; src: url("/assets/framerusercontent.com/assets/GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD } @font-face { font-family: "Inter"; src: url("/assets/framerusercontent.com/assets/otTaNuNpVK4RbdlT7zDDdKvQBA.woff2"); font-display: swap; font-style: normal; font-weight: 500; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF } @font-face { font-family: "Inter"; src: url("/assets/framerusercontent.com/assets/UjlFhCnUjxhNfep4oYBPqnEssyo.woff2"); font-display: swap; font-style: normal; font-weight: 500; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD } :root { --kobo-green: #1a7a4a; --kobo-ink: #000; --kobo-muted: #787878; --kobo-paper: #fff; --kobo-page: #fafafa; --kobo-line: #f2f2f2; } * { box-sizing: border-box } html { color-scheme: light; -webkit-text-size-adjust: 100% } body { margin: 0; background: var(--kobo-page); color: var(--kobo-ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .wrap { max-width: 720px; margin: 0 auto; padding: 0 20px } /* Header ------------------------------------------------------------------ */ .top { border-bottom: 1px solid var(--kobo-line); background: var(--kobo-paper); } .top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px } .brand { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--kobo-ink); text-decoration: none; } .top a.back { font-size: 15px; color: var(--kobo-muted); text-decoration: none } .top a.back:hover { color: var(--kobo-ink) } /* Document ---------------------------------------------------------------- */ main { padding: 48px 0 72px } h1 { margin: 0 0 6px; font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; } .updated { margin: 0 0 40px; font-size: 15px; color: var(--kobo-muted) } h2 { margin: 40px 0 12px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; } h3 { margin: 26px 0 8px; font-size: 16px; font-weight: 600 } p, li { font-size: 16px; line-height: 1.65 } p { margin: 0 0 14px } ul { margin: 0 0 14px; padding-left: 22px } li { margin: 0 0 8px } a { color: var(--kobo-green) } strong { font-weight: 600 } /* A short lead paragraph under a heading, set apart from the body. */ .lead { padding: 16px 18px; margin: 0 0 20px; background: var(--kobo-paper); border: 1px solid var(--kobo-line); border-radius: 14px; } .lead p:last-child { margin: 0 } /* Who-gets-what table. Goes to stacked rows on a phone, where three columns of prose are unreadable. */ table { width: 100%; border-collapse: collapse; margin: 0 0 18px } th, td { padding: 12px 14px; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.5; border-bottom: 1px solid var(--kobo-line); } th { font-weight: 600; background: var(--kobo-paper) } @media (max-width: 599px) { h1 { font-size: 29px } main { padding: 36px 0 56px } table, thead, tbody, tr, th, td { display: block; width: 100% } thead { display: none } tr { padding: 14px 0; border-bottom: 1px solid var(--kobo-line) } th, td { padding: 2px 0; border: 0 } td::before { content: attr(data-label) ": "; font-weight: 600 } } /* Footer ------------------------------------------------------------------ */ .foot { border-top: 1px solid var(--kobo-line); background: var(--kobo-paper); padding: 28px 0; font-size: 15px; color: var(--kobo-muted); } .foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between } .foot nav { display: flex; flex-wrap: wrap; gap: 20px } .foot a { color: var(--kobo-muted); text-decoration: none } .foot a:hover { color: var(--kobo-ink) }