/* Schematic — shared styles for the hosted pages.
   Mirrors AppTheme (see DESIGN.md): soft olive on warm paper, light only. */

:root {
    --accent: #6B8E23;
    --accent-secondary: #8A9A5B;
    --background: #F5F6EE;
    --background-secondary: #EAEDDF;
    --text-primary: #262A1A;
    --text-secondary: rgba(38, 42, 26, 0.62);
    --text-tertiary: rgba(38, 42, 26, 0.38);
    --hairline: rgba(38, 42, 26, 0.12);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--background);
    color: var(--text-primary);
    line-height: 1.6;
    padding: 32px 20px 64px;
    max-width: 680px;
    margin: 0 auto;
    -webkit-text-size-adjust: 100%;
}

h1 { font-size: 28px; margin-bottom: 8px; letter-spacing: -0.01em; }
h2 { font-size: 20px; margin: 36px 0 12px; }
h3 { font-size: 17px; margin: 22px 0 8px; }
p, li { font-size: 15px; margin-bottom: 12px; }
ul { padding-left: 20px; }
li { margin-bottom: 8px; }
strong { font-weight: 600; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.updated { font-size: 13px; color: var(--text-secondary); margin-bottom: 32px; }
.divider { border: none; border-top: 1px solid var(--hairline); margin: 36px 0; }

/* Masthead — the bolt mark, matching the app icon. */
.mark {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}
.mark svg { display: block; border-radius: 10px; }
.mark span {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Callout — used for the safety notice and the subscription summary. */
.note {
    background: var(--background-secondary);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 20px 0;
}
.note p:last-child, .note ul:last-child { margin-bottom: 0; }
.note ul { margin-bottom: 0; }

footer {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
    font-size: 13px;
    color: var(--text-secondary);
}
footer a { margin-right: 16px; }