/* Product destination links retain white backgrounds and product-colored text and borders. */
a.button[href="/core.php"]{background:#fff;border-color:#0a5e79;color:#0a5e79}
a.button[href="/core.php"]:hover{background:#fff;border-color:#07495e;color:#07495e;text-decoration:underline}
a.button[href="/enterprise.php"]{background:#fff;border-color:#005de4;color:#005de4}
a.button[href="/enterprise.php"]:hover{background:#fff;border-color:#004ab6;color:#004ab6;text-decoration:underline}
a.button[href="/multiclient.php"]{background:#fff;border-color:#3f00c5;color:#3f00c5}
a.button[href="/multiclient.php"]:hover{background:#fff;border-color:#32009e;color:#32009e;text-decoration:underline}
a.button[href="/core.php"]:focus-visible,a.button[href="/enterprise.php"]:focus-visible,a.button[href="/multiclient.php"]:focus-visible{outline:3px solid #0b2033;outline-offset:4px;box-shadow:0 0 0 4px #fff}
@media(forced-colors:active){a.button[href="/core.php"],a.button[href="/enterprise.php"],a.button[href="/multiclient.php"]{background:ButtonFace;border-color:ButtonText;color:ButtonText}}

/* Enterprise lower 508 sample (1480,360):005de4. Multiclient below A sample (675,550):3f00c5. */
.package-detail-page.enterprise-page{--product-demo:#005de4;--product-demo-hover:#004ab6}
.package-detail-page.multiclient-page{--product-demo:#3f00c5;--product-demo-hover:#32009e}

/* Core lower 508 sample (1400,360):0a5e79. */
.package-detail-page.core-page{--product-demo:#0a5e79;--product-demo-hover:#07495e}
/* Home page demo button matches the product pages: dark navy background, white text (~16:1 contrast, WCAG 2.2). Eric, 2026-10-24. */
.home-page .button.product-demo{background:#0b2033;border-color:#0b2033;color:#fff}
.home-page .button.product-demo:hover{background:#123a55;border-color:#123a55;color:#fff;text-decoration:underline}
.home-page .button.product-demo:focus-visible{outline:3px solid #0b2033;outline-offset:4px;box-shadow:0 0 0 4px #fff}
@media(forced-colors:active){.home-page .button.product-demo{background:ButtonFace;color:ButtonText;border-color:ButtonText}}
/* About page: three edition cards (Core, Enterprise, Multiclient) side by side on wide screens; single column at 60rem and below (existing rule). Eric, 2026-10-24. */
@media(min-width:60.01rem){.about-page .package-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* About page commitments row: the principles styles lived only in home-page.css, so About stacked them on the left. Same rules, scoped to About (Eric, 2026-10-24). */
.about-page .principles-section{background:#f5f8fa;padding-block:1.75rem}
.about-page .principles-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.75rem}
.about-page .principles-grid article{display:flex;gap:.8rem;min-width:0}
.about-page .principles-grid article+article{border-left:1px solid #b9cdd8;padding-left:1.5rem}
.about-page .principles-grid .suite-icon{width:2rem;height:2rem;flex-shrink:0;color:#00606b}
.about-page .principles-grid h2{font-size:1rem;letter-spacing:-.02em;margin-bottom:.4rem;line-height:1.3}
.about-page .principles-grid p,.about-page .principles-grid a{font-size:.9375rem;line-height:1.5;margin:0}
.about-page .principles-grid a{display:inline-block;padding-block:.35rem;color:#005256}
@media(max-width:60rem){.about-page .principles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-page .principles-grid article+article{border:0;padding:0}}
@media(max-width:40rem){.about-page .principles-grid{grid-template-columns:minmax(0,1fr)}}
/* Home product family: logo, explanation and Explore link grouped per edition (Eric, 2026-10-24). */
.home-page .family-light-marks{align-items:start}
.home-page .family-edition{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;min-width:0;width:100%}
.home-page .family-edition-logo{display:flex;align-items:center;justify-content:center;width:100%;min-height:8.5rem}
.home-page .family-edition p{margin:0;max-width:22rem;line-height:1.5}
.home-page .family-edition a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem 0;font-weight:700}
/* Equal-height edition columns so the logos, text and Explore links line up (a later stylesheet re-centers the grid, so this uses a stronger selector). */
html .home-page .family-light-marks{align-items:stretch}
html .home-page .family-edition p{flex:1 1 auto}
/* Description width matches its logo width (Core and Enterprise 13.75rem, Multiclient 16rem); more detail lives on each product page. */
html .home-page .family-edition p{max-width:13.75rem}
html .home-page .family-edition:nth-child(3) p{max-width:16rem}
/* Edition cards (home "Build on Core" and About): three narrower cards side by side on wide screens, photo on top; one column at 60rem and below (existing rules). Eric, 2026-10-24. */
@media(min-width:60.01rem){
html .package-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
html .package-grid .package-card{grid-template-columns:minmax(0,1fr);gap:.5rem}
html .package-grid .package-photo{height:13rem;min-height:0}
html .package-grid .package-copy{padding:.7rem .8rem 1rem}
}
/* Edition cards: copy starts at the top of each card and the Explore buttons line up along the bottom (wide screens). */
@media(min-width:60.01rem){
html .package-grid .package-card{align-items:stretch}
html .package-grid .package-copy{display:flex;flex-direction:column;align-self:stretch}
html .package-grid .package-copy .button{margin-top:auto;align-self:flex-start}
html .package-grid .package-copy p{margin-block:0 .8rem}
html .package-grid .package-card{grid-template-rows:auto 1fr;align-content:start}
html .package-grid .package-photo{align-self:start}
}
/* Edition cards carry the product logo under the photo (replaces the separate logos row and the "Build on Core" section). Eric, 2026-10-24. */
html .package-logo{display:flex;align-items:center;min-height:6rem;margin:.4rem 0 .6rem}
html .package-logo .product-identity-mark{width:min(100%,13.75rem);aspect-ratio:1774/887;background-repeat:no-repeat;background-color:transparent;background-size:contain;background-position:0% 50%;border:0;border-radius:0;margin:0}
html .package-logo .product-identity-core{background-image:url('/images/clarity-core-light-transparent-v2.png');background-position:0% 82%}
html .package-logo .product-identity-enterprise{background-image:url('/images/clarity-enterprise-light-transparent-v1.png')}
html .package-logo .product-identity-multiclient{width:min(100%,16rem);aspect-ratio:1867/706;background-image:url('/images/clarity-multiclient-approved-transparent-v1.png');background-size:116.3363% auto;background-position:45.2459% 100%}
/* Integrations diagram: an arrow and a short label show that tools and repositories feed one shared record (Eric, 2026-10-24: diagram was confusing). */
.visual-integrations .visual-flow{display:flex;flex-direction:column;align-items:center;gap:.15rem;margin:.7rem 0;color:#005256;font-weight:700;font-size:.9375rem;text-align:center}
@media(forced-colors:active){.visual-integrations .visual-flow{color:CanvasText}}
/* About: the opening sentence uses the full page width instead of wrapping at half width (Eric, 2026-10-24). */
html .about-page .product-intro .lead{max-width:none}
/* About pledge: four numbered tests, full width, readable line length (Eric, 2026-10-24). */
.about-pledge .pledge-list{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.about-pledge .pledge-list li{border-top:4px solid #0a5e79;padding-top:.75rem}
.about-pledge .pledge-list h3{margin:0 0 .5rem;font-size:1.35rem}
.about-pledge .pledge-list p{margin:0;line-height:1.55}
@media(max-width:60rem){.about-pledge .pledge-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:40rem){.about-pledge .pledge-list{grid-template-columns:1fr}}