@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/dm-sans.woff2) format('woff2');
}

@font-face {
    font-family: 'DM Serif Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/dm-serif-display.woff2) format('woff2');
}

:root {
    --text: #142033;
    --page-bg: #D7E2F4;
    --link: #164DA0;
    --link-hover: #082A61;
    --gumroad-logo: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU3IiBoZWlnaHQ9IjIyIiB2aWV3Qm94PSIwIDAgMTU3IDIyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOTMuMjkyOSAwLjc3ODMyQzkwLjA1MDIgMC43NzgzMiA4Ni44ODAxIDMuNTgzMjYgODYuNTE1OCA3LjYzNjEzVjEuMTEyNDNIODEuODU4OVYyMC43ODNIODYuNTcyN1YxMS4yNjE3Qzg2LjU3MjcgOC41OTQ1MyA4OC41NTE2IDQuODMyMTggOTMuMjkyOSA0LjgzMjE4VjAuNzc4MzJaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTQyLjc3OCAxNy42MzQxVjQuMTU3MzlIMTQ1LjUwOUMxNDkuMTUgNC4xNTczOSAxNTIuMTA4IDYuMzMxMDUgMTUyLjEwOCAxMC43ODcxQzE1Mi4xMDggMTUuMjQzMSAxNDkuMTUgMTcuNjM0MSAxNDUuNTA5IDE3LjYzNDFIMTQyLjc3OFpNMTM4LjExMyAyMC43ODU5SDE0Ni4wNzhDMTUwLjk3IDIwLjc4NTkgMTU3IDE3Ljc0MjggMTU3IDEwLjc4NzFDMTU3IDMuOTQwMDIgMTUwLjk3IDEuMTE0MjYgMTQ2LjA3OCAxLjExNDI2SDEzOC4xMTNWMjAuNzg1OVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMjAuMjI0IDExLjAwNThDMTIwLjIyNCA3LjQxOTIyIDEyMi4xNTggNC40ODQ3NyAxMjUuMzQ0IDQuNDg0NzdDMTI4LjQxNiA0LjQ4NDc3IDEzMC4xMjMgNy40MTkyMiAxMzAuMTIzIDExLjAwNThDMTMwLjEyMyAxNC41OTIzIDEyOC40MTYgMTcuNTI2NyAxMjUuMzQ0IDE3LjUyNjdDMTIyLjE1OCAxNy41MjY3IDEyMC4yMjQgMTQuNTkyMyAxMjAuMjI0IDExLjAwNThaTTExNS40NDUgMTEuMjIzMUMxMTUuNDQ1IDE3LjA5MiAxMTguNjMxIDIxLjIyMiAxMjMuNjM3IDIxLjIyMkMxMjcuMjc4IDIxLjIyMiAxMjkuNDQgMTguOTM5NiAxMzAuNTc4IDE1LjI0NDRWMjAuNzg3MkgxMzUuMjQyVjEuMTE1NkgxMzAuNTc4VjYuMzMyMzlDMTI5LjU1NCAyLjg1NDUzIDEyNy4zOTIgMC43ODk1NTEgMTIzLjk3OSAwLjc4OTU1MUMxMTguODU5IDAuNzg5NTUxIDExNS40NDUgNS4yNDU1NiAxMTUuNDQ1IDExLjIyMzFaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNOS4yMTU5OSAyMS4yMjJDMy40MTMzMyAyMS4yMjIgMCAxNi43NjYgMCAxMS4yMjMxQzAgNS40NjI5MiAzLjc1NDY2IDAuNzg5NTUxIDEwLjkyMjcgMC43ODk1NTFDMTguMzE4MiAwLjc4OTU1MSAyMC44MjEzIDUuNTcxNjEgMjAuOTM1MSA4LjI4ODY4SDE1LjU4NzVDMTUuNDczOCA2Ljc2NzEyIDE0LjEwODQgNC40ODQ3OCAxMC44MDg5IDQuNDg0NzhDNy4yODE3NyA0LjQ4NDc4IDUuMDA2MjIgNy40MTkyMiA1LjAwNjIyIDExLjAwNThDNS4wMDYyMiAxNC41OTIzIDcuMjgxNzcgMTcuNTI2NyAxMC44MDg5IDE3LjUyNjdDMTMuOTk0NiAxNy41MjY3IDE1LjM2IDE1LjEzNTcgMTUuOTI4OSAxMi43NDQ3SDEwLjgwODlWMTAuNzg4NEgyMS41NTI0VjIwLjc4NzJIMTYuODM5MVYxNC40ODM2QzE2LjQ5NzggMTYuNzY2IDE1LjAxODYgMjEuMjIyIDkuMjE1OTkgMjEuMjIyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTMxLjEwNzkgMjEuMjIwNkMyNi42NzA2IDIxLjIyMDYgMjMuOTM5OSAxOC4zOTQ5IDIzLjkzOTkgMTIuNzQzM1YxLjExNDI2SDI4LjcxODZWMTIuNzQzM0MyOC43MTg2IDE1LjY3NzggMzAuMTk3NyAxNy4wOTA3IDMyLjcwMDggMTcuMDkwN0MzNy41OTMzIDE3LjA5MDcgMzkuNDEzNyAxMS4zMzA1IDM5LjQxMzcgNy4zMDkxOVYxLjExNDI2SDQ0LjE5MjRWMjAuNzg1OUgzOS41Mjc1VjEzLjUwNDFDMzguNjE3MyAxNy41MjU0IDM2LjExNDEgMjEuMjIwNiAzMS4xMDc5IDIxLjIyMDZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNzIuNzQxMSAwLjc3ODMyQzY4LjY2NDMgMC43NzgzMiA2Ni4wOTI0IDQuNTQwMzcgNjUuMjUyOSA4LjAxODg0QzY1LjEwOTMgMy4zNTcyNyA2Mi43MDk1IDAuNzc4MzIgNTguODY5NyAwLjc3ODMyQzU1LjU1MjIgMC43NzgzMiA1Mi40NzQzIDMuNjA0MzUgNTEuNjc1IDguMDc1MTJWMS4xMTI5Nkg0Ny4wMTY2VjIwLjc4NTFINTEuNzM0N1YxMy43MzI3QzUxLjczNDcgMTEuOTg0MyA1Mi40OTc4IDQuODA5MzkgNTcuMjQ3MyA0LjgwOTM5QzYwLjMyNDEgNC44MDkzOSA2MC42NDQ5IDcuNDYwNDMgNjAuNjQ0OSAxMS4wODQyVjIwLjc4NTFINjUuMzYwN1YxMy43MzI3QzY1LjM2MDcgMTEuOTg0MyA2Ni4xNTU0IDQuODA5MzkgNzAuOTA0OSA0LjgwOTM5QzczLjk3OSA0LjgwOTM5IDc0LjI5NjcgNy40NjA0MyA3NC4yOTY3IDExLjA4NDJWMjAuNzg1MUg3OS4wMTkxVjkuMTQ5MTNDNzkuMDQwOCAzLjU2Njg3IDc2Ljk3NzQgMC43NzgzMiA3Mi43NDExIDAuNzc4MzJaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTAzLjQxNSAwLjc3ODMyQzk3LjMwNjUgMC43NzgzMiA5My4xNjggNS4zNTMxMSA5My4xNjggMTAuOTk5N0M5My4xNjggMTcuMjIxNCA5Ny4xMDQxIDIxLjIyMDkgMTAzLjQxNSAyMS4yMjA5QzEwOS41MjMgMjEuMjIwOSAxMTMuNzM1IDE2LjY0NjMgMTEzLjczNSAxMC45OTk3QzExMy43MzUgNC43NzggMTA5LjcyMiAwLjc3ODMyIDEwMy40MTUgMC43NzgzMlpNMTAzLjQxNSAxNy43Mzg5Qzk5Ljg1ODYgMTcuNzM4OSA5Ny41NTU0IDE0Ljg2MzQgOTcuNTU1NCAxMC45OTk3Qzk3LjU1NTQgNy4xMzU5NyA5OS44NjY4IDQuMjYwMzMgMTAzLjQxNSA0LjI2MDMzQzEwNi45NjIgNC4yNjAzMyAxMDkuMTgxIDcuMTM1OTcgMTA5LjE4MSAxMC45OTk3QzEwOS4xODEgMTQuODYzNCAxMDYuOTYgMTcuNzM4OSAxMDMuNDE1IDE3LjczODlaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
}

*, ::before, ::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }

body {
    margin: 0;
    color: var(--text);
    background: var(--page-bg);
    font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    text-align: center;
}

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 0.75rem;
}

@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

section { padding: 20px 0; }
.hero-section { padding-top: 28px; }
.download-section { padding-top: 8px; padding-bottom: 12px; }
.content-section { padding-top: 26px; padding-bottom: 26px; }
.feature-overview, .faq-section { padding-top: 32px; padding-bottom: 38px; }

h1, h2 {
    margin: 0 0 1rem;
    font-family: 'DM Serif Display', Georgia, serif;
    font-weight: 400;
    line-height: 1.15;
}

h1, h2 { font-size: 75px; }
p { margin: 0 auto 1rem; max-width: 920px; font-size: 22px; }
a {
    color: var(--link);
    text-decoration-thickness: .08em;
    text-underline-offset: .12em;
}
a:hover { color: var(--link-hover); }

.app-header { margin: 34px 0 18px; }
.app-header h1 { display: inline-block; margin-bottom: 0; vertical-align: middle; }
.app-header > * { margin-left: 10px; margin-right: 10px; }
.app-header img {
    width: 100px;
    height: 100px;
    padding: 0;
    border-radius: 10%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
    vertical-align: middle;
}

img {
    width: 95%;
    height: auto;
    padding-top: 0;
    vertical-align: middle;
}

.screenshot {
    display: block;
    max-width: 1180px;
    margin: 14px auto 0;
}

.blue {
    --link: #164DA0;
    --link-hover: #082A61;
    background-color: #D7E2F4;
    color: #142033;
}

.green {
    --link: #164DA0;
    --link-hover: #082A61;
    background-color: #D7E2F4;
    color: #142033;
}

.yellow {
    --link: #164DA0;
    --link-hover: #082A61;
    background-color: #D7E2F4;
    color: #142033;
}

.coral {
    --link: #164DA0;
    --link-hover: #082A61;
    background-color: #D7E2F4;
    color: #142033;
}

.rose {
    --link: #164DA0;
    --link-hover: #082A61;
    background-color: #D7E2F4;
    color: #142033;
}

.why-list, .pro-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 1180px;
    margin: 1.5rem auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.why-list li, .pro-list li {
    min-height: 100%;
    padding: 1.1rem 1.2rem;
    border: 2px solid currentColor;
    border-radius: 8px;
    background: rgba(255, 255, 255, .36);
    font-size: 1.08rem;
}

.feature-overview ul {
    column-count: 2;
    column-gap: 5rem;
    max-width: 1000px;
    margin: 1rem auto;
    text-align: left;
}

.feature-overview li { margin: .5rem 0; font-size: 1.08rem; }

.faq-list {
    max-width: 980px;
    margin: 1rem auto 0;
}

.faq-section details {
    margin: .75rem 0;
    border: 2px solid currentColor;
    border-radius: 8px;
    background: rgba(255, 255, 255, .42);
    text-align: left;
}

.faq-section summary {
    position: relative;
    padding: .95rem 3rem .95rem 1.15rem;
    cursor: pointer;
    font-size: 1.08rem;
    font-weight: 700;
    list-style: none;
}

.faq-section summary::-webkit-details-marker { display: none; }

.faq-section summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 1.15rem;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
}

.faq-section details[open] summary::after { content: "-"; }

.faq-section details p {
    max-width: none;
    margin: 0;
    padding: 0 1.15rem 1rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.note {
    max-width: 920px;
    font-size: 1.05rem;
}

.btn {
    display: inline-block;
    margin: 0 0 4px;
    padding: .5rem 1rem;
    border: 1px solid #212529;
    border-radius: .3rem;
    color: #212529;
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1.5;
}

.btn:hover {
    color: #fff;
    background: #212529;
}

.storebadge {
    display: inline-block;
    height: 60px;
    margin: 4px;
    text-decoration: none;
    vertical-align: middle;
}

.storebadge img {
    width: auto;
    height: 60px;
    padding: 0;
}

.storebadge img[src*="/macos_badge_"] { width: 234.2px; }
.storebadge img[src*="/microsoft_badge_"] { width: 219.5px; }
.storebadge img[src*="/playstore_badge_"] { width: 202.5px; }
.storebadge img[src*="/ios_badge_"] { width: 180px; }

a.gumroad-button {
    display: inline-block !important;
    padding: 8px 16px !important;
    border: 1px solid #000 !important;
    border-radius: 4px !important;
    background: #000 !important;
    color: #fff !important;
    font-family: "Mabry Pro", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    transition: all .14s ease-out !important;
}

.gumroad-button-logo {
    display: inline-block !important;
    width: 93px !important;
    height: 13px !important;
    margin-bottom: -1px !important;
    background: #ff90e8 !important;
    -webkit-mask-image: var(--gumroad-logo) !important;
    mask-image: var(--gumroad-logo) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
}

a.gumroad-button:hover {
    transform: translate(-4px, -4px) !important;
    box-shadow: 4px 4px 0 #000 !important;
    color: #000 !important;
    background: #ff90e8 !important;
}

a.gumroad-button:hover .gumroad-button-logo { background: #000 !important; }
.storebadge:focus-visible, .btn:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

@media screen and (max-width: 991px) {
    h1, h2 { font-size: 50px; }
    .app-header img { width: 70px; height: 70px; }
    .why-list, .pro-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-overview ul { column-count: 1; }
}

@media screen and (max-width: 575px) {
    .why-list, .pro-list { grid-template-columns: 1fr; }
    h1, h2 { font-size: 42px; overflow-wrap: break-word; }
    p { font-size: 20px; }
}