/* Mobile & desktop cards: show each screenshot in full instead of cropping it */
.platform-media{align-items:center;padding:24px;height:340px}
@media(max-width:950px){.platform-media{height:290px}}
.desktop-media img{width:auto;height:auto;max-width:100%;max-height:100%}
.mobile-media{gap:16px}
.mobile-media .phone{height:100%;width:auto;border-width:6px;border-bottom:6px solid #15161d;border-radius:22px}
.mobile-media .phone img{height:100%;width:auto}
@media(max-width:600px){.platform-media{padding:18px;height:300px}.mobile-media .phone{border-width:5px;border-radius:18px}}

/* Hero phone: show a matching blank screen (not black) until the screenshot arrives */
.hero-phone{background:#f6f6f6}

/* Landing page theme: light by default, dark when the system prefers it or the visitor picks it (data-theme on <html>). */
.head-actions{display:flex;align-items:center;gap:10px}
.theme-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.td{display:none!important}
@media(max-width:600px){.theme-btn{width:34px;height:34px}}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="dark"] .hero-phone{background:#000}
:root[data-theme="dark"] body{background:#111218;color:#eceef6}
:root[data-theme="dark"] p{color:#a3a8bd}
:root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3,:root[data-theme="dark"] .brand{color:#eceef6}
:root[data-theme="dark"] .eyebrow{color:#98a2ff}
:root[data-theme="dark"] .text-link,:root[data-theme="dark"] .hero-note a{color:#98a2ff}
:root[data-theme="dark"] .hero-note{color:#a3a8bd!important}
:root[data-theme="dark"] .secondary{background:#262a45;color:#c9cdff}
:root[data-theme="dark"] .secondary:hover{background:#30355a}
:root[data-theme="dark"] header,:root[data-theme="dark"] footer,:root[data-theme="dark"] .app-directory{border-color:#2b2e3b}
:root[data-theme="dark"] .features,:root[data-theme="dark"] .pricing-section{background:#161821}
:root[data-theme="dark"] .price-card,:root[data-theme="dark"] .platform-card,:root[data-theme="dark"] .download-grid article{background:#181a23;border-color:#2b2e3b}
:root[data-theme="dark"] .price-top{border-color:#2b2e3b}
:root[data-theme="dark"] .price-card li:before{background:#262a45;color:#c9cdff}
:root[data-theme="dark"] .platform-media{background:#1d2033}
:root[data-theme="dark"] .other-app-card{background:#181a23;border-color:#2b2e3b}
:root[data-theme="dark"] .other-app-card:hover{background:#1d2033;border-color:#3a4170}
:root[data-theme="dark"] .other-app-name,:root[data-theme="dark"] .other-apps-label{color:#eceef6}
:root[data-theme="dark"] .guide-links a{border-color:#2b2e3b;color:#eceef6}
:root[data-theme="dark"] .guide-links a:hover{background:#1d2033;border-color:#3a4170;color:#c9cdff}
:root[data-theme="dark"] details{border-color:#2b2e3b}
:root[data-theme="dark"] summary{color:#eceef6}
:root[data-theme="dark"] .faq a,:root[data-theme="dark"] .existing-customer a{color:#98a2ff}
:root[data-theme="dark"] .hero-shot img,:root[data-theme="dark"] .desktop-shot img,:root[data-theme="dark"] .desktop-media img{border-color:#2b2e3b;box-shadow:0 20px 60px #0006}
:root[data-theme="dark"] figcaption,:root[data-theme="dark"] .shot-caption{color:#7d8299!important}
:root[data-theme="dark"] .theme-btn{background:#181a23;border-color:#2b2e3b;color:#eceef6}
:root[data-theme="dark"] .tl{display:none!important}
:root[data-theme="dark"] .td{display:block!important}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]){color-scheme:dark}
:root:not([data-theme="light"]) .hero-phone{background:#000}
:root:not([data-theme="light"]) body{background:#111218;color:#eceef6}
:root:not([data-theme="light"]) p{color:#a3a8bd}
:root:not([data-theme="light"]) h1,:root:not([data-theme="light"]) h2,:root:not([data-theme="light"]) h3,:root:not([data-theme="light"]) .brand{color:#eceef6}
:root:not([data-theme="light"]) .eyebrow{color:#98a2ff}
:root:not([data-theme="light"]) .text-link,:root:not([data-theme="light"]) .hero-note a{color:#98a2ff}
:root:not([data-theme="light"]) .hero-note{color:#a3a8bd!important}
:root:not([data-theme="light"]) .secondary{background:#262a45;color:#c9cdff}
:root:not([data-theme="light"]) .secondary:hover{background:#30355a}
:root:not([data-theme="light"]) header,:root:not([data-theme="light"]) footer,:root:not([data-theme="light"]) .app-directory{border-color:#2b2e3b}
:root:not([data-theme="light"]) .features,:root:not([data-theme="light"]) .pricing-section{background:#161821}
:root:not([data-theme="light"]) .price-card,:root:not([data-theme="light"]) .platform-card,:root:not([data-theme="light"]) .download-grid article{background:#181a23;border-color:#2b2e3b}
:root:not([data-theme="light"]) .price-top{border-color:#2b2e3b}
:root:not([data-theme="light"]) .price-card li:before{background:#262a45;color:#c9cdff}
:root:not([data-theme="light"]) .platform-media{background:#1d2033}
:root:not([data-theme="light"]) .other-app-card{background:#181a23;border-color:#2b2e3b}
:root:not([data-theme="light"]) .other-app-card:hover{background:#1d2033;border-color:#3a4170}
:root:not([data-theme="light"]) .other-app-name,:root:not([data-theme="light"]) .other-apps-label{color:#eceef6}
:root:not([data-theme="light"]) .guide-links a{border-color:#2b2e3b;color:#eceef6}
:root:not([data-theme="light"]) .guide-links a:hover{background:#1d2033;border-color:#3a4170;color:#c9cdff}
:root:not([data-theme="light"]) details{border-color:#2b2e3b}
:root:not([data-theme="light"]) summary{color:#eceef6}
:root:not([data-theme="light"]) .faq a,:root:not([data-theme="light"]) .existing-customer a{color:#98a2ff}
:root:not([data-theme="light"]) .hero-shot img,:root:not([data-theme="light"]) .desktop-shot img,:root:not([data-theme="light"]) .desktop-media img{border-color:#2b2e3b;box-shadow:0 20px 60px #0006}
:root:not([data-theme="light"]) figcaption,:root:not([data-theme="light"]) .shot-caption{color:#7d8299!important}
:root:not([data-theme="light"]) .theme-btn{background:#181a23;border-color:#2b2e3b;color:#eceef6}
:root:not([data-theme="light"]) .tl{display:none!important}
:root:not([data-theme="light"]) .td{display:block!important}
}