/* Theme-agnostic fixes for markup the migration adds on top of the original site.
   Every page loads this; only the dark pages also load dark-site.css, which restates
   the colours below against the dark ground. Keep this file free of theme colours:
   anything that has to differ between the light and the dark site belongs there. */

/* The skip link is our own markup and has no styling in the original stylesheet.
   Translating it out of view left it painted, and full-page capture tools reposition
   fixed elements, which is what the QA screenshot caught. Clip it until it takes focus. */
.SkipLink{position:fixed;top:1rem;left:1rem;z-index:10000;background:#50bcbd;color:#08142e;padding:1rem 2rem;border-radius:8px;clip-path:inset(50%);opacity:0;pointer-events:none}
.SkipLink:focus{clip-path:none;opacity:1;pointer-events:auto}

/* The HubSpot embed replaces the original site's server-rendered form, so the status
   line, the mailto fallback and the iframe sizing all come from here. A fallback for a
   form that never loaded must not sit under a form that did: static-site.js marks the
   container is-formFailed, and JS-off is covered by the <noscript>. */
.Form-status{font-size:1.4rem;line-height:1.6;color:#5a6b8c}
.Form-fallback{display:none;font-size:1.3rem;margin-top:1.5rem;color:#5a6b8c}
.Form--hubspot.is-formFailed .Form-fallback{display:block}
.Form-fallback a{color:#1f7a7b;text-decoration:underline}
.Form--hubspot form{max-width:100%}
.Form--hubspot iframe{max-width:100%}

/* The mobile search panel opens over the menu at top:100px and covers the toggle that
   closes it, so there was no way back short of a page load. static-site.js injects a
   .Nav-back control into the panel; this is its layout. The colour is left to
   .Nav-back in the original stylesheet, and restated by the dark theme. */
.Nav--search .Nav-back{display:none}
@media(max-width:70em){
.Nav--search .Nav-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:0;background:none;border:0;font:inherit;font-weight:600;cursor:pointer}
.Nav--search .Nav-back svg path{stroke:currentColor}
}

/* The jobs item is a plain text link rather than the original's button (an earlier QA
   finding), so it takes the nav's layout instead of the button's, and the nav's colour
   instead of the button's ground - navy on the light header, restated by the dark
   theme. Without that it inherits the link teal, which is 2.3:1 on white. */
.Header .Nav--trial>.Nav-item{display:flex;align-items:center}
.Header .Nav--trial>.Nav-item>.Nav-link{padding:0 12px;display:inline-block}
body:not(.DarkSite) .Header .Nav--trial>.Nav-item>.Nav-link{color:#1f3460}

/* The light pages - contact, demo and pricing-request - drop .Header--dark to get the
   original site's white header back, but they still carry the dark site's white header
   logo: the migration swapped that mark in on all 456 pages at once, and it is white
   on white here. The original uses the navy mark on exactly these pages. The teal
   swoosh is the same in both, so only the white paths are restated. */
body:not(.DarkSite) .Header .Logo-object path[fill="#fff"]{fill:#1B3A66}

.u-visuallyHidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* .Nav-title labels the group inside a product dropdown, but it inherited weight 500
   while the .Nav-link items under it are 600 - the heading was lighter than the things
   it heads, so the groups read as one flat list. */
.Nav-dropdown .Nav-title{font-weight:700}

/* Certificates is a wrapping flex row of 6rem boxes whose images set width:100% and let
   height follow the artwork, so badges landed 50-70px tall against a 60px width and the
   row count changed with the viewport (four across on desktop, five then three at 390).
   A fixed four-column grid of square cells gives every badge the same box at every
   width, and contain scales the artwork inside it instead of stretching it. */
.Footer-column .Certificates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:320px;justify-content:start}
.Footer-column .Certificates-item{width:auto;height:auto;margin:0;aspect-ratio:1}
.Footer-column .Certificates-item img{width:100%;height:100%;object-fit:contain}

/* Below 48em the legal row becomes column-reverse, so the footer listed Legal Notice
   first and the copyright last - the reverse of both the DOM and the desktop row. Each
   item is also a centred fixed-width box, so the labels sat on ragged centres inside a
   column pinned to the left edge. Restore reading order, and left-align the list the way
   every other column in the mobile footer is aligned. */
@media screen and (max-width:48em){
.Nav--secondary-footer .Nav-list{flex-direction:column;align-items:flex-start}
.Nav--secondary-footer .Nav-item{width:auto;text-align:left}
}

/* The wave svg scales to a fractional height (133.18 units across the viewport), so
   its closing bottom edge lands mid-device-pixel and rasterises as one anti-aliased
   row that blends with the Block's own gradient behind it - a 1px seam straight
   across the page wherever a wave meets the next block. The line box under the inline
   svg would add to that, so collapse it, and clip the blended row inside .Wave's own
   overflow:hidden rather than letting it paint. */
.Block .Wave{line-height:0;font-size:0}
.Block .Wave svg{margin-bottom:-1px}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important}}