:root {
    --red: #c72b2b;
    --red-strong: #b81010;
    --blue: #0a84ff;
    --orange: #ff9230;
    --green: #30c158;

    --bg: #f5f4f2;
    --surface: #ffffff;
    --text: #1d1d1f;
    --muted: #6e6e73;
    --line: rgba(0, 0, 0, 0.08);
    --shadow: 0 30px 60px -20px rgba(80, 20, 20, 0.25), 0 12px 24px -12px rgba(0, 0, 0, 0.18);
    --glass: rgba(255, 255, 255, 0.72);

    --radius: 28px;
    --gutter: clamp(16px, 5vw, 48px);
    --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --red: #ff5a52;
        --bg: #111012;
        --surface: #1c1b1e;
        --text: #f5f5f7;
        --muted: #a1a1a6;
        --line: rgba(255, 255, 255, 0.1);
        --shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 12px 24px -12px rgba(0, 0, 0, 0.6);
        --glass: rgba(28, 27, 30, 0.72);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.55;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--red);
}

h1,
h2,
h3 {
    font-family: var(--rounded);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.wrap {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Language switch: the radio buttons sit before the page so CSS can show one language */

.lang-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#lang-nl:checked ~ * [lang="en"],
#lang-en:checked ~ * [lang="nl"] {
    display: none !important;
}

.lang-switch {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--line);
    font-family: var(--rounded);
    font-size: 14px;
    font-weight: 600;
}

.lang-switch label {
    padding: 4px 12px;
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}

#lang-nl:checked ~ header label[for="lang-nl"],
#lang-en:checked ~ header label[for="lang-en"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

#lang-nl:focus-visible ~ header label[for="lang-nl"],
#lang-en:focus-visible ~ header label[for="lang-en"] {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font-family: var(--rounded);
    font-weight: 700;
    font-size: 20px;
}

.brand img {
    width: 32px;
    height: 32px;
}

/* Hero */

.hero {
    position: relative;
    padding: clamp(48px, 9vw, 112px) 0 clamp(56px, 8vw, 96px);
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto auto;
    width: 70vw;
    height: 70vw;
    max-width: 900px;
    max-height: 900px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(199, 43, 43, 0.22), transparent);
    pointer-events: none;
}

.hero .wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: clamp(32px, 6vw, 80px);
}

.hero-icon {
    width: 88px;
    height: 88px;
    margin-bottom: 28px;
    filter: drop-shadow(0 16px 24px rgba(80, 20, 20, 0.3));
}

.hero h1 {
    font-size: clamp(42px, 7vw, 76px);
    font-weight: 800;
}

.hero h1 em {
    font-style: normal;
    color: var(--red);
}

.lead {
    margin: 20px 0 32px;
    font-size: clamp(18px, 2.2vw, 22px);
    color: var(--muted);
    max-width: 30em;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 999px;
    font-family: var(--rounded);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    background: linear-gradient(180deg, #e86767, var(--red-strong));
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(184, 16, 16, 0.7);
}

.button-secondary {
    background: var(--surface);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--line);
}

.hero-device {
    justify-self: center;
    width: min(100%, 340px);
    transform: rotate(3deg);
}

/* Device frames
   Screen corners are percentages of the screenshot (width / height), measured from the
   simulator screen masks, so they scale with the image. The bezel is an outline, which follows
   the corners, sized relative to the frame (cqw) so it scales too. */

.phone,
.duo,
.tablet,
.watch {
    container-type: inline-size;
    filter: drop-shadow(0 24px 28px rgba(60, 20, 20, 0.28));
}

.phone img,
.duo img,
.tablet img,
.watch img {
    width: calc(100% - 2 * var(--bezel));
    margin: var(--bezel);
    outline: var(--bezel) solid #0d0d0f;
}

.phone {
    --bezel: 3cqw;
}

.phone img {
    border-radius: 15.43% / 7.1%;
}

.duo {
    --bezel: 3cqw;
}

.duo img {
    border-radius: 1.83% 12.82% 12.82% 1.83% / 1.26% 8.81% 8.81% 1.26%;
}

.tablet {
    --bezel: 1.6cqw;
}

.tablet img {
    border-radius: 2.17% / 2.89%;
}

.watch {
    --bezel: 7cqw;
}

.watch img {
    border-radius: 24.62% / 20.65%;
}

/* Apple's continuous corners: the curve starts earlier and eases into the edge. Where the
   browser supports corner-shape, use the measured extent of each corner with a matching
   superellipse; elsewhere the round corners above are used. */
@supports (corner-shape: superellipse(1.3)) {
    .phone img,
    .duo img,
    .tablet img,
    .watch img {
        corner-shape: superellipse(1.25);
    }

    .phone img {
        border-radius: 18.91% / 8.7%;
    }

    .duo img {
        border-radius: 1.56% 14.32% 14.32% 1.56% / 1.07% 9.85% 9.85% 1.07%;
    }

    .tablet img {
        border-radius: 2.46% / 3.28%;
    }

    .watch img {
        border-radius: 28.55% / 23.94%;
    }
}

/* Sections */

section {
    padding: clamp(56px, 9vw, 112px) 0;
}

.section-head {
    max-width: 640px;
    margin-bottom: clamp(32px, 6vw, 64px);
}

.eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: var(--rounded);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red);
}

.section-head h2 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
}

.section-head p {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 19px;
}

/* Steps */

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 32px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.step {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step-number {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-family: var(--rounded);
    font-weight: 800;
    font-size: 16px;
}

.step h3 {
    margin: 12px 0 6px;
    font-size: 21px;
    font-weight: 700;
}

.step p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

.is-blue { background: var(--blue); }
.is-orange { background: var(--orange); }
.is-green { background: var(--green); }
.is-red { background: var(--red); }

/* Devices */

.devices {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.device-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}

.device-side {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(16px, 3vw, 28px);
    align-items: center;
}

.device-side .watch {
    align-self: center;
}

figure {
    margin: 0;
}

figcaption {
    margin-top: 16px;
    font-family: var(--rounded);
    font-weight: 600;
    color: var(--muted);
    text-align: center;
}

/* Features */

.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.feature {
    padding: 24px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
}

.feature-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-bottom: 18px;
}

.feature h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 6px;
}

.feature p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

/* Call to action */

.cta {
    text-align: center;
}

.cta .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta img {
    width: 104px;
    height: 104px;
    margin-bottom: 28px;
    filter: drop-shadow(0 16px 24px rgba(80, 20, 20, 0.3));
}

.cta h2 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    margin-bottom: 28px;
}

/* Footer */

.site-footer {
    padding: 32px 0 48px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

.site-footer .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

.site-footer a {
    color: inherit;
}

/* Smaller screens */

@media (max-width: 900px) {
    .hero .wrap,
    .device-grid {
        grid-template-columns: 1fr;
    }

    .hero-device {
        width: min(72%, 300px);
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .steps,
    .features {
        grid-template-columns: 1fr;
    }

    .step {
        flex-direction: row;
        align-items: flex-start;
    }

    .step .phone {
        flex: 0 0 42%;
    }

    .device-side {
        grid-template-columns: 1fr 0.9fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .button {
        transition: none;
    }
}

/* Text pages, such as the privacy policy */

.page {
    padding: clamp(48px, 9vw, 96px) 0;
}

.page .wrap {
    max-width: 760px;
}

.page h1 {
    font-size: clamp(36px, 6vw, 56px);
    font-weight: 800;
    margin-bottom: 16px;
}

.page .lead {
    margin-top: 0;
}

.card {
    padding: clamp(24px, 4vw, 36px);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
}

.card + .card {
    margin-top: 16px;
}

.card h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.card p {
    margin: 0;
    color: var(--muted);
}