:root {
    --typeface-sans: 'Marat Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --typeface-serif: 'Marat', 'Palatino', serif;
    --font-sm: clamp(0.77rem, 0.06vw + 0.76rem, 0.82rem);
    --font-base: clamp(1rem, 0.19vw + 0.96rem, 1.16rem);
    --font-md: clamp(1.3rem, 0.41vw + 1.22rem, 1.64rem);
    --font-lg: clamp(1.69rem, 0.77vw + 1.54rem, 2.32rem);
    --font-xl: clamp(2.2rem, 1.32vw + 1.94rem, 3.27rem);
    --font-xxl: clamp(2.86rem, 2.18vw + 2.43rem, 4.63rem);
    --font-nav: clamp(0.8rem, 0.19vw + 0.96rem, 1rem);
    /* Header nav links */
    --font-base-hero: clamp(1.1rem, 0.19vw + 1.1rem, 1.3rem);
    /* Hero tagline */
    --font-xl-sans: clamp(2rem, 1.13vw + 1.4rem, 3rem);
    /* Adjust for Sans typeface */
}

@font-face {
    font-family: 'Marat';
    src: url('/assets/fonts/MaratWeb-Bold.woff2') format('woff2'), url('/assets/fonts/MaratWeb-Bold.woff') format('woff');
    font-weight: 600;
}

@font-face {
    font-family: 'Marat';
    src: url('/assets/fonts/MaratWeb-Medium.woff2') format('woff2'), url('/assets/fonts/MaratWeb-Medium.woff') format('woff');
    font-weight: 500;
}

@font-face {
    font-family: 'Marat';
    src: url('/assets/fonts/MaratWeb-MediumItalic.woff2') format('woff2'), url('/assets/fonts/MaratWeb-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Marat';
    src: url('/assets/fonts/MaratWeb-Regular.woff2') format('woff2'), url('/assets/fonts/MaratWeb-Regular.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'Marat';
    src: url('/assets/fonts/MaratWeb-RegularItalic.woff2') format('woff2'), url('/assets/fonts/MaratWeb-RegularItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Marat Sans';
    src: url('/assets/fonts/MaratSansWeb-Demibold.woff2') format('woff2'), url('/assets/fonts/MaratSansWeb-Demibold.woff') format('woff');
    font-weight: 600;
}

@font-face {
    font-family: 'Marat Sans';
    src: url('/assets/fonts/MaratSansWeb-Medium.woff2') format('woff2'), url('/assets/fonts/MaratSansWeb-Medium.woff') format('woff');
    font-weight: 500;
}

@font-face {
    font-family: 'Marat Sans';
    src: url('/assets/fonts/MaratSansWeb-Regular.woff2') format('woff2'), url('/assets/fonts/MaratSansWeb-Regular.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'Marat Sans';
    src: url('/assets/fonts/MaratSansWeb-Extralight.woff2') format('woff2'), url('/assets/fonts/MaratSansWeb-Extralight.woff') format('woff');
    font-weight: 300;
}

html {
    font-family: var(--typeface-sans);
    font-size: 19px;
    font-display: fallback;
    line-height: 1.3;
    color: var(--text-bright);
    background: var(--light-beige);
    scroll-behavior: smooth;
}

h1,
h2,
h3,
strong {
    color: var(--text-bright);
}

h1 {
    font-family: var(--typeface-serif);
    font-size: var(--font-xl);
    font-weight: 500;
    line-height: 1.0;
    margin: 1vw auto 2vw auto;
}

h2 {
    font-family: var(--typeface-serif);
    font-size: var(--font-lg);
    line-height: 1.1;
    font-weight: 500;
    margin-top: 32px;
    margin-bottom: 10px;
}

h3 {
    font-size: var(--font-md);
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 10px;
}

h4 {
    font-family: var(--typeface-serif);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 400;
}

hr {
    margin: 3vw auto 3vw auto;
    border: none;
    height: 2px;
    background: rgba(0, 0, 0, 0.2);
}

ul {
    font-size: var(--font-base);
    list-style-type: none;
}

li {
    font-size: var(--font-base);
    margin-bottom: 0.5rem;
}

p {
    font-size: var(--font-base);
    color: var(--text-secondary);
    margin-top: 8px;
    margin-bottom: 16px;
}

a {
    color: inherit;
    text-decoration: none;
}

p a,
li a {
    text-decoration: underline;
}

a:hover {
    color: var(--text-highlight);
    text-decoration: underline;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.widthS {
    max-width: 940px;
    margin: auto;
    padding: 0 30px 0 30px;
}

.widthM {
    max-width: 1080px;
    margin: auto;
    padding: 40px 40px 40px 40px;
}

.widthL {
    max-width: 1200px;
    margin: auto;
    padding: 0 30px 0 30px;
}

.widthXL {
    max-width: 1500px;
    margin: auto;
    padding: 0 30px 0 30px;
}

.widthXXL {
    max-width: 1800px;
    margin: auto;
    padding: 0 30px 0 30px;
}

.width100 {
    max-width: 100%;
    padding: 0 30px 0 30px;
}

.header-wrapper {
    display: flex;
    justify-content: center;
    align-self: stretch;
}

header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px 12px 40px;
    top: 8px;
    background: none;
    z-index: 20;
    transition: width 2s ease-out 1s;
}

header a,
footer a {
    font-size: var(--font-nav);
    font-weight: 400;
    text-decoration: none;
    color: var(--text-dim);
}

.sticky-header header {
    position: fixed;
    max-width: 1200px;
    /* This is the width of "widthL" */
    background: rgba(var(--white-rgb), 0.9);
    border-radius: 8px;
    padding: 12px 12px 12px 12px;
    box-shadow: 0 2px 4px var(--shadow-light);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

#hero .sticky-header+.hero-text {
    top: 10px;
}

.sticky-header+.widthS,
.sticky-header+main {
    margin-top: 80px;
}

header .logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Download button that appears next to logo on small screens  */

header .download-link-logo {
    display: none;
    font-size: var(--font-nav);
    font-weight: 400;
    color: var(--text-light);
    padding: 6px 10px 6px 10px;
    background: var(--text-primary);
    border-radius: 6px;
    transition: all ease-out 0.5s;
}

header .download-link-logo:hover {
    color: var(--text-light);
    background: var(--accent-purple);
    border: none;
    text-decoration: none;
}

header a.logo {
    display: flex;
    align-items: center;
    gap: 6px;
}

header .logo img,
footer .logo img {
    position: relative;
    height: 25px;
}

/* Make logo white in dark mode */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) header .logo img,
    :root:not([data-theme]) footer .logo img {
        filter: invert(1);
    }
}

/* Manual light mode override */

[data-theme="light"] header .logo img,
[data-theme="light"] footer .logo img {
    filter: none;
}

[data-theme="dark"] header .logo img,
[data-theme="dark"] footer .logo img {
    filter: invert(1);
}

header .logo span {
    top: 2px;
    font-size: var(--font-nav);
    font-weight: 500;
    color: var(--text-bright);
}

header .logo:hover {
    color: inherit;
    text-decoration: none;
}

header .nav {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

header .nav a {
    color: var(--text-bright);
}

header .nav a:hover {
    color: var(--text-highlight);
    text-decoration: none;
}

header .nav li {
    margin-left: 16px;
    margin-bottom: 0;
}

header .nav li:first-child {
    margin-left: 0;
}

header .nav li a.nav-button {
    display: inline-block;
    padding: 7px 12px 7px 12px;
    margin: 8px 4px 8px 4px;
    border-radius: 6px;
    background-color: var(--bg-white);
    box-shadow: 0px 0px 8px var(--shadow-light);
    font-weight: 500;
}

header .nav li a.download-link {
    font-size: var(--font-nav);
    font-weight: 400;
    color: var(--text-light);
    padding: 6px 10px 6px 10px;
    background: var(--text-primary);
    border-radius: 6px;
    box-shadow: 0px 0px 4px var(--shadow-light);
    transition: all ease-out 0.5s;
}

header .nav li a.download-link:hover {
    background: var(--accent-purple);
    text-decoration: none;
}

header .pulldown .pulldown-arrow {
    color: var(--text-dim);
}

header ul.pulldown-content {
    display: none;
    position: absolute;
    background-color: var(--bg-white);
    border-radius: 6px;
    min-width: 8em;
    padding: 10px 15px 0px 15px;
    box-shadow: 0px 0px 4px var(--shadow-light);
    z-index: 100;
}

header ul.pulldown-content a {
    color: var(--text-primary);
}

/* weird override needed for previous style on nav first-child */

header ul.pulldown-content>li {
    margin-left: 0;
}

header .pulldown:hover .pulldown-content {
    display: block;
}

footer {
    max-width: 1080px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: auto;
    padding: 60px 40px 90px 40px;
}

footer ul {
    padding-bottom: 24px;
}

footer li {
    margin-bottom: 0;
}

footer li.label {
    color: var(--text-bright);
    margin-bottom: 0.4rem;
    font-weight: 500;
}

ul li.icon {
    background: url('apple.png') no-repeat left center;
    background-size: 20px 20px;
    /* Default size for standard resolution */
    position: relative;
    padding-left: 22px;
}

ul li.icon::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

ul li.apple {
    background: url('/assets/media/apple.png') no-repeat left center;
    background-size: 20px 20px;
    /* Default size for standard resolution */
}

ul li.setapp {
    background: url('/assets/media/setapp-dark.png') no-repeat left center;
    background-size: 20px 20px;
    /* Default size for standard resolution */
}

/* Dark mode support for footer icons */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) ul li.apple {
        background: none;
        /* Remove the background from the main element */
        position: relative;
    }
    :root:not([data-theme]) ul li.apple::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-color: white;
        -webkit-mask: url('/assets/media/apple.png') no-repeat center;
        -webkit-mask-size: 20px 20px;
        mask: url('/assets/media/apple.png') no-repeat center;
        mask-size: 20px 20px;
    }
    :root:not([data-theme]) ul li.setapp {
        background: url('/assets/media/setapp.png') no-repeat left center;
        background-size: 20px 20px;
    }
    /* Fix download button colors in dark mode */
    :root:not([data-theme]) header .download-link-logo,
    :root:not([data-theme]) header .nav li a.download-link {
        color: var(--light-beige) !important;
        background: var(--text-bright) !important;
    }
    :root:not([data-theme]) header .download-link-logo:hover,
    :root:not([data-theme]) header .nav li a.download-link:hover {
        color: var(--light-beige) !important;
        background: var(--accent-purple) !important;
    }
    /* Fix theme toggle colors in dark mode */
    :root:not([data-theme]) .theme-toggle {
        background: transparent !important;
        border-color: var(--text-bright) !important;
        color: var(--text-bright) !important;
    }
    :root:not([data-theme]) .theme-toggle:hover {
        background: var(--accent-purple) !important;
        border-color: var(--accent-purple) !important;
        color: var(--light-beige) !important;
    }
}

/* Manual light mode support for footer icons */

[data-theme="light"] ul li.apple {
    background: url('/assets/media/apple.png') no-repeat left center;
    background-size: 20px 20px;
    position: static;
}

[data-theme="light"] ul li.apple::before {
    display: none;
}

[data-theme="light"] ul li.setapp {
    background: url('/assets/media/setapp-dark.png') no-repeat left center;
    background-size: 20px 20px;
}

[data-theme="light"] header .download-link-logo,
[data-theme="light"] header .nav li a.download-link {
    color: var(--text-light) !important;
    background: var(--text-primary) !important;
}

[data-theme="light"] header .download-link-logo:hover,
[data-theme="light"] header .nav li a.download-link:hover {
    color: var(--text-light) !important;
    background: var(--accent-purple) !important;
}

[data-theme="light"] .theme-toggle {
    background: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
    color: var(--text-light) !important;
}

[data-theme="light"] .theme-toggle:hover {
    background: var(--accent-purple) !important;
    border-color: var(--accent-purple) !important;
    color: var(--text-light) !important;
}

/* Manual dark mode support for footer icons */

[data-theme="dark"] ul li.apple {
    background: none;
    position: relative;
}

[data-theme="dark"] ul li.apple::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: white;
    -webkit-mask: url('/assets/media/apple.png') no-repeat center;
    -webkit-mask-size: 20px 20px;
    mask: url('/assets/media/apple.png') no-repeat center;
    mask-size: 20px 20px;
}

[data-theme="dark"] ul li.setapp {
    background: url('/assets/media/setapp.png') no-repeat left center;
    background-size: 20px 20px;
}

[data-theme="dark"] header .download-link-logo,
[data-theme="dark"] header .nav li a.download-link {
    color: var(--light-beige) !important;
    background: var(--text-bright) !important;
}

[data-theme="dark"] header .download-link-logo:hover,
[data-theme="dark"] header .nav li a.download-link:hover {
    color: var(--light-beige) !important;
    background: var(--accent-purple) !important;
}

[data-theme="dark"] .theme-toggle {
    background: transparent !important;
    border-color: var(--text-bright) !important;
    color: var(--text-bright) !important;
}

[data-theme="dark"] .theme-toggle:hover {
    background: var(--accent-purple) !important;
    border-color: var(--accent-purple) !important;
    color: var(--light-beige) !important;
}

/* High resolution support */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    ul li.icon::before,
    ul li a.apple::before,
    ul li a.setapp::before {
        background-size: 40px 40px;
        /* 2x size for high resolution */
    }
}

@media (-webkit-min-device-pixel-ratio: 3),
(min-resolution: 288dpi) {
    ul li.icon::before,
    ul li a.apple::before,
    ul li a.setapp::before {
        background-size: 60px 60px;
        /* 3x size for high resolution */
    }
}

/* COMPONENTS */

a.button-rounded {
    display: inline-block;
    background-color: var(--text-highlight);
    color: var(--text-light);
    font-size: 22px;
    font-weight: 500;
    text-decoration: none;
    padding: 9px 28px 9px 28px;
    margin: 12px 12px 12px 0;
    border-radius: 30px;
    transition: 0.1s;
}

a.button-rounded:hover {
    transform: scale(1.05);
}

a.button-rounded:active {
    background-color: var(--bg-white);
}

/* hide cta-arrows on narrow screens */

@media only screen and (max-width: 1120px) {
    .download-cta .cta-arrow {
        display: none;
    }
}

/* In conjunction with one-at-a-time.js,
 * scale in and brighten when a video scrolls into view and starts playing. */

video.one-at-a-time {
    opacity: 0.6;
    transform: scale(0.95);
    transition: 0.2s ease-in-out;
}

video.one-at-a-time.playing {
    opacity: 1;
    transform: scale(1);
}

/* Email signup form, used at the bottom of memos and elsewhere around the site. */

.signup-form input {
    font-family: var(--typeface-sans);
    font-size: var(--font-base);
    font-weight: 400;
    padding: 12px 16px 12px 16px;
    border: none;
    border-radius: 6px;
    margin: 8px 4px 8px 0px;
}

.signup-form input[type="submit"] {
    -webkit-appearance: button;
    background: #F6953C;
    color: #FFFFFF;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.signup-form input[type="submit"]:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1)) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s linear;
}

.signup-form input[type="email"] {
    width: 300px;
}

@media only screen and (max-width: 375px) {
    .signup-form input[type="email"] {
        width: 240px;
    }
}

.signup-success {
    color: #359908;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.4;
    padding-top: 2rem;
    display: none;
}

.signup-error {
    font-size: 16px;
    color: #ef2c0a;
    padding-top: 0.1rem;
}

.email-input {
    text-wrap: nowrap;
}

.newsletter-text {
    max-width: 50%;
}

nav.submenu {
    text-align: center;
    margin: 0px 0 60px;
}

nav.submenu a,
.nextprev-nav a {
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.1);
    padding: 5px 16px 5px 16px;
    height: 36px;
    border-radius: 20px;
    transition: transform 0.1s;
    margin-top: 5px;
}

nav.submenu a:hover,
.nextprev-nav a:hover {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 1);
}

nav.submenu a:active,
.nextprev-nav a:active {
    transform: scale(0.9);
}

nav.submenu a.active {
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    cursor: default;
}

nav.submenu a {
    text-decoration: none;
}

.nextprev-nav {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-dim);
    margin: 100px 0 0 auto;
    max-width: 400px;
    text-align: right;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding-top: 20px;
}

.nextprev-nav a {
    margin-left: 5px;
}

header .sites {
    display: flex;
    gap: 30px;
    font-size: 20px;
    font-weight: 500;
    margin-left: 25px;
}

header .sites a {
    color: var(--text-bright);
}

header .sites .badge {
    margin-left: 6px;
    background: #5608c8;
    padding: 2px 5px 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
}

header .sites a.active {
    border-bottom: 3px solid #5608c8;
    font-weight: 500;
}

header .sites a.active:hover {
    text-decoration: none;
}

@media only screen and (max-width: 1200px) {
    /* less page padding on small screens */
    .widthS,
    .widthM,
    .widthL,
    .widthXL,
    .widthXXL,
    .width100 {
        padding: 3vw 3vw 3vw 3vw;
    }
    .sticky-header header {
        max-width: 95%;
    }
}

@media only screen and (max-width: 850px) {
    /* reshuffle top navigation on narrow screens */
    header {
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    header .sites {
        margin-bottom: 20px;
    }
    header .nav {
        flex-wrap: wrap;
        justify-content: center;
    }
    header .logo-container {
        gap: 16px;
        margin-bottom: 12px;
    }
    header .logo-name {
        display: none;
    }
    header .download-link-logo {
        display: inline;
    }
    header .download-link {
        display: none;
    }
    .sticky-header header {
        top: 0px;
        max-width: 100%;
        background: rgba(var(--white-rgb), 0.95);
        border-radius: 0;
        border-bottom: 1px solid var(--shadow-light);
        padding: 20px 40px 12px 40px;
        box-shadow: none;
    }
    #hero .sticky-header+.hero-text {
        top: 50px;
    }
    .sticky-header+.widthS,
    .sticky-header+main {
        margin-top: 120px;
    }
    .newsletter-text {
        max-width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    header {
        padding: 12px 12px 12px 12px;
    }
    .sticky-header header {
        padding: 12px 12px 12px 12px;
    }
    header .sites {
        margin-left: 0;
        gap: 10px;
        width: 100%;
        justify-content: space-around;
    }
    header .badge {
        display: none;
    }
    header .logo-container {
        margin-bottom: 12px;
    }
    /* footer becomes a single column on a phone */
    footer {
        flex-direction: column;
        gap: 24px;
        padding: 40px 16px 60px 16px;
    }
    footer ul {
        width: 300px;
        max-width: 100%;
    }
}

@media only screen and (max-width: 400px) {
    header .logo-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    header .nav {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    header .nav li {
        margin-left: 0;
    }
}

/* Theme toggle button */

.theme-toggle {
    background: var(--text-primary);
    border: 1px solid var(--text-primary);
    font-size: var(--font-nav);
    font-weight: 400;
    color: var(--text-light);
    cursor: pointer;
    padding: 6px 10px 6px 10px;
    margin: 8px 4px;
    border-radius: 6px;
    box-shadow: 0px 0px 4px var(--shadow-light);
    transition: all ease-out 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: var(--text-light);
    text-decoration: none;
}

.theme-toggle-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-toggle-icon {
    transform: rotate(20deg);
}