.anchor-details { margin-top: 1.25rem; }
/* Use the shared header clearance once, including direct fragment links. */
.anchor-details :is(section, nav), #anchor-details, #cable { scroll-margin-top: 0; }
.anchor-page a { scroll-margin-block: 5rem 2rem; touch-action: manipulation; }
.anchor-page a:focus-visible { outline: 3px solid var(--pool-dome-teal); outline-offset: 3px; }
.anchor-page :is(h1, h2, h3, h4) { text-wrap: balance; }
.anchor-page .pool-dome-hero-copy h1 { text-align: center; margin-inline: auto; }

/* Keep the three summaries aligned even when a heading wraps. */
@media (min-width: 900px) {
    .anchor-key-points { grid-template-rows: auto auto; }
    .anchor-key-points > .pool-dome-benefit-detail {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
    }
}

.anchor-air-seal-diagram { display: block; width: 100%; height: auto; }

/* Bordered sections keep each topic together. */
.anchor-page .pool-dome-product-page { gap: 1.25rem; }
.anchor-page .pool-dome-benefit-detail { padding: 1.25rem; }
.anchor-topic-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .75rem; margin-bottom: 1rem; }
.anchor-topic-links a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: .5rem; color: var(--pool-dome-navy); font-weight: 700; text-align: center; text-underline-offset: .2em; }
.anchor-topic-links a:hover { color: var(--pool-dome-copper); background: var(--pool-dome-mist); }
.anchor-detail-content { display: grid; gap: 1rem; }
.anchor-detail-content > .pool-dome-specification-section { --anchor-section-padding: 1.25rem; padding: var(--anchor-section-padding); border: 1px solid var(--pool-dome-border); border-radius: 8px; }
.anchor-detail-content .pool-dome-specification-heading { margin: 0 0 1.25rem; padding: 0 0 1rem; border-bottom: 1px solid var(--pool-dome-border); text-align: center; }
.anchor-detail-content .pool-dome-specification-heading h2 { font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.3; }
.anchor-detail-content .pool-dome-installation-step-body { grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.anchor-detail-content .pool-dome-installation-step-copy { text-align: left; }
.anchor-detail-content p { line-height: 1.6; }
.anchor-detail-content .pool-dome-installation-step-copy > p { max-width: 60ch; margin-inline: auto; }
.anchor-detail-content .pool-dome-installation-figure a { width: 100%; }
.anchor-detail-content figcaption { max-width: 60ch; margin-inline: auto; text-align: left; }
/* Compare the same topic side by side, with equal treatment for each system. */
.anchor-detail-content .anchor-comparison { padding-bottom: 0; }
.anchor-comparison > .pool-dome-specification-heading { margin-bottom: 0; border-bottom: 0; }
.anchor-comparison .pool-dome-specification-heading p { max-width: 78ch; margin: .75rem auto 0; }
.anchor-comparison-topic { margin-inline: calc(-1 * var(--anchor-section-padding)); padding: var(--anchor-section-padding); border-top: 1px solid var(--pool-dome-border); }
.anchor-comparison-topic:nth-of-type(odd), .anchor-detail-content #anchor-care { background: var(--pool-dome-mist); }
.anchor-comparison-topic:last-child { border-radius: 0 0 7px 7px; }
.anchor-comparison-topic > h3 {
    margin: calc(-1 * var(--anchor-section-padding)) calc(-1 * var(--anchor-section-padding)) 1rem;
    padding: .8rem var(--anchor-section-padding);
    background: var(--pool-dome-navy);
    color: var(--bs-white);
    font-size: clamp(1.15rem, 2vw, 1.3rem);
    line-height: 1.4;
    text-align: center;
}
.anchor-comparison-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.anchor-comparison-option { min-width: 0; }
.anchor-comparison-option :is(h3, h4) { margin: 0 0 .75rem; color: var(--pool-dome-navy); font-size: 1.2rem; font-weight: 700; line-height: 1.45; text-align: center; }
.anchor-comparison-option :is(h3, h4) span { display: block; margin-top: .25rem; color: var(--pool-dome-blue); font-size: 1rem; font-weight: 400; text-wrap: balance; }
.anchor-comparison-option + .anchor-comparison-option { border-top: 1px solid var(--pool-dome-border); padding-top: 1.25rem; }
.anchor-comparison-copy p { max-width: 56ch; margin: 0 auto .75rem; line-height: 1.55; }
.anchor-comparison-copy p:last-child { margin-bottom: 0; }
.anchor-comparison-link { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: .75rem; padding: .5rem; border-top: 1px solid var(--pool-dome-border); text-align: center; }
.anchor-comparison-option figcaption { max-width: 48ch; }
.anchor-comparison-option .pool-dome-installation-figure { margin: 0 0 1rem; }
.anchor-detail-content #air-seal { background: var(--bs-body-bg); }
.anchor-seal-comparison .anchor-air-seal-figure { align-self: start; }
.anchor-seal-comparison .anchor-air-seal-diagram { object-fit: contain; }
.anchor-explainer { display: grid; gap: 1rem; min-width: 0; }
.anchor-explainer :is(h3, h4) { margin: 0 0 .4rem; font-size: 1.15rem; }
.anchor-explainer p { max-width: 60ch; margin: 0; }
.anchor-explainer > div + div { padding-top: 1rem; border-top: 1px solid var(--pool-dome-border); }
.anchor-care-contact { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--pool-dome-border); text-align: center; }
.anchor-care-contact p { max-width: 64ch; margin: 0 auto .75rem; }
.anchor-care-contact .pool-dome-secondary-cta { max-width: 100%; white-space: normal; }
@media (min-width: 800px) {
    .anchor-topic-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .anchor-detail-content .pool-dome-installation-step-body,
    .anchor-comparison-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .anchor-comparison-columns { gap: .85rem 0; }
    .anchor-comparison-option { display: grid; grid-row: span 2; grid-template-rows: subgrid; padding-inline: 1.25rem; }
    .anchor-comparison-topic-media .anchor-comparison-option,
    .anchor-comparison-topic-links .anchor-comparison-option { grid-row: span 3; }
    .anchor-comparison-topic-media.anchor-comparison-topic-links .anchor-comparison-option { grid-row: span 4; }
    .anchor-comparison-link { margin-top: 0; }
    .anchor-comparison-option :is(h3, h4), .anchor-comparison-option .pool-dome-installation-figure { margin-bottom: 0; }
    .anchor-comparison-option + .anchor-comparison-option { border-top: 0; border-left: 1px solid var(--pool-dome-border); padding: 0 1.25rem; }
    .anchor-comparison-copy { text-align: center; }
}
@media (max-width: 799.98px) {
    .anchor-detail-content > .pool-dome-specification-section { --anchor-section-padding: 1rem; }
    .anchor-detail-content .pool-dome-specification-heading { margin-bottom: 1rem; padding-bottom: .75rem; }
    .anchor-page .pool-dome-hero-actions { grid-template-columns: 1fr; }
    .anchor-page .pool-dome-hero-media img { min-height: 0; height: auto; max-height: 15rem; object-fit: cover; }
    .anchor-care-contact .pool-dome-secondary-cta { width: 100%; }
    .anchor-air-seal-diagram { min-width: 0; }
    .anchor-page .pool-dome-benefit-detail { padding: 1rem; text-align: left; }
    .anchor-page .pool-dome-benefit-detail h3 { font-size: 1.1rem; text-align: center; }
    .anchor-topic-links a { font-size: .9rem; }
}

.anchor-explainer-link { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }

/* Center all explanation/image pairs while preserving readable mobile paragraphs. */
.anchor-detail-content .anchor-explainer :is(h3, h4),
.anchor-detail-content figcaption { text-align: center; }
.anchor-detail-content .anchor-explainer-link { justify-self: center; text-align: center; }
@media (min-width: 800px) {
    .anchor-detail-content .pool-dome-installation-step-body { align-items: center; }
    .anchor-detail-content .anchor-explainer p { margin-inline: auto; text-align: center; }
}

.anchor-detail-content a:not(.pool-dome-secondary-cta) { color: var(--pool-dome-blue); text-underline-offset: .18em; }
.anchor-detail-content a:not(.pool-dome-secondary-cta):hover { color: var(--pool-dome-navy); }

/* Reserve room outside the image for gallery controls. Inline size overrides
   replace the header/padding space reserved by the shared modal sizing code. */
body.dome-anchoring-page .ws-modal-overlay { padding: 72px 68px; }
body.dome-anchoring-page .ws-modal-card-image {
    width: auto !important;
    max-width: min(980px, calc(100vw - 136px)) !important;
    max-height: calc(100dvh - 144px) !important;
    border: 0;
    border-radius: 8px;
    overflow: visible;
    background: transparent;
}
body.dome-anchoring-page .ws-modal-card-image .ws-modal-image-header,
body.dome-anchoring-page .ws-modal-card-image .ws-modal-image-header-actions { display: contents; }
body.dome-anchoring-page .ws-modal-card-image .ws-modal-image-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
body.dome-anchoring-page .ws-modal-card-image .ws-modal-image-body {
    position: relative;
    display: block;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible;
    padding: 0;
    background: transparent;
}
body.dome-anchoring-page .ws-modal-card-image .ws-modal-image {
    width: auto !important;
    height: auto !important;
    max-width: min(980px, calc(100vw - 136px));
    max-height: calc(100dvh - 144px);
    border: 0;
    border-radius: 0;
}
body.dome-anchoring-page .ws-modal-card-image .ws-modal-close,
body.dome-anchoring-page .ws-modal-card-image .ws-modal-image-nav {
    position: absolute;
    z-index: 3;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--bs-body-bg);
    color: var(--pool-dome-navy);
    box-shadow: 0 2px 8px rgb(0 0 0 / .2);
}
body.dome-anchoring-page .ws-modal-card-image .ws-modal-close { top: -56px; right: 0; }
body.dome-anchoring-page .ws-modal-card-image .ws-modal-image-nav { top: 50%; transform: translateY(-50%); }
body.dome-anchoring-page .ws-modal-card-image .ws-modal-image-prev { left: -56px; }
body.dome-anchoring-page .ws-modal-card-image .ws-modal-image-next { right: -56px; }
body.dome-anchoring-page .ws-modal-card-image :is(.ws-modal-close, .ws-modal-image-nav):hover { background: var(--pool-dome-mist); }
body.dome-anchoring-page .ws-modal-card-image :is(.ws-modal-close, .ws-modal-image-nav):focus-visible { outline: 3px solid var(--pool-dome-teal); outline-offset: 2px; }

/* Below-image arrows preserve image width and 44px controls on small screens. */
@media (max-width: 575px) {
    body.dome-anchoring-page .ws-modal-overlay { padding: 72px 12px; }
    body.dome-anchoring-page .ws-modal-card-image,
    body.dome-anchoring-page .ws-modal-card-image .ws-modal-image { max-width: min(980px, calc(100vw - 24px)) !important; }
    body.dome-anchoring-page .ws-modal-card-image .ws-modal-image-nav { top: calc(100% + 12px); transform: none; }
    body.dome-anchoring-page .ws-modal-card-image .ws-modal-image-prev { left: calc(50% - 50px); }
    body.dome-anchoring-page .ws-modal-card-image .ws-modal-image-next { right: calc(50% - 50px); }
}

/* A light beveled edge on page images; popup images remain edge to edge. */
.anchor-page .pool-dome-hero-media img,
.anchor-detail-content .pool-dome-installation-figure :is(img, svg) {
    border: 1px solid var(--pool-dome-border);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgb(0 0 0 / .12);
}
/* Match visible media frames, not just the surrounding rows. Diagrams stay
   uncropped; photos fill the same frame without changing gallery originals. */
.anchor-detail-content .pool-dome-installation-figure { width: min(100%, 32rem); margin-inline: auto; }
.anchor-detail-content .pool-dome-installation-figure a { display: block; width: 100%; aspect-ratio: 16 / 9; }
.anchor-detail-content .pool-dome-installation-figure :is(img, svg) {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: var(--bs-white);
    margin-inline: auto;
}
.anchor-detail-content .anchor-photo-figure img { object-fit: cover; }