/*
   Apex Studio
   Palette sampled directly from the logo: #0D131D, #FFFFFF, #1F79F1.

   No web fonts are loaded. Both apps are local-first and make a point of not
   phoning home, so a site that pulls fonts from a third party on every visit
   would contradict the thing it is describing. The stack below leads with
   Segoe UI Variable, which is what Windows 11 renders natively, and both
   products are Windows apps.
*/

:root {
    --ink: #0D131D;
    --surface: #131B27;
    --surface-raised: #18222F;
    --line: #23303F;
    --white: #FFFFFF;
    --text: #E7ECF3;
    --text-dim: #93A1B4;
    --accent: #1F79F1;
    --accent-bright: #4E9AF7;

    --measure: 68ch;
    --shell: 1100px;
    --radius: 10px;

    --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI",
            system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI Variable",
                    "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 24px;
}

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

:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Header */

.masthead {
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: rgba(13, 19, 29, 0.92);
    backdrop-filter: blur(10px);
    z-index: 10;
}

.masthead .shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 68px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; color: var(--white); }
.brand img { width: 30px; height: 30px; border-radius: 7px; display: block; }

.masthead nav {
    display: flex;
    gap: 24px;
    font-size: 15px;
}
.masthead nav a { color: var(--text-dim); }
.masthead nav a:hover { color: var(--white); text-decoration: none; }

/* The chevron rule.
   The logo is a nested peak, so section breaks reuse that same angle rather
   than a plain horizontal line. This is the one repeated motif on the site. */

.peak {
    width: 26px;
    height: 9px;
    display: block;
    margin-bottom: 18px;
}
.peak path { fill: none; stroke: var(--accent); stroke-width: 2.4; }

/* Hero */

.hero { padding: 96px 0 72px; }

.hero-mark {
    width: 92px;
    height: 92px;
    border-radius: 20px;
    display: block;
    margin-bottom: 30px;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 18px;
    max-width: 18ch;
}

.hero p {
    font-size: 1.15rem;
    color: var(--text-dim);
    margin: 0;
    max-width: 54ch;
}

.eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    font-weight: 600;
    margin: 0 0 14px;
}

/* App cards */

section { padding: 64px 0; }

h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0 0 14px;
    font-weight: 650;
}

h3 {
    font-family: var(--font-display);
    font-size: 1.18rem;
    color: var(--white);
    margin: 0 0 8px;
    font-weight: 620;
}

.apps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 34px;
}

.app-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    color: inherit;
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.app-card:hover {
    text-decoration: none;
    border-color: var(--accent);
    background: var(--surface-raised);
    transform: translateY(-3px);
}

.app-card img {
    width: 62px;
    height: 62px;
    border-radius: 13px;
    display: block;
    margin-bottom: 20px;
}

.app-card h3 { margin-bottom: 6px; }

.app-card p {
    color: var(--text-dim);
    margin: 0 0 18px;
    font-size: 0.98rem;
}

.meta {
    font-size: 13px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.tag {
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 3px 11px;
    font-size: 12px;
    color: var(--text-dim);
}
.tag.live { color: var(--accent-bright); border-color: rgba(31, 121, 241, 0.45); }

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--accent);
    color: var(--white);
    font-weight: 600;
    font-size: 0.98rem;
    padding: 13px 24px;
    border-radius: 8px;
    transition: background 160ms ease;
}
.btn:hover { background: var(--accent-bright); text-decoration: none; }

.btn.ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
}
.btn.ghost:hover { background: var(--surface-raised); border-color: var(--accent); }

.btn-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 30px;
}

.price-note { font-size: 0.95rem; color: var(--text-dim); }

/* App page hero */

.app-hero {
    padding: 84px 0 56px;
    border-bottom: 1px solid var(--line);
}
.app-hero img.icon {
    width: 84px;
    height: 84px;
    border-radius: 18px;
    display: block;
    margin-bottom: 26px;
}
.app-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5vw, 3rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--white);
    margin: 0 0 16px;
    max-width: 20ch;
}
.app-hero .lede {
    font-size: 1.12rem;
    color: var(--text-dim);
    max-width: 58ch;
    margin: 0;
}

/* Screenshots */

.shot { margin: 0 0 58px; }
.shot img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.shot figcaption {
    margin-top: 13px;
    font-size: 0.95rem;
    color: var(--text-dim);
}

/* Feature grid */

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px 34px;
    margin-top: 34px;
}
.features p { color: var(--text-dim); margin: 0; font-size: 0.97rem; }

/* Plain lists */

ul.plain { padding-left: 20px; margin: 16px 0; color: var(--text-dim); }
ul.plain li { margin-bottom: 9px; }

/* Prose, used by the privacy pages */

.prose { max-width: var(--measure); padding-bottom: 40px; }
.prose h2 { margin-top: 44px; font-size: 1.3rem; }
.prose p { color: var(--text-dim); }
.prose code {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.88em;
    font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
    color: var(--text);
}

.callout {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 22px 26px;
    margin: 30px 0;
}
.callout p { margin: 0; color: var(--text); }
.callout strong { color: var(--white); }

.updated { font-size: 0.9rem; color: var(--text-dim); margin-top: 6px; }

/* Footer */

footer {
    border-top: 1px solid var(--line);
    padding: 40px 0 56px;
    margin-top: 40px;
}
footer .shell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
footer .links { display: flex; gap: 22px; font-size: 0.93rem; }
footer .links a { color: var(--text-dim); }
footer .links a:hover { color: var(--white); }
footer .copy { font-size: 0.88rem; color: var(--text-dim); }

@media (max-width: 640px) {
    body { font-size: 16px; }
    .hero { padding: 64px 0 48px; }
    section { padding: 48px 0; }
    .masthead nav { gap: 16px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}