/* Glint marketing site. Mirrors the app's Burnt Orange palette
 * so the website reads as "the same product" rather than a
 * separate brand. No Tailwind / no build step — single file,
 * scoped by sensible class names. */

:root {
    --bg-page:        #1a1a1a;   /* matches GlintTheme.bgPopSolid (dark) */
    --bg-card:        #232323;
    --rule:           #2f2f2f;

    --fg:             #f0efed;   /* matches GlintTheme.fg dark */
    --fg-2:           #b8b6b2;
    --fg-3:           #7e7c78;
    --fg-4:           #555350;

    --accent:         #e07a1f;   /* Burnt Orange */
    --accent-bg:      rgba(224, 122, 31, 0.13);
    --accent-fg:      #f48a2a;   /* lighter for readability */
    --good:           #5db075;
    --warn:           #d2a23b;
    --bad:            #d24747;

    --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;

    --r-card:  10px;
    --r-pill:  999px;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-page:    #fafaf8;
        --bg-card:    #f1efea;
        --rule:       #e6e3dd;
        --fg:         #1a1817;
        --fg-2:       #44423e;
        --fg-3:       #6f6c66;
        --fg-4:       #95918a;
        --accent-bg:  rgba(224, 122, 31, 0.10);
        --accent-fg:  #b35d12;
    }
}

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

body {
    background: var(--bg-page);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 24px;
}

/* — nav — */

.nav {
    border-bottom: 1px solid var(--rule);
    padding: 14px 0;
    position: sticky;
    top: 0;
    background: rgba(26,26,26,0.92);
    backdrop-filter: saturate(120%) blur(14px);
    z-index: 10;
}
.nav .container {
    display: flex; align-items: center; gap: 22px;
}
.nav .brand {
    font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
    color: var(--fg);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
}
.nav .brand .dot {
    /* Legacy dot kept for backwards compat. New pages use
       `.brand img.logo` which renders the actual app icon. */
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-bg);
}
/* SVG wordmark replaces the old text + accent dot. The asset
   already includes the "Glint" lettering so we drop the
   surrounding text label. Heights set in CSS keeps the lock-up
   crisp at any DPR. */
.nav .brand img.wordmark {
    height: 44px;
    width: auto;
    display: block;
}
.nav a.link {
    color: var(--fg-2); text-decoration: none; font-size: 14px;
}
.nav a.link:hover { color: var(--fg); }
.nav .spacer { flex: 1; }
.nav .cta {
    background: var(--accent); color: #1a1a1a;
    border-radius: var(--r-pill);
    padding: 7px 14px;
    font-weight: 600; font-size: 14px;
    text-decoration: none;
}

/* — hero — */

.hero {
    padding: 80px 0 56px;
    text-align: center;
}
.hero h1 {
    font-size: 52px; line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 20px;
    font-weight: 800;
}
.hero h1 em {
    font-style: normal;
    color: var(--accent-fg);
}
.hero p.tagline {
    font-size: 19px;
    color: var(--fg-2);
    max-width: 620px; margin: 0 auto 36px;
}
.hero .download-row {
    display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    border-radius: var(--r-pill);
    font-weight: 600; font-size: 15px;
    text-decoration: none;
    border: none; cursor: pointer;
}
.btn-primary {
    background: var(--accent); color: #1a1a1a;
}
.btn-secondary {
    background: var(--bg-card); color: var(--fg);
    border: 1px solid var(--rule);
}

/* — three-platform card grid — */

.platforms {
    padding: 36px 0 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.platforms .card {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--r-card);
    padding: 22px;
}
.platforms .card h3 {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--accent-fg);
    font-weight: 700;
    letter-spacing: 0.04em;
    /* Platform headings render Apple's branded names verbatim
       (macOS, iPhone, iPad) — uppercasing them produces "MACOS"
       / "IPHONE" / "IPAD", which Apple's identity guidelines
       explicitly call out as wrong. Other section headings
       elsewhere keep the uppercase mono treatment. */
    text-transform: none;
    font-family: var(--mono);
}
.platforms .card p {
    color: var(--fg-2);
    font-size: 14px;
    margin: 0;
}
@media (max-width: 720px) {
    .platforms { grid-template-columns: 1fr; }
    .hero h1 { font-size: 38px; }
    .hero p.tagline { font-size: 17px; }
}

/* — feature list (long-form prose pages) — */

.section {
    padding: 36px 0;
    border-top: 1px solid var(--rule);
}
.section h2 {
    font-size: 26px;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
}
.section h3 {
    font-size: 17px;
    margin: 28px 0 10px;
    color: var(--fg);
}
.section p, .section li {
    color: var(--fg-2);
    font-size: 15.5px;
}
.section ul { padding-left: 22px; }
.section li { margin: 6px 0; }
.section code {
    font-family: var(--mono);
    font-size: 13px;
    background: var(--bg-card);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--accent-fg);
}
.section pre {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--r-card);
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 13px;
    font-family: var(--mono);
    color: var(--fg);
    line-height: 1.5;
}
.section pre code {
    background: none; padding: 0; color: inherit;
}

/* — comparison table for upgrade page — */

.compare {
    width: 100%;
    border-collapse: collapse;
    margin-top: 18px;
    font-size: 14.5px;
}
.compare th, .compare td {
    border-bottom: 1px solid var(--rule);
    padding: 10px 12px;
    text-align: left;
}
.compare th {
    color: var(--fg-3); font-weight: 600;
    font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
}
.compare td.lite { color: var(--fg-3); }
.compare td.full { color: var(--accent-fg); font-weight: 600; }
.compare td.check { width: 90px; text-align: center; font-family: var(--mono); }

/* — footer — */

.footer {
    border-top: 1px solid var(--rule);
    padding: 36px 0 60px;
    color: var(--fg-3);
    font-size: 13px;
}
.footer .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}
.footer a { color: var(--fg-2); text-decoration: none; }
.footer a:hover { color: var(--fg); }