/*
 * Today I… marketing site styles.
 *
 * Color tokens mirror the app's design system (specs/_design-system.md):
 * warm parchment background, near-black warm text, muted indigo accent
 * used sparingly. Typography defaults to ui-serif (New York on Apple
 * platforms, Georgia elsewhere) — chosen to read like a notebook entry,
 * not a SaaS landing page.
 *
 * Per app constraints: no animation, no celebratory styling, no
 * progress / streak / goal flourishes.
 */

:root {
    --bg: #F6F1E8;
    --surface: #EFE6D8;
    --surface-2: #E7DCCB;
    --text-primary: #1C1B18;
    --text-secondary: #5A544B;
    --text-tertiary: #8B8276;
    --divider: #D7CBBB;
    --accent: #3F4C9D;
    --accent-soft: #D6DBF5;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #141311;
        --surface: #1C1A17;
        --surface-2: #25221D;
        --text-primary: #F2EEE6;
        --text-secondary: #C8C1B6;
        --text-tertiary: #9F968A;
        --divider: #2E2A24;
        --accent: #A9B2FF;
        --accent-soft: #2A2E44;
    }
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    max-width: 580px;
    margin: 0 auto;
    padding: 7vh 28px 12vh;
}

/* ---------- Hero ---------- */

.hero {
    /* Generous breathing room around the seam below the subtitle —
       previously the rule sat right under the platforms line and read
       as abrupt. */
    margin-bottom: 7vh;
    padding-bottom: 6vh;
    border-bottom: 1px solid var(--divider);
}

/* Thin typographic mark above the title — replaces the app icon in the
   hero (the icon now lives next to the App Store CTA, where its
   "installable software" identity is most relevant). */
.hero-rule {
    display: block;
    width: 44px;
    height: 1px;
    margin: 0 0 1.5em;
    background: var(--text-tertiary);
    opacity: 0.55;
}

.hero h1 {
    font-size: 2.4em;
    font-weight: 600;
    margin: 0 0 0.4em;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.hero .positioning {
    font-size: 1.15em;
    color: var(--text-primary);
    margin: 0 0 0.6em;
}

.hero .platforms {
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}

/* ---------- Prose sections ---------- */

.prose {
    margin: 4.5vh 0;
}

.prose h2 {
    font-size: 1.35em;
    font-weight: 600;
    margin: 0 0 0.6em;
    color: var(--text-primary);
    letter-spacing: -0.005em;
}

.prose p {
    margin: 0 0 0.9em;
    color: var(--text-primary);
}

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

.prose code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: var(--surface);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--text-primary);
    border: 1px solid var(--divider);
}

/* The three quiet marks under the "settles at three" section.
   Static — never animate, per app's motion philosophy. Color is
   text-tertiary (warm gray) rather than the indigo accent: per
   the app's design system, accent is reserved for focus and
   selection — never decoration. */
.three-marks {
    display: flex;
    gap: 14px;
    margin-top: 1.6em;
    padding-top: 1.6em;
    border-top: 1px solid var(--divider);
    justify-content: flex-start;
}

.three-marks span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-tertiary);
    opacity: 0.7;
}

/* ---------- Download ---------- */

.download {
    text-align: center;
    margin-top: 8vh;
    padding-top: 4vh;
    border-top: 1px solid var(--divider);
}

/* App icon lives here, anchoring the "this is an installable app"
   moment right above the CTA. macOS-icon corner curve, very subtle
   shadow so it sits in the page without floating.
   Belt-and-suspenders centering: block + auto margins, plus the
   parent's text-align: center already handles the horizontal axis. */
.download .app-icon {
    display: block;
    width: 72px;
    height: 72px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.4em;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cta {
    display: inline-block;
    padding: 0.65em 1.7em;
    background: var(--text-primary);
    color: var(--bg);
    border-radius: 999px;
    text-decoration: none;
    font-family: ui-serif, 'Iowan Old Style', Georgia, serif;
    font-size: 1em;
    font-weight: 500;
    border: none;
}

.cta:hover {
    background: var(--accent);
    color: var(--bg);
}

.small {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-top: 1em;
    font-style: italic;
}

/* ---------- Links ---------- */

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-soft);
    transition: border-color 120ms ease-out;
}

a:hover {
    border-bottom-color: var(--accent);
}

/* ---------- Footer ---------- */

footer {
    margin-top: 8vh;
    padding-top: 3vh;
    border-top: 1px solid var(--divider);
    color: var(--text-secondary);
    font-size: 0.9em;
    text-align: center;
}

footer a {
    color: var(--text-secondary);
    border-bottom: none;
}

footer a:hover {
    color: var(--text-primary);
    border-bottom: none;
}

footer span {
    margin: 0 0.7em;
    color: var(--text-tertiary);
}

/* ---------- Help / FAQ ---------- */

.faq {
    margin: 4vh 0;
}

.faq dt {
    font-weight: 600;
    margin-top: 2em;
    margin-bottom: 0.4em;
    color: var(--text-primary);
}

.faq dt:first-child {
    margin-top: 0;
}

.faq dd {
    margin: 0;
    color: var(--text-primary);
}

/* When an answer has multiple paragraphs / a list, tighten spacing so it
   reads like prose, not a stack of boxes. */
.faq dd > p {
    margin: 0 0 0.7em 0;
}
.faq dd > p:last-child {
    margin-bottom: 0;
}
.faq dd ul {
    margin: 0.4em 0 0.7em;
    padding-left: 1.4em;
}
.faq dd li {
    margin: 0.15em 0;
}

.faq dd a {
    border-bottom-color: var(--accent-soft);
}

.back {
    margin-top: 6vh;
    padding-top: 3vh;
    border-top: 1px solid var(--divider);
    color: var(--text-secondary);
    font-size: 0.95em;
}

.back a {
    color: var(--text-secondary);
    border-bottom: none;
}

.back a:hover {
    color: var(--text-primary);
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
    html, body {
        font-size: 17px;
    }
    main {
        padding: 5vh 22px 8vh;
    }
    .hero h1 {
        font-size: 2.1em;
    }
}