.home-page,
.app-detail-page {
    --page: #fff;
    --surface-blue: #e8f3ff;
    --line: #dce6f0;
    --ink: #172033;
    --muted: #5d6e85;
    --blue: #1976d2;
    --blue-dark: #125aa6;
    --green: #1b8738;
    --shadow: none;
}

body:has(main.home-page),
body:has(main.app-detail-page) { overflow-x: clip; background: #fff; }
:focus-visible { outline: 3px solid #2f80ed; outline-offset: 3px; }
body:has(main.home-page) .site-header .shell,
body:has(main.home-page) .site-footer .shell,
body:has(main.app-detail-page) .site-header .shell,
body:has(main.app-detail-page) .site-footer .shell,
main.home-page.shell,
main.app-detail-page.shell { width: min(1180px, calc(100% - 40px)); }
.site-header { border-top: 3px solid #2f80ed; background: rgba(255, 255, 255, .98); }
.site-brand strong { color: #172033; font-size: 20px; }
.main-nav > a, .nav-guide-dropdown > summary { color: #536a88; font-size: 14px; }
.header-actions .button.primary { min-height: 38px; border: 1px solid #b3d2f2; border-radius: 5px; background: #f7fbff; color: #165da9; font-size: 13px; }
.header-actions .button.primary:hover { border-color: #1976d2; background: #e8f3ff; }
.home-page .button,
.app-detail-page .button { border-radius: 5px; }
.home-page .button.primary,
.app-detail-page .button.primary { background: #1976d2; }
.home-page .button.primary:hover,
.app-detail-page .button.primary:hover { background: #125aa6; }

/* Keep the real banner and search form, but present the hero as a full-width band. */
.home-page { padding-top: 0; }
.home-hero-layout {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 38px max(20px, calc((100vw - 1180px) / 2)) 36px;
    border-bottom: 1px solid #c9def4;
    background: #e8f3ff;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: clamp(24px, 3vw, 42px);
}
.home-hero-layout .hero-download-card,
.home-hero-layout .hero-banner-card {
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.home-hero-layout .hero-download-card {
    display: flex;
    padding: 0;
    background: none;
    isolation: auto;
}
.home-hero-layout .hero-download-card::after { content: none; }
.home-hero-layout .hero-kicker { padding: 0; border: 0; border-radius: 0; background: none; color: #1b8738; font-size: 11px; }
.home-hero-layout .hero-download-card h1 { margin: 10px 0 8px; color: #172033; font-size: 38px; line-height: 1.22; }
.home-hero-layout .hero-download-card p { color: #506581; }
.home-hero-layout .hero-search-form { width: min(100%, 700px); min-height: 55px; margin-top: 21px; border-color: #a4c8ed; border-radius: 5px; box-shadow: 0 8px 25px rgba(47, 128, 237, .11); }
.home-hero-layout .hero-search-form:focus-within { border-color: #1976d2; box-shadow: 0 0 0 3px rgba(47, 128, 237, .22); }
.home-hero-layout .hero-search-form button { min-width: 88px; border-radius: 4px; background: #1976d2; }
.home-hero-layout .hero-hot-searches { margin-top: 14px; }
.home-hero-layout .hero-hot-searches a { padding: 4px 9px; border: 1px solid #bfd7f1; border-radius: 4px; background: #fff; color: #215f9f; }
.home-hero-layout .hero-hot-searches a:hover { border-color: #1976d2; background: #dcecff; }
.home-hero-layout .hero-download-footer { margin-top: 20px; padding-top: 0; }
.home-hero-layout .hero-points span::before { border-color: #1b8738; color: #1b8738; }
.home-hero-layout .hero-client-download { border-radius: 4px; background: #fff; }
.home-hero-layout .hero-banner-card { width: 100%; align-self: center; justify-self: end; background: transparent; }
.home-hero-layout .managed-banner picture { height: auto; }
.home-hero-layout .managed-banner img { display: block; width: 100%; height: auto; min-height: 0; max-height: 350px; object-fit: contain; }
.home-hero-layout:has(.fallback-banner) { grid-template-columns: 1fr; }
.home-hero-layout .fallback-banner { display: none; }

.home-page > .client-download-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 38px max(20px, calc((100vw - 1180px) / 2));
    border: 0;
    border-bottom: 1px solid #c9def4;
    border-radius: 0;
    background: #e8f3ff;
    box-shadow: none;
}
.home-page > .client-download-hero h1 { color: #172033; font-size: 38px; }
.home-page > .client-download-hero .button.secondary { border-color: #a4c8ed; background: #fff; }
.home-page .home-two-factor-entry,
.home-page .home-trust-strip,
.home-page .client-cta {
    margin-top: 25px;
    border: 0;
    border-top: 1px solid #dce6f0;
    border-bottom: 1px solid #dce6f0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}
.home-page .home-two-factor-entry { min-height: 86px; padding: 12px 0; }
.home-page .home-two-factor-mark { border-radius: 5px; box-shadow: none; }
.home-page .home-two-factor-entry h2 { font-size: 18px; }
.home-page .home-section,
.home-page .compact-section {
    margin-top: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.home-page .section-heading { min-height: 36px; margin-bottom: 12px; padding: 0; }
.home-page .section-heading h2 { font-size: 20px; }
.home-page .popular-grid,
.home-page .catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.home-page .popular-grid .app-card,
.home-page .catalog-grid .app-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 80px;
    padding: 13px 0;
    border: 0;
    border-top: 1px solid #dce6f0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    align-items: center;
    gap: 4px 12px;
}
.home-page .popular-grid .app-card:hover,
.home-page .catalog-grid .app-card:hover { background: #f0f7ff; }
.home-page .popular-grid .app-card-main,
.home-page .catalog-grid .app-card-main { align-items: center; }
.home-page .popular-grid .app-icon,
.home-page .catalog-grid .app-icon { width: 50px; height: 50px; border-radius: 8px; }
.home-page .popular-grid .app-card-copy strong,
.home-page .catalog-grid .app-card-copy strong { -webkit-line-clamp: 1; }
.home-page .popular-grid .app-card-updated,
.home-page .catalog-grid .app-card-updated { grid-column: 1; margin: 0 0 0 60px; }
.home-page .popular-grid .app-card-download,
.home-page .catalog-grid .app-card-download { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: auto; min-width: 64px; height: 32px; margin: 0; padding: 0 10px; border: 1px solid #a4c8ed; border-radius: 4px; background: #f7fbff; color: #165da9; }
.home-page .home-data-grid { gap: 38px; }
.home-page .home-data-grid .home-section { margin-top: 16px; }
.home-page .data-list,
.home-page .ranking-row { min-height: 42px; border-color: #dce6f0; }
.home-page .article-card { border-radius: 5px; }
.home-page .client-cta { padding: 18px 0; }

.app-detail-page .breadcrumbs { padding: 22px 0 26px; color: #637a98; }
.app-detail-page .app-detail-hero,
.app-detail-page .app-facts {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-right: max(20px, calc((100vw - 1180px) / 2));
    padding-left: max(20px, calc((100vw - 1180px) / 2));
    border: 0;
    border-radius: 0;
    background: #f4f8ff;
    box-shadow: none;
}
.app-detail-page .app-detail-hero { gap: 23px; padding-top: 26px; padding-bottom: 25px; }
.app-detail-page .detail-icon { width: 84px; height: 84px; border: 1px solid #bed8f3; border-radius: 10px; }
.app-detail-page .app-detail-title h1 { color: #172033; font-size: 34px; line-height: 1.2; }
.app-detail-page .app-detail-title p { max-width: 730px; color: #4d627e; }
.app-detail-page .app-detail-action .button { border-radius: 4px; }
.app-detail-page .app-facts { margin-top: 0; padding-top: 17px; padding-bottom: 17px; border-top: 1px solid #cddff2; border-bottom: 1px solid #cddff2; }
.app-detail-page .app-facts div { padding: 0 18px; border-color: #cddff2; }
.app-detail-page .app-facts div:first-child { padding-left: 0; }
.app-detail-page .app-facts strong { overflow-wrap: anywhere; font-size: 13px; }
.app-detail-page .app-installer-bar { margin-top: 23px; padding: 14px 0; border: 0; border-top: 2px solid #f17820; border-bottom: 1px solid #dce6f0; border-radius: 0; background: #fff; }
.app-detail-page .app-installer-bar .button { border-radius: 4px; }
.app-detail-page .detail-section { margin-top: 24px; padding: 0 0 26px; border: 0; border-bottom: 1px solid #dce6f0; border-radius: 0; background: #fff; }
.app-detail-page .detail-section h2 { font-size: 19px; }
.app-detail-page .detail-section-heading > div > span { color: #1976d2; }
.app-detail-page .detail-layout { gap: 48px; }
.app-detail-page .detail-layout > aside { padding-left: 20px; border-left: 2px solid #f17820; }
.app-detail-page .screenshots img { width: 156px; height: 277px; border-radius: 6px; object-fit: contain; background: #f5f8fd; }
.app-detail-page .version-table > div:first-child { border-bottom: 1px solid #bcd0e8; border-radius: 0; background: #f4f8ff; }
.app-detail-page .version-table-row { min-height: 58px; }
.app-detail-page .version-table-row.is-current { background: #eaf4ff; box-shadow: inset 3px 0 #1976d2; }

@media (max-width: 980px) {
    .home-hero-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .home-hero-layout .hero-download-card { grid-column: 1; grid-row: 1; }
    .home-hero-layout .hero-banner-card { grid-column: 1; grid-row: 2; max-width: 760px; justify-self: start; }
}

@media (max-width: 820px) {
    body:has(main.home-page) .site-header .shell,
    body:has(main.home-page) .site-footer .shell,
    body:has(main.app-detail-page) .site-header .shell,
    body:has(main.app-detail-page) .site-footer .shell,
    main.home-page.shell,
    main.app-detail-page.shell { width: min(100% - 30px, 1180px); }
    .home-hero-layout { grid-template-columns: 1fr; gap: 22px; padding: 30px 15px; }
    .home-hero-layout .hero-download-card { order: 1; padding: 0; background: none; }
    .home-hero-layout .hero-banner-card { order: 2; width: 100%; aspect-ratio: auto; }
    .home-hero-layout .managed-banner img { max-height: none; }
    .home-hero-layout .fallback-banner { display: none; }
    .home-page > .client-download-hero { padding: 30px 15px; }
    .home-page .popular-grid,
    .home-page .catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 0 16px; }
    .home-page .popular-grid .app-card { min-width: 0; }
    .app-detail-page .app-detail-hero,
    .app-detail-page .app-facts { padding-right: 15px; padding-left: 15px; }
    .app-detail-page .detail-layout > aside { padding-left: 0; border-left: 0; }
}

@media (max-width: 640px) {
    .site-brand strong { font-size: 18px; }
    .home-hero-layout .hero-download-card h1,
    .home-page > .client-download-hero h1 { font-size: 28px; }
    .home-hero-layout .hero-download-footer { align-items: flex-start; flex-direction: column; }
    .home-page .home-two-factor-entry { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
    .home-page .home-two-factor-mark { width: 48px; height: 48px; font-size: 15px; }
    .home-page .home-two-factor-entry .button { grid-column: 2; justify-self: start; }
    .home-page .popular-grid,
    .home-page .catalog-grid { grid-template-columns: 1fr; }
    .home-page .home-data-grid { grid-template-columns: 1fr; gap: 6px; }
    .app-detail-page .app-detail-hero { grid-template-columns: 66px minmax(0, 1fr); gap: 14px; }
    .app-detail-page .detail-icon { width: 66px; height: 66px; }
    .app-detail-page .app-detail-title h1 { font-size: 25px; overflow-wrap: anywhere; }
    .app-detail-page .app-detail-action { grid-column: 1 / -1; }
    .app-detail-page .app-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
    .app-detail-page .app-facts div,
    .app-detail-page .app-facts div:first-child { padding: 0 10px; border-bottom: 0; }
    .app-detail-page .app-facts div:nth-child(odd) { padding-left: 0; }
    .app-detail-page .app-facts div:nth-child(even) { border-right: 0; }
    .app-detail-page .screenshots img { width: 138px; height: 245px; }
}