/* Public cards use their surface color, without borders or shadows. */
body:is(.landing-page,.feature-page,.blog-post-page,.app-login-page,.pb-share-page) :is(
    .article-summary,.article-author,.article-download-cta,.product-page__aside,
    .ratio-result,.public-disclosure,.lp-faq__item,.site-footer-card,.lp-tiers__card,
    .ratio-preview__box,.feature-overview__grid article,.lp-guide-card,.home-feature-card,
    .home-feature-focus,.home-design__stage,.home-review,.request-card,.requests-voting,
    .app-visual-stage,.feature-detail__screens,.booth-showcase-panel,.booth-carousel__stage,
    .pb-share-card,.lp-testimonials__card,.lp-events__card,.lp-info-card,.ratio-panel,
    .keep-reading-card,.keep-reading-grid article,.blog-grid article,.blog-card,.article-faq,
    .support-faq__item,.feature-card,.app-visual,.lp-guide-card__cover,.lp-guide-card__body
) { border: 0 !important; box-shadow: none !important; }
body :is(.booth-showcase-panel,.app-visual-stage,.home-design__stage)::before { box-shadow: none !important; border: 0 !important; }
body.landing-page .public-page-content { max-width: none; width: 100%; margin: 0 auto; text-align: left; }
body.landing-page .requests-page.public-page-width { box-sizing: border-box; width: 90%; max-width: var(--public-content-max,1240px); padding-left: 0; padding-right: 0; }
.request-card { background: var(--public-panel-bg); }
.download-cta { box-sizing: border-box; width: 90%; max-width: var(--public-content-max,1240px); margin: 72px auto 80px; padding: 52px 64px; background: #080808; color: #fff; border: 0; border-radius: 30px; box-shadow: none; }
.download-cta__screens { display: flex; justify-content: center; align-items: center; gap: 28px; height: 380px; margin: 0 auto 44px; }
.download-cta .download-cta__phone { flex: 0 0 auto; height: 100%; width: auto; max-width: none; }
.download-cta .download-cta__phone--side { height: 86%; }
.download-cta .download-cta__phone > img { position: absolute; left: var(--screen-left); top: var(--screen-top); width: var(--screen-width); height: var(--screen-height); object-fit: contain; background: #000; border-radius: var(--screen-radius); }
.download-cta__bottom { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.download-cta__copy { max-width: 690px; }
.download-cta__copy h2 { color: #fff; font-size: clamp(30px,3.5vw,48px); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; margin: 0 0 20px; }
.download-cta__copy p { color: #c7c7cd; font-size: 18px; line-height: 1.65; margin: 0 0 28px; }
.download-cta__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.download-cta__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; transition: background .2s,color .2s; }
.download-cta__button--primary { color: #080808; background: #fff; }
.download-cta a.download-cta__button--primary:is(:hover,:focus-visible) { color: #080808; background: #e7e7ec; }
.download-cta__button--primary svg { display: block; width: 20px; height: 24px; }
.download-cta__button--support { color: #fff; background: #292929; }
.download-cta a.download-cta__button--support:is(:hover,:focus-visible) { color: #fff; background: #414141; }
.download-cta__qr { flex: 0 0 128px; color: #c7c7cd; text-align: center; font-size: 12px; transition: color .2s; }
.download-cta a.download-cta__qr:is(:hover,:focus-visible) { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.download-cta__qr img { display: block; width: 128px; height: 128px; border-radius: 14px; background: #fff; padding: 8px; margin-bottom: 12px; }
.download-cta a:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@media(max-width:760px) {
    .download-cta { padding: 32px 24px; margin: 48px auto; border-radius: 24px; }
    .download-cta__screens { height: min(300px,50vw); gap: 12px; margin-bottom: 32px; }
    .download-cta__bottom { flex-direction: column; align-items: flex-start; gap: 32px; }
    .download-cta__copy p { font-size: 16px; }
    .download-cta__qr { display: flex; align-items: center; gap: 16px; flex-basis: auto; }
    .download-cta__qr img { width: 88px; height: 88px; margin: 0; }
}
@media(prefers-reduced-motion:reduce) { .download-cta__button, .download-cta__qr { transition: none; } }

/* Article previews need a visible edge on the white page canvas. */
body:is(.landing-page,.blog-post-page) :is(.blog-card,.keep-reading-grid article) { border: 1px solid #e4e4e7 !important; box-shadow: none !important; }

/* The download QR opens at a readable size in an accessible native dialog. */
html.download-qr-open { overflow: hidden; }
.download-qr-dialog { width: calc(100% - 40px); max-width: 400px; max-height: calc(100dvh - 40px); box-sizing: border-box; margin: auto; padding: 32px; border: 0; border-radius: 24px; background: #fff; color: #1d1d1f; color-scheme: light; overflow: auto; }
.download-qr-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.download-qr-dialog__brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.download-qr-dialog__brand img { display: block; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; }
.download-qr-dialog::backdrop { background: rgba(8,8,8,.65); }
.download-qr-dialog h2 { margin: 24px 0; color: #1d1d1f; font-size: 26px; font-weight: 600; line-height: 1.2; text-align: center; }
.download-qr-dialog__image { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; background: #fff; }
.download-qr-dialog p { margin: 20px 0 0; color: #62626b; font-size: 15px; line-height: 1.6; text-align: center; }
.download-qr-dialog__close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; margin-left: auto; border: 0; border-radius: 50%; background: #f4f5f8; color: #1d1d1f; cursor: pointer; }
.download-qr-dialog__close:hover { background: #e4e4e7; }
.download-qr-dialog__close:focus-visible { outline: 2px solid #242126; outline-offset: 3px; }
@media(max-width:600px) {
    .download-qr-dialog { padding: 24px; }
    .download-qr-dialog__brand { font-size: 15px; }
    .download-qr-dialog__brand img { width: 36px; height: 36px; border-radius: 9px; }
}