html,
body {
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
}

body {
    overflow-x: hidden;
}

body.landing {
    --dot-color: rgba(60, 60, 67, 0.18);
    --dot-size: 1px;
    --dot-pitch: 32px;
    background-image: radial-gradient(
        circle,
        var(--dot-color) var(--dot-size),
        transparent calc(var(--dot-size) + 0.5px)
    );
    background-size: var(--dot-pitch) var(--dot-pitch);
}

h1 {
    font-family: var(--font-display);
    font-size: var(--text-large-title);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

h2 {
    font-family: var(--font-display);
    font-size: var(--text-title-1);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

h3 {
    font-size: var(--text-title-2);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

h4 {
    font-size: var(--text-title-3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

h5 {
    font-size: var(--text-headline);
    font-weight: var(--weight-semibold);
}

h6 {
    font-size: var(--text-subhead);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

p {
    color: var(--color-text-primary);
    line-height: var(--leading-relaxed);
    max-width: var(--width-prose);
}

small {
    font-size: var(--text-footnote);
    color: var(--color-text-secondary);
}

strong {
    font-weight: var(--weight-semibold);
}

a {
    color: var(--color-link);
    transition: color var(--duration-fast) var(--ease-standard);
}

a:hover,
a:focus-visible {
    color: var(--color-text-primary);
}

a:focus-visible {
    outline: var(--space-0-5) solid var(--color-focus-ring);
    outline-offset: var(--space-0-5);
    border-radius: var(--radius-xs);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-callout);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard);
}

.btn-primary {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--color-system-blue) 70%, white) 0%,
        color-mix(in srgb, var(--color-system-blue) 95%, black) 100%
    );
    color: #fff;
    border-color: color-mix(in srgb, var(--color-system-blue) 88%, black);
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.3),
        inset 0 -1px 3px rgba(0, 0, 0, 0.12),
        0 1px 1px rgba(0, 0, 0, 0.06);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--color-system-blue) 78%, white) 0%,
        color-mix(in srgb, var(--color-system-blue) 95%, black) 100%
    );
    color: #fff;
}

.btn-primary:active {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--color-system-blue) 70%, black) 0%,
        color-mix(in srgb, var(--color-system-blue) 85%, black) 100%
    );
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-pill {
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-footnote);
}

/* SVG-shape icon that recolours to currentColor — used inside .btn so it
   tracks the button's text colour without baking a fill into the SVG. */
.btn-apple-logo {
    display: inline-block;
    height: 1.1em;
    aspect-ratio: 408.5 / 520.25;
    background: currentColor;
    -webkit-mask: url("../images/apple/apple.logo.svg") no-repeat center /
        contain;
    mask: url("../images/apple/apple.logo.svg") no-repeat center / contain;
    flex-shrink: 0;
}

.download-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

code,
pre,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.95em;
}

code {
    background: var(--color-fill-quaternary);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-xs);
}

pre {
    padding: var(--space-4);
    background: var(--color-bg-grouped);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

hr {
    border: 0;
    height: 1px;
    background: var(--color-separator);
    margin: var(--space-8) 0;
}

section {
    padding: var(--space-24) 0;
}

.container {
    width: 100%;
    max-width: var(--width-page);
    margin-inline: auto;
    padding-inline: clamp(var(--space-4), 4vw, var(--space-12));
}

.container-narrow {
    max-width: var(--width-content);
}

.container-wide {
    max-width: var(--width-wide);
}

.section-heading {
    text-align: center;
    margin: 0 auto var(--space-12);
    max-width: var(--width-content);
}

.section-heading h2 {
    font-size: clamp(var(--text-large-title), 5vw, 4.5rem);
}

.section-heading p {
    margin-inline: auto;
    color: var(--color-text-secondary);
    margin-top: var(--space-3);
    font-size: var(--text-title-2);
}

.surface-frosted {
    background: var(--material-frosted-bg);
    border: var(--material-frosted-border);
    backdrop-filter: var(--material-frosted-backdrop);
    -webkit-backdrop-filter: var(--material-frosted-backdrop);
}

.surface-frosted-thin {
    background: var(--material-frosted-thin-bg);
    border: var(--material-frosted-thin-border);
    backdrop-filter: var(--material-frosted-thin-backdrop);
    -webkit-backdrop-filter: var(--material-frosted-thin-backdrop);
}

html,
pre {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

@supports selector(::-webkit-scrollbar) {
    html,
    pre {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

    html::-webkit-scrollbar,
    pre::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
        background: transparent;
    }

    html::-webkit-scrollbar-track,
    pre::-webkit-scrollbar-track {
        background: transparent;
    }

    html::-webkit-scrollbar-thumb,
    pre::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--scrollbar-thumb);
    }

    html::-webkit-scrollbar-thumb:hover,
    pre::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover);
    }

    html::-webkit-scrollbar-corner,
    pre::-webkit-scrollbar-corner {
        background: transparent;
    }
}