:root {
    color-scheme:light;
    --ink:#172033;
    --muted:#596478;
    --line:#e3e8ef;
    --blue:#365dcc;
    --wash:#f5f7fb
}
* {
    box-sizing:border-box
}
html {
    scroll-padding-top:20px
}
body {
    margin:0;
    color:var(--ink);
    background:#fff;
    font-family:Inter,system-ui,sans-serif;
    line-height:1.55
}
a {
    color:var(--blue);
    text-underline-offset:3px
}
button,summary,a {
    -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid var(--blue);
    outline-offset:4px
}
h1,h2,h3,p {
    margin:0
}
h1 {
    font-size:clamp(2.1rem,3.8vw,3.1rem);
    line-height:1.12;
    letter-spacing:-.045em;
    max-width:560px
}
h2 {
    font-size:1.7rem;
    line-height:1.2;
    letter-spacing:-.025em
}
h3 {
    font-size:1.05rem;
    line-height:1.35
}
img {
    max-width:100%;
    display:block
}
button {
    font:inherit
}
.container {
    width:min(1120px,calc(100% - 48px));
    margin:auto
}
.site-nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 0
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    font-size:1.15rem;
    font-weight:750;
    text-decoration:none
}
.brand img {
    width:34px;
    height:34px;
    border-radius:9px
}
.nav-links,.footer-links,.resource-links {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 20px
}
.nav-links a,.footer-links a,.resource-links a {
    font-size:.86rem;
    text-decoration:none;
    color:var(--muted)
}
.nav-links a:hover,.footer-links a:hover,.resource-links a:hover {
    color:var(--blue);
    text-decoration:underline
}
.hero {
    background:linear-gradient(120deg,#f3f6fd,#fbfcff);
    border-block:1px solid var(--line)
}
.hero-grid {
    display:grid;
    grid-template-columns:1fr 1.08fr;
    gap:36px;
    align-items:center;
    padding-block:38px
}
.eyebrow {
    font-size:.72rem;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--blue);
    margin-bottom:12px
}
.hero-copy>p:not(.eyebrow) {
    color:var(--muted);
    max-width:520px;
    margin-top:18px
}
.actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px
}
.button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:11px 18px;
    border-radius:10px;
    text-decoration:none;
    font-size:.9rem;
    font-weight:650;
    border:1px solid var(--line);
    background:white;
    color:var(--ink)
}
.button.primary {
    background:var(--ink);
    color:white;
    border-color:var(--ink)
}
.button:hover {
    filter:brightness(.94)
}
.small {
    font-size:.8rem;
    color:var(--muted)
}
.hero-image {
    border:1px solid #cfd6e5;
    border-radius:16px;
    background:#172033;
    padding:6px;
    box-shadow:0 14px 35px #17203318
}
.hero-image img {
    border-radius:10px;
    width:100%;
    height:auto
}
.section {
    padding-block:34px;
    border-bottom:1px solid var(--line)
}
.section-heading {
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:22px
}
.section-heading p {
    color:var(--muted);
    font-size:.9rem;
    max-width:590px
}
.preview {
    background:#f3f6ff
}
.preview .section-heading {
    margin-bottom:16px
}
.release-note {
    font-size:.8rem;
    color:var(--muted);
    margin-top:16px
}
.grid {
    display:grid;
    gap:16px
}
.three {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
.card {
    padding:19px;
    border:1px solid var(--line);
    border-radius:12px;
    background:white
}
.card p {
    font-size:.88rem;
    color:var(--muted);
    margin-top:8px
}
.preview .card {
    border-color:#dbe3fb
}
.card ul {
    margin:12px 0 0;
    padding-left:18px;
    font-size:.85rem;
    color:var(--muted)
}
.card li+li {
    margin-top:4px
}
.gallery-section {
    background:#121c2e;
    color:#fff
}
.gallery-section .section-heading p {
    color:#bec9df
}
.gallery-card {
    overflow:hidden;
    border:1px solid #2f3d55;
    border-radius:12px;
    background:#1a2740
}
.screenshot-button {
    border:0;
    padding:0;
    display:block;
    width:100%;
    cursor:zoom-in;
    background:#0e1727
}
.screenshot-button img {
    width:100%;
    height:auto;
    aspect-ratio:8/5;
    object-fit:contain
}
.gallery-caption {
    padding:12px 15px
}
.gallery-caption h3 {
    font-size:.88rem
}
.gallery-caption p {
    color:#bec9df;
    font-size:.78rem;
    margin-top:5px
}
.pricing-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.price {
    font-size:1.9rem;
    letter-spacing:-.04em;
    font-weight:750;
    margin-top:7px
}
.price span {
    font-size:.9rem;
    font-weight:450;
    letter-spacing:0
}
.pricing-grid .card p {
    max-width:460px
}
.pricing-grid .premium {
    border-color:#b9c9f5;
    background:#f8faff
}
.pricing-note {
    margin-top:14px
}
.faq-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 28px
}
details {
    border-bottom:1px solid var(--line)
}
summary {
    padding:15px 0;
    font-size:.92rem;
    font-weight:600;
    cursor:pointer
}
details>p,details>.policy {
    padding:0 0 18px;
    font-size:.88rem;
    color:var(--muted)
}
details>p {
    max-width:720px
}
.policy h3 {
    margin-top:17px;
    margin-bottom:6px
}
.policy p+p {
    margin-top:12px
}
.policy ul {
    padding-left:20px
}
.policy a {
    overflow-wrap:anywhere
}
.policy strong {
    color:var(--ink)
}
.resources {
    padding-block:25px
}
.resources h2 {
    font-size:1.3rem;
    margin-bottom:7px
}
.resources>p {
    margin-bottom:12px
}
.resource-links {
    margin-top:20px
}
.site-footer {
    padding-block:24px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-top:1px solid var(--line)
}
.skip-link {
    position:absolute;
    top:-80px;
    left:16px;
    z-index:5;
    padding:10px 16px;
    background:white
}
.skip-link:focus {
    top:12px
}
.screenshot-dialog {
    padding:16px;
    border:0;
    border-radius:16px;
    background:#172033;
    color:white;
    width:max-content;
    max-width:94vw;
    max-height:94vh
}
.screenshot-dialog::backdrop {
    background:#061021cf
}
.dialog-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:12px
}
.dialog-toolbar p {
    font-size:.9rem
}
.dialog-toolbar button {
    color:white;
    border:1px solid #66738d;
    border-radius:8px;
    background:#2c3b55;
    padding:7px 12px;
    cursor:pointer
}
.screenshot-dialog img {
    max-height:78vh;
    max-width:calc(94vw - 32px);
    width:auto;
    height:auto;
    border-radius:8px
}
.screenshot-dialog form {
    margin:0
}
@media(max-width:900px) {
    .three {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .hero-grid {
        gap:24px
    }
    .site-nav {
        align-items:flex-start
    }
    .nav-links {
        justify-content:flex-end;
        gap:8px 15px
    }
}
@media(max-width:640px) {
    .container {
        width:calc(100% - 32px)
    }
    .site-nav {
        flex-direction:column;
        gap:12px;
        padding-block:14px
    }
    .nav-links {
        justify-content:flex-start
    }
    .hero-grid {
        grid-template-columns:1fr;
        padding-block:28px;
        gap:24px
    }
    .hero-copy>p:not(.eyebrow) {
        margin-top:14px
    }
    .three,.pricing-grid,.faq-grid {
        grid-template-columns:1fr
    }
    .section {
        padding-block:26px
    }
    .section-heading {
        margin-bottom:17px;
        gap:9px
    }
    .gallery-section .three {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px
    }
    .gallery-caption {
        padding:10px
    }
    .gallery-caption p {
        display:none
    }
    .gallery-caption h3 {
        font-size:.78rem
    }
    .card {
        padding:17px
    }
    .site-footer {
        align-items:flex-start
    }
    .price {
        font-size:1.65rem
    }
    .screenshot-dialog {
        padding:10px
    }
    .screenshot-dialog img {
        max-width:calc(94vw - 20px)
    }
}