/* Product landing-page refinements retain the approved Dome palette and components. */
#main-content.dome-product-landing-page {
    text-align: center;
}

/* White detail groups contrast with the mist section backgrounds. */
#main-content.dome-product-landing-page .pool-dome-overview .pool-dome-benefit-details {
    background: white;
}

/* Reuse the warm planning notices from the Dome installation and anchoring pages. */
#main-content.dome-product-landing-page .pool-dome-overview.dome-product-season-planning {
    border-left: 4px solid var(--pool-dome-copper);
    background: var(--pool-dome-warm);
}

/* Reuse the navy-and-copper action treatment from the manufacturer pages. */
#main-content.dome-product-landing-page .pool-dome-overview.dome-product-designer {
    border-color: var(--pool-dome-navy);
    border-top: 4px solid var(--pool-dome-copper);
    background: var(--pool-dome-navy);
    color: white;
}

#main-content.dome-product-landing-page .dome-product-designer :is(h2, p, a) {
    color: white;
}

#main-content.dome-product-landing-page .dome-product-designer a:hover {
    color: var(--pool-dome-warm);
}

#main-content.dome-product-landing-page .dome-product-designer .pool-dome-secondary-cta {
    border-color: white;
    background: white;
    color: var(--pool-dome-navy);
}

#main-content.dome-product-landing-page .dome-product-designer .pool-dome-secondary-cta:hover {
    border-color: var(--pool-dome-warm);
    background: var(--pool-dome-warm);
    color: var(--pool-dome-navy);
}

#main-content.dome-product-landing-page .dome-product-designer a:focus-visible {
    outline-color: var(--pool-dome-warm);
}

#main-content.dome-product-landing-page .dome-product-designer .dome-overview-evidence-links {
    margin-block: 1rem;
}

#main-content.dome-product-landing-page .pool-dome-overview > p {
    max-width: none;
}

#main-content.dome-product-landing-page .anchor-cover-hero-copy {
    padding-block: 1.25rem;
}

#main-content.dome-product-landing-page .anchor-cover-hero-copy > p {
    max-width: 42rem;
    margin: 0 auto .85rem;
    line-height: 1.6;
}

#main-content.dome-product-landing-page .anchor-cover-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    max-width: 38rem;
    margin-inline: auto;
    gap: .75rem;
}

#main-content.dome-product-landing-page .anchor-cover-actions > a,
#main-content.dome-product-landing-page .pool-dome-project-help-actions > a {
    width: 100%;
    min-width: 0;
    margin: 0;
    justify-content: center;
    text-align: center;
}

.dome-product-hero-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1.5rem;
    margin-top: .5rem;
}

.dome-product-hero-links a,
#main-content.dome-product-landing-page .pool-dome-overview > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

#main-content.dome-product-landing-page .pool-dome-overview > a {
    margin-top: .5rem;
}

#main-content.dome-product-landing-page .dome-overview-comparison-table :is(th, td) {
    vertical-align: middle;
    text-align: center;
    line-height: 1.5;
}

#main-content.dome-product-landing-page .dome-overview-comparison-table a {
    width: 100%;
    justify-content: center;
    text-align: center;
    text-wrap: balance;
}

@media (min-width: 700px) {
    #main-content.dome-product-landing-page .dome-overview-comparison-table :is(th, td) {
        padding: 1rem 1.25rem;
    }

    #main-content.dome-product-landing-page .dome-overview-comparison-table thead th:first-child,
    #main-content.dome-product-landing-page .dome-overview-comparison-table tbody th {
        width: 18%;
    }

    #main-content.dome-product-landing-page .dome-overview-comparison-table thead th:nth-child(2) {
        width: 54%;
    }

    #main-content.dome-product-landing-page .dome-overview-comparison-table thead th:last-child {
        width: 28%;
    }
}

#main-content.dome-product-landing-page .dome-overview-installation-grid article {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main-content.dome-product-landing-page .dome-overview-installation-grid article > a {
    justify-content: center;
    margin-top: auto;
}

#main-content.dome-product-landing-page .pool-dome-project-help-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
}

#main-content.dome-product-landing-page .dome-overview-resource-columns ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

#main-content.dome-product-landing-page .dome-overview-resource-columns li {
    margin: .25rem 0;
}

#main-content.dome-product-landing-page .dome-overview-resource-columns a {
    justify-content: center;
}

@media (max-width: 767px) {
    #main-content.dome-product-landing-page .pool-dome-project-help-actions {
        grid-template-columns: minmax(0, 1fr);
        max-width: 28rem;
    }
}

@media (max-width: 575px) {
    #main-content.dome-product-landing-page .anchor-cover-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Fill matching photo frames; contain left the different source shapes letterboxed. */
#main-content.dome-product-landing-page .dome-overview-installation-grid img {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
}

#main-content.dome-product-landing-page .dome-product-benefits .pool-dome-benefit-details {
    margin-block: 1.25rem;
}

#main-content.dome-product-landing-page .dome-product-benefits .pool-dome-benefit-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#main-content.dome-product-landing-page .dome-product-benefits .pool-dome-benefit-detail > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: auto;
    padding-top: .75rem;
}

#main-content.dome-product-landing-page .dome-product-installation .pool-dome-benefit-details {
    margin-block: 1.25rem;
}

.dome-product-installation-details {
    max-width: 64rem;
    margin: 0 auto 1.25rem;
    border-top: 1px solid var(--pool-dome-border);
}

#main-content.dome-product-landing-page .dome-product-installation-details .anchor-cover-faq-question {
    font-size: 1.1rem;
}

#main-content.dome-product-landing-page .dome-product-installation .dome-overview-evidence-links {
    margin-top: 1rem;
    align-items: center;
}
