/* ==========================================================================
   POLISH LAYER (Oct 2026)
   Loaded after styles.css. Layout, spacing and interaction refinements only:
   no changes to copy, fonts or brand colours. Delete this file (and its
   <link> in index.html) to return to the original design exactly.
   ========================================================================== */

/* 1. Smooth in-page navigation; headings no longer hide under the fixed header */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 2. One shared content width, so every section lines up on the same edges */
.partners-inner,
.gptb-body,
.wgi-body,
.keyfeatures-body,
.footer-card {
    max-width: 1160px;
    width: 100%;
    box-sizing: border-box;
}
.gptbenefits,
.whygptinvestor,
.keyfeatures,
.footer-main { width: 100%; align-items: center; }

@media (min-width: 1081px) {
    .indv-benefit { justify-content: space-between; gap: 64px; }
    .indvbenefit-img { flex: 0 1 560px; }
    .indvbenefit-texts { flex: 0 1 500px; }

    /* 3. Hero: remove the large empty band between the hero and the partner strip */
    section.hero-section {
        height: auto;
        min-height: 0;
        padding-top: 140px;
        padding-bottom: 32px;
    }
    .herosection { margin-top: 0; width: 100%; max-width: 1160px; justify-content: space-between; }
}

/* 4. Key features: two equal columns, cards in a row share one height */
.keyfeatures-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.indv-feature { max-width: none; box-sizing: border-box; }
@media (max-width: 720px) {
    .keyfeatures-body { grid-template-columns: minmax(0, 1fr); }
}

/* 5. "Why GPT Investor": a real list with hanging bullets */
.wgi-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wgi-list li {
    position: relative;
    padding-left: 22px;
    font-size: 20px;
    line-height: 28px;
    color: #89868C;
}
.wgi-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #89868C;
}
@media (max-width: 1080px) {
    .wgi-list li { font-size: 16px; line-height: 24px; }
    .wgi-list li::before { top: 9px; }
}

/* 6. Calmer, consistent section rhythm */
section.why-gptinvestor, section.key-features { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 1080px) {
    section.why-gptinvestor, section.key-features { padding-top: 56px; padding-bottom: 56px; }
}

/* 7. Buttons: gentle hover lift and a visible keyboard focus ring */
.nav-ctas a,
.mainhero-ctas a,
.benefit-cta,
.install-link a {
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.mainhero-ctas a:hover,
.benefit-cta:hover,
.install-link a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.nav-links a p { transition: opacity 0.2s ease; }
.nav-links a:hover p { opacity: 0.7; }
a:focus-visible,
button:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
    border-radius: 20px;
}

/* 8. Footer: keep the CTA text and buttons above the purple glow */
.footer-maintexts { position: relative; z-index: 3; }

/* 9. Footer links and disclaimer */
.footer-ground { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer-links {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "M PLUS 1", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
}
.footer-links a { transition: opacity 0.2s ease; }
.footer-links a:hover { opacity: 0.7; }
.footer-links .dot { color: #89868C; }
.footer-ground p.footer-disclaimer { max-width: 760px; }
@media (max-width: 1080px) { .footer-links { font-size: 14px; } }

/* 10. Download buttons never squeeze their labels onto two lines; the row wraps instead */
.mainhero-ctas { flex-wrap: wrap; }
.mainhero-ctas a p, .benefit-cta p, .nav-ctas a p { white-space: nowrap; }

/* 11. The Apple icon is white; darken it when it appears on the white "Explore Benefit" buttons */
.benefit-cta img.store-icon-apple { filter: brightness(0); }
#download { scroll-margin-top: 120px; }