:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) { :root { color: white; background-color: #1e1e1e; } }

body { font-family: system-ui, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; font-weight: 300; font-size: 1.05rem; margin: 0; display: flex; flex-direction: column; min-height: 100vh; }

main { flex-grow: 1; }

a { color: #0068da; text-decoration: none; }

@media (prefers-color-scheme: dark) { a { color: #419cff; } }

h1, h2, h3, h4, h5, h6 { margin-top: 0; }

h1 { line-height: 1; font-size: 2.4rem; font-weight: 500; letter-spacing: -0.015em; }

h1.hero { font-size: 3rem; }

h2 { font-size: 1.8rem; font-weight: 500; margin-bottom: 0.5rem; }

h3 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; }

hr { border: 0; border-top: 1px solid #e6e6e6; }

@media (prefers-color-scheme: dark) { hr { border-color: #333437; } }

code { padding: 2px 8px; border-radius: 6px; border: 1px solid #cccccc; }

@media (prefers-color-scheme: dark) { code { border-color: #585858; } }

img.icon { width: 48px; height: 48px; margin: -8px; filter: invert(0.33) sepia(1) saturate(11) hue-rotate(185deg); }

@media (prefers-color-scheme: dark) { img.icon { filter: invert(0.42) sepia(2) saturate(5) hue-rotate(180deg); } }

img.large-icon { width: 64px; height: 64px; }

input { font-size: 1rem; }

@media (prefers-color-scheme: dark) { input { color: white; } }

input:focus { outline: none; }

input[type="email"] { background: none; border: none; border-radius: 0; border-bottom: 1px solid gray; padding: 13px 0; }

input[type="submit"], a.button, button { -webkit-appearance: none; appearance: none; background-color: #007aff; border: none; border-radius: 10px; padding: 14px 24px; color: white; cursor: pointer; }

button:disabled { background-color: #cccccc; cursor: inherit; }

@media (prefers-color-scheme: dark) { button:disabled { background-color: #585858; } }

.page-content { max-width: 800px; padding: 75px; margin: 0 auto; }

@media (max-width: 750px) { .page-content { padding: 25px; } }

.page-content.main-page { text-align: center; }

.page-content.main-page hr { width: 175px; height: 3px; border: none; background-color: black; margin-top: 2rem; }

@media (prefers-color-scheme: dark) { .page-content.main-page hr { background-color: white; } }

.narrow-width { max-width: 600px; margin-left: auto; margin-right: auto; }

.site-width { max-width: 1200px; padding: 0 75px; margin: 0 auto; }

@media (max-width: 750px) { .site-width { padding: 0 25px; } }

.centered { text-align: center; }

.flex-container { display: flex; align-items: center; justify-content: center; }

@media (max-width: 750px) { .flex-container { flex-direction: column; } }

section.row { padding-top: 100px; padding-bottom: 100px; }

@media (max-width: 750px) { section.row { padding-top: 75px; padding-bottom: 75px; } }

@media (min-width: 751px) { section.hero-row { padding-top: 75px; } }

section.hero-row picture, section.hero-row img { width: 100%; max-width: 1000px; }

section.gray-row { background-color: #f9f9f9; }

@media (prefers-color-scheme: dark) { section.gray-row { background-color: #2a2a2a; } }

div#announcement-banner { text-align: center; padding: 8px 10px; font-size: 0.8em; color: #272727; background-color: #f0f0f0; }

@media (prefers-color-scheme: dark) { div#announcement-banner { color: #dcdddd; background-color: #464646; } }

div#announcement-banner a { font-weight: bold; }

body > header { padding: 8px 0; font-size: 0.9em; position: sticky; top: 0; left: 0; right: 0; z-index: 99; transition: all 0.2s ease; border-bottom: 1px solid transparent; }

body > header.floating { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid #e6e6e6; background-color: rgba(255, 255, 255, 0.72); }

@media (prefers-color-scheme: dark) { body > header.floating { background-color: rgba(30, 30, 30, 0.72); border-color: #333437; } }

body > header > div { height: 100%; display: flex; align-items: center; }

body > header .mobile-nav-toggle { display: none; }

@media (max-width: 750px) { body > header .mobile-nav-toggle { display: inherit; flex: 0 1 10%; } }

body > header .icon { width: 32px; height: 32px; vertical-align: bottom; filter: none; }

@media (prefers-color-scheme: dark) { body > header .icon { filter: invert(100%); } }

header nav { flex: 0 1 67%; text-align: right; }

header nav a { text-decoration: none; color: #464646; }

@media (prefers-color-scheme: dark) { header nav a { color: white; } }

@media (min-width: 751px) { header nav a.selected, header nav a:hover { border-bottom: 2px solid #007aff; padding-bottom: 10px; } }

header nav a + a { margin-left: 18px; }

header nav a.mobile-nav-toggle { margin-bottom: 40px; }

@media (max-width: 750px) { header nav { text-align: left; position: absolute; top: 0; left: -205px; height: 100vh; width: 150px; font-size: 1.2em; border-right: 1px solid #999; padding: 25px; background-color: rgba(255, 255, 255, 0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 999; transition: 0.2s ease; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } }

@media (max-width: 750px) and (prefers-color-scheme: dark) { header nav { border-right: #333; box-shadow: 0 0 5px black; background-color: rgba(30, 30, 30, 0.72); } }

@media (max-width: 750px) { header nav a { display: block; margin: 0; } header nav a + a { margin-top: 20px; margin-left: 0; } }

body.sidebar-enabled nav { left: 0; }

.logo { font-size: 1.9rem; margin: auto 0; flex: 0 1 33%; }

@media (max-width: 750px) { .logo { flex: 0 1 80%; text-align: center; } .logo .app-icon { display: none; } }

.logo .app-icon { width: 48px; height: 48px; margin-left: -5px; }

.logo a { color: inherit; font-weight: inherit; display: flex; align-items: center; gap: 10px; }

@media (max-width: 750px) { .logo a { justify-content: center; } }

.logo .mime { font-weight: 400; }

.logo .stream { padding-left: 3px; font-weight: 100; letter-spacing: 3px; }

footer { color: #272727; background-color: #f0f0f0; padding: 75px 0; font-size: 0.8em; }

@media (prefers-color-scheme: dark) { footer { color: #dcdddd; background-color: #464646; } }

@media (max-width: 750px) { footer { padding: 25px 0; } }

.footer-contents { display: flex; justify-content: space-between; vertical-align: center; }

@media (max-width: 750px) { .footer-contents { display: none; flex-direction: column; justify-content: center; text-align: center; } }

.footer-contents .address { font-size: 0.9em; color: #818080; }

@media (prefers-color-scheme: dark) { .footer-contents .address { color: #99999a; } }

#copyright { font-size: 90%; }

@media (min-width: 751px) { #copyright { margin-top: 3em; border-top: 1px solid #cccccc; padding-top: 1.5em; } }

@media (min-width: 751px) and (prefers-color-scheme: dark) { #copyright { border-top-color: #585858; } }

.footer-contents .logo { font-size: 1.8em; }

.footer-contents > nav { display: flex; }

@media (max-width: 750px) { .footer-contents > nav { display: none; } }

.footer-contents > nav > section { display: flex; flex-direction: column; margin-left: 4em; }

.footer-contents > nav > section h5 { font-size: 1em; margin-top: 0; margin-bottom: 1em; font-weight: bold; }

.footer-contents > nav > section a { margin-bottom: 1em; color: black; }

@media (prefers-color-scheme: dark) { .footer-contents > nav > section a { color: white; } }

.footer-contents > nav > section a:hover { text-decoration: underline; }

.feature-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 50px 25px; }

@media (max-width: 750px) { .feature-grid { grid-template-columns: 1fr; } }

.feature { position: relative; }

.feature > img { position: absolute; left: 0; top: 0; }

.feature > :not(img) { margin-left: 50px; }

.feature > h3 { padding-top: 5px; }

.coming-soon-tag { font-weight: 300; font-size: 1rem; margin-top: 1rem; color: #818080; border: 1px solid #818080; border-radius: 1em; padding: 5px 12px; display: inline-block; }

@media (prefers-color-scheme: dark) { .coming-soon-tag { color: #99999a; border-color: #99999a; } }

@media (prefers-color-scheme: dark) { .swal-modal { background-color: #1e1e1e; color: white; } .swal-title, .swal-text { color: white; } .swal-icon--success::before, .swal-icon--success::after, .swal-icon--success__hide-corners { background-color: #1e1e1e; } }

.swal-button, .swal-button:not([disabled]):hover { background-color: #007aff; }

.swal-button { padding: 14px 24px; border: 0; border-radius: 10px; }

.swal-button:focus { box-shadow: none; }

.swal-footer { text-align: center; }

article { line-height: 150%; }

article h2, article h3 { margin-top: 1.2em; }

article > header { margin-bottom: 1.5em; }

article > header .date { font-size: 0.8em; color: #818080; }

@media (prefers-color-scheme: dark) { article > header .date { color: #99999a; } }

article ul > li, article ol > li { margin-bottom: 0.5em; }

.article-header-image { max-width: 100%; border-radius: 20px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }

@media (prefers-color-scheme: dark) { .article-header-image { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); } }

.author-bar { margin-top: 1.5em; display: flex; justify-content: space-between; align-items: center; }

.author-bar > div:last-child { text-align: right; line-height: 100%; font-size: 0.7em; color: #818080; }

@media (prefers-color-scheme: dark) { .author-bar > div:last-child { color: #99999a; } }

.author { display: flex; align-items: center; line-height: 120%; gap: 10px; }

.author > img { box-shadow: 0 0 1px; max-width: 55px; max-height: 55px; border-radius: 55px; }

.author .author-title { font-size: 0.9em; color: #818080; }

@media (prefers-color-scheme: dark) { .author .author-title { color: #99999a; } }

#share-buttons { margin-top: 5px; display: flex; gap: 4px; justify-content: flex-end; align-items: center; }

#share-buttons svg { width: 18px; height: 18px; fill: #818080; }

@media (prefers-color-scheme: dark) { #share-buttons svg { fill: #99999a; } }

#share-buttons .twitter > svg { height: 20px; margin-top: 1px; margin-right: 3px; }

#share-buttons .twitter > svg:hover { fill: #1D9BF0; }

#share-buttons .linkedin > svg { height: 19px; }

#share-buttons .linkedin > svg:hover { fill: #0077b5; }

#share-buttons .facebook > svg { height: 16px; margin-top: 3px; }

#share-buttons .facebook > svg:hover { fill: #1778F2; }

#share-buttons .email > svg { height: 14px; margin-top: 1px; }

#share-buttons .email > svg:hover { fill: #D44638; }

.hero-row.homepage-hero-row h1.hero { margin-bottom: 1rem; }

.hero-row.homepage-hero-row .text-block { margin-bottom: 2rem; }

@media (max-width: 750px) { .hero-row.homepage-hero-row { padding-top: 25px; } .hero-row.homepage-hero-row img.window-screenshot { border-radius: 6px; } }

form.waitlist-form { text-align: left; max-width: 500px; margin: 0 auto; }

.email-input-container { display: flex; }

@media (max-width: 750px) { .email-input-container { flex-direction: column; } }

.email-input-container > input[type="email"] { flex: 1; }

@media (max-width: 750px) { .email-input-container > input[type="email"] { text-align: center; } }

.email-input-container > div:last-child { margin-left: 20px; display: flex; }

@media (max-width: 750px) { .email-input-container > div:last-child { max-width: 300px; margin: 10px auto 0 auto; } }

.requirement-label { font-size: 14px; color: #818080; }

@media (prefers-color-scheme: dark) { .requirement-label { color: #99999a; } }

img.window-screenshot { border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); }

@media (prefers-color-scheme: dark) { img.window-screenshot { border-color: black; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5); } }

section.screenshot-row { overflow-x: hidden; }

.screenshot-flex-container { display: flex; align-items: flex-start; position: relative; }

@media (max-width: 750px) { .screenshot-flex-container { flex-direction: column; } }

@media (min-width: 751px) { .screenshot-flex-container { gap: 25px; } .screenshot-flex-container > div:first-child { flex: 0 1 30%; min-width: 350px; } .screenshot-flex-container > div:last-child { flex: 0 1 70%; } }

.screenshot-flex-container .text-block { text-align: left; }

.screenshot-flex-container .text-block p { margin-top: 0; margin-bottom: 2rem; }

@media (max-width: 750px) { .screenshot-flex-container .text-block { max-width: inherit; padding-bottom: 25px; } }

.screenshot-flex-container .screenshot-block { overflow: hidden; height: 605px; }

@media (max-width: 750px) { .screenshot-flex-container .screenshot-block { margin-right: -25px; max-height: 350px; margin-bottom: -75px; order: 2; } }

.screenshot-flex-container .screenshot-block picture:not(.displayed) { display: none; }

@media (min-width: 751px) { .screenshot-flex-container .screenshot-block img { position: absolute; } }

.feature.card { cursor: pointer; margin-bottom: 10px; border-radius: 10px; padding: 20px; background-color: #f9f9f9; }

.feature.card:last-child { margin-bottom: 0; }

.feature.card > img { left: 20px; top: 20px; }

@media (prefers-color-scheme: dark) { .feature.card { background-color: #2a2a2a; } }

.feature.card:not(.selected) > div { display: none; }

.feature.card:hover { background-color: #e6e6e6; }

@media (prefers-color-scheme: dark) { .feature.card:hover { background-color: #333437; } }

.feature.card.selected { background-color: #e1f0ff; }

@media (prefers-color-scheme: dark) { .feature.card.selected { background-color: #21456d; } }

.feature.card.collapsed:not(:hover) { background: none; }

.feature.card.collapsed > div { display: none; }

.spinner { visibility: hidden; margin: auto -25px auto 10px; height: 15px; width: 15px; border: 2px solid lightgray; border-top-color: gray; border-radius: 50%; animation: rotation 0.6s infinite linear; }

@keyframes rotation { 0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); } }

.logo-list { margin-top: 1em; display: flex; gap: 15px 30px; justify-content: center; flex-wrap: wrap; }

.logo-list img { height: 50px; }

@media (max-width: 750px) { .logo-list img { height: 35px; } }

.license-type { display: inline-block; border-radius: 50px; background-color: rgba(29, 109, 248, 0.25); font-size: 0.7em; font-weight: bold; text-transform: uppercase; padding: 5px 15px; }

.coupon { border: 1px dashed #eb445a; border-radius: 6px; color: #eb445a; font-size: 0.8em; padding: 8px; }

@media (prefers-color-scheme: dark) { .coupon { color: #eb4b63; border-color: #eb4b63; } }

a.coupon:hover { color: white; background-color: #eb445a; }

@media (prefers-color-scheme: dark) { a.coupon:hover { background-color: #eb4b63; } }

.primary-license { font-size: 0.9em; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); text-align: left; overflow: hidden; display: flex; }

@media (prefers-color-scheme: dark) { .primary-license { background-color: #222; } }

@media (max-width: 750px) { .primary-license { flex-direction: column; } }

.primary-license > div { padding: 1.3em; }

.primary-license > div:first-child { flex: 1 1 auto; }

.whats-included { display: flex; gap: 10px; align-items: center; }

.whats-included span { flex: 1 0 auto; font-size: 0.8em; font-weight: 600; color: #007aff; }

@media (prefers-color-scheme: dark) { .whats-included span { color: #0a84ff; } }

.whats-included div { height: 1px; width: 100%; background-color: #e6e6e6; }

@media (prefers-color-scheme: dark) { .whats-included div { color: #333437; } }

div#pricing-detail { text-align: center; display: flex; gap: 20px; flex-direction: column; justify-content: space-between; min-width: 235px; background-color: #F5F5F5; }

@media (prefers-color-scheme: dark) { div#pricing-detail { background-color: #292929; } }

div#pricing-detail #savings-details { font-size: 0.8em; margin-top: 5px; }

div#pricing-detail #price-amount-original { text-decoration: line-through; color: #eb445a; }

@media (prefers-color-scheme: dark) { div#pricing-detail #price-amount-original { color: #eb4b63; } }

div#pricing-detail #price-amount { font-size: 2em; font-weight: bold; }

div#pricing-detail #price-terms { margin-top: -4px; font-size: 1em; }

div#pricing-detail #monthly-equivalent { margin-top: 5px; font-size: 0.8em; color: #818080; }

@media (prefers-color-scheme: dark) { div#pricing-detail #monthly-equivalent { color: #99999a; } }

div#pricing-detail button { width: 100%; font-size: 0.9em; }

#billing-toggle { background-color: rgba(0, 0, 0, 0.1); border-radius: 6px; display: flex; padding: 2px; font-size: 0.9em; gap: 2px; }

#billing-toggle > div { flex: 0 1 50%; padding: 3px; cursor: pointer; }

#billing-toggle > div.selected { border-radius: 5px; background-color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

@media (prefers-color-scheme: dark) { #billing-toggle > div.selected { background-color: #444; } }

ul.checkmark-list { flex: 0 1 50%; text-align: left; font-size: 0.9em; list-style-type: '\2713\0020'; padding: 0 1em; }

ul.checkmark-list li { margin-bottom: 0.5em; }

ul.checkmark-list li::marker { content: '\2713\0020'; color: green; font-weight: 500; }

.secondary-license { display: flex; gap: 2em; text-align: left; align-items: center; background-color: #f9f9f9; border-radius: 10px; padding: 1.3em; font-size: 0.9em; }

@media (max-width: 750px) { .secondary-license { flex-direction: column; gap: 1em; } .secondary-license > div:last-child { width: 100%; } }

@media (prefers-color-scheme: dark) { .secondary-license { background-color: #222; } }

.secondary-license .license-type { background-color: white; }

@media (prefers-color-scheme: dark) { .secondary-license .license-type { background-color: #333; } }

.secondary-license button { width: 100%; background-color: white; color: black; border: none; border-radius: 10px; white-space: nowrap; font-size: 0.9em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

@media (prefers-color-scheme: dark) { .secondary-license button { background-color: #333; color: white; } }

@media (min-width: 751px) { .secondary-license > div:last-child { min-width: 235px; } }

div#confirmation-summary { display: inline-block; text-align: left; padding: 15px 50px; border-radius: 20px; border: 1px solid #e6e6e6; }

@media (prefers-color-scheme: dark) { div#confirmation-summary { border-color: #333437; } }

div#confirmation-summary table { margin: 0 auto; }

div#confirmation-summary table tr td:first-child { text-align: right; font-weight: bold; padding-right: 6px; }

.released-version { padding: 30px 0; /* Desktop Timeline Styles */ }

.released-version:first-of-type { margin-top: 2em; }

.released-version h2 { margin-top: 0; font-size: 1.4em; }

.released-version span.time { color: gray; }

.released-version h3 { margin-top: 1em; }

.released-version ul { margin: 0; }

.released-version li + li { margin-top: 0.25em; }

.released-version li { margin-left: 0.5em; }

.released-version img, .released-version video { max-width: 100%; border-radius: 10px; }

.released-version .labs-tag { display: inline-block; vertical-align: middle; font-size: 12px; color: black; background-color: gold; border-radius: 20px; padding: 3px 8px; margin-top: -2px; }

@media (min-width: 751px) { .released-version { border-left: 2px solid lightgray; margin-left: 140px; } .released-version:first-of-type { padding-top: 0; } .released-version > div { position: relative; padding-left: 20px; } .released-version > div::before { border-radius: 50%; content: ""; background-color: white; border: 2px solid lightgray; position: absolute; height: 14px; width: 14px; left: -10px; top: 6px; } }

@media (min-width: 751px) and (prefers-color-scheme: dark) { .released-version > div::before { background-color: #1e1e1e; } }

@media (min-width: 751px) { .released-version div.release-date { position: absolute; left: -140px; width: 120px; text-align: right; top: 4px; } .released-version div.release-date span { display: block; } .released-version div.release-date span.date { font-weight: 600; } }

@media (max-width: 750px) { .released-version { border-top: 1px solid gray; } }

.faqs { max-width: 500px; margin: 0 auto; text-align: left; }

.faqs details { border-bottom: 1px solid lightgray; padding: 0.75rem 0; }

.faqs details:last-child { border-bottom: none; }

.faqs details :focus { outline: none; }

.faqs details summary { cursor: pointer; }

.faqs details p { color: #777; }

@media (prefers-color-scheme: dark) { .faqs details p { color: #CCC; } }

.blog-posts-container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 60px; }

@media (max-width: 750px) { .blog-posts-container { grid-template-columns: 1fr; } }

.blog-post-card a { color: #272727; }

@media (prefers-color-scheme: dark) { .blog-post-card a { color: #dcdddd; } }

.blog-post-card img.post-image { max-width: 100%; border-radius: 10px; margin-bottom: 0.25em; }

.blog-post-card .category { font-size: 0.8em; text-transform: uppercase; padding-right: 0.5em; }

.blog-post-card .date { padding-left: 0.5em; border-left: 1px solid #818080; font-size: 0.8em; color: #818080; }

@media (prefers-color-scheme: dark) { .blog-post-card .date { color: #99999a; border-color: #99999a; } }

.blog-post-card h3 { margin-top: 0.5em; margin-bottom: 0.25em; }

.blog-post-card .summary { font-size: 0.9em; }

/*# sourceMappingURL=main.css.map */