/* Better's site.
 *
 * The same surfaces the app uses, so the two do not feel like different products:
 * the system grouped background with white cards in light, black with #1C1C1E in
 * dark. SF Pro through the system stack, never a webfont, because the app cannot use
 * one either and the two should read the same.
 */

:root {
    --ground: #f2f2f7;
    --surface: #ffffff;
    --ink: #000000;
    --ink-secondary: rgba(60, 60, 67, 0.6);
    --ink-tertiary: rgba(60, 60, 67, 0.3);
    --rule: rgba(60, 60, 67, 0.18);
    --accent: #007aff;
    --radius: 20px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ground: #000000;
        --surface: #1c1c1e;
        --ink: #ffffff;
        --ink-secondary: rgba(235, 235, 245, 0.6);
        --ink-tertiary: rgba(235, 235, 245, 0.3);
        --rule: rgba(235, 235, 245, 0.18);
        --accent: #0a84ff;
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    /* ui-rounded is SF Rounded on Apple platforms and falls through everywhere else,
       which is the same face the app uses. */
    font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded",
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* The homepage: one screen, nothing below it. */
.hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    gap: 0;
}

.hero .icon {
    width: 104px;
    height: 104px;
    border-radius: 23.5%;
    display: block;
    margin-bottom: 28px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.hero h1 {
    font-size: clamp(34px, 8vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.022em;
    font-weight: 700;
    margin: 0 0 14px;
}

.hero p {
    font-size: clamp(17px, 2.4vw, 21px);
    line-height: 1.42;
    color: var(--ink-secondary);
    max-width: 30ch;
    margin: 0;
    text-wrap: balance;
}

.hero .status {
    margin-top: 30px;
    font-size: 15px;
    color: var(--ink-tertiary);
}

.hero footer {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    justify-content: center;
    font-size: 14px;
    color: var(--ink-tertiary);
    padding: 0 24px;
}

.hero footer a { color: var(--ink-secondary); }

/* Legal pages: a single column, readable, nothing decorative. */
.page {
    max-width: 44rem;
    margin: 0 auto;
    padding: 56px 24px 96px;
}

.page nav {
    font-size: 15px;
    margin-bottom: 40px;
}

.page h1 {
    font-size: clamp(30px, 6vw, 40px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 6px;
}

.page .updated {
    color: var(--ink-tertiary);
    font-size: 15px;
    margin: 0 0 36px;
}

.page h2 {
    font-size: 22px;
    letter-spacing: -0.01em;
    margin: 40px 0 10px;
}

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

.page ul { padding-left: 1.2em; }
.page li { margin-bottom: 8px; }

.page .summary {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin: 0 0 8px;
}

.page .summary h2 { margin-top: 0; }
.page .summary p:last-child { margin-bottom: 0; }

.page hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 48px 0 0;
}

.page footer {
    margin-top: 24px;
    font-size: 14px;
    color: var(--ink-tertiary);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.page footer a { color: var(--ink-secondary); }

code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.92em;
    background: var(--surface);
    padding: 1px 5px;
    border-radius: 5px;
}