.aparte-page {
    --ap-ink: #252320;
    --ap-muted: #746f67;
    --ap-paper: #f6f1e8;
    --ap-paper-deep: #e7dfd2;
    --ap-copper: #a96b45;
    --ap-line: rgba(37, 35, 32, 0.14);
    --ap-card: rgba(255, 255, 255, 0.32);
    max-width: 1120px;
    padding: 36px 24px 96px;
    color: var(--ap-ink);
}

.aparte-page *, .aparte-page *::before, .aparte-page *::after { box-sizing: border-box; }
.aparte-page :where(h1, h2, h3, p, ul, ol) { margin: 0; }
.aparte-page img { display: block; max-width: 100%; height: auto; }
.aparte-page h1, .aparte-page h2, .aparte-page h3 { color: var(--ap-ink); text-wrap: balance; }
.aparte-page p { color: var(--ap-muted); }

.ap-hero { padding: 72px 0 88px; text-align: center; }
.ap-icon { margin: 0 auto 30px; border-radius: 31px; box-shadow: 0 22px 55px rgba(50, 39, 29, 0.2); }
.ap-kicker, .ap-eyebrow { color: var(--ap-copper) !important; font: 600 0.74rem/1.2 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.ap-hero h1 { margin-top: 14px; font: 500 clamp(3.5rem, 8vw, 7.25rem)/0.94 Newsreader, serif; letter-spacing: -0.045em; }
.ap-intro { max-width: 710px; margin: 28px auto 0 !important; font: 400 clamp(1.13rem, 2vw, 1.38rem)/1.6 Inter, sans-serif; }
.ap-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.ap-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 22px; border-radius: 999px; font: 600 0.92rem/1 Inter, sans-serif; text-decoration: none; transition: transform 150ms ease, background 150ms ease; }
.ap-button:hover { transform: translateY(-2px); }
.ap-button-primary, .ap-button-primary:hover { background: var(--ap-ink); color: #fff; }
.ap-button-secondary, .ap-button-secondary:hover { border: 1px solid var(--ap-line); background: rgba(255, 255, 255, 0.45); color: var(--ap-ink); }
.ap-requirements { margin-top: 18px !important; font: 500 0.78rem/1.5 Inter, sans-serif; }

.ap-demo { margin-top: 72px; padding: 18px; border: 1px solid var(--ap-line); border-radius: 34px; background: #d8d1c6; box-shadow: 0 35px 90px rgba(40, 34, 28, 0.14); }
.ap-desktop { min-height: 670px; overflow: hidden; border-radius: 22px; background: linear-gradient(145deg, #8a837a, #4a4743); }
.ap-menu-bar { display: flex; height: 34px; align-items: center; justify-content: flex-end; gap: 22px; padding: 0 20px; background: rgba(241, 238, 232, 0.86); color: #292724; font: 500 0.73rem/1 Inter, sans-serif; }
.ap-shortcut { padding: 5px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.76); }
.ap-pad { display: flex; width: min(720px, calc(100% - 36px)); min-height: 510px; margin: 58px auto; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 22px; background: var(--ap-paper); box-shadow: 0 28px 75px rgba(20, 18, 16, 0.34); text-align: left; }
.ap-copy { flex: 1; padding: 68px clamp(34px, 8vw, 86px); }
.ap-copy h2 { max-width: 520px; font: 500 clamp(2rem, 4vw, 3.2rem)/1.04 Newsreader, serif; letter-spacing: -0.028em; }
.ap-copy p { max-width: 540px; margin-top: 24px !important; font: 400 1.02rem/1.72 Inter, sans-serif; color: var(--ap-muted); }
.ap-pad footer { display: flex; gap: 9px; justify-content: flex-end; padding: 15px 22px; border-top: 1px solid rgba(37, 35, 32, 0.1); }
.ap-pad footer span { padding: 7px 12px; border-radius: 8px; background: rgba(37, 35, 32, 0.06); color: var(--ap-muted); font: 500 0.76rem/1 Inter, sans-serif; }

.ap-section { padding: 100px 0; border-top: 1px solid var(--ap-line); }
.ap-section > h2, .ap-band h2 { max-width: 760px; margin-top: 14px; font: 500 clamp(2.6rem, 5vw, 4.7rem)/1 Newsreader, serif; letter-spacing: -0.035em; }
.ap-lede { max-width: 720px; margin-top: 26px !important; font: 400 1.15rem/1.7 Inter, sans-serif; }
.ap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 58px; }
.ap-grid article { min-height: 265px; padding: 30px; border: 1px solid var(--ap-line); border-radius: 20px; background: var(--ap-card); }
.ap-grid article > span { color: var(--ap-copper); font: 600 0.76rem/1 Inter, sans-serif; }
.ap-grid h3 { margin-top: 54px; font: 500 1.55rem/1.15 Newsreader, serif; }
.ap-grid p { margin-top: 12px !important; font: 400 0.94rem/1.65 Inter, sans-serif; }

.ap-band { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 70px; margin: 30px -40px; padding: 78px 70px; border-radius: 30px; background: #252320; }
.ap-band h2, .ap-band p, .ap-band li { color: #f5f0e8; }
.ap-band > div > p:last-child { max-width: 680px; margin-top: 25px !important; color: #bcb5aa; font: 400 1.05rem/1.72 Inter, sans-serif; }
.ap-band ul { display: grid; align-content: center; gap: 0; padding: 0; list-style: none; }
.ap-band li { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.13); font: 500 0.93rem/1.2 Inter, sans-serif; }
.ap-band li::before { content: "✓"; margin-right: 12px; color: #c48a61; }

.ap-install ol { display: grid; gap: 0; margin-top: 44px; padding: 0; list-style: none; }
.ap-install li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--ap-line); }
.ap-install li > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--ap-paper-deep); color: var(--ap-copper); font: 600 0.8rem/1 Inter, sans-serif; }
.ap-install h3 { font: 500 1.3rem/1.2 Newsreader, serif; }
.ap-install li p { margin-top: 5px !important; font: 400 0.94rem/1.5 Inter, sans-serif; }

.ap-faq details { padding: 24px 0; border-bottom: 1px solid var(--ap-line); }
.ap-faq details:first-of-type { margin-top: 40px; border-top: 1px solid var(--ap-line); }
.ap-faq summary { cursor: pointer; color: var(--ap-ink); font: 500 1.12rem/1.4 Inter, sans-serif; }
.ap-faq details p { max-width: 700px; margin-top: 14px !important; font: 400 0.95rem/1.65 Inter, sans-serif; }

.ap-final { padding: 108px 24px 40px; border-top: 1px solid var(--ap-line); text-align: center; }
.ap-final img { margin: 0 auto 24px; border-radius: 16px; }
.ap-final h2 { margin-bottom: 30px; font: 500 clamp(2.4rem, 5vw, 4.2rem)/1 Newsreader, serif; letter-spacing: -0.03em; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .aparte-page { --ap-ink: #eee9e1; --ap-muted: #aaa39a; --ap-paper: #262421; --ap-paper-deep: #35312c; --ap-copper: #d4976e; --ap-line: rgba(238, 233, 225, 0.14); --ap-card: rgba(255, 255, 255, 0.04); }
    :root:not([data-theme="light"]) .ap-button-primary { background: #eee9e1; color: #24221f; }
    :root:not([data-theme="light"]) .ap-button-secondary { background: rgba(255, 255, 255, 0.04); }
}
:root[data-theme="dark"] .aparte-page { --ap-ink: #eee9e1; --ap-muted: #aaa39a; --ap-paper: #262421; --ap-paper-deep: #35312c; --ap-copper: #d4976e; --ap-line: rgba(238, 233, 225, 0.14); --ap-card: rgba(255, 255, 255, 0.04); }
:root[data-theme="dark"] .ap-button-primary, :root[data-theme="dark"] .ap-button-primary:hover { background: #eee9e1; color: #24221f; }
:root[data-theme="dark"] .ap-button-secondary, :root[data-theme="dark"] .ap-button-secondary:hover { background: rgba(255, 255, 255, 0.04); }

@media (max-width: 800px) {
    .aparte-page { padding-inline: 18px; }
    .ap-hero { padding-top: 44px; }
    .ap-grid, .ap-band { grid-template-columns: 1fr; }
    .ap-band { gap: 38px; margin-inline: 0; padding: 54px 30px; }
    .ap-demo { margin-top: 52px; padding: 9px; border-radius: 22px; }
    .ap-desktop { min-height: 510px; border-radius: 15px; }
    .ap-pad { min-height: 405px; margin-block: 35px; }
    .ap-copy { padding: 46px 28px; }
    .ap-copy p { font-size: 0.9rem; }
}

@media (max-width: 640px) {
    body:has(.aparte-page) .header > .nav { display: none; }

    body:has(.aparte-page).menu-open .header > .nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 72px 0 0;
        background: var(--color-bg);
        padding: 32px var(--page-margin);
        gap: 24px;
        z-index: 100;
    }

    body:has(.aparte-page).menu-open .header > .nav a { font-size: 1.25rem; }
}

@media (max-width: 520px) {
    .ap-actions { flex-direction: column; }
    .ap-button { width: 100%; }
    .ap-requirements { padding-inline: 20px; }
    .ap-menu-bar { height: 28px; }
    .ap-desktop { min-height: 450px; }
    .ap-pad { width: calc(100% - 20px); min-height: 370px; margin-block: 26px; }
    .ap-copy h2 { font-size: 1.85rem; }
    .ap-copy p { margin-top: 17px !important; line-height: 1.55; }
    .ap-pad footer { padding: 12px; }
}