@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/dm-sans.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@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');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --text: #212529;
    --link: #0d6efd;
    --link-hover: #0a58ca;
    --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: #fff;
    font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.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: 15px 0; }
.section-padding { padding-top: 40px; padding-bottom: 40px; }
.hero-section { padding-top: 28px; }
.download-section { padding-top: 10px; padding-bottom: 6px; }
.download-section + main > section:first-child { padding-top: 28px; }
.content-section { padding-top: 34px; padding-bottom: 34px; }
.why-section { padding-top: 24px; padding-bottom: 20px; }
.faq-section { padding-top: 20px; padding-bottom: 35px; }

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

h3 { margin: 1.5rem 0 .35rem; font-size: 1.15rem; }
p { margin: 0 0 1rem; font-size: 22px; }
a { color: var(--link); text-decoration: underline; }
a:hover { color: var(--link-hover); }
ul { text-align: left; }
ul li { margin: .5rem 0; font-size: 1.1rem; }
button:focus:not(:focus-visible) { outline: 0; }
[role=button] { cursor: pointer; }

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

.app-header { margin: 35px 0 20px; }
.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);
}

.blue { --link: #0040c7; --link-hover: #00155f; background-color: #b8c4ff; color: #00208f; }
.purple { --link: #6a008f; --link-hover: #300042; background-color: #eab2ff; color: #500076; }
.red { --link: #8a111b; --link-hover: #3d0005; background-color: #ffb3ab; color: #680007; }
.yellow { --link: #6f4700; --link-hover: #241600; background-color: #feba32; color: #432c00; }
.blue2 { --link: #006b78; --link-hover: #002b31; background-color: #4fd8eb; color: #00363d; }
.green { --link: #466600; --link-hover: #1c2b00; background-color: #99cf46; color: #203600; }
.blue-purple { background: linear-gradient(to bottom, #b8c4ff, #eab2ff); }
.purple-red { background: linear-gradient(to bottom, #eab2ff, #ffb3ab); }
.red-yellow { background: linear-gradient(to bottom, #ffb3ab, #feba32); }
.yellow-blue2 { background: linear-gradient(to bottom, #feba32, #4fd8eb); }
.blue2-green { background: linear-gradient(to bottom, #4fd8eb, #99cf46); }
.green-blue { background: linear-gradient(to bottom, #99cf46, #b8c4ff); }

.why-section h2, .faq-section h2 { margin-bottom: 1.5rem; }
.why-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
}

.why-list li {
    padding: 1.1rem 1.2rem;
    border: 2px solid currentColor;
    border-radius: 18px;
    background: rgba(255, 255, 255, .12);
}

.feature-overview > .container > ul {
    column-count: 2;
    column-gap: 5rem;
    text-align: left;
}

.feature-overview > .container > ul ul { column-count: 1; }
.faq-section p { max-width: 850px; margin-left: auto; margin-right: auto; font-size: 1.05rem; line-height: 1.6; }
.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, .14); 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; }

.btn {
    display: inline-block;
    margin: 0 0 4px;
    padding: .375rem .75rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    background: transparent;
    font-size: 1rem;
    line-height: 1.5;
}

.btn-lg { padding: .5rem 1rem; border-radius: .3rem; font-size: 1.25rem; }
.btn-outline-dark { border-color: #212529; }
.btn-outline-dark:hover { color: #fff; background: #212529; border-color: #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*="/ios_badge_"] { width: 179.5px; }
.storebadge img[src*="/macos_badge_"] { width: 234.2px; }
.storebadge img[src*="/microsoft_badge_"] { width: 219.5px; }
.storebadge img[src*="/microsoft_badge_de"] { width: 249.5px; }
.storebadge img[src*="/playstore_badge_"] { width: 202.3px; }
.storebadge img[src*="/playstore_badge_pl"] { width: 202.8px; }

.storebadge:focus-visible, .btn:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

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; }

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

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