@charset "utf-8";

/* =============================================================================
   BarraGuard — Barracuda authorized online reseller, a BlueAlly company
   Design system (Bootstrap 5.3 + Lucide). Two namespaces:
     .brg-* / .fw     → shared CHROME (includes/topmenu.inc + includes/footer.inc)
     .alk-*           → AlliaKit page bands
   Palette and type are BlueAlly's (Brand Guidelines 08-2026 p7-p9), matching the
   four HPE storefronts (hpe-core.css). The kit's Seagate green is not used.
   BarraGuard's own pre-rebuild palette is kept, unloaded, in
   css/barraguard-legacy-palette.css.

   TEXT CONTRAST — only the approved pairs on Brand Guidelines p8:
     black #040822 / navy #001278 ground → white, light, green or bright blue text
     bright blue / green / light / white ground → navy or black text
   So on light surfaces every text token resolves to navy or black, and on dark
   surfaces to white or light. Bright blue and green never carry text on white.
   ============================================================================= */

/* ===== TOKENS ===== */
:root {
  /* BlueAlly palette (Brand Guidelines p7) */
  --ba-navy:        #001278;   /* Pantone 662C. Primary: buttons, links, nav, dark bands */
  --ba-bright:      #02a2fd;   /* Pantone 2925C. Accent: text/icons on navy or black, rules */
  --ba-black:       #040822;   /* Pantone 7547C. Deepest ground, body ink */
  --ba-light:       #cde5f1;   /* Pantone 642C. Light text on dark, soft fills */
  --ba-green:       #36bf78;   /* Pantone 7479C. Positive states; text only on navy/black */
  /* PROVISIONAL shades, same values as hpe-core.css (pending brand sign-off) */
  --ba-navy-dark:   #000d54;   /* button hover / pressed */
  --ba-dark:        #0b1030;   /* dark band */
  --ba-bg:          #f4f6fa;   /* light section */
  --ba-line:        #e2e6ee;   /* hairlines on white */
  /* Header bar: the charcoal the four HPE storefronts use (hpe-core.css
     .sdw-navbar-dark), so the portfolio headers match. White on it 16:1,
     bright blue 6:1. */
  --brg-bar-bg:     #1d1f27;

  /* AlliaKit token names, resolved to BlueAlly. The kit's page bands reference
     these, so no band rule needs a colour of its own. */
  --ak-accent:       var(--ba-navy);       /* CTA bg, active rules, icon fills. White on it 15.6:1 */
  --ak-accent-hover: var(--ba-navy-dark);
  --ak-accent-dim:   var(--ba-navy);       /* accent as text on white */
  --ak-accent-lit:   var(--ba-bright);     /* accent as text on a dark ground (approved pair) */
  --ak-dark:         var(--ba-black);      /* dark band bg; also headline ink on white */
  --ak-slate:        var(--ba-navy-dark);  /* depth layer */
  --ak-mid:          var(--ba-black);      /* "secondary" text on white. Grey is not an
                                              approved pair, so hierarchy comes from size
                                              and weight, not a lighter ink. */
  --ak-light:        var(--ba-bg);
  --ak-border:       var(--ba-line);
  --ba-blue:         var(--ba-navy);       /* kit's panel blue (white text on it) */
  --ba-light-solid:  #f8faff;

  /* Text on dark grounds. The kit used white at 35-85% alpha; those greys are
     not approved pairs, so every readable step is BlueAlly light. The low
     alphas are only ever used for rules and fills. */
  --on-dark-85: var(--ba-light);
  --on-dark-72: var(--ba-light);
  --on-dark-65: var(--ba-light);
  --on-dark-60: var(--ba-light);
  --on-dark-55: var(--ba-light);
  --on-dark-50: var(--ba-light);
  --on-dark-45: rgba(255,255,255,.45);
  --on-dark-40: rgba(255,255,255,.4);
  --on-dark-35: rgba(255,255,255,.35);
  --hairline-dark: rgba(255,255,255,.08);

  /* Chrome accent */
  --accent: var(--ba-navy);
  --accent-dark: var(--ba-navy-dark);
  --accent-ink: #ffffff;
  --ak-accent-text: var(--ba-navy);
  --ak-accent-soft: rgba(0, 18, 120, 0.08);

  /* Links */
  --link: var(--ba-navy);
  --link-hover: var(--ba-navy-dark);
  --link-dark: var(--ba-bright);

  /* Text on light */
  --ink: var(--ba-black);
  --ink-2: var(--ba-black);
  --ink-3: var(--ba-black);
  --muted: var(--ba-black);
  --ink-strong: var(--ba-navy);

  /* Surfaces */
  --surface: #ffffff;
  --tint: var(--ba-bg);
  --mist: var(--ba-bg);
  --sink: #e7e9ef;

  /* Dark grounds */
  --ground: var(--ba-black);
  --ground-2: var(--ba-navy);
  --ground-3: var(--ba-dark);

  /* Lines */
  --line: #d3d8e2;
  --line-2: #d5d5d5;
  --line-strong: #949494;
  --hairline: rgba(4, 8, 34, 0.08);

  /* Radius (chrome only; page bands are square) */
  --radius: 6px;
  --radius-lg: 16px;

  /* Elevation (chrome) */
  --shadow-sm: 0 1px 2px rgba(4, 8, 34, 0.05), 0 1px 1px rgba(4, 8, 34, 0.04);
  --shadow: 0 1px 2px rgba(4, 8, 34, 0.05), 0 4px 10px -3px rgba(4, 8, 34, 0.08), 0 10px 22px -8px rgba(0, 18, 120, 0.07);
  --shadow-lg: 0 2px 4px rgba(4, 8, 34, 0.06), 0 12px 26px -8px rgba(4, 8, 34, 0.13), 0 26px 52px -14px rgba(0, 18, 120, 0.14);

  --container: 1350px;

  /* Bootstrap 5.3 variables */
  --bs-primary: #001278;
  --bs-primary-rgb: 0, 18, 120;
  --bs-link-color: #001278;
  --bs-link-color-rgb: 0, 18, 120;
  --bs-link-hover-color: #000d54;
  --bs-link-hover-color-rgb: 0, 13, 84;
  --bs-body-color: #040822;
  --bs-body-font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ===== BASE ===== */
html, body { overflow-x: clip; }   /* clip (not hidden) so position:sticky still works */
body {
  color: var(--ink);
  background: var(--surface);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.02rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* dynamicpricing pins headings and .btn to "Open Sans", which is no longer
   loaded, so they fell back to Arial. Everything inherits DM Sans from body. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .btn, button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { color: var(--ink-strong); font-weight: 700; line-height: 1.1; }
h1, h2 { letter-spacing: -0.02em; text-wrap: balance; }
h3 { line-height: 1.22; letter-spacing: -0.01em; text-wrap: balance; }
h4, h5, h6 { line-height: 1.32; }
p { text-wrap: pretty; }
a { color: var(--link); }
a:hover, a:focus { color: var(--link-hover); }
img { max-width: 100%; height: auto; }
.tel { color: var(--ak-accent-text); font-weight: 700; white-space: nowrap; }
:focus-visible { outline: 3px solid var(--ba-navy); outline-offset: 2px; }

/* Full-width breakout: pages wrap content in .container, so chrome/bands
   use .fw to reach edge-to-edge, .fw-inner to re-contain to --container. */
.fw {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}
.fw-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== HEADER BAR (chrome) =====
   Same build as the four HPE storefronts (hpe-core.css .sdw-navbar-dark): one
   full-bleed bar at 1350px, BlueAlly logo | site name on the left, and on the
   right the phone line, search and nav links stacked. Sizes follow
   ServerComputeWorks, including their #1D1F27 charcoal ground. .brg-bar alone (no navbar) is the brand-only
   bar on the static error pages. */

/* dynamicpricing pulls the page wrapper up 15px (`body > .container { margin-top:-15px }`),
   which tucked the top of the header under the viewport edge. */
body > .container:has(> .brg-bar) { margin-top: 0; }
.brg-bar { background: var(--brg-bar-bg); color: #fff; padding: .75rem 0; }
.navbar-dark.brg-bar {
  /* Two classes + !important to beat dynamicpricing's
     `.navbar-dark { background-color:#949494 !important }` and its grey gradient. */
  background: var(--brg-bar-bg) !important;
  background-image: none !important;
  box-shadow: none;
  padding: .75rem 0;
  margin-bottom: 0;
  min-height: 0;
  --bs-navbar-padding-y: 0;
}
.brg-bar__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
}

/* Lockup: row on lg+ so the two marks read as one operator lockup; below lg the
   logo is hidden and only the site name and tagline remain. */
.brg-brand { display: inline-flex; align-items: center; gap: 1rem; min-width: 0; margin: 0; padding: .15rem 0; color: #fff; text-decoration: none; }
.brg-brand:hover, .brg-brand:focus { color: #fff; text-decoration: none; }
.brg-brand__ba { width: 145px; height: auto; flex: none; }
.brg-brand__divider { width: 1px; align-self: stretch; margin: .35rem 0; background: rgba(255, 255, 255, .28); flex: none; }
.brg-brand__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.05; }
.brg-brand__name { font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; color: #fff; }
.brg-brand__tld { font-weight: 500; color: var(--ba-light); }
.brg-brand__tagline { display: block; margin-top: .2rem; font-size: .62rem; font-weight: 600; letter-spacing: .16em; line-height: 1.45; text-transform: uppercase; color: var(--ba-light); white-space: normal; }

.brg-toggler {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0;
  color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius);
}
.brg-toggler:focus { box-shadow: none; }
.brg-bar :focus-visible, .brg-footer :focus-visible { outline-color: var(--ba-bright); }

/* Right column: tools above links, both flush right. */
.brg-nav .navbar-collapse { flex-direction: column; align-items: flex-end; }
.brg-nav__tools { display: flex; flex-direction: column; align-items: flex-end; }
.brg-phone { margin: 0 0 .25rem; color: #fff; font-size: .875rem; }
.brg-phone .tel, .brg-phone .tel:link, .brg-phone .tel:visited { color: var(--ba-bright); font-weight: 600; text-decoration: none; }
.brg-phone .tel:hover, .brg-phone .tel:focus { color: #fff; text-decoration: none; }
.brg-nav__links { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-top: .5rem; }
.brg-nav__links .navbar-nav { flex-wrap: wrap; justify-content: flex-end; }

/* Site search: header and footer, both on a black ground. White field, black ink;
   navy button with a white glyph (approved pair). Field and button share one height. */
.brg-search { display: flex; align-items: stretch; margin: 0; }
.brg-search__input {
  width: 268px; height: 48px; padding: 0 12px; min-width: 0;
  font: inherit; font-size: .95rem; color: var(--ba-black);
  background: #fff; border: 1px solid #fff; border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
}
.brg-search__input::placeholder { color: var(--ba-navy); opacity: .8; }
.brg-search__input:focus { outline: 3px solid var(--ba-bright); outline-offset: 0; }
.brg-search__btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 52px; width: 52px; height: 48px; padding: 0;
  color: #fff; background: var(--ba-navy);
  border: 0; border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer;
}
.brg-search__btn:hover, .brg-search__btn:focus { background: var(--ba-navy-dark); color: #fff; }
.brg-search--footer { width: 100%; }
.brg-search--footer .brg-search__input { width: auto; flex: 1 1 auto; }

/* ===== PRIMARY NAV LINKS (chrome) ===== */
.brg-nav .navbar-nav > .nav-item > .nav-link {
  font-size: .9rem;
  font-weight: 500;
  padding: .35rem .75rem !important;
  color: #fff !important;
  text-decoration: none;
}
.brg-nav .navbar-nav > .nav-item > .nav-link:hover,
.brg-nav .navbar-nav > .nav-item > .nav-link:focus,
.brg-nav .navbar-nav > .nav-item.show > .nav-link,
.brg-nav .navbar-nav > .nav-item > .nav-link.show { color: var(--ba-bright) !important; }
/* "Free Email Threat Scan" call-out: bright-blue tile, navy ink (approved pair). */
.brg-nav .navbar-nav > .brg-nav__promo > .nav-link { margin: 0 .25rem; border-radius: var(--radius); background: var(--ba-bright); color: var(--ba-navy) !important; font-weight: 600; }
.brg-nav .navbar-nav > .brg-nav__promo > .nav-link:hover,
.brg-nav .navbar-nav > .brg-nav__promo > .nav-link:focus { background: var(--ba-light); color: var(--ba-navy) !important; }

/* Dropdowns: white panels on the black bar, as on the HPE sites. */
.brg-nav .dropdown-menu {
  --bs-dropdown-link-active-bg: var(--ba-light);
  --bs-dropdown-link-active-color: var(--ba-navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(4, 8, 34, .16);
  padding: .5rem 0;
  margin-top: .5rem;
  min-width: 260px;
}
.brg-nav .dropdown-menu .submenu { margin-top: 0; }
.brg-nav .dropdown-item { padding: .45rem 1rem; font-size: .9rem; text-decoration: none; }
.brg-nav .dropdown-item,
.brg-nav .dropdown-item:link,
.brg-nav .dropdown-item:visited { color: var(--ba-black) !important; }
.brg-nav .dropdown-item:hover,
.brg-nav .dropdown-item:focus,
.brg-nav .dropdown-item:active { background: var(--ba-light) !important; color: var(--ba-navy) !important; }
.brg-nav .dropdown-item strong { color: var(--ba-navy); }
/* Section labels inside a dropdown. Overrides dynamicpricing's grey-band header
   (`color:#fff; background:#949494 !important`) and the legacy #eee one. */
.brg-nav .dropdown-header {
  margin-top: 4px;
  padding: .6rem 1rem .25rem;
  color: var(--ba-navy) !important;
  background: transparent !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* "New!" / "- Free!" markers: green tile with navy ink (approved pair). */
.brg-badge {
  display: inline-block;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--ba-green);
  color: var(--ba-navy);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (min-width: 992px) {
  .brg-nav .dropdown-menu .submenu { max-height: 80vh; overflow-y: auto; }
  /* BarraGuard's nine links (with the Threat Scan tile) are wider than the space
     beside the lockup, so the HPE-style right column would drop under the brand
     and leave a 190px bar. A grid keeps the HPE arrangement in ~145px: lockup
     and phone/search on row 1, links right-aligned on row 2 at full width. The
     collapse wrapper steps out of the layout (display:contents) so its two
     children can sit in the grid; it still collapses normally below lg. */
  .brg-nav .brg-bar__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand tools" "links links";
    align-items: center;
    row-gap: .5rem;
  }
  .brg-nav .brg-brand { grid-area: brand; }
  .brg-nav.navbar-expand-lg .navbar-collapse { display: contents !important; }
  .brg-nav .brg-nav__tools { grid-area: tools; justify-self: end; }
  .brg-nav .brg-nav__links { grid-area: links; justify-self: end; margin-top: 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Narrow laptops: tighter link spacing keeps the nine links on one row. */
  .brg-nav .navbar-nav > .nav-item > .nav-link { padding: .35rem .5rem !important; font-size: .86rem; }
}

@media (max-width: 991.98px) {
  /* Collapsed: brand and burger share the bar; the burger opens phone, search
     and a stacked link list, each link a 44px tap target. Nested flyouts open in
     place on tap (custom.js). */
  .brg-brand { max-width: calc(100% - 60px); }
  .brg-nav .navbar-collapse { align-items: stretch; }
  .brg-nav__tools { align-items: stretch; padding-top: .75rem; }
  .brg-phone { text-align: center; padding: .5rem 0; margin: 0; }
  .brg-search__input { width: auto; flex: 1 1 auto; }
  .brg-nav__links { display: block; margin-top: .5rem; padding-bottom: .5rem; }
  .brg-nav__links .navbar-nav { flex-wrap: nowrap; }
  .brg-nav .navbar-nav > .nav-item > .nav-link { display: flex; align-items: center; min-height: 44px; padding: .5rem 0 !important; font-size: 1rem; }
  .brg-nav .navbar-nav > .brg-nav__promo > .nav-link { margin: .25rem 0; padding: .5rem .75rem !important; }
  .brg-nav .dropdown-menu { border-radius: 8px; margin-top: 0; }
  .brg-nav .dropdown-item { display: flex; align-items: center; min-height: 44px; white-space: normal; }
  .brg-nav .dropdown-menu .submenu.is-open { display: block; position: static; box-shadow: none; }
}
@media (max-width: 575.98px) {
  .brg-brand__name { font-size: 1.25rem; }
  .brg-brand__tagline { letter-spacing: .09em; }
}

/* ===== BUTTONS (chrome: Bootstrap .btn-primary → navy surface, white ink) ===== */
.btn-primary,
a.btn-primary:link,
a.btn-primary:visited {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-dark);
  --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-active-bg: var(--accent-dark);
  --bs-btn-active-border-color: var(--accent-dark);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-color: var(--accent-ink);
  --bs-btn-hover-color: var(--accent-ink);
  --bs-btn-active-color: var(--accent-ink);
  --bs-btn-focus-shadow-rgb: 0, 18, 120;
  color: var(--accent-ink);
}
.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--accent-dark);
  --bs-btn-active-border-color: var(--accent-dark);
  --bs-btn-active-color: #fff;
}
.text-primary { color: var(--ba-navy) !important; }
.bg-primary { background-color: var(--ba-navy) !important; }
.border-primary { border-color: var(--ba-navy) !important; }
/* HubSpot-injected submit buttons (quote + contact forms) */
.hs-button,
.hs-form .hs-button,
input.hs-button,
.hs-button.primary,
.hs-form input[type="submit"] {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: .9rem 1.55rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.hs-button:hover, .hs-button:focus,
.hs-form .hs-button:hover, .hs-form .hs-button:focus,
input.hs-button:hover, input.hs-button:focus { background: var(--accent-dark); color: var(--accent-ink); text-decoration: none; }
.btn.btn-primary { border-radius: var(--radius); font-weight: 700; }

/* Dynamic pricing buttons. The shared dynamicpricing submodule still writes
   <i class="fa fa-shopping-cart"> / <i class="fa fa-envelope"> into its Add to
   Cart and Get a Quote buttons, and that HTML is not ours to change. Font
   Awesome is no longer loaded, so draw those two classes with the matching
   Lucide glyphs (lucide-static 1.24.0, ISC) as a mask in the button's ink. */
.fa.fa-shopping-cart,
.fa.fa-envelope,
.fa.fa-check {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -.2em;
  background-color: currentColor;
  -webkit-mask: var(--brg-glyph) center / contain no-repeat;
  mask: var(--brg-glyph) center / contain no-repeat;
}
.fa.fa-shopping-cart { --brg-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E"); }
.fa.fa-envelope { --brg-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E"); }
/* Email-protection comparison tables (includes/emailprotectionplans.inc) use
   <i class="fa fa-check"> in 43 cells; same treatment, Lucide "check". */
.fa.fa-check { --brg-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* ===== FOOTER (chrome) ===== */
.brg-footer { color: var(--ba-light); margin-top: 3rem; }
.brg-footer__cta { background: var(--ba-navy); padding: 2.5rem 0; text-align: center; }
/* Same two-line CTA as VirtualizationWorks: a large tracked eyebrow over the
   specialist line. Their eyebrow is 60% white, which is a grey on navy; ours is
   BlueAlly light, the approved quiet tone on navy. */
.brg-footer__eyebrow { display: block; margin-bottom: .75rem; color: var(--ba-light); font-size: 2rem; font-weight: 700; letter-spacing: .08em; line-height: 1.2; }
.brg-footer__cta-title { margin: 0; color: #fff; font-size: 1.4rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.brg-footer__cta-title .tel, .brg-footer__cta-title .tel:link, .brg-footer__cta-title .tel:visited { display: inline-block; margin-left: 8px; color: var(--ba-bright); font-weight: 700; text-decoration: none; transition: color .2s ease; }
.brg-footer__cta-title .tel:hover, .brg-footer__cta-title .tel:focus { color: #fff; text-decoration: none; }
@media (max-width: 575.98px) {
  .brg-footer__eyebrow { font-size: 1.5rem; }
  .brg-footer__cta-title { font-size: 1.2rem; }
}
.brg-footer__main { background: var(--ba-black); padding: 3rem 0 2.5rem; }
.brg-footer__heading { color: #fff; font-size: 1rem; font-weight: 700; margin: 0 0 1rem; }
.brg-footer__links { list-style: none; padding: 0; margin: 0; }
.brg-footer__links li { margin-bottom: 2px; }
.brg-footer__links a,
.brg-footer__contact a,
.brg-footer__links a:link,
.brg-footer__contact a:link,
.brg-footer__links a:visited,
.brg-footer__contact a:visited { color: var(--ba-light); text-decoration: none; display: inline-block; padding: 3px 0; }
.brg-footer__links a:hover, .brg-footer__links a:focus,
.brg-footer__contact a:hover, .brg-footer__contact a:focus { color: var(--ba-bright); text-decoration: none; }
.brg-footer__links strong { color: #fff; }
.brg-footer__contact { display: flex; align-items: flex-start; gap: 10px; margin-bottom: .75rem; font-size: .94rem; line-height: 1.5; }
.brg-footer__contact [data-lucide], .brg-footer__contact svg { flex: none; margin-top: 3px; color: var(--ba-bright); }
.brg-footer__contact .tel { font-weight: 600; }
.brg-footer__quote { margin: .5rem 0 0; font-size: 1.15rem; font-weight: 700; }
.brg-footer__quote a, .brg-footer__quote a:link, .brg-footer__quote a:visited { color: var(--ba-bright); text-decoration: none; }
.brg-footer__quote a:hover, .brg-footer__quote a:focus { color: #fff; text-decoration: none; }
.brg-footer__social { display: flex; gap: 10px; margin-top: 1.5rem; }
.brg-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .08); color: #fff;
  transition: background .2s ease, color .2s ease;
}
.brg-footer__social a:hover, .brg-footer__social a:focus { background: var(--ba-bright); color: var(--ba-navy); }
.brg-footer__social svg { width: 20px; height: 20px; display: block; }
.brg-footer__legal { background: var(--ba-black); border-top: 1px solid var(--hairline-dark); padding: 1.5rem 0; font-size: .85rem; color: var(--ba-light); }
.brg-footer__legal > .alk-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.75rem; text-align: center; }
.brg-footer__operator { flex: none; line-height: 0; }
.brg-footer__operator img { width: 145px; height: auto; }
.brg-footer__legal p { margin: 0; }
.brg-footer__legal strong { color: #fff; font-weight: 600; }
.brg-footer__legal a, .brg-footer__legal a:link, .brg-footer__legal a:visited { color: #fff; text-decoration: underline; }
.brg-footer__legal a:hover, .brg-footer__legal a:focus { color: var(--ba-bright); }
@media (max-width: 991.98px) {
  /* Footer links are a stacked list of standalone tap targets: 44px floor. */
  .brg-footer__links li { margin-bottom: 0; }
  .brg-footer__links a, .brg-footer__contact a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
}

/* =============================================================================
   AlliaKit — page bands (ported from Figma). Namespace .alk-*. Radius 0.
   ============================================================================= */

/* ----- Tailwind-utility shims used directly in band markup ----- */
.max-w-7xl{ max-width:80rem; }
.min-h-screen{ min-height:100vh; }
.w-full{ width:100%; }
.h-full{ height:100%; }
.object-contain{ object-fit:contain; }
.object-cover{ object-fit:cover; }
.alk-container{ max-width:1280px; margin:0 auto; padding-left:2.5rem; padding-right:2.5rem; }

/* ----- section / band scaffolding ----- */
.alk-sec      { padding-top:5rem; padding-bottom:5rem; }
.alk-sec-lg   { padding-top:6rem; padding-bottom:6rem; }
.alk-sec-bleed{ padding-top:7rem; padding-bottom:9rem; }
/* Phones: 80px of air above and below every band is a desktop rhythm. At 390px
   it just means more scrolling between the same amount of content. */
@media (max-width: 575.98px) {
  .alk-sec      { padding-top:2.75rem; padding-bottom:2.75rem; }
  .alk-sec-lg   { padding-top:3rem;    padding-bottom:3rem; }
  .alk-sec-bleed{ padding-top:3rem;    padding-bottom:3.75rem; }
}
.alk-dark  { background:var(--ak-dark); color:#fff; }
.alk-black { background:var(--ba-black); color:#fff; }
.alk-light { background:var(--ak-light); }
.alk-slate { background:var(--ak-slate); color:#fff; }
.alk-navy  { background:var(--ba-navy); color:#fff; }
/* Links inside a dark band: --link is navy, invisible on navy/black, so they
   take --link-dark (bright blue, an approved pair on both grounds). */
.alk-dark a:not([class]), .alk-black a:not([class]), .alk-slate a:not([class]),
.alk-navy a:not([class]), .alk-hero-stage a:not([class]) { color:var(--link-dark); }
.alk-dark a:not([class]):hover, .alk-black a:not([class]):hover,
.alk-slate a:not([class]):hover, .alk-navy a:not([class]):hover,
.alk-hero-stage a:not([class]):hover { color:#fff; }
/* ...except inside a white panel dropped onto that dark band, where the ground is
   white again and --link-dark is 2.42:1. */
.alk-panel a:not([class]), .alk-imgcard a:not([class]), .alk-prodcard a:not([class]) { color:var(--ak-accent-dim); }
.alk-panel a:not([class]):hover, .alk-imgcard a:not([class]):hover, .alk-prodcard a:not([class]):hover { color:var(--ak-dark); }
.alk-body   { color:var(--ak-mid); font-size:15px; line-height:1.75; }
.alk-body-lg{ color:var(--ak-mid); font-size:17px; line-height:1.75; }
.alk-dark .alk-body, .alk-black .alk-body, .alk-slate .alk-body { color:var(--on-dark-65); }
/* Headings own their own rhythm. Pages must not hand-tune this with mb-* -
   that is what made spacing drift page to page. Use .mb-0 only where a
   heading genuinely ends a column. */
.alk-h1{ font-size:clamp(2.25rem,5vw,3.5rem); font-weight:800; line-height:1.08; letter-spacing:-.02em; color:inherit; margin:0 0 1rem; }
.alk-h2{ font-size:clamp(1.75rem,4vw,3rem); font-weight:800; line-height:1.1; color:inherit; margin:0 0 1.5rem; }
.alk-h2-compact{ font-size:clamp(1.5rem,3vw,2.25rem); font-weight:700; line-height:1.1; color:inherit; margin:0 0 1.25rem; }
.alk-h3{ font-size:clamp(1.25rem,2.5vw,1.75rem); font-weight:700; line-height:1.2; color:inherit; margin:0 0 .75rem; }
/* --ak-accent is 4.68:1 on white but only 4.26:1 on --ak-light, so these
   label styles use --accent-dim on light ground and let the dark-band rule
   below swap in --accent-lit. Fixes AA for both. */
.alk-kicker{ color:var(--ak-accent-dim); font-size:14px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.alk-dark .alk-kicker, .alk-black .alk-kicker, .alk-slate .alk-kicker,
.alk-navy .alk-kicker, .alk-hero-stage .alk-kicker,
.alk-dark .alk-eyebrow-sm, .alk-black .alk-eyebrow-sm, .alk-slate .alk-eyebrow-sm,
.alk-navy .alk-eyebrow-sm, .alk-hero-stage .alk-eyebrow-sm { color:var(--ak-accent-lit); }

/* Page-level helpers. These exist so pages carry no style="" attributes.
   .alk-h1/h2/h3 are color:inherit and the band classes already set #fff, so a
   heading on a dark band needs nothing -- only body copy, which the kit renders
   at --ak-mid, has to be lifted off the dark ground. */
.alk-body--on-dark  { color:var(--on-dark-72); }
.alk-body--on-dark-dim { color:var(--on-dark-60); }
.alk-measure        { max-width:560px; }
.alk-measure-wide   { max-width:760px; }
/* A white form/content panel dropped onto a dark band. */
.alk-panel          { background:#fff; padding:2.5rem; }
.alk-panel__title   { color:var(--ak-dark); font-weight:700; font-size:1.375rem; margin-bottom:4px; }
.alk-panel__sub     { color:var(--ak-mid); font-size:14px; margin-bottom:1.5rem; }
@media (max-width:575.98px){ .alk-panel{ padding:1.5rem; } }
/* Lucide glyph tinted to the accent, used as a section or card marker. */
.alk-ico-accent     { color:var(--ak-accent); }
.alk-ico-block      { display:block; margin-bottom:12px; }
/* Product shots sit on white cards at mixed native sizes; cap them so a tower
   and a 1U rack occupy the same slot height instead of one dwarfing the other. */
.alk-shot           { display:block; width:auto; max-width:100%; max-height:150px; margin:0 auto; }
.alk-eyebrow-sm{ font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ak-accent-dim); }
.alk-grid{ border-left:1px solid var(--ak-border); border-top:1px solid var(--ak-border); }
.alk-grid > [class*="col"]{ border-right:1px solid var(--ak-border); border-bottom:1px solid var(--ak-border); }

/* ----- AuthBadge ----- */
.alk-authbadge{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--ak-accent); background:var(--ba-black); padding:.5rem .75rem; }
.alk-authbadge.is-light{ background:transparent; }
.alk-authbadge .lbl{ color:var(--ak-accent-lit); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.alk-authbadge .sub{ font-weight:600; font-size:11px; white-space:nowrap; color:var(--ba-light); }
.alk-authbadge.is-light .sub{ color:var(--ba-black); }

/* ----- Button ----- */
.alk-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; cursor:pointer; border:none; white-space:nowrap; font-family:inherit; transition:background .15s,border-color .15s,color .15s; }
.alk-btn:hover{ text-decoration:none; }
.alk-btn--md{ font-size:15px; padding:14px 28px; letter-spacing:.01em; }
.alk-btn--sm{ font-size:12px; padding:8px 16px; }
.alk-btn--primary{ background:var(--ak-accent); color:#fff; letter-spacing:.01em; }
.alk-btn--primary:hover{ background:var(--ak-accent-hover); color:#fff; }
.alk-btn--secondary-dark{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); letter-spacing:.02em; }
.alk-btn--secondary-dark:hover{ border-color:rgba(255,255,255,.7); color:#fff; }
.alk-btn--secondary-light{ background:transparent; color:var(--ba-black); border:1px solid var(--ba-black); letter-spacing:.02em; }
.alk-btn--secondary-light:hover{ background:var(--ba-black); color:#fff; }
.alk-btn--ghost-dark{ background:transparent; color:var(--ba-light); padding:6px 0; }
.alk-btn--ghost-dark:hover{ color:#fff; }
.alk-btn--ghost-light{ background:transparent; color:var(--ak-accent-dim); padding:6px 0; }
.alk-btn--ghost-light:hover{ color:var(--ak-dark); }

/* ----- StatCard ----- */
.alk-stat .num{ color:#fff; font-weight:700; font-size:clamp(1.75rem,3.2vw,2.5rem); font-variant-numeric:tabular-nums; line-height:1.05; white-space:nowrap; }
.alk-stat .unit{ color:var(--ak-accent-lit); font-weight:600; font-size:13px; }
/* was --on-dark-35 => 3.22:1 on --ak-dark, under AA for 10px text */
.alk-stat .lbl{ font-weight:700; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--on-dark-60); margin-bottom:8px; }
.alk-stat .track{ position:relative; height:1px; background:rgba(255,255,255,.1); overflow:hidden; margin-bottom:8px; }
.alk-stat .fill{ position:absolute; left:0; top:0; height:100%; background:var(--ak-accent); }
/* was --on-dark-40 => 3.82:1 on --ak-dark, under AA for 11px text */
.alk-stat .ctx{ font-size:14px; color:var(--on-dark-60); line-height:1.55; margin:0; }

/* ----- ResourceCard ----- */
.alk-rescard{ display:flex; flex-direction:column; text-decoration:none; background:#fff; border:1px solid var(--ak-border); padding:22px; transition:background .15s, border-color .15s; height:100%; }
.alk-rescard:hover{ border-color:var(--ak-accent); }
/* Flex column stretches children by default; keep the badge to its own width. */
.alk-rescard .alk-badge{ align-self:flex-start; }
.alk-rescard:hover{ background:var(--ak-light); text-decoration:none; }
.alk-rescard .title{ font-weight:700; color:var(--ak-dark); font-size:14px; line-height:1.4; margin-bottom:8px; }
.alk-rescard .desc{ flex-grow:1; font-size:13px; color:var(--ak-mid); line-height:1.65; margin-bottom:12px; }
.alk-rescard .cta{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--ak-mid); font-weight:600; }
.alk-badge{ display:inline-block; font-weight:700; font-size:9px; letter-spacing:.12em; text-transform:uppercase; border-radius:0; padding:3px 7px; }
.alk-badge--grey { background:var(--ak-border); color:var(--ak-mid); }
.alk-badge--dark { background:var(--ak-dark); color:#fff; }
.alk-badge--accent{ background:var(--ak-accent); color:#fff; }

/* ----- ProductCard (icon header) ----- */
.alk-prodcard{ display:flex; flex-direction:column; background:#fff; height:100%; }
.alk-prodcard .head{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem; background:var(--ak-dark); min-height:140px; }
.alk-prodcard .tag{ font-weight:700; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ak-accent); }
.alk-prodcard .name{ font-weight:700; color:#fff; font-size:17px; margin-top:4px; }
.alk-prodcard .sub{ color:var(--ba-light); font-size:12px; margin-top:2px; }
.alk-prodcard .body{ padding:1.5rem; display:flex; flex-direction:column; justify-content:space-between; flex-grow:1; }
.alk-prodcard .spec{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ak-mid); margin-bottom:8px; }
/* --ak-accent on white is 4.72:1; --ak-accent-dim is 9.91:1 and is the token
   intended for accent-as-text on white surfaces. */
.alk-prodcard .spec .dash{ color:var(--ak-accent-text); margin-top:2px; flex-shrink:0; }
.alk-prodcard .learn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:13px; font-weight:600; color:var(--ba-black); transition:color .15s; }
.alk-prodcard .learn:hover{ color:var(--ak-accent-dim); }

/* ----- ProductImageCard (image header) ----- */
.alk-imgcard{ display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--ak-border); }
/* White, not the kit's dark plate: this site's product library is a mix of
   transparent PNGs and PNGs with the white matte baked in, so a dark plate drew
   a white rectangle around half the shots. A hairline keeps the tile readable
   against the light band. */
.alk-imgcard .imgwrap{ background:#fff; border-bottom:1px solid var(--ak-border); overflow:hidden; aspect-ratio:16/9; }
.alk-imgcard .imgwrap img{ width:100%; height:100%; object-fit:contain; padding:1.5rem; }
.alk-imgcard .body{ padding:1.5rem; display:flex; flex-direction:column; flex-grow:1; }
.alk-imgcard .tag{ display:block; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ak-accent); margin-bottom:8px; }
.alk-imgcard .name{ font-weight:700; font-size:17px; color:var(--ak-dark); margin-top:0; margin-bottom:6px; line-height:1.3; }
.alk-imgcard .desc{ font-size:14px; color:var(--ak-mid); line-height:1.7; flex-grow:1; margin-bottom:20px; }
.alk-imgcard .learn{ font-size:13px; font-weight:700; color:var(--ba-black); text-decoration:none; }
/* Touch widths: the card "learn" link and the site switcher are standalone tap
   targets, not links inside a sentence, so they owe the 44px floor. Padding the
   hit area rather than setting a height, so the text does not move. */
/* A card "learn" link used as a table cell action needs the tap-target floor at
   every width, not only on touch -- it is the only control in its cell. */
.alk-comparetable .learn{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:13px; font-weight:700; color:var(--ak-accent-dim); text-decoration:none; }
.alk-comparetable .learn:hover{ color:var(--ak-dark); }
@media (max-width:991.98px){
  .alk-imgcard .learn,
  .alk-linkcard .go,
  .alk-catcard .go,
  .alk-rescard .go,
  .brg-phone .tel { display:inline-flex; align-items:center; min-height:44px; }
}
.alk-imgcard .learn:hover{ color:var(--ak-accent-dim); }
.alk-imgcard .ds{ font-size:12px; font-weight:600; color:var(--ak-mid); text-decoration:none; }
.alk-imgcard .ds:hover{ color:var(--ak-dark); }
/* Banner variant: for shots that already carry their own background (vendor
   renders on their own gradient). Contain + padding would frame
   the supplied background in white, so these fill the tile at their own ratio. */
.alk-imgcard--banner .imgwrap{ aspect-ratio:2.68/1; border-bottom:none; }
.alk-imgcard--banner .imgwrap img{ object-fit:cover; padding:0; }
/* "Best for" list inside a product card. */
.alk-imgcard .bestfor-lbl{ display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ak-dark); margin:0 0 .5rem; }
.alk-imgcard .bestfor{ list-style:none; margin:0 0 20px; padding:0; flex-grow:1; }
.alk-imgcard .bestfor li{ position:relative; padding-left:1rem; font-size:13.5px; color:var(--ak-mid); line-height:1.6; margin-bottom:.35rem; }
.alk-imgcard .bestfor li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--ak-accent); }
/* Label/value spec pairs inside a product card, for pages that publish specs per
   card instead of in one comparison table (edge-servers). A <dl>, so the label
   and its value are associated rather than just adjacent. */
.alk-speclist{ margin:0 0 20px; flex-grow:1; }
.alk-speclist div{ display:grid; grid-template-columns:7.5rem 1fr; gap:.6rem; padding:.3rem 0; border-top:1px solid var(--ak-border); }
.alk-speclist div:first-child{ border-top:0; }
.alk-speclist dt{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ak-dark); align-self:start; padding-top:.15rem; }
.alk-speclist dd{ margin:0; font-size:13.5px; color:var(--ak-mid); line-height:1.55; }
/* Plain bullet list in a band, for pages that publish feature lists as prose
   rather than as trust checkmarks. */
.alk-bullets{ list-style:none; margin:0; padding:0; }
.alk-bullets li{ position:relative; padding-left:1.1rem; font-size:14.5px; line-height:1.7; color:var(--ak-mid); margin-bottom:.5rem; }
.alk-bullets li::before{ content:""; position:absolute; left:0; top:.72em; width:7px; height:1px; background:var(--ak-accent); }
.alk-bullets--on-dark li{ color:var(--on-dark-72); }
.alk-bullets--on-dark li::before{ background:var(--ak-accent-lit); }
/* Numbered footnotes at the foot of a section, for pages that state the basis of
   a vendor claim. The marker is a real list number, not a floating superscript. */
.alk-footnotes{ list-style:none; margin:3rem 0 0; padding:1.25rem 0 0; border-top:1px solid var(--ak-border); counter-reset:none; }
.alk-footnotes li{ position:relative; padding-left:1.75rem; font-size:12.5px; line-height:1.6; color:var(--ak-mid); margin-bottom:.6rem; }
.alk-footnotes .num{ position:absolute; left:0; top:0; font-weight:700; color:var(--ak-dark); }
.alk-dark .alk-footnotes, .alk-slate .alk-footnotes, .alk-black .alk-footnotes{ border-top-color:var(--hairline-dark); }
.alk-dark .alk-footnotes li, .alk-slate .alk-footnotes li, .alk-black .alk-footnotes li{ color:var(--on-dark-60); }
@media (max-width:575.98px){ .alk-speclist div{ grid-template-columns:1fr; gap:.15rem; } }

/* ----- FAQItem ----- */
.alk-faq-q{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; text-align:left; border:0; background:transparent; padding:1rem 0; cursor:pointer; }
.alk-faq-q .q{ font-weight:600; font-size:14px; color:var(--ak-dark); line-height:1.5; }
.alk-faq-q .ico-minus{ display:none; }
.alk-faq-q[aria-expanded="true"] .ico-plus{ display:none; }
.alk-faq-q[aria-expanded="true"] .ico-minus{ display:inline-flex; }
.alk-faq-a{ padding:0 3rem 1rem 0; }
.alk-faq-a[hidden]{ display:none; }
.alk-faq-a p{ font-size:14px; color:var(--ak-mid); line-height:1.75; margin:0; }

/* ----- FloatingCard ----- */
.alk-floatcard{ position:relative; z-index:5; margin:-60px 0 -80px; padding:0 2rem; background:transparent; }
.alk-floatcard .inner{ max-width:940px; margin:0 auto; background:#fff; box-shadow:0 0 0 1px rgba(0,18,120,.08), 0 8px 40px rgba(4,8,34,.14), 0 0 80px rgba(0,18,120,.1); }
.alk-floatcard .pad{ padding:3.5rem 3rem; }

/* ----- TrustChecklist ----- */
.alk-trust{ display:flex; flex-direction:column; gap:.5rem; }
/* Uses Bootstrap's .row class, so neutralize .row/.row>* (flex-wrap, 100% width,
   gutter padding) that otherwise stretch the icon and break icon+text alignment. */
.alk-trust .row{ display:flex; flex-wrap:nowrap; align-items:flex-start; gap:.5rem; margin:0; }
.alk-trust .row > *{ width:auto; padding:0; margin:0; }
.alk-trust .row [data-lucide]{ flex:0 0 auto; width:18px; height:18px; margin-top:2px; }
.alk-trust .row span{ font-size:14px; }
.alk-trust--dark [data-lucide]{ color:var(--ba-light); }
.alk-trust--dark .row span{ color:var(--ba-light); }
.alk-trust--ba-blue [data-lucide]{ color:var(--ak-accent); }
/* .7 alpha computes to 3.52:1 on --ba-blue — same latent AA gap as .alk-authority */
.alk-trust--ba-blue .row span{ color:#fff; }

/* ----- AuthorityPanel ----- */
.alk-authority{ background:var(--ba-blue); padding:2.5rem; color:#fff; }
.alk-authority h3{ font-size:18px; font-weight:700; margin-bottom:12px; line-height:1.4; color:#fff; }
.alk-authority .rule{ border-top:1px solid rgba(255,255,255,.2); padding-top:20px; margin-top:20px; }
/* --ba-blue is dark enough that only near-white clears AA for small text
   (4.5:1 needs L>=0.80 on var(--ak-accent)); .75 alpha measured 3.82:1. */
.alk-authority .intro{ font-size:13px; color:#fff; font-weight:600; margin-bottom:12px; }
.alk-authority .op{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.alk-authority .op .ico{ width:28px; height:28px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.alk-authority .op span{ font-size:13px; color:var(--ba-light); }
/* was .6 alpha => 2.98:1 on --ba-blue */
.alk-authority .foot{ font-size:12px; color:#fff; display:flex; align-items:center; gap:8px; }

/* ----- PartnerGrid ----- */
.alk-partners{ display:flex; flex-wrap:wrap; gap:1px; background:var(--ak-border); }
.alk-partners a, .alk-partners .cell{ background:#fff; padding:28px 40px; display:flex; align-items:center; justify-content:center; min-width:180px; flex-grow:1; text-decoration:none; transition:background .15s; }
.alk-partners a:hover{ background:var(--ak-light); }
.alk-partners span{ font-weight:800; font-size:18px; color:var(--ak-dark); letter-spacing:-.01em; }
.alk-partners img{ max-height:40px; width:auto; }

/* ----- TechTabs ----- */
.alk-tab{ width:100%; text-align:left; border:0; position:relative; padding:.75rem; background:#fff; color:var(--ak-mid); transition:background .15s,color .15s; cursor:pointer; }
.alk-tab.is-active{ background:var(--ba-black); color:#fff; }
/* was #b9b9b9 => 1.96:1 on white, well under AA */
.alk-tab .num{ font-weight:700; font-size:10px; letter-spacing:.15em; color:var(--ak-mid); margin-bottom:4px; }
.alk-tab.is-active .num{ color:var(--ak-accent); }
.alk-tab .name{ font-weight:600; font-size:13px; }
.alk-tab.is-active::after{ content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--ak-accent); }
.alk-tabpanel{ background:#fff; border:1px solid var(--ak-border); border-top:0; }
.alk-tabpanel[hidden]{ display:none; }
.alk-tabpanel .aside{ background:var(--ak-light); padding:3rem; display:flex; flex-direction:column; justify-content:space-between; }
.alk-tabpanel .aside .spec{ font-weight:700; color:var(--ak-dark); font-size:1.75rem; margin-bottom:4px; }
.alk-tabpanel .aside .speclbl{ font-weight:600; text-transform:uppercase; font-size:11px; color:var(--ak-mid); letter-spacing:.1em; }
.alk-tabpanel .main{ padding:3rem; display:flex; flex-direction:column; justify-content:center; }
.alk-tabpanel .main .eyebrow{ font-weight:700; text-transform:uppercase; font-size:10px; letter-spacing:.15em; color:var(--ak-accent-dim); margin-bottom:12px; }
.alk-tabpanel .main p{ color:var(--ak-mid); font-size:15px; line-height:1.75; max-width:560px; margin:0; }
/* Tab strip dividers. DiskDataWorks set these with style="border-right:..." on
   every button; here they are a class so pages stay free of inline styles. */
.alk-tabstrip{ border-bottom:1px solid var(--ak-border); }
.alk-tabstrip > [class*="col-"]:not(:last-child) .alk-tab{ border-right:1px solid var(--ak-border); }

/* ----- SubNav (sticky in-page anchors) ----- */
.alk-subnav{ width:100vw; margin-left:calc(50% - 50vw); background:#fff; border-bottom:1px solid var(--ak-border); }  /* sticky via Bootstrap .sticky-top; full-width breakout that stays sticky-safe */
.alk-subnav.is-stuck{ box-shadow:0 2px 12px rgba(0,0,0,.08); }
.alk-subnav .inner{ display:flex; gap:1.5rem; height:44px; align-items:center; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
.alk-subnav .inner::-webkit-scrollbar{ display:none; }
.alk-subnav a{ white-space:nowrap; font-size:13px; font-weight:600; color:var(--ak-mid); height:100%; display:inline-flex; align-items:center; border-bottom:2px solid transparent; text-decoration:none; }
.alk-subnav a:hover{ color:var(--ak-dark); }
.alk-subnav a.is-active{ color:var(--ak-dark); border-bottom-color:var(--ak-accent); }
/* The page's single ask, pinned to the right of the sticky sub-nav so it stays
   reachable while the section links scroll horizontally on narrow screens. */
.alk-subnav__cta{ margin-left:auto; flex:0 0 auto; padding:0 14px; height:30px; background:var(--ak-accent); color:#fff !important; border-bottom:none !important; font-weight:700; }
.alk-subnav__cta:hover, .alk-subnav__cta:focus{ background:var(--ak-accent-hover); color:#fff !important; }

/* ----- Breadcrumbs (left-aligned strip under the primary nav) ----- */
.alk-breadcrumb{ background:#fff; border-bottom:1px solid var(--ak-border); }
.alk-breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; list-style:none; margin:0; padding:.7rem 0; font-size:.82rem; }
.alk-breadcrumb li{ display:flex; align-items:center; gap:.5rem; color:var(--ak-mid); }
.alk-breadcrumb li:not(:last-child)::after{ content:"/"; color:var(--ak-border); }
.alk-breadcrumb a{ color:var(--ak-mid); text-decoration:none; }
.alk-breadcrumb a:hover{ color:var(--ak-accent-dim); text-decoration:underline; }
/* Tap-target floor belongs on the links. It used to sit on the li too, which
   gave the non-interactive current-page crumb a 44px row for nothing. */
@media (max-width: 991.98px) { .alk-breadcrumb a { min-height: 44px; } }
.alk-breadcrumb li[aria-current="page"]{ color:var(--ak-dark); font-weight:600; }
/* Phones get parent + current page on one line instead of a four-crumb trail
   wrapping to three rows. Full trail still ships in the markup and the
   BreadcrumbList JSON-LD, so nothing is lost to crawlers or assistive tech --
   it just is not painted. */
@media (max-width: 575.98px) {
  .alk-breadcrumb ol{ flex-wrap:nowrap; gap:.4rem; padding:.25rem 0; }
  .alk-breadcrumb li:not(:nth-last-child(-n+2)){ display:none; }
  .alk-breadcrumb li{ min-width:0; }
  .alk-breadcrumb li[aria-current="page"]{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
}

/* ----- Prose (policy, terms, long-form) -----
   Legal pages are one column of running text, not cards. This is the only place
   on the site where a reader reads top to bottom, so it gets a real measure and
   a heading rhythm rather than the band spacing the marketing pages use. */
.alk-prose{ max-width:72ch; }
.alk-prose > *:first-child{ margin-top:0; }
.alk-prose p, .alk-prose li{ color:var(--ak-mid); font-size:15px; line-height:1.8; }
.alk-prose p{ margin-bottom:1.25rem; max-width:none; }
.alk-prose h2{ font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:700; color:var(--ak-dark); margin:2.75rem 0 .85rem; letter-spacing:-.01em; }
.alk-prose h3{ font-size:1.05rem; font-weight:700; color:var(--ak-dark); margin:2rem 0 .6rem; }
.alk-prose ul, .alk-prose ol{ margin:0 0 1.25rem; padding-left:1.15rem; }
.alk-prose li{ margin-bottom:.5rem; }
.alk-prose li::marker{ color:var(--ak-accent); }
.alk-prose a:not([class]){ color:var(--ak-accent-dim); text-decoration:underline; text-underline-offset:2px; }
.alk-prose a:not([class]):hover{ color:var(--ak-dark); }
.alk-prose strong{ color:var(--ak-dark); }
/* A short aside inside prose -- a notice, a sanctions warning -- set off by a
   rule rather than a tinted box, so it does not read as a card. */
.alk-prose .note{ border-left:3px solid var(--ak-accent); padding:.15rem 0 .15rem 1.15rem; margin:0 0 1.25rem; }
/* Table of contents for the long policy pages. */
.alk-toc{ border-top:1px solid var(--ak-border); border-bottom:1px solid var(--ak-border); padding:1.25rem 0; margin-bottom:2.5rem; }
.alk-toc .lbl{ display:block; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ak-mid); margin-bottom:.75rem; }
.alk-toc ol{ list-style:none; margin:0; padding:0; column-gap:2.5rem; columns:2; }
.alk-toc li{ margin-bottom:.4rem; break-inside:avoid; }
.alk-toc a{ font-size:13.5px; color:var(--ak-dark); text-decoration:none; }
.alk-toc a:hover{ color:var(--ak-accent-dim); text-decoration:underline; }
@media (max-width:767.98px){ .alk-toc ol{ columns:1; } .alk-toc a{ display:flex; align-items:center; min-height:44px; } }

/* ----- CTA form (translucent inputs on navy/blue) ----- */
.alk-form .form-control,
.alk-form .form-select{ border-radius:0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff; }
.alk-form .form-control::placeholder{ color:var(--ba-light); }
.alk-form .form-control:focus,
.alk-form .form-select:focus{ background:rgba(255,255,255,.16); border-color:var(--ak-accent); color:#fff; box-shadow:none; }
.alk-form .form-select option{ color:var(--ak-dark); }
.alk-form .alk-btn{ border-radius:0; width:100%; justify-content:center; }

/* ----- MegaMenu (multi-column nav dropdown, e.g. Innovation) ----- */
.brg-nav .dropdown-menu.alk-mega {
  padding: 1.5rem 1.75rem;
  border-top: 1px solid var(--line);
  border-radius: 0;
  width: 94vw;
  max-width: 960px;
  left: 50% !important;
  right: auto !important;
  top: 100% !important;
  transform: translateX(-50%) !important;
  margin-top: 0 !important;
}

@media (max-width: 991.98px) {
  .brg-nav .dropdown-menu.alk-mega {
    position: static !important;
    transform: none !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
.alk-mega__grid{ display:grid; grid-template-columns:repeat(4,minmax(180px,1fr)); gap:1.35rem 2rem; }
.alk-mega__col{ min-width:0; }
.alk-mega .dropdown-header{ padding:0 0 .5rem; margin:0 0 .4rem; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ak-accent-dim); border-bottom:1px solid var(--ak-border); }
.alk-mega .dropdown-item{ padding:.45rem 0; font-size:.9rem; line-height:1.35; white-space:normal; transition:padding-left .15s, color .15s; }
.brg-nav .dropdown-menu.alk-mega .dropdown-item:hover,
.brg-nav .dropdown-menu.alk-mega .dropdown-item:focus{ background:transparent !important; color:var(--ak-accent-text) !important; padding-left:.4rem; }

/* ----- LinkCard (icon/eyebrow + title + desc + arrow tile; light or dark surface) ----- */
.alk-linkcard{ display:flex; flex-direction:column; justify-content:space-between; height:100%; text-decoration:none; padding:22px; border:1px solid var(--ak-border); background:#fff; transition:border-color .15s, background .15s; }
.alk-linkcard:hover{ border-color:var(--ak-accent); text-decoration:none; }
.alk-linkcard .eyebrow,.alk-linkcard .title,.alk-linkcard .desc,.alk-linkcard .go{ display:block; }
.alk-linkcard .eyebrow{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ak-accent-dim); margin-bottom:10px; }
.alk-linkcard .title{ font-weight:700; font-size:16px; color:var(--ak-dark); margin-bottom:8px; line-height:1.3; }
.alk-linkcard .desc{ font-size:13px; color:var(--ak-mid); line-height:1.6; }
.alk-linkcard .go{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ak-accent-dim); margin-top:16px; }
.alk-linkcard--dark{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); }
.alk-linkcard--dark:hover{ border-color:var(--ak-accent); }
.alk-linkcard--dark .eyebrow{ color:var(--ak-accent-lit); }
.alk-linkcard--dark .title{ color:#fff; }
.alk-linkcard--dark .desc{ color:var(--on-dark-55); }
.alk-linkcard--dark .go{ color:var(--ak-accent-lit); }

/* ----- Quote (editorial pull-quote; add --center on dark bands) ----- */
.alk-quote{ margin:0; border-left:3px solid var(--ak-accent); padding:8px 0 8px 24px; }
.alk-quote p{ font-size:1.25rem; font-weight:700; color:var(--ak-dark); line-height:1.45; margin:0 0 16px; }
.alk-quote footer{ font-size:14px; color:var(--ak-mid); }
.alk-quote footer strong{ color:var(--ak-dark); }
.alk-quote--dark p{ color:#fff; }
.alk-quote--dark footer{ color:var(--on-dark-55); }
.alk-quote--dark footer strong{ color:var(--ak-accent-lit); }
.alk-quote--center{ border-left:0; padding:0; text-align:center; max-width:900px; margin:0 auto; }
.alk-quote--center p{ font-size:clamp(1.25rem,2.5vw,1.75rem); margin-bottom:20px; }

/* ----- MediaFrame (image wrapper: dark inset on dark bands, hairline border on light) ----- */
.alk-media{ background:var(--ba-black); padding:8px; }
.alk-media img{ display:block; width:100%; }
.alk-media--light{ background:transparent; padding:0; border:1px solid var(--ak-border); }
.alk-media--thumb{ aspect-ratio:16/10; overflow:hidden; }
.alk-media--thumb img{ height:100%; object-fit:cover; }

/* ----- PillarCard (accent icon + optional number + title + body; fills an .alk-grid cell) ----- */
.alk-pillar{ transition:background .15s; }
.alk-pillar svg, .alk-pillar [data-lucide]{ color:var(--ak-accent); }
.alk-pillar .num{ font-weight:700; font-size:10px; letter-spacing:.15em; color:var(--ak-accent); }
.alk-pillar .title{ font-weight:700; font-size:1.0625rem; line-height:1.3; color:var(--ak-dark); margin:14px 0 8px; }
.alk-pillar .body{ font-size:14px; line-height:1.7; color:var(--ak-mid); margin:0; }
.alk-pillar--dark .title{ color:#fff; }
.alk-pillar--dark .body{ color:var(--on-dark-55); }
.alk-pillar--dark:hover{ background:rgba(255,255,255,.03); }

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  .alk-floatcard{ margin:0; padding:0; }
  .alk-floatcard .pad{ padding:2.5rem 1.5rem; }
  .brg-nav .dropdown-menu.alk-mega{ max-width:100%; padding:1rem 1.25rem; }
  .alk-mega__grid{ grid-template-columns:1fr; gap:1rem; }
  .alk-mega .dropdown-header{ margin-top:.25rem; }
}
@media (max-width: 640px) {
  .top-search .input-group { width: 100%; max-width: 100%; }
  .alk-container{ padding-left:1.25rem; padding-right:1.25rem; }
  .alk-tabpanel .aside, .alk-tabpanel .main{ padding:2rem; }
}

/* ===== REDUCED MOTION ===== */
/* Blanket coverage: the previous rule named only 4 selectors, leaving ~11 animated
   ones (.alk-pillar, .alk-icon-card, .prodmap-card, .footer-social a, the yt-lightbox
   parts, the nav underline) still moving. !important is required to beat per-component
   specificity. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Decorative hover/state transforms still read as motion even at 0 duration. */
  .allia-yt-trigger:hover .allia-yt-playbtn-inner,
  .alk-catcard:hover .imgwrap img,
  .brg-nav .nav-link::before { transform: none !important; }
}

/* ===== YouTubeLightbox (AlliaKit) ===== */
.allia-yt-trigger { display: block; width: 100%; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; text-align: left; }
.allia-yt-card { display: block; width: 100%; }
.allia-yt-thumb-wrap { position: relative; overflow: hidden; background: var(--ak-dark); aspect-ratio: 16 / 9; border-top: 3px solid var(--ak-accent); }
.allia-yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; transition: opacity .2s; }
.allia-yt-trigger:hover .allia-yt-thumb { opacity: 1; }
.allia-yt-playbtn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.allia-yt-playbtn-inner { width: 64px; height: 64px; background: var(--ak-accent); display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.allia-yt-trigger:hover .allia-yt-playbtn-inner { background: var(--ak-accent-hover); transform: scale(1.08); }
.allia-yt-caption { background: var(--ak-slate); padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.08); }
.allia-yt-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--ak-accent); text-transform: uppercase; margin-bottom: 4px; }
.allia-yt-title { display: block; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.4; }

#allia-yt-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(4,8,34,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; font-family: inherit; opacity: 0; pointer-events: none; transition: opacity .18s; }
#allia-yt-overlay.is-open { opacity: 1; pointer-events: all; }
.allia-yt-header { width: 100%; max-width: 960px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.allia-yt-overlay-title { margin: 0; font-size: 13px; color:var(--ba-light); font-weight: 400; }
.allia-yt-close { background: transparent; border: 1px solid rgba(255,255,255,.2); color: #fff; cursor: pointer; padding: 6px 14px; min-height: 44px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; font-family: inherit; letter-spacing: .06em; transition: border-color .15s; }
.allia-yt-close:hover { border-color: rgba(255,255,255,.5); }
.allia-yt-player-wrap { width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background:var(--ba-black); border-top: 3px solid var(--ak-accent); }
#allia-yt-iframe { width: 100%; height: 100%; display: block; border: none; }
.allia-yt-hint { margin-top: 12px; font-size: 11px; color:var(--ba-light); letter-spacing: .04em; }

/* ===== ProductMapCard (products.asp) =====
   Elevated rounded card + accent-rule heading used by the products.asp product
   index. This is the one place in the kit that deliberately breaks the
   border-radius:0 rule, because it predates AlliaKit and products.asp is a
   site-map page rather than a product band. Moved here from an inline <style>
   block so no page carries its own CSS. Documented in guidelines/components.md.
   Renamed from the generic Bootstrap .card to avoid colliding with it. */
.prodmap-card { position: relative; border: 1px solid #e2e2e2; border-radius: 16px; padding: 25px 30px; margin: 0 0 20px; height: 100%; transition: .4s ease-in-out; box-shadow: 0 4px 8px 0 rgba(0,0,0,.1), 0 6px 20px 0 rgba(0,0,0,.09); }
.prodmap-card h3 { font-size: 1.15rem; margin-top: 1.25rem; }
.prodmap-card h3:first-of-type { margin-top: 0; }
.prodmap-card ul { margin-bottom: 0; }
.prodmap-card small { color: var(--ak-mid); }
.hr-o { border-bottom: 3px solid var(--ak-accent); margin-bottom: 15px; font-size: 1.8rem; }

/* ===== FAQ / TechTabs containers =====
   Declared so no page relies on an undeclared class. Both are layout wrappers
   whose interactive children (.alk-faq-q / .alk-faq-a, .alk-tab / .alk-tabpanel)
   carry the actual styling. Pages may still set max-width and the top hairline
   inline; inline styles take precedence over these defaults. */
.alk-faq { border-top: 1px solid var(--ak-border); }
/* One accordion row. Wraps the .alk-faq-q button and its .alk-faq-a panel. */
.alk-faq__item { border-bottom: 1px solid var(--ak-border); }
/* The plus/minus icon pair on the right of the question button. Visibility is
   driven by .alk-faq-q[aria-expanded] further up this file. */
.alk-faq__ico { flex-shrink: 0; margin-top: 2px; }
.alk-faq__ico .ico-plus { color: var(--ak-mid); }
.alk-faq__ico .ico-minus { color: var(--ak-accent); }
.alk-techtabs { display: grid; gap: 0; }

/* ===== SpecTable =====
   Two-column key/value specification table. Sits inside a bordered white panel
   on a light band. Row labels are <th scope="row">; values are <td>. The
   optional .alk-spectable__note carries the datasheet attribution line. */
.alk-spectable { background: #fff; padding: 1.5rem; border: 1px solid var(--ak-border); }
.alk-spectable > .wrap { overflow-x: auto; }
.alk-spectable table { width: 100%; margin: 0; border-collapse: collapse; }
.alk-spectable th, .alk-spectable td { padding: .7rem .5rem; border-bottom: 1px solid var(--ak-border); vertical-align: top; font-size: 14px; line-height: 1.6; }
.alk-spectable tr:last-child th, .alk-spectable tr:last-child td { border-bottom: 0; }
.alk-spectable th[scope="row"] { width: 32%; font-weight: 700; color: var(--ak-dark); text-align: left; }
.alk-spectable td { color: var(--ak-mid); }
.alk-spectable__note { margin: 1.25rem 0 0; font-size: 13px; line-height: 1.6; color: var(--ak-mid); }
@media (min-width: 768px) { .alk-spectable { padding: 2.5rem; } }

/* ===== CompareTable =====
   Side-by-side family comparison. First column is the spec name (th scope=row),
   each following column is one product. Header cells are th scope=col. The
   first data column is sticky on narrow viewports so labels stay readable
   while the product columns scroll. */
.alk-comparetable { background: #fff; padding: 1.5rem; border: 1px solid var(--ak-border); }
.alk-comparetable > .wrap { overflow-x: auto; }
.alk-comparetable table { width: 100%; margin: 0; border-collapse: collapse; }
.alk-comparetable th, .alk-comparetable td { padding: .7rem .6rem; border-bottom: 1px solid var(--ak-border); vertical-align: top; font-size: 13px; line-height: 1.55; }
.alk-comparetable thead th { border-bottom: 2px solid var(--ak-dark); font-weight: 700; color: var(--ak-dark); text-align: left; white-space: nowrap; }
.alk-comparetable tbody th[scope="row"] { font-weight: 700; color: var(--ak-dark); text-align: left; background: #fff; position: sticky; left: 0; min-width: 190px; }
.alk-comparetable tbody td { color: var(--ak-mid); min-width: 170px; }
/* Dense variant, for tables with enough columns that the kit's 190px + 6x170px
   floors add up to more than the container -- the seven-column rack-servers
   table overflowed by 92px at 1440, which is a sideways scrollbar the design
   does not allow. Relaxes the floors and tightens the cell so it fits. */
.alk-comparetable--dense tbody th[scope="row"] { min-width: 132px; }
.alk-comparetable--dense tbody td { min-width: 0; }
.alk-comparetable--dense th, .alk-comparetable--dense td { padding: .6rem .5rem; font-size: 12.5px; }
.alk-comparetable--dense thead th { white-space: normal; }
.alk-comparetable tr:last-child th, .alk-comparetable tr:last-child td { border-bottom: 0; }
/* Narrow widths: a comparison table with five columns can only be read by
   scrolling it sideways, and a sideways scroll inside a page is easy to miss.
   Below md each row becomes its own block and each cell carries its column name
   from data-label, so nothing scrolls. Add .alk-comparetable--stack and give
   every <td> a data-label. */
@media (max-width: 767.98px) {
  .alk-comparetable--stack > .wrap { overflow-x: visible; }
  .alk-comparetable--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .alk-comparetable--stack tbody tr { display: block; border-bottom: 1px solid var(--ak-border); padding: .85rem 0; }
  .alk-comparetable--stack tbody tr:last-child { border-bottom: 0; }
  .alk-comparetable--stack tbody th[scope="row"] { display: block; position: static; min-width: 0; border: 0; padding: 0 0 .5rem; font-size: 15px; }
  .alk-comparetable--stack tbody td { display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem; min-width: 0; border: 0; padding: .2rem 0; }
  .alk-comparetable--stack tbody td::before { content: attr(data-label); font-weight: 700; color: var(--ak-dark); }
}
/* Column headers deep-link to that model's page. The column for the page you
   are already on stays plain text, so the link is a reliable "go elsewhere"
   signal rather than decoration. */
.alk-comparetable thead th a { color: var(--ak-accent-dim); text-decoration: none; border-bottom: 1px solid rgba(0,18,120,.35); }
.alk-comparetable thead th a:hover { color: var(--ak-accent-dim); border-bottom-color: var(--ak-accent-dim); text-decoration: none; }

/* Model index: deep links to every individual model page, sitting under a
   category's card grid so no sub-product is more than one click from the hub. */
.alk-modelindex { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--ak-border); display: flex; flex-direction: column; gap: 1.25rem; }
.alk-modelindex .lbl { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-mid); margin-bottom: 10px; }
.alk-modelindex .links { display: flex; flex-wrap: wrap; gap: 8px; }
.alk-modelindex a { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; line-height: 1; padding: 9px 13px; color: var(--ak-dark); background: #fff; border: 1px solid var(--ak-border); text-decoration: none; transition: border-color .15s, color .15s; }
.alk-modelindex a:hover { border-color: var(--ak-accent); color: var(--ak-accent-dim); text-decoration: none; }
@media (max-width: 991.98px) { .alk-modelindex a { min-height: 44px; } }
.alk-light .alk-modelindex a { background: transparent; }
.alk-dark .alk-modelindex, .alk-black .alk-modelindex { border-top-color: var(--hairline-dark); }
.alk-dark .alk-modelindex .lbl, .alk-black .alk-modelindex .lbl { color: var(--on-dark-50); }
.alk-dark .alk-modelindex a, .alk-black .alk-modelindex a { background: rgba(255,255,255,.04); border-color: var(--hairline-dark); color: #fff; }
.alk-dark .alk-modelindex a:hover, .alk-black .alk-modelindex a:hover { border-color: var(--ak-accent); color: var(--ak-accent-lit); }
@media (min-width: 768px) { .alk-comparetable { padding: 2.5rem; } .alk-comparetable th, .alk-comparetable td { font-size: 14px; } }

/* ===== CategoryCard =====
   Whole-card link that browses to a product category: a full-bleed square photo
   with the category name beneath it. Distinct from ProductImageCard, which
   letterboxes a 16:9 product render on a dark stage (object-fit:contain). Here
   the image is lifestyle/illustrative and fills the frame (object-fit:cover),
   so the source assets should be square. Sits on a light band. */
.alk-catcard { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: #fff; border: 1px solid var(--ak-border); transition: border-color .2s; }
.alk-catcard:hover { border-color: var(--ak-accent); text-decoration: none; }
.alk-catcard .imgwrap { background: var(--ak-dark); overflow: hidden; aspect-ratio: 1/1; }
.alk-catcard .imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.alk-catcard:hover .imgwrap img { transform: scale(1.04); }
.alk-catcard .body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.alk-catcard .tag { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-accent-dim); margin-bottom: 8px; }
.alk-catcard .name { font-weight: 700; font-size: 17px; color: var(--ak-dark); margin-bottom: 8px; line-height: 1.3; }
.alk-catcard .desc { font-size: 14px; color: var(--ak-mid); line-height: 1.7; flex-grow: 1; margin-bottom: 16px; }
.alk-catcard .go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color:var(--ba-black); }
.alk-catcard:hover .go { color: var(--ak-accent-dim); }

/* ===== AlliaKit Hero Components ===== */

/* Hero photo band: a full-bleed photograph behind the standard split hero.
   The photo is a real <img>, not a CSS background, so it can carry
   fetchpriority/decoding hints and be picked up as the LCP element. The
   ::after scrim is weighted to the left so the copy column keeps AAA contrast
   while the right third of the picture stays visible. Always pair with
   .alk-black so the band still reads if the photo fails to load. */
.alk-hero-photo { overflow: hidden; }
.alk-hero-photo > .alk-container { position: relative; z-index: 2; }
.alk-hero-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, 50% 50%);
  z-index: 0;
}
.alk-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,8,34,.92) 0%, rgba(4,8,34,.84) 42%, rgba(4,8,34,.34) 70%, rgba(4,8,34,.04) 100%),
    linear-gradient(180deg, rgba(4,8,34,.35) 0%, rgba(4,8,34,0) 45%, rgba(4,8,34,.45) 100%);
}
.alk-hero-photo .alk-h1 { text-shadow: 0 2px 20px rgba(0,0,0,.5); }

/* Stacked layout: the copy now covers the whole frame, subject included, so
   the horizontal ramp is replaced by an even veil. */
@media (max-width: 991.98px) {
  .alk-hero-photo::after {
    background: linear-gradient(180deg, rgba(4,8,34,.86) 0%, rgba(4,8,34,.91) 100%);
  }
}

/* Official Hero 2 (CONFIRMED): alk-hero-banner (Centered Command Banner) */
.alk-hero-banner {
  padding-top: 5.5rem;
  padding-bottom: 0;
  background: var(--ba-black);
  color: #fff;
  border-top: 3px solid var(--ak-accent);
  border-bottom: 1px solid var(--ak-border);
  text-align: center;
}
.alk-hero-trust-strip {
  margin-top: 4rem;
  border-top: 1px solid var(--ak-border);
  background: rgba(255, 255, 255, 0.02);
}
.alk-hero-trust-item {
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--ak-border);
  text-align: center;
}
.alk-hero-trust-item:last-child {
  border-right: none;
}
.alk-hero-trust-item .lbl {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.alk-hero-trust-item .sub {
  font-size: 11px;
  color: var(--on-dark-50);
}
@media (max-width: 767.98px) {
  .alk-hero-trust-item {
    border-right: none;
    border-bottom: 1px solid var(--ak-border);
  }
  .alk-hero-trust-item:last-child {
    border-bottom: none;
  }
}

/* Hero 2: alk-hero-stage (Hardware Product Showcase Stage Hero) */
.alk-hero-stage {
  padding-top: 4.5rem;
  padding-bottom: 5rem;
  background: var(--ak-dark);
  color: #fff;
  border-bottom: 1px solid var(--ak-border);
  position: relative;
}
.alk-stage-media {
  position: relative;
  background: radial-gradient(circle at center, rgba(2, 162, 253, 0.16) 0%, rgba(4, 8, 34, 0.95) 75%), var(--ba-black);
  border: 1px solid var(--ak-border);
  padding: 2.75rem 1.5rem;
  text-align: center;
  overflow: hidden;
}
.alk-stage-img {
  max-height: 280px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.6));
}
.alk-feature-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-dark);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Modifier: alk-hero-stage--trust
   A stage hero that carries an .alk-hero-trust-strip at its foot. Drops the
   band's bottom padding so the strip sits flush against the edge, and adds a
   hairline accent top rule so the hero can open a page without the chrome above
   it shifting. */
.alk-hero-stage--trust {
  padding-bottom: 0;
  border-top: 1px solid var(--ak-accent);
}
/* Phones: 4.5rem of dark band above the H1 pushed the quote button under the
   fold. Halve the lead-in and tighten the text/image gutter. */
@media (max-width: 575.98px) {
  .alk-hero-stage { padding-top: 2rem; padding-bottom: 2.5rem; }
  .alk-hero-stage--trust { padding-bottom: 0; }
  .alk-hero-stage .row.g-5 { --bs-gutter-y: 1.75rem; }
  .alk-stage-media { padding: 1.5rem 1rem; }
}

/* Hero 3: alk-hero-icon-grid (Visual Icon Cards & Media Hero) */
.alk-hero-icon-grid {
  padding-top: 4.5rem;
  padding-bottom: 5rem;
  background: var(--ak-slate);
  color: #fff;
  border-bottom: 1px solid var(--hairline-dark);
}
.alk-icon-card {
  background: rgba(4, 8, 34, 0.85);
  border: 1px solid var(--hairline-dark);
  padding: 1.75rem;
  height: 100%;
  transition: border-color .2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.alk-icon-card:hover {
  border-color: var(--ak-accent);
}
.alk-icon-box {
  width: 44px;
  height: 44px;
  background: rgba(2, 162, 253, 0.12);
  border: 1px solid rgba(2, 162, 253, 0.3);
  color: var(--ak-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.alk-media-banner {
  border: 1px solid var(--hairline-dark);
  overflow: hidden;
  max-height: 240px;
  margin-top: 2rem;
}
.alk-media-banner img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

/* ===== MOBILE TAP TARGETS =====
   WCAG 2.5.8 floor for touch. Scoped to the mobile breakpoint so desktop
   spacing is unchanged. .alk-btn is already inline-flex + align-items:center,
   so min-height centers the label without extra padding math.
   .alk-btn--ghost-light measured 38.4px (padding:6px 0). */
@media (max-width: 767.98px) {
  .alk-btn--ghost-light,
  .alk-btn--sm { min-height: 44px; }
}

/* Figure + visible caption. Source pages label their diagrams ("Figure 1 - ..."),
   so the label belongs on the page, not buried in alt text. */
.alk-figure            { margin:0; }
.alk-figure img        { display:block; width:100%; height:auto; background:#fff; border:1px solid var(--ak-border); }
.alk-figure figcaption { margin-top:.75rem; font-size:13px; line-height:1.6; color:var(--ak-mid); }

/* =============================================================================
   BarraGuard page helpers. Small additions to the kit for patterns these pages
   use, so no page needs a style="" attribute or a <style> block.
   ============================================================================= */

/* Rebuilt pages (<body class="alk-page">) run edge to edge in bands. The shared
   dynamicpricing sheet paints `body { background:#f5f5f5 !important }` with a
   white, bottom-padded .container: the old boxed layout, which showed grey
   strips beside any band without its own background. Pages not yet rebuilt
   keep that look until their batch. */
body.alk-page { background-color: #fff !important; }
.alk-page > .container { padding-bottom: 0; }
.alk-page .brg-footer { margin-top: 0; }

/* Full-bleed promo banner: 2280x400 vendor artwork that carries its own type,
   linked as a whole. */
.alk-banner { display: block; line-height: 0; }
.alk-banner img { display: block; width: 100%; height: auto; }

/* Vendor product wordmark at the head of a LinkCard. Logos arrive at mixed
   aspect ratios, so they are held to one height and left-aligned. */
.alk-linkcard__logo { display: block; height: 46px; width: auto; max-width: 100%; margin-bottom: 16px; object-fit: contain; object-position: left center; }
.alk-linkcard__logo--wide { height: auto; width: 80%; }

/* Compact LinkCard: icon + one-line label (category strips). */
.alk-linkcard--compact { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 18px 20px; }
.alk-linkcard--compact .title { margin: 0; }
.alk-linkcard--compact [data-lucide], .alk-linkcard--compact svg { flex: none; color: var(--ak-accent); }

/* Icon over a short label, for raster/SVG icon sets supplied by the vendor
   (e.g. "Problems we solve"). Works on light and dark bands. */
.alk-iconitem { text-align: center; }
.alk-iconitem img { display: block; width: 55px; height: 55px; margin: 0 auto 14px; object-fit: contain; }
.alk-iconitem .title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: inherit; }

/* PillarCard with a vendor SVG icon in place of a Lucide glyph. */
.alk-pillar > img { display: block; height: 52px; width: auto; }

/* Bootstrap carousel holding full-bleed banners: keep the controls legible on
   any artwork. */
.alk-carousel .carousel-control-prev,
.alk-carousel .carousel-control-next { width: 8%; }
.alk-carousel .carousel-indicators { margin-bottom: .5rem; }

/* =============================================================================
   Home page components, styled after the BlueAlly HPE storefronts (EdgeCloudStore,
   ServerComputeWorks): navy hero fading into artwork, rounded cards with soft
   shadows, pill controls. These deliberately soften the kit's square corners,
   which is what the sister sites do.
   ============================================================================= */
:root { --brg-card-radius: 14px; }

/* Hero: navy field fading into the Barracuda artwork on the right. Below lg the
   artwork would sit behind the copy, so the band holds flat navy instead. */
.alk-hero-ba {
  position: relative;
  color: #fff;
  background-color: var(--ba-navy);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  padding: 96px 0 150px;
}
/* Home: underwater light-rays scene, already near-black on the left. A light
   BlueAlly-black scrim on the copy side keeps white/light text on an approved
   ground without hiding the fish on the right. Dark enough edge to edge to stay
   on at every width. */
.alk-hero-ba--home {
  background-color: var(--ba-black);
  background-position: center center;
  background-image:
    linear-gradient(90deg, rgba(4, 8, 34, .78) 0%, rgba(4, 8, 34, .55) 40%, rgba(4, 8, 34, 0) 70%),
    url("https://cdn.blueally.com/barraguard/images/background/homepage-hero.png");
}
.alk-hero-ba__eyebrow { display: inline-block; margin-bottom: 1rem; color: var(--ba-bright); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.alk-hero-ba__title { max-width: 660px; margin: 0 0 1.25rem; color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.alk-hero-ba__lead { max-width: 600px; margin: 0 0 2rem; color: var(--ba-light); font-size: 1.12rem; line-height: 1.6; }
.alk-hero-ba__sub { margin: -.5rem 0 1rem; color: #fff; font-size: 1.35rem; font-weight: 600; line-height: 1.35; }
.alk-hero-ba__art { width: 100%; max-width: 260px; height: auto; }
.alk-hero-ba__lead + .alk-hero-ba__lead { margin-top: -1.25rem; }
.alk-hero-ba__video { overflow: hidden; border-radius: 12px; box-shadow: 0 12px 32px rgba(4, 8, 34, .35); }
.alk-hero-ba__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 991.98px) {
  .alk-hero-ba { padding: 56px 0 120px; }
  .alk-hero-ba--home {
    background-position: 70% center;
    background-image:
      linear-gradient(rgba(4, 8, 34, .55), rgba(4, 8, 34, .55)),
      url("https://cdn.blueally.com/barraguard/images/background/homepage-hero.png");
  }
}

/* Hero buttons: white solid + white outline, both approved pairs on navy. */
.alk-btn-hero,
.alk-btn-hero:link,
.alk-btn-hero:visited {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.35rem;
  border: 1.5px solid #fff; border-radius: var(--radius);
  background: #fff; color: var(--ba-navy);
  font-weight: 700; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.alk-btn-hero:hover, .alk-btn-hero:focus { background: var(--ba-light); border-color: var(--ba-light); color: var(--ba-navy); text-decoration: none; }
.alk-btn-hero--ghost,
.alk-btn-hero--ghost:link,
.alk-btn-hero--ghost:visited { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.alk-btn-hero--ghost:hover, .alk-btn-hero--ghost:focus { background: #fff; border-color: #fff; color: var(--ba-navy); }

/* Pill button for light bands (navy, white ink). */
.alk-btn-pill,
.alk-btn-pill:link,
.alk-btn-pill:visited {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 46px; padding: .7rem 1.5rem; border-radius: 999px;
  background: var(--ba-navy); color: #fff; font-weight: 700; text-decoration: none;
  transition: background .15s;
}
.alk-btn-pill:hover, .alk-btn-pill:focus { background: var(--ba-navy-dark); color: #fff; text-decoration: none; }

/* Product-family tiles, pulled up over the bottom edge of the hero. */
.alk-tiles { position: relative; z-index: 2; margin-top: -96px; }
.alk-tile,
.alk-tile:link,
.alk-tile:visited {
  display: flex; flex-direction: column; gap: 14px; height: 100%;
  padding: 22px; border: 1px solid var(--ba-line); border-radius: var(--brg-card-radius);
  background: #fff; box-shadow: var(--shadow-lg); color: var(--ba-navy); text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.alk-tile:hover, .alk-tile:focus { transform: translateY(-3px); border-color: var(--ba-bright); color: var(--ba-navy); text-decoration: none; }
.alk-tile__ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--ba-light); color: var(--ba-navy); }
.alk-tile__title { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.alk-tile__go { margin-top: auto; display: inline-flex; color: var(--ba-navy); }

/* Section heading block used across the home page. */
.alk-sechead { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.alk-sechead .alk-h2-compact { margin-bottom: .75rem; color: var(--ba-navy); }
.alk-dark .alk-sechead .alk-h2-compact { color: #fff; }
.alk-sechead p { margin: 0 auto; }

/* Pill tabs (segmented control) for TechTabs on a light band. */
.alk-pilltabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.75rem; }
.alk-pilltabs .alk-tab {
  width: auto; padding: .6rem 1.15rem; border: 1px solid var(--ba-line); border-radius: 999px;
  background: #fff; color: var(--ba-navy); font-weight: 600; font-size: .95rem; text-align: center;
}
.alk-pilltabs .alk-tab:hover { border-color: var(--ba-navy); }
.alk-pilltabs .alk-tab.is-active { background: var(--ba-navy); border-color: var(--ba-navy); color: #fff; }
.alk-pilltabs .alk-tab.is-active::after { display: none; }
.alk-tabpanel--card { border: 1px solid var(--ba-line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.alk-tabpanel--card .main { padding: 2.5rem; }
@media (max-width: 575.98px) { .alk-tabpanel--card .main { padding: 1.5rem; } }
.alk-tabpanel--card .alk-linkcard { border-radius: 12px; }
.alk-tabpanel--card .alk-linkcard:hover { box-shadow: var(--shadow); }

/* Icon tiles on a dark band ("Problems we solve"). */
.alk-icontile { height: 100%; padding: 26px 14px 22px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--brg-card-radius); background: rgba(255, 255, 255, .05); }

/* Stat cards: big navy figure, the claim, and its source. */
.alk-statcard { height: 100%; padding: 30px 28px; border: 1px solid var(--ba-line); border-top: 4px solid var(--ba-bright); border-radius: var(--brg-card-radius); background: #fff; box-shadow: var(--shadow); }
.alk-statcard .num { display: block; margin-bottom: .6rem; color: var(--ba-navy); font-size: clamp(2.6rem, 5vw, 3.5rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.alk-statcard .claim { margin: 0 0 1rem; color: var(--ba-black); font-size: 1.05rem; line-height: 1.5; }
.alk-statcard .claim strong { color: var(--ba-navy); }
.alk-statcard .src { margin: 0; color: var(--ba-black); font-size: .82rem; font-style: italic; }

/* Feature card: vendor icon, title, body. */
.alk-featcard { height: 100%; padding: 28px; border: 1px solid var(--ba-line); border-radius: var(--brg-card-radius); background: #fff; box-shadow: var(--shadow-sm); }
.alk-featcard > img { display: block; height: 52px; width: auto; margin-bottom: 18px; }
.alk-featcard .title { margin: 0 0 .5rem; color: var(--ba-navy); font-size: 1.15rem; font-weight: 700; }
.alk-featcard .body { margin: 0; color: var(--ba-black); font-size: .98rem; line-height: 1.65; }

/* Rounded media frame for photography and product screenshots. */
.alk-roundmedia { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-lg); }
.alk-carousel--round { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }

/* Check list: Lucide circle-check + text. */
.alk-checklist { list-style: none; margin: 0; padding: 0; }
.alk-checklist li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: .6rem; color: var(--ba-black); line-height: 1.5; }
.alk-checklist [data-lucide], .alk-checklist svg { flex: none; margin-top: 2px; color: var(--ba-navy); }

/* =============================================================================
   Product page template (CloudGen Firewall and every family after it).
   Order follows the HPE storefront product pages: breadcrumb, product header,
   pricing table, tabbed detail, pricing notes, second pricing table.
   ============================================================================= */

/* Breadcrumb strip */
.alk-crumbs { background: var(--ba-bg); border-bottom: 1px solid var(--ba-line); }
.alk-crumbs .breadcrumb { margin: 0; padding: .8rem 0; font-size: .9rem; background: transparent; }
.alk-crumbs .breadcrumb-item a { color: var(--ba-navy); text-decoration: none; }
.alk-crumbs .breadcrumb-item a:hover { text-decoration: underline; }
.alk-crumbs .breadcrumb-item.active { color: var(--ba-black); }

/* Product header, as on the SonicGuard product pages: title and description
   across the full width with the partner badge top-right, the product image
   centred beneath. */
.alk-prodhead { padding: 2.25rem 0 1.5rem; }
.alk-prodhead__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; }
.alk-prodhead__text { flex: 1 1 auto; min-width: 0; }
.alk-prodhead__badge { display: block; flex: none; width: 180px; height: auto; }
.alk-prodhead__title { margin: 0 0 .6rem; color: var(--ba-navy); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.alk-prodhead__sub { margin: 0; color: var(--ba-black); font-size: 1.2rem; line-height: 1.5; }
.alk-prodhead__media { margin: 2rem auto 0; text-align: center; }
.alk-prodhead__media img { display: inline-block; max-width: 100%; max-height: 280px; width: auto; height: auto; }
.alk-prodhead__note { margin: 1rem 0 0; font-weight: 700; color: var(--ba-navy); }
@media (max-width: 767.98px) {
  .alk-prodhead__top { flex-direction: column-reverse; }
  .alk-prodhead__badge { width: 150px; }
}

/* Band holding the shared DynamicPricing table, then the jump-to-pricing link. */
.alk-pricingband { padding: 0 0 2.5rem; }
.alk-jump { margin: 1.5rem 0 0; text-align: center; }

/* Shared DynamicPricing table: kept exactly as the submodule draws it (square
   corners, grey category rows, compact rows; same as SonicGuard and
   ServerComputeWorks). Only the brand colour changes: navy header and navy
   buttons with white ink, an approved pair. The vendor sites' orange button
   is not: white on #f86000 is 3.1:1. */
.pricing.card > .card-header { background-color: var(--ba-navy); border-color: var(--ba-navy); }
.pricing .btn-warning,
.pricing .btn-warning:link,
.pricing .btn-warning:visited { background-color: var(--ba-navy); border-color: var(--ba-navy); color: #fff; }
.pricing .btn-warning:hover,
.pricing .btn-warning:focus { background-color: var(--ba-navy-dark); border-color: var(--ba-navy-dark); color: #fff; }
.pricing a:not([class]) { color: var(--ba-navy); }

/* Legacy rich content inside a tab panel or prose band. Restyles the markup
   these pages already carry (cards, tables, accordions, footnotes, floated
   images) so the copy itself is untouched. */
.alk-doc { color: var(--ba-black); font-size: 1rem; line-height: 1.65; overflow-x: auto; }
/* Menus must float over the page: a scroll box (overflow-x above) would clip them and scroll instead. */
.alk-doc:has(.dropdown) { overflow: visible; }
/* In-page product menus (e.g. Firewall Insights "Select a product"): navy highlight instead of the shared grey,
   and on phones each group opens underneath itself rather than off the right edge. */
.alk-doc .dropdown-menu > li > a:hover, .alk-doc .dropdown-menu > li > a:focus,
.alk-doc .dropdown-submenu:hover > a, .alk-doc .dropdown-submenu.is-open > a { background-color: var(--ba-navy); color: #fff !important; }
.dropdown-submenu.is-open > .dropdown-menu { display: block; }
.card-subheading { scroll-margin-top: 1rem; }
.alk-backtotop { font-weight: 400; }
/* Group links carry data-bs-toggle, so a click lets Bootstrap stamp its own inline position on the
   flyout; these keep each flyout beside its parent item (or underneath it on phones). */
.alk-doc .dropdown-submenu > .dropdown-menu { position: absolute !important; inset: 0 auto auto 100% !important; transform: none !important; margin: -6px 0 0 -1px !important; }
.alk-doc .dropdown-submenu.is-left > .dropdown-menu { inset: 0 100% auto auto !important; margin: -6px -1px 0 0 !important; }
@media (max-width: 575.98px) {
  .alk-doc .dropdown-submenu > .dropdown-menu { position: static !important; inset: auto !important; float: none; margin: 0 !important; border: 0; box-shadow: none; padding-left: 1rem; }
  .alk-doc .dropdown:not(.dropdown-submenu) > .dropdown-menu { width: calc(100vw - 32px); max-width: 360px; max-height: 70vh; overflow-y: auto; }
  .alk-doc .dropdown-menu .dropdown-item { white-space: normal; }
}
.alk-doc .pricing { font-size: 14px; line-height: 1.5; }
.alk-tabpanel--card.alk-doc { padding: 2.5rem; }
@media (max-width: 575.98px) { .alk-tabpanel--card.alk-doc { padding: 1.5rem 1.15rem; } }
.alk-doc h2 { margin: 0 0 1rem; color: var(--ba-navy); font-size: 1.6rem; font-weight: 800; }
.alk-doc h3 { margin: 1.5rem 0 .6rem; color: var(--ba-navy); font-size: 1.2rem; font-weight: 700; }
.alk-doc h4, .alk-doc h5 { margin: 1.25rem 0 .5rem; color: var(--ba-black); font-size: 1.02rem; font-weight: 700; }
.alk-doc > :first-child, .alk-doc h2:first-child { margin-top: 0; }
.alk-doc p { max-width: none; }
.alk-doc ul { padding-left: 1.25rem; }
.alk-doc li { margin-bottom: .35rem; }
/* Content links: no underline (as live and the sister sites); underline on hover / keyboard focus. */
.alk-doc a:not([class]) { color: var(--ba-navy); text-decoration: none; text-underline-offset: 2px; }
.alk-doc a:not([class]):not(:has(div, img, button, h1, h2, h3, h4, h5, p, ul, .card)):is(:hover, :focus-visible) { text-decoration: underline; }   /* text links only, not links wrapping a card */
.alk-doc a:has(> div, > .card) { color: inherit; text-decoration: none; }
.alk-doc a > .card { transition: box-shadow .2s ease; }
.alk-doc a:is(:hover, :focus-visible) > .card { box-shadow: 0 10px 26px rgba(4, 8, 34, .14); }
.alk-doc .pricing a:not([class]) { text-decoration: none; }
.alk-doc img { max-width: 100%; height: auto; }
.alk-doc .fltrt { float: right; margin: 0 0 1rem 1.5rem; }
.alk-doc .fltlft { float: left; margin: 0 1.5rem 1rem 0; }
@media (max-width: 575.98px) { .alk-doc .fltrt, .alk-doc .fltlft { float: none; display: block; margin: 0 auto 1rem; } }
.alk-doc .container-fluid { padding-left: 0; padding-right: 0; }
.alk-doc .card:not(.pricing) { min-height: 100%; padding: 24px; border: 1px solid var(--ba-line); border-radius: var(--brg-card-radius); background: #fff; box-shadow: var(--shadow-sm); }
.alk-doc .card:not(.pricing) h3 { margin-top: .25rem; }
.alk-doc blockquote { margin: 1.5rem 0 0; padding: 1rem 1.25rem; border-left: 3px solid var(--ba-navy); border-radius: 0 10px 10px 0; background: var(--ba-bg); font-size: .85rem; }
.alk-doc blockquote p { margin: 0; }
.alk-figure-right { text-align: center; font-size: .9rem; }
@media (min-width: 992px) { .alk-figure-right { float: right; width: 420px; margin: 0 0 1rem 1.5rem; } }

/* Tables: navy header row, light category rows, centred value cells. */
.alk-doc .table { margin-bottom: 0; border-color: var(--ba-line); font-size: .92rem; --bs-table-hover-bg: #eef3fb; }
.alk-doc .table th { background: var(--ba-navy); color: #fff; font-weight: 700; vertical-align: middle; border-color: var(--ba-navy); }
.alk-doc .table td { vertical-align: middle; }
.alk-doc .table td:not(:first-child), .alk-doc .table th:not(:first-child) { text-align: center; }
/* Layout tables (icon + heading + paragraph rows, as on the SAC/SC overview tabs)
   are not data: their cells stay left-aligned. Covers cells the converter
   marked plain and any cell that carries a heading, paragraph or list. */
.alk-doc .table td.alk-cell-plain,
.alk-doc .table td:has(> h2, > h3, > h4, > p, > ul, > ol) { text-align: left; }
/* The icon column of those layout tables: sized to its icon (the table used to
   squeeze it, and max-width:100% shrank a 67px icon to a few pixels), aligned
   with the top of the heading beside it. */
.alk-doc .table td.alk-cell-plain:first-child:has(> img:only-child) { width: 1%; padding-right: 1.5rem; vertical-align: top; text-align: center; }
.alk-doc .table td.alk-cell-plain:first-child > img:only-child { max-width: none; width: 64px; height: auto; margin-top: .25rem; }
@media (max-width: 575.98px) {
  .alk-doc .table td.alk-cell-plain:first-child > img:only-child { width: 44px; }
  .alk-doc .table td.alk-cell-plain:first-child:has(> img:only-child) { padding-right: .75rem; }
}
/* Navy Lucide icon in a layout row (replaces the old light-grey raster icons). */
.alk-doc .table td.alk-cell-icon { width: 1%; padding-right: 1.5rem; vertical-align: top; text-align: center; }
.alk-rowicon { display: block; width: 44px; height: 44px; margin-top: .2rem; color: var(--ba-navy); stroke-width: 1.75; }
/* The heading beside an icon starts level with it. */
.alk-doc .table td.alk-cell-icon + td > :first-child { margin-top: .35rem; }
@media (max-width: 575.98px) {
  .alk-doc .table td.alk-cell-icon { padding-right: .75rem; }
  .alk-rowicon { width: 34px; height: 34px; }
}
.alk-doc .table .row-header td { background: var(--ba-light); color: var(--ba-navy); font-weight: 700; text-align: left; }
.alk-doc .table-responsive { border: 1px solid var(--ba-line); border-radius: 12px; }
.alk-doc .table-responsive .table { border-style: hidden; }
.alk-doc .table.alk-table-plain td, .alk-doc .alk-cell-plain { border: 0; text-align: left; }
.alk-doc .col-header { padding: .6rem 1rem; border-radius: 10px 10px 0 0; background: var(--ba-navy); color: #fff; font-weight: 700; }

/* Accordions (Features / FAQ). */
.alk-doc .accordion { --bs-accordion-border-color: var(--ba-line); --bs-accordion-active-bg: var(--ba-light); --bs-accordion-active-color: var(--ba-navy); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(2, 162, 253, .35); --bs-accordion-border-radius: 12px; --bs-accordion-inner-border-radius: 11px; }
.alk-doc .accordion-header { margin: 0; font-size: 1rem; }
.alk-doc .accordion-button { color: var(--ba-navy); font-weight: 600; }
.alk-doc .accordion-body > :last-child { margin-bottom: 0; }

/* Icons converted from Font Awesome. Sizes mirror fa-lg / fa-2x / fa-4x. */
.alk-ico { display: inline-block; vertical-align: -.2em; color: var(--ba-navy); }
.alk-ico--fill { fill: currentColor; }
.alk-ico--feature { display: block; margin: 0 auto 1rem; color: var(--ba-navy); }
.alk-ico--doc { margin: 0 .6rem 0 0; vertical-align: middle; }

/* =============================================================================
   Product-family landing pages (ng-firewall.asp and peers).
   ============================================================================= */
/* Photo heroes: navy on the copy side, the photo toned navy on the right so a
   vendor photo of any colour sits inside the brand palette. */
.alk-hero-ba--photo { background-position: right center; }
.alk-hero-ba--cgf {
  background-image:
    linear-gradient(90deg, var(--ba-navy) 0%, var(--ba-navy) 38%, rgba(0, 18, 120, .7) 60%, rgba(0, 18, 120, .45) 100%),
    url("https://cdn.blueally.com/barraguard/images/background/header-cgf-resized.jpg");
}
@media (max-width: 991.98px) {
  .alk-hero-ba--cgf { background-image: linear-gradient(rgba(0, 18, 120, .86), rgba(0, 18, 120, .86)), url("https://cdn.blueally.com/barraguard/images/background/header-cgf-resized.jpg"); }
}
.alk-hero-ba--compact { padding: 80px 0; }

/* In-page section nav (kit SubNav), with a modal trigger as the call to action. */
.alk-subnav a { font-size: 14px; color: var(--ba-navy); }
/* Section nav as a full-width light bar with centred bold links and a navy rule (same as
   EnterpriseAV), so it reads as navigation rather than a row of small links. */
.alk-subnav { margin-bottom: 1.5rem; background: var(--ba-bg); border-bottom: 2px solid var(--ba-navy); }
.alk-subnav .inner { height: 64px; justify-content: safe center; gap: 3rem; }
.alk-subnav a { font-size: 1.05rem; font-weight: 700; color: var(--ba-navy); text-decoration: none; border-bottom-width: 3px; }
.alk-subnav a:hover, .alk-subnav a:focus-visible { color: var(--ba-navy); border-bottom-color: var(--ba-navy); }
.alk-subnav a.is-active { color: var(--ba-navy); border-bottom-color: var(--ba-navy); }
@media (min-width: 768px) {
  .alk-subnav .inner { position: relative; }
  .alk-subnav .alk-subnav__cta { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
}
.alk-subnav .alk-subnav__cta { height: 36px; padding: 0 18px; font-size: 14px; border-bottom: 0; }
@media (max-width: 767.98px) {
  .alk-subnav .inner { height: 52px; gap: 1.75rem; justify-content: flex-start; }
  .alk-subnav a { font-size: .95rem; }
}
button.alk-subnav__cta { border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; font-size: 13px; }

/* Highlight stat callout (one figure + its source). */
.alk-callout { height: 100%; padding: 30px; border-radius: var(--brg-card-radius); background: var(--ba-navy); color: #fff; }
.alk-callout .figure { margin: 0 0 1rem; color: #fff; font-size: 1.45rem; font-weight: 800; line-height: 1.3; }
.alk-callout p { color: var(--ba-light); }
.alk-callout small { color: var(--ba-light); }

/* Model card: product shot, name, headline specs; the whole card links. */
.alk-modelcard,
.alk-modelcard:link,
.alk-modelcard:visited {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--ba-line); border-radius: var(--brg-card-radius); background: #fff;
  box-shadow: var(--shadow-sm); color: var(--ba-black); text-decoration: none; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.alk-modelcard:hover, .alk-modelcard:focus { transform: translateY(-3px); border-color: var(--ba-bright); box-shadow: var(--shadow-lg); color: var(--ba-black); text-decoration: none; }
.alk-modelcard__media { display: flex; align-items: center; justify-content: center; height: 150px; padding: 18px; background: var(--ba-bg); }
.alk-modelcard__media img { max-height: 100%; max-width: 85%; width: auto; height: auto; object-fit: contain; }
.alk-modelcard__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.alk-modelcard__name { margin: 0 0 .75rem; color: var(--ba-navy); font-size: 1.12rem; font-weight: 700; }
.alk-modelcard__specs { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .92rem; }
.alk-modelcard__specs li { padding: .3rem 0; border-bottom: 1px solid var(--ba-line); }
.alk-modelcard__specs li:last-child { border-bottom: 0; }
.alk-modelcard__specs strong { color: var(--ba-navy); }
.alk-modelcard__price { display: block; margin: 0 0 .75rem; color: var(--ba-navy); font-weight: 700; }
.alk-modelcard__go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ba-navy); font-weight: 700; font-size: .92rem; }
.alk-grouphead { display: flex; align-items: center; gap: .75rem; margin: 2.5rem 0 1.25rem; color: var(--ba-navy); font-size: 1.25rem; font-weight: 700; }
.alk-grouphead::after { content: ""; flex: 1; height: 1px; background: var(--ba-line); }
.alk-grouphead:first-child { margin-top: 0; }
.alk-subgroup { margin: 1.5rem 0 1rem; color: var(--ba-black); font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* Converted legacy model grids sit inside the old .home wrapper, whose shared rules box every row and indent lists. */
.home { margin: 0; }
.home .row.alk-modelgrid { border: 0; }
.alk-page .home .row { border: 0; }          /* shared stylesheet boxes every legacy .home row in grey */
.home .alk-modelcard__specs, .content .alk-modelcard__specs { padding-left: 0; margin-left: 0; }
.home .alk-modelcard__specs li { font-size: .92rem; }

/* Document download card. */
.alk-doclink,
.alk-doclink:link,
.alk-doclink:visited {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 18px 20px;
  border: 1px solid var(--ba-line); border-radius: 12px; background: #fff; color: var(--ba-navy); font-weight: 600; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.alk-doclink:hover, .alk-doclink:focus { border-color: var(--ba-bright); box-shadow: var(--shadow); color: var(--ba-navy); text-decoration: none; }
.alk-doclink [data-lucide], .alk-doclink svg { flex: none; color: var(--ba-navy); }
.alk-doclink small { display: block; color: var(--ba-black); font-weight: 400; }

/* Plain link lists in columns (legacy models). */
.alk-linklist { list-style: none; margin: 0; padding: 0; }
.alk-linklist li { padding: .35rem 0; border-bottom: 1px solid var(--ba-line); }
.alk-linklist a { color: var(--ba-navy); text-decoration: none; font-weight: 500; }
.alk-linklist a:hover { text-decoration: underline; }

/* Partner badge in a hero, top-right on desktop (SonicGuard series pages). */
.alk-hero-ba__badge { display: block; width: 200px; height: auto; }
@media (max-width: 991.98px) { .alk-hero-ba__badge { width: 160px; } }

/* Product detail tabs: the storefront tab strip (dynamicpricing styles-bs5.css
   `.tabs a`, recoloured navy on ServerComputeWorks): equal-width tabs on a #EEE
   bar, a 6px underline sliding in on hover, the active tab filled navy. Kept as
   real <button role="tab"> elements. Inactive text is BlueAlly black rather
   than the shared #666 (approved pair on a light ground); the hover rule is
   bright blue rather than the shared orange. Two tabs per row on phones. */
.alk-detailband { padding: 0 0 3rem; }
.alk-sitetabs { background: #eee; }
.alk-sitetabs .alk-tab {
  position: relative; display: block; width: 100%; height: 100%;
  padding: 20px 16px; border: 0; border-radius: 0;
  background: #eee; color: var(--ba-black); font-size: 1rem; font-weight: 400; line-height: normal; text-align: center;
  transition: background .3s, color .3s;
}
.alk-sitetabs .alk-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: var(--ba-bright); transform: scaleX(0); transition: transform .25s ease-in-out;
}
.alk-sitetabs .alk-tab:hover::after, .alk-sitetabs .alk-tab:focus-visible::after { transform: scaleX(1); }
.alk-sitetabs .alk-tab.is-active, .alk-sitetabs .alk-tab.is-active:hover { background: var(--ba-navy); color: #fff; }
.alk-sitetabs .alk-tab.is-active::after { transform: scaleX(0); }
.alk-tabpanel.alk-tabpanel--plain { border: 0; background: transparent; padding: 2rem 12px 0; }
@media (max-width: 767.98px) {
  .alk-sitetabs .alk-tab { padding: 14px 8px; font-size: .95rem; box-shadow: inset -1px -1px 0 #fff; }
  .alk-tabpanel.alk-tabpanel--plain { padding: 1.5rem 0 0; }
}

/* =============================================================================
   Marketing page helpers (Email Protection batch onward). Classes the converter
   maps legacy inline styles onto.
   ============================================================================= */

/* Photo hero: the vendor photo as an <img> layer under a navy tint, so the copy
   always sits on an approved navy ground whatever the photo's colours. */
.alk-hero-ba--img { position: relative; isolation: isolate; overflow: hidden; }
.alk-hero-ba__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.alk-hero-ba--img::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--ba-navy) 0%, rgba(0, 18, 120, .9) 45%, rgba(0, 18, 120, .6) 100%); }
@media (max-width: 991.98px) { .alk-hero-ba--img::before { background: rgba(0, 18, 120, .88); } }
.alk-hero-ba__title br { display: none; }
@media (min-width: 992px) { .alk-hero-ba__title br { display: inline; } }

/* Coloured content rows inside a page: navy (white ink) or light tint (black ink). */
.alk-band { border-radius: var(--brg-card-radius); }
.alk-band--navy { background: var(--ba-navy); color: #fff; }
.alk-band--navy h1, .alk-band--navy h2, .alk-band--navy h3, .alk-band--navy h4, .alk-band--navy p, .alk-band--navy li { color: #fff; }
.alk-band--navy a:not([class]) { color: var(--ba-bright); }
.alk-band--tint { background: var(--ba-bg); color: var(--ba-black); }
.alk-doc .row.alk-band { margin-left: 0; margin-right: 0; margin-bottom: 1.5rem; }

/* Accent text (was green/orange/red on white, none of them approved pairs). */
.alk-text-accent { color: var(--ba-navy) !important; font-weight: 700; }
.alk-band--navy .alk-text-accent { color: var(--ba-bright) !important; }
.alk-rule { border: 0; border-top: 2px solid var(--ba-navy); opacity: 1; }
.alk-rule--thick { border-top-width: 6px; border-top-color: var(--ba-bright); }

/* Plan comparison headers (Advanced / Premium / Premium Plus). */
.alk-planhead { display: block; margin: -1px -1px 1rem; padding: 14px; border-radius: var(--brg-card-radius) var(--brg-card-radius) 0 0; color: #fff; text-align: center; font-size: 1.2rem; }
.alk-planhead--1 { background: var(--ba-navy); }
.alk-planhead--2 { background: var(--ba-navy-dark); }
.alk-planhead--3 { background: var(--ba-black); }
.alk-doc .card:not(.pricing):has(> .alk-planhead:first-child) { padding-top: 0; overflow: hidden; }

/* Floated grey note box and the HubSpot contact form box. */
.alk-aside-box { padding: 16px 18px; margin: 0 0 1rem; border: 1px solid var(--ba-line); border-radius: 12px; background: var(--ba-bg); text-align: left; }
@media (min-width: 992px) { .alk-aside-box { float: right; width: 320px; margin: 0 0 1rem 1.5rem; } }
.alk-tint-box { padding: 1.5rem; border-radius: 12px; background: var(--ba-bg); }
.alk-modal-form { padding: 1.25rem; border-radius: 10px; background: var(--ba-bg); }
/* HubSpot sign-up form box (.hubForm, from the old page <style> blocks): navy-bordered card. */
.hubForm { margin-top: 1rem; padding: 2rem; border: 2px solid var(--ba-navy); border-radius: 12px; background: var(--ba-bg); box-shadow: 0 10px 30px rgba(0, 18, 120, .12); }
.hubForm .hs-input { background: #fff; }
@media (max-width: 575.98px) { .hubForm { padding: 1.25rem; } }
.alk-img-h58 { height: 58px; width: auto; }

/* Card-switch tabs (a group of tiles that switch the panel below them). */
.alk-cardtab { display: block; width: 100%; padding: .9rem 1rem; border: 0; border-radius: 10px; background: transparent; color: var(--ba-navy); font: inherit; font-weight: 600; text-align: center; cursor: pointer; }
.card.card-switch:has(.alk-cardtab) { height: auto; min-height: 0; padding: 0; margin-bottom: .75rem; border: 1px solid var(--ba-line); border-radius: 12px; overflow: hidden; }
.alk-cardtab:hover { background: var(--ba-bg); }
.alk-cardtab.is-active { background: var(--ba-navy); color: #fff; }
.alk-cardtab img { display: block; max-width: 100%; height: auto; margin: 0 auto .5rem; }
.alk-cardpanel[hidden] { display: none; }

/* A plain link sharing the product tab strip. */
.alk-sitetabs a.alk-tab--link { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* Legacy button classes still in page bodies, given brand styles. */
.alk-page .btn-warning,
.alk-page .btn-warning:link,
.alk-page .btn-warning:visited { background-color: var(--ba-navy); border-color: var(--ba-navy); color: #fff; }
.alk-page .btn-warning:hover,
.alk-page .btn-warning:focus { background-color: var(--ba-navy-dark); border-color: var(--ba-navy-dark); color: #fff; }
.alk-page .btn-outline { border: 1.5px solid var(--ba-navy); border-radius: var(--radius); background: transparent; color: var(--ba-navy); font-weight: 600; }
.alk-page .btn-outline:hover, .alk-page .btn-outline:focus { background: var(--ba-navy); color: #fff; }
.alk-band--navy .btn-outline { border-color: #fff; color: #fff; }
.alk-band--navy .btn-outline:hover, .alk-band--navy .btn-outline:focus { background: #fff; color: var(--ba-navy); }
.alk-page .btn-primary-contact { padding: .85rem 1.5rem; border: 1.5px solid var(--ba-navy); border-radius: var(--radius); background: var(--ba-navy); color: #fff; font-weight: 700; }
.alk-page .btn-primary-contact:hover, .alk-page .btn-primary-contact:focus { background: var(--ba-navy-dark); color: #fff; }
.alk-band--navy .btn-primary-contact, .alk-hero-ba .btn-primary-contact { border-color: #fff; background: #fff; color: var(--ba-navy); }
.alk-band--navy .btn-primary-contact:hover, .alk-hero-ba .btn-primary-contact:hover { background: var(--ba-light); border-color: var(--ba-light); color: var(--ba-navy); }
.alk-btn-hero .alk-ico, .btn .alk-ico { color: inherit; }

/* A bare <a> wrapping a <button> (legacy markup) is a button, not a text link. */
.alk-doc a:not([class]):has(> button, > .btn, > strong > button) { text-decoration: none; }

/* ===== Legacy landing-page classes =====
   Identity Resilience and the Email Protection product pages style these in page <style> blocks
   and the old styles.css, neither of which loads on rebuilt pages. Same shapes, brand tokens. */
.alk-page .white-text { color: #fff; }
.alk-doc .bg-navy { background: linear-gradient(to bottom right, var(--ba-navy) 0%, var(--ba-black) 100%); color: #fff; border-radius: 16px; }
.alk-doc .bg-navy :is(h1, h2, h3, h4, h5, h6, p, li, strong) { color: #fff !important; }
.alk-doc .bg-navy a:not(.btn) { color: var(--ba-light); }
.alk-page .blue-circle { width: 160px; height: 160px; border-radius: 50%; background: var(--ba-black); box-shadow: 0 2px 12px rgba(0, 18, 120, .1); }
.alk-page .hr-o { padding-bottom: .5rem; margin-bottom: 30px; border-bottom: 3px solid var(--ba-navy); font-size: 1.6rem; }
/* Plan / product tiles: the shared stylesheet draws their corner arrow with a Font Awesome glyph. */
.alk-page .productItem > a, .alk-page .prod-well > a, .alk-page a:has(> .prod-well) { display: block; height: 100%; color: var(--ba-black); text-decoration: none; }
.alk-page .prod-well h3 { color: var(--ba-navy); }
.alk-page .prod-well::after {
  content: ""; width: 20px; height: 20px; font-family: inherit; background-color: var(--ba-navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Resource cards (solution brief / infographic / ebook). */
.alk-page .resource-card { position: relative; height: 100%; overflow: hidden; border: 1px solid var(--ba-line); border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(4, 8, 34, .08); transition: transform .25s ease, box-shadow .25s ease; }
.alk-page .resource-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(4, 8, 34, .16); }
.alk-page .resource-card .image-block img { display: block; width: 100%; height: 200px; object-fit: cover; object-position: top; }
.alk-page .resource-card .card-container { padding: 22px 24px; }
.alk-page .resource-card .card-container strong { color: var(--ba-navy); letter-spacing: .04em; }
.alk-page a:has(> .resource-card) { display: block; height: 100%; color: var(--ba-black); text-decoration: none; }
.alk-page .resource-card h4 { color: var(--ba-black); font-size: 1.15rem; line-height: 1.4; }
/* Vertical pill tabs (Identity Resilience lifecycle). */
.alk-page .nav-pills .nav-link { margin-bottom: 10px; padding: 14px; border: 1px solid var(--ba-line); border-radius: 10px; background: #fff; color: var(--ba-black); font-size: 1.05rem; box-shadow: 0 2px 4px rgba(4, 8, 34, .06); }
.alk-page .nav-pills .nav-link.active { border: 2px solid var(--ba-navy); background: #fff; color: var(--ba-navy); font-weight: 700; }
.alk-page .no-arrow .dropdown-toggle::after { display: none; }
/* Feature sub-points (Email Protection products): an accent rule marks each point. */
.alk-points > [class*="col-"] { padding-left: 1.25rem; border-left: 3px solid var(--ba-bright); }
.alk-points > [class*="col-"] > :last-child { margin-bottom: 0; }
.alk-points h3 { margin-bottom: .5rem; }
/* Vertical pill tabs: a steady pill column and the panel as a soft tinted card (the shared
   stylesheet otherwise boxes .tab-content with a border). */
.alk-page .d-flex > .nav-pills.flex-column { flex: 0 0 210px; }
.alk-page .d-flex > .tab-content { border: 0; }
.alk-page .d-flex > .tab-content > .tab-pane { padding: 1.75rem 2rem; border-radius: 12px; background: var(--ba-bg); }
@media (max-width: 767.98px) {
  .alk-page .d-flex.no-arrow { flex-direction: column; }
  .alk-page .d-flex > .nav-pills.flex-column { flex-basis: auto; width: 100%; }
}
/* Vidyard players: their inline sizing (a 16:9 padding box with the iframe laid over it) is not
   carried into the rebuilt pages, so the box comes from here. */
[class^="vidyard-div-"], [class*=" vidyard-div-"] { position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; }
[class^="vidyard-iframe-"], [class*=" vidyard-iframe-"] { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
/* Product-line tiles on a navy band (Cybersecurity Platform): outlined, white text, filled on hover. */
.alk-doc .card:is(.email-protection, .application-protection, .network-protection, .data-protection) { justify-content: center; border: 2px solid var(--ba-bright); background: transparent; box-shadow: none; transition: background-color .2s ease; }
.alk-doc .card:is(.email-protection, .application-protection, .network-protection, .data-protection) h3 { margin: .75rem 0 0; color: #fff !important; }
.alk-doc a:hover > .card:is(.email-protection, .application-protection, .network-protection, .data-protection) { background: var(--ba-bright); }
.alk-doc a:hover > .card:is(.email-protection, .application-protection, .network-protection, .data-protection) h3 { color: var(--ba-navy) !important; }
.alk-doc a:has(> .card:is(.email-protection, .application-protection, .network-protection, .data-protection)) { text-decoration: none; }
/* In-page product menus: the shared stylesheet floats each submenu arrow 10px outside its item, so
   arrows stuck out of the menu; draw it inside the item and let menus fit their longest label. */
.alk-doc .dropdown-menu { min-width: max-content; }
.alk-doc .dropdown-submenu > a { position: relative; padding-right: 2rem; }
.alk-doc .dropdown-submenu > a::after { position: absolute; top: 50%; right: .75rem; float: none; margin: -5px 0 0; border-left-color: currentColor; }
.alk-doc .dropdown-menu .dropdown-item:focus { outline: 2px solid var(--ba-bright); outline-offset: -2px; }
/* Award cards on a navy band (Cybersecurity Platform): compact light cards with logos at one height. */
.alk-doc :is(.bg-navy, .alk-band--navy) .card:not(.pricing):not(.email-protection, .application-protection, .network-protection, .data-protection):has(> img) { min-height: 0; height: 100%; padding: 1.25rem 1rem; border: 0; background: var(--ba-light); }
.alk-doc :is(.bg-navy, .alk-band--navy) .card:not(.email-protection, .application-protection, .network-protection, .data-protection) > img { width: auto !important; height: 110px; max-width: 100%; object-fit: contain; }
.alk-doc :is(.bg-navy, .alk-band--navy) .card:not(.email-protection, .application-protection, .network-protection, .data-protection):has(> img) :is(p, strong) { color: var(--ba-navy) !important; font-size: .95rem; margin-bottom: 0; }
.alk-doc :is(.bg-navy, .alk-band--navy) [class*="col-"]:has(> .card:not(.email-protection, .application-protection, .network-protection, .data-protection) > img) { margin-bottom: 1rem; }
/* Prose links (contact / quote pages): same as content links - underline on hover only. */
.alk-prose a:not([class]) { color: var(--ba-navy); text-decoration: none; }
.alk-prose a:not([class]):is(:hover, :focus-visible) { text-decoration: underline; }