@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: #102033;
    --page-bg: #E4ECF5;
    --panel: rgba(255, 255, 255, .45);
    --link: #095C7A;
    --link-hover: #033E55;
    --border: rgba(16, 32, 51, .92);
    --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 .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: 22px 0; }
.hero-section { padding-top: 30px; }
.download-section { padding-top: 8px; padding-bottom: 12px; }
.content-section { padding-top: 30px; padding-bottom: 32px; }
.why-section, .feature-overview, .faq-section { padding-top: 34px; padding-bottom: 40px; }

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;
    border-radius: 10%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .28);
    vertical-align: middle;
}

.hero-screenshot {
    display: block;
    width: min(95vw, 980px);
    height: auto;
    margin: 1.4rem auto 0;
    border-radius: 8px;
    filter: drop-shadow(0 16px 28px rgba(16, 32, 51, .22));
}

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

.platform-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.why-list li, .pro-list li, .platform-list li {
    min-height: 100%;
    padding: 1.05rem 1.15rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    font-size: 1.08rem;
}

.server-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 880px;
    margin: 1.4rem auto 0;
}

.server-grid div {
    padding: 1rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: #F7FAFD;
    text-align: left;
}

.server-grid span, .server-grid strong, .server-grid small { display: block; }
.server-grid span { font-weight: 700; }
.server-grid strong { margin-top: .5rem; font-size: 2rem; }
.server-grid small { color: rgba(16, 32, 51, .72); font-size: 1rem; }

.widget-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    max-width: 1040px;
    margin: 1.3rem auto 0;
}

.widget-gallery img {
    width: auto;
    max-width: min(95vw, 420px);
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(16, 32, 51, .16);
}

.widget-gallery img[src*="android-widget"] { max-width: min(95vw, 460px); }

.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 var(--border);
    border-radius: 8px;
    background: var(--panel);
    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, .platform-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, .platform-list, .server-grid { grid-template-columns: 1fr; }
    h1, h2 { font-size: 42px; overflow-wrap: break-word; }
    p { font-size: 20px; }
}