/* Holty glass layer: prod mapping. Loaded last, after the design's glass-*.css.
   The design files were made against an older copy of some pages; these rules
   apply the same four treatments (frost, sheen, glow, glass pill) to the markup
   that is live now. Keep the design's own files untouched. */

/* About. Security is a light mint band on prod (not navy), with dark text:
   keep it light, glows in the brand colours, cards frosted instead of dark glass. */
body.glass.gp main > section.ab-sec { background:
    radial-gradient(40% 60% at 10% 10%, rgba(63,186,115,0.20) 0%, transparent 70%),
    radial-gradient(40% 60% at 92% 90%, rgba(70,180,205,0.20) 0%, transparent 70%),
    linear-gradient(180deg, #EAF7F0 0%, #EEF7FA 100%) !important; }
body.glass .ab-sec-card {
  background: var(--g-frost) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-hi), var(--g-depth) !important; }
body.glass .ab-link, body.glass .ab-link:hover {
  background: rgba(255,255,255,0.5) !important;
  -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm);
  border: 1px solid rgba(18,22,36,0.16) !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(18,22,36,0.05), 0 10px 24px -8px rgba(20,70,60,0.18) !important; }
body.glass .ab-link:hover { background: rgba(255,255,255,0.92) !important; border-color: var(--dark) !important; }
/* About. Mission / Vision cards replaced the navy numbers strip: mint glass. */
body.glass .ab-mv-card {
  background: linear-gradient(150deg, rgba(232,248,239,0.78) 0%, rgba(229,244,249,0.72) 100%) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-hi), var(--g-depth); }
@media (max-width: 640px) {
  body.glass.gp main > section.ab-sec { background:
      radial-gradient(360px 320px at 0% 0%, rgba(63,186,115,0.20) 0%, transparent 70%),
      radial-gradient(360px 360px at 100% 100%, rgba(70,180,205,0.20) 0%, transparent 70%),
      linear-gradient(180deg, #EAF7F0 0%, #EEF7FA 100%) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  body.glass :is(.ab-sec-card, .ab-link, .ab-mv-card) { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Hero grain: fade it out over the same last 160px as the hero's own fade, so the
   texture does not stop on a hard line where the next section begins. */
body.glass.gp .v-hero::after, body.glass .aio-hero::after {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 160px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 160px), transparent 100%); }

/* Gradients must start at the border edge. Several glass surfaces keep a transparent
   or translucent 1px border; by default a gradient is laid out inside it and then
   repeats into it, which drew a thin wrong-coloured line along the top edge (most
   visible on the glossy "Read all articles" pill and the active blog page number). */
body.glass :is(
  .hero-cta, .pricing-cta, .roi-cta, .nav-cta, .contact-submit, .contact-cancel, .re-summary-cta, .ab-ccta-btn,
  .blog-latest-cta a, .pf-card-cta, .hero-cta-ghost, .aio-cta-ghost, .ai-ask-btn, .page-link, .ab-link,
  .insight-card, .pf-card, .pf-mod, .ab-mv-card, .ab-sec-card, .footer-eu-badge, .roi-results, .aio-sit-btn,
  .insights, .cta-section, .site-footer, .pricing-card, .gl-chip
) { background-origin: border-box !important; }  /* !important: the design sets these with `background: … !important`, which resets the origin */
/* Same fix, written at the specificity of the design's own rules for these two. */
body.glass .blog-latest-cta a:not(.alt), body.glass .blog-latest-cta a.alt,
body.glass .aio-sit-btn.active, body.glass.gp .own-panel { background-origin: border-box !important; }
/* The glossy "Read all articles" pill and the active blog page number kept an
   invisible 1px border, so their top highlight sat 1px inside the edge and read
   as a line. No border (padding makes up the size), like the other glossy pills. */
body.glass .blog-latest-cta a:not(.alt) { border: 0 !important; padding: 15px 29px; }
body.glass .page-link.active { border: 0 !important; }

/* Header bar (glass-header.css) + Products dropdown (glass-nav.css).
   A backdrop-filter cannot see past an ancestor that has one of its own, so with the
   blur on .site-nav itself everything frosted inside it (the Products dropdown, the
   tablet drawer, the language menu) went see-through but unblurred, with the page
   text showing through. The bar's frosted surface therefore lives on a layer behind
   its content (::before): same look, same states and timings as the design, and the
   nested blurs reach the page. .site-nav keeps the design's shadow. */
body.glass .site-nav,
html.nav-scrolled body.glass .site-nav,
body.glass.menu-open .site-nav { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.glass .site-nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.62) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  opacity: 0; transition: opacity 0.3s ease; }
html.nav-scrolled body.glass .site-nav::before,
body.glass.menu-open .site-nav::before { opacity: 1; }
@media (max-width: 768px) {
  body.glass .site-nav::before { -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
  /* Phone menu open: the bar stays solid white, as on prod. */
  body.glass.menu-open .site-nav::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  body.glass .site-nav::before { background: rgba(255,255,255,0.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { body.glass .site-nav::before { transition: none; } }
@media (prefers-reduced-transparency: reduce) {
  body.glass .nav-panel { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* Desktop dropdowns and the header bar. While the bar is invisible (top of the page)
   they open right under their trigger, as on prod. Once the bar is glass they open
   8px below it instead of across its bottom edge (on the solid white bar that 10px
   overlap was invisible; on glass the panel cut into the bar's edge and shadow).
   The hover bridge grows with the gap so the pointer can still reach the panel. */
@media (min-width: 1264px) {
  html.nav-scrolled body.glass .nav-panel { top: calc(100% + 32px); }
  html.nav-scrolled body.glass .nav-panel::before { top: -32px; height: 32px; }
  html.nav-scrolled body.glass .lang-switch-menu { top: calc(100% + 34px); }
  html.nav-scrolled body.glass .lang-switch-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 34px; }
}

/* Calculator card: its faint green outline was painted over the card's own frosted
   white, so beside the mint results panel it read as a light line. At 100% scaling
   that is one pixel and blends in; at 125-150% (common on Windows) it showed as a
   thin white strip along the panel's right and top edges. The frost now stops at
   the padding edge, so the outline is the same faint green all the way round. */
body.glass .roi-card { background-clip: padding-box !important; }
/* ...and the panel's mint spreads 1px past its right and top edges (clipped by the
   card), so no sub-pixel sliver of frost is left between panel and outline. */
body.glass .roi-results { box-shadow: inset 1px 0 0 rgba(47,144,168,0.10), 1px 0 0 #D0EEE0, 0 -1px 0 #DAF3E5 !important; }
@media (max-width: 860px) { body.glass .roi-results { box-shadow: 1px 0 0 #D0EEE0, -1px 0 0 #D8F2E3 !important; } }

/* "Why Holty?" table. Its scroll container (.comp-wrap, needed for sideways scrolling
   on phones) clipped the table's soft glass shadow in a straight line, which read as
   sharp corners under the rounded ones. Where the table fits, nothing is clipped;
   where it scrolls, the container leaves room below for the shadow. */
@media (min-width: 800px) { body.glass .comp-wrap { overflow: visible; } }
@media (max-width: 799px) { body.glass .comp-wrap { padding-bottom: 44px; margin-bottom: -44px; } }