@charset "utf-8";

/* =============================================================================
   SANStorageWorks — Dell Storage authorized reseller
   Design system (Bootstrap 5 + Lucide). Two namespaces:
     .ssw-* / .fw / .site-footer / .footer-*  → shared CHROME (topmenu.inc + footer.inc)
     .alk-*                                    → AlliaKit page bands (ported from Figma)
   Brand accent = Dell blue (#0076ce). Radius: chrome keeps soft corners;
   AlliaKit page bands are square (radius 0) with a single FloatingCard shadow.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

/* ===== TOKENS ===== */
:root {
  /* AlliaKit neutral palette + Dell blue accent */
  --ak-accent:        #0076ce;   /* Dell blue. Primary CTA bg, active nav border, icon fills. White ink on it is 4.72:1 */
  --ak-accent-hover:  #005fa8;   /* accent button hover (darker; white ink 6.56:1) */
  --ak-accent-dim:    #00447c;   /* accent-as-text on white surfaces (9.91:1) */
  --ak-accent-lit:    #58a8ec;   /* accent-as-text on a dark ground. --ak-accent is
                                    only 3.37:1 on --ak-slate; this is 6.19:1 there,
                                    7.18:1 on --ak-dark and 8.25:1 on black. */
  --ak-dark:         #11181f;   /* dark band bg */
  --ak-slate:        #1a2332;   /* deep navy-slate depth layer */
  --ak-mid:          #535a5f;   /* secondary text on white */
  --ak-light:        #f4f4f4;   /* light section bg */
  --ak-border:       #e4e4e4;   /* dividers/borders on white */
  /* BlueAlly palette */
  --ba-blue:         #0066cc;   /* BlueAlly corporate blue. Distinct from --ak-accent (Dell). */
  --ba-navy:         #001278;
  --ba-light:        rgba(206,229,241,0.5);
  --ba-light-solid:  #f8faff;
  /* on-dark alphas */
  --on-dark-85: rgba(255,255,255,.85);
  --on-dark-72: rgba(255,255,255,.72);
  --on-dark-65: rgba(255,255,255,.65);
  --on-dark-60: rgba(255,255,255,.6);
  --on-dark-55: rgba(255,255,255,.55);
  --on-dark-50: rgba(255,255,255,.5);
  --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);

  /* Brand accent (chrome) — unified to BlueAlly blue */
  --accent: var(--ak-accent);
  --accent-dark: #005fa8;
  --accent-ink: #ffffff;       /* ink on a Dell-blue surface */
  --ak-accent-text: var(--ak-accent-dim);
  --ak-accent-soft: rgba(0, 118, 206, 0.10);


  /* Links */
  --link: #0d6efd;
  --link-hover: #0b5ed7;
  --link-dark: #6ea8fe;

  /* Text ramp on light */
  --ink: #212529;
  --ink-2: #4a4a4a;
  --ink-3: #595959;
  --muted: #5e6278;
  --ink-strong: #121619;

  /* Surfaces */
  --surface: #ffffff;
  --tint: #f4f8f9;
  --mist: #f2f4f8;
  --sink: #e7e8e8;

  /* Dark grounds */
  --ground: #121619;
  --ground-2: #001e2b;
  --ground-3: #22272b;

  /* Lines */
  --line: #d0d4d5;
  --line-2: #d5d5d5;
  --line-strong: #949494;
  --hairline: rgba(18, 22, 25, 0.08);

  /* Radius (chrome only) */
  --radius: 6px;
  --radius-lg: 16px;

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

  --container: 1350px;

  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0b5ed7;
}

/* ===== BASE ===== */
html, body { overflow-x: clip; }   /* clip (not hidden) so position:sticky still works */
body {
  color: var(--ink);
  background: var(--surface);
  font-family: "Open 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;
}
h1, h2, h3, h4, h5, h6 { color: var(--ink-strong); font-weight: 800; line-height: 1.05; }
h1, h2 { line-height: 1.05; letter-spacing: -0.032em; text-wrap: balance; }
h3 { font-weight: 700; line-height: 1.22; letter-spacing: -0.014em; text-wrap: balance; }
h4, h5, h6 { font-weight: 700; line-height: 1.32; letter-spacing: -0.01em; }
p { max-width: 68ch; text-wrap: pretty; }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--link-hover); text-decoration: underline; }
img { max-width: 100%; height: auto; }
.tel { color: var(--ak-accent-text); font-weight: 700; white-space: nowrap; }

/* 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;
}

/* ===== UTILITY STRIP (chrome) ===== layout via Bootstrap utilities in markup */
.ssw-utility { background: var(--ground); color: #fff; }
.ssw-utility__bar { padding-top: 1.75rem; padding-bottom: 0.5rem; }
.ssw-utility__left { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: #cfd3d5; }
.ssw-utility__left [data-lucide] { width: 16px; height: 16px; color: var(--ak-accent); }
.ssw-utility__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Sibling-site switcher in the utility strip. Folded in from the standalone black
   bar that used to sit above the header; the current site is a span, not a link,
   so it is not a link that goes nowhere. */
.ssw-sites { display: inline-flex; align-items: center; gap: 14px; padding-left: 14px; margin-left: 6px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.ssw-sites__link { color: #cfd3d5; font-size: 0.88rem; text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.ssw-sites__link[href]:hover, .ssw-sites__link[href]:focus { color: #fff; text-decoration: none; border-bottom-color: var(--ak-accent); }
.ssw-sites__link.is-current { color: #fff; font-weight: 600; border-bottom-color: var(--ak-accent); }
@media (max-width: 575.98px) { .ssw-sites { padding-left: 0; margin-left: 0; border-left: 0; width: 100%; } }
.ssw-utility__phone { display: inline-flex; align-items: center; gap: 8px; color: #d5d8da; font-size: 0.9rem; margin: 0; }
/* Plain accent glyph, same treatment as .footer-contact-item. */
.ssw-utility__phone-icon { flex: 0 0 auto; color: var(--ak-accent); }
.ssw-utility__phone .tel { color: #fff; }
.ssw-utility__phone .tel:hover { color: var(--ak-accent-lit); }
.ssw-utility a { color: #d5d8da; }
.ssw-utility a:hover { color: var(--ak-accent-lit); text-decoration: none; }

/* Vendor wordmark in a dark hero band. Reversed (near-white) variants only, so
   these are only ever placed on alk-black / alk-dark / alk-hero-stage sections. */
.alk-vendor-logo { display: block; width: 150px; height: auto; }
/* Partner/authorization badge: wider than a vendor wordmark and always sits
   left-aligned at the head of a hero. */
.alk-partner-badge { display: block; width: 220px; height: auto; }
@media (max-width: 575.98px) { .alk-partner-badge { width: 176px; } }
@media (max-width: 575.98px) { .alk-vendor-logo { width: 124px; } }

/* Site search, used in both the utility strip and the footer (same --ground
   background, so one set of colours works in both). Placeholder is #8f9599 on
   #2b3237: 4.6:1, AA.

   Input and button MUST share one height. Setting min-height:44px on the button
   while the input was 40px made the accent square stand 4px taller than the field
   it belonged to. So: 40px on pointer widths, and both bumped to 44px on
   touch widths where the tap-target floor actually applies. */
.ssw-search { display: flex; align-items: stretch; margin: 0; }
.ssw-search__input {
  width: 240px; max-width: 46vw; height: 40px;
  padding: 0 12px;
  font-size: 0.875rem; font-family: inherit; color: #fff;
  background: #2b3237;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-right: none;
}
.ssw-search__input::placeholder { color: #8f9599; opacity: 1; }
.ssw-search__input:focus {
  outline: none;
  border-color: var(--ak-accent);
  background: #333b41;
}
.ssw-search__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 40px; padding: 0 12px;
  color: #fff; background: var(--ak-accent);
  border: 1px solid var(--ak-accent); cursor: pointer;
}
.ssw-search__btn:hover, .ssw-search__btn:focus { background: var(--ak-accent-hover); border-color: var(--ak-accent-hover); }
.ssw-search__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 991.98px) {
  /* Touch widths: both controls to the 44px floor, together, so they stay flush. */
  .ssw-search__input, .ssw-search__btn { height: 44px; }
}
@media (max-width: 575.98px) {
  /* Full-width on phones rather than squeezed beside the phone number. */
  .ssw-search { width: 100%; }
  .ssw-search__input { width: 100%; max-width: none; }
}

/* Footer variant: wider field, since it has a whole row to itself. */
.ssw-search--footer { max-width: 420px; }
.ssw-search--footer .ssw-search__input { width: 100%; max-width: none; }
@media (max-width: 991.98px) { .ssw-search--footer { max-width: none; } }

/* ===== PRIMARY NAV (chrome) ===== */
.ssw-nav.navbar {
  /* !important + 2-class specificity overrides dynamicpricing's
     `.navbar-dark { background-color:#949494 !important }` */
  background: var(--ground) !important;   /* dark gray */
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0;
}
/* .alk-container is a flex child of the Bootstrap navbar, so it shrinks to
   content width — force it to fill so the nav matches the utility strip (1280). */
.ssw-nav > .alk-container { width: 100%; }
.ssw-nav .navbar-brand { padding: 12px 0; }
.ssw-nav .navbar-brand img { max-height: 48px; width: auto; }
/* Text brand-mark (reads on the dark nav; no image needed) */
.ssw-brand { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.05; text-decoration: none; }
.ssw-brand:hover { text-decoration: none; }
.ssw-brand__name { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
/* Reversed wordmark image. Native artwork is 394x42, so it is held at or under
   that height -- scaling a 42px-tall raster up would only soften it. */
.ssw-brand__mark { display: block; width: auto; height: 38px; max-width: 100%; }
@media (max-width: 575.98px) { .ssw-brand__mark { height: 30px; } }
.ssw-brand__accent { color: #fff; }
.ssw-brand__tld { font-weight: 500; color: #fff; opacity: 0.6; }
.ssw-brand__tagline { display: block; margin-top: 3px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 575.98px) {
  .ssw-brand__name { font-size: 1.3rem; }
  .ssw-brand__tagline { font-size: 0.58rem; letter-spacing: 0.12em; }
}
.ssw-nav .navbar-nav { align-items: center; }
.ssw-nav .nav-link {
  font-weight: 600;
  font-size: 0.96rem;
  padding: 1.15rem 0.95rem !important;
  position: relative;
}
.ssw-nav .nav-link,
.ssw-nav .nav-link:hover,
.ssw-nav .nav-link:focus { text-decoration: none !important; }
.ssw-nav .navbar-nav > .nav-item > .nav-link,
.ssw-nav .navbar-nav > .nav-item > .nav-link:link,
.ssw-nav .navbar-nav > .nav-item > .nav-link:visited { color: #e6e8ea !important; }
.ssw-nav .navbar-nav > .nav-item > .nav-link:hover,
.ssw-nav .navbar-nav > .nav-item > .nav-link:focus,
.ssw-nav .navbar-nav > .nav-item.show > .nav-link { color: var(--ak-accent-lit) !important; }
.ssw-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.55rem;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.ssw-nav .nav-link:hover::after,
.ssw-nav .nav-link:focus-visible::after,
.ssw-nav .nav-item.show > .nav-link::after { transform: scaleX(1); }
.ssw-nav .dropdown-toggle::after { vertical-align: middle; }
.ssw-nav .dropdown-menu {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(16, 20, 22, 0.15);
  padding: 8px;
  margin-top: 10px;
  min-width: 268px;
}
.ssw-nav .dropdown-item {
  border-radius: 0;
  padding: 10px 16px;
  font-size: 0.93rem;
}
.ssw-nav .dropdown-item,
.ssw-nav .dropdown-item:link,
.ssw-nav .dropdown-item:visited { color: var(--ink) !important; }
.ssw-nav .dropdown-item:hover,
.ssw-nav .dropdown-item:focus { background: var(--tint) !important; color: var(--ak-accent-text) !important; }
.ssw-nav .dropdown-item strong { color: inherit; }
.ssw-nav .ssw-viewall,
.ssw-nav .ssw-viewall:link,
.ssw-nav .ssw-viewall:visited {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ak-accent-text) !important;
  font-weight: 700;
  border-radius: 0;
}
.ssw-nav .dropdown-header {
  color: var(--muted) !important;
  background: transparent !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem !important;
  padding: 12px 16px 4px;
}
.ssw-nav .dropdown-submenu { position: relative; }
.ssw-nav .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin: 0; border-radius: 0; }
/* Touch widths: the nav collapses to a stacked list, so every dropdown entry
   becomes a primary tap target and owes the 44px floor. */
@media (max-width: 991.98px) {
  .ssw-nav .dropdown-item,
  .ssw-nav .dropdown-menu.alk-mega .dropdown-item { display: flex; align-items: center; min-height: 44px; }
}
@media (min-width: 992px) {
  .ssw-nav .dropdown-submenu:hover > .dropdown-menu { display: block; }
}
/* min-height 44px: the toggler measured 40px, under the mobile tap-target floor.
   The display value MUST stay inside the max-width query. Bootstrap hides the
   toggler at >=lg via `.navbar-expand-lg .navbar-toggler{display:none}`, which is
   also a two-class selector -- so an unscoped `display:inline-flex` here has equal
   specificity and wins on source order (our stylesheet loads after Bootstrap),
   leaving the hamburger visible next to the full desktop nav on every page. */
.ssw-nav .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.25);
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
@media (max-width: 991.98px) {
  .ssw-nav .navbar-toggler { display: inline-flex; }
}

/* ===== BUTTONS (chrome: Bootstrap .btn-primary → accent 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-color: var(--accent-ink);
  --bs-btn-hover-color: var(--accent-ink);
  --bs-btn-active-color: var(--accent-ink);
  color: var(--accent-ink);
}
/* 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: 0.9rem 1.55rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s 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; }
/* Guard header/footer buttons against the dynamicpricing .btn reset */
.ssw-nav .btn,
.btn.btn-primary { border-radius: var(--radius); font-weight: 700; }
/* The quote button is the one .alk-* component that also renders on pages still
   loading the legacy stylesheet, whose `a:link,a:visited,a:active{color:#007FC0}`
   is (0,1,1) and outranks .alk-btn--primary. Chrome defends itself the same way
   the nav links do. */
.ssw-nav .alk-btn--primary,
.ssw-nav .alk-btn--primary:link,
.ssw-nav .alk-btn--primary:visited,
.ssw-nav .alk-btn--primary:hover,
.ssw-nav .alk-btn--primary:focus { color: #fff !important; }
:focus-visible { outline: 3px solid var(--ak-accent-text); outline-offset: 2px; }

/* ===== FOOTER (chrome) ===== */
.site-footer { color: #cfd3d5; }
.footer-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.footer-cta { background: var(--accent); color: var(--accent-ink); padding: 30px 0; }
.footer-cta-title { color: var(--accent-ink); margin: 0; font-size: 1.5rem; }
.footer-cta-text { color: #1b2124; margin: 4px 0 0; }
.footer-phone { color: var(--accent-ink); font-size: 1.35rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.footer-phone:hover { color: var(--accent-ink); text-decoration: none; }
.footer-main { background: var(--ground); padding: 54px 0 40px; }
.footer-heading { color: #fff; font-size: 1.02rem; font-weight: 700; margin: 0 0 16px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 3px; }
.footer-links a { color: #b9bdbf; font-size: 0.94rem; display: inline-block; padding: 3px 0; }
.footer-links a:hover { color: var(--ak-accent-lit); text-decoration: none; }
/* Touch widths: footer links are a stacked list of standalone tap targets, so
   they take the 44px floor. The li margin drops to 0 so the column does not
   grow by the same amount again. */
@media (max-width: 991.98px) {
  .footer-links li { margin-bottom: 0; }
  .footer-links a { display: flex; align-items: center; min-height: 44px; padding: 0; }
}
.footer-link-bold { font-weight: 700; color: #fff !important; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 15px; font-size: 0.94rem; line-height: 1.5; }
.footer-contact-item [data-lucide] { color: var(--ak-accent); flex: 0 0 auto; margin-top: 2px; }
.footer-contact-item a { color: #b9bdbf; }
.footer-contact-item a:hover { color: var(--ak-accent-lit); text-decoration: none; }
/* Touch widths: the footer phone and email are the two links most likely to be
   tapped on a phone, and they were the smallest on the page. */
@media (max-width: 991.98px) {
  .footer-contact-item a { display: inline-flex; align-items: center; min-height: 44px; }
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  margin-left: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}
.footer-social a:hover { background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.footer-social [data-lucide], .footer-social svg { width: 20px; height: 20px; display: block; }
.footer-copyright { background: #0d1114; padding: 18px 0; font-size: 0.85rem; color: #9aa0a2; }
.footer-copyright a { color: #c3c6c8; text-decoration: underline; }
.footer-copyright p { margin: 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; }
.alk-dark  { background:var(--ak-dark); color:#fff; }
.alk-black { background:#000; 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 #0d6efd, which is 3.44:1 on --ba-navy;
   --link-dark is 6.43:1 there and was already in the token set, unused. */
.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:#000; 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:rgba(255,255,255,.5); }
.alk-authbadge.is-light .sub{ color:rgba(0,0,0,.45); }

/* ----- 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:#000; border:1px solid #000; letter-spacing:.02em; }
.alk-btn--secondary-light:hover{ background:#000; color:#fff; }
.alk-btn--ghost-dark{ background:transparent; color:rgba(255,255,255,.55); 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(2rem,4vw,3rem); font-variant-numeric:tabular-nums; line-height:1; }
.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:11px; color:var(--on-dark-60); line-height:1.6; 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:rgba(255,255,255,.5); 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:#000; 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:#000; 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,
  .ssw-sites__link,
  .ssw-utility__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 (Dell's
   product renders are 2.68:1 on a blue 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,118,206,.08), 0 8px 40px rgba(0,0,0,.14), 0 0 80px rgba(0,118,206,.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:rgba(206,229,241,.9); }
.alk-trust--dark .row span{ color:rgba(255,255,255,.8); }
.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 #0076ce); .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:rgba(255,255,255,.9); }
/* 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:#000; 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; }
@media (max-width: 991.98px) { .alk-breadcrumb a, .alk-breadcrumb li { min-height: 44px; } }
.alk-breadcrumb li[aria-current="page"]{ color:var(--ak-dark); font-weight:600; }

/* ----- 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:rgba(255,255,255,.55); }
.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:#11181f; }
.alk-form .alk-btn{ border-radius:0; width:100%; justify-content:center; }

/* ----- MegaMenu (multi-column nav dropdown, e.g. Innovation) ----- */
.ssw-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) {
  .ssw-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; }
.ssw-nav .dropdown-menu.alk-mega .dropdown-item:hover,
.ssw-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:#000; 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; }
  .ssw-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,
  .ssw-nav .nav-link::after { transform: none !important; }
}

/* ===== YouTubeLightbox (AlliaKit) ===== */
.allia-yt-trigger { display: block; width: 100%; cursor: pointer; background: none; border: none; padding: 0; font-family: 'Open Sans', sans-serif; text-align: left; }
.allia-yt-card { display: block; width: 100%; }
.allia-yt-thumb-wrap { position: relative; overflow: hidden; background: #11181f; aspect-ratio: 16 / 9; border-top: 3px solid #0076ce; }
.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: #0076ce; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; }
.allia-yt-trigger:hover .allia-yt-playbtn-inner { background: #005fa8; transform: scale(1.08); }
.allia-yt-caption { background: #1a2332; 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: #0076ce; 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(10,14,20,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; font-family: 'Open Sans', sans-serif; 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: rgba(255,255,255,.6); 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: 'Open Sans', sans-serif; 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: #000; border-top: 3px solid #0076ce; }
#allia-yt-iframe { width: 100%; height: 100%; display: block; border: none; }
.allia-yt-hint { margin-top: 12px; font-size: 11px; color: rgba(255,255,255,.25); 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: #535a5f; }
.hr-o { border-bottom: 3px solid #0076ce; 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: #535a5f; }
.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(70,124,45,.4); }
.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: #000; }
.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(2,5,8,.92) 0%, rgba(2,5,8,.84) 42%, rgba(2,5,8,.34) 70%, rgba(2,5,8,.04) 100%),
    linear-gradient(180deg, rgba(2,5,8,.35) 0%, rgba(2,5,8,0) 45%, rgba(2,5,8,.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(2,5,8,.86) 0%, rgba(2,5,8,.91) 100%);
  }
}

/* Official Hero 2 (CONFIRMED): alk-hero-banner (Centered Command Banner) */
.alk-hero-banner {
  padding-top: 5.5rem;
  padding-bottom: 0;
  background: #06090c;
  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(0, 118, 206, 0.16) 0%, rgba(9, 13, 18, 0.95) 75%), #090d12;
  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);
}

/* 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(17, 24, 31, 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(0, 118, 206, 0.12);
  border: 1px solid rgba(0, 118, 206, 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); }

/* ===== DynamicPricing table =====
   Kept for the two pages that still carry real prices (powervault-me412 and
   -me424). Every other product page on this site is quote-only, so the rebuilt
   pages drop the table entirely and lead with Get a Quote! instead.
   The markup comes from the shared DynamicPricing submodule (Bootstrap 5 card),
   so we dress what it gives us rather than changing its HTML. */
.pricing.card                  { border:1px solid var(--ak-border); border-radius:0; background:#fff; color:var(--ak-dark); }
.pricing.card > .card-header   { background:var(--ak-accent); color:var(--accent-ink); border:0; border-radius:0; font-weight:700; font-size:15px; padding:.85rem 1.25rem; }
.pricing.card > .card-body     { padding:0; }
.pricing .card-subheading      { background:var(--ak-light); border-bottom:1px solid var(--ak-border); padding:.7rem 1.25rem; font-size:13px; color:var(--ak-dark); }
.pricing .card-subheading a    { color:var(--ak-accent-dim); font-weight:600; }
.pricing .panel-subtext        { padding:.7rem 1.25rem; font-size:13px; line-height:1.6; color:var(--ak-mid); border-bottom:1px solid var(--ak-border); }
.pricing .card-body > .row     { margin:0; padding:1rem 1.25rem; border-bottom:1px solid var(--ak-border); align-items:center; }
.pricing .card-body > .row:last-child { border-bottom:0; }
.pricing .card-body > .row strong     { color:var(--ak-dark); font-size:14.5px; line-height:1.45; }
.pricing .card-body > .row small      { color:var(--ak-mid); font-size:12.5px; line-height:1.6; }
.pricing .price                { font-weight:700; color:var(--ak-dark); }
.pricing a:not([class])        { color:var(--ak-accent-dim); }
.pricing a:not([class]):hover  { color:var(--ak-dark); }
.pricing .btn-warning          { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; background:var(--ak-accent); border-color:var(--ak-accent); color:var(--accent-ink); border-radius:0; font-weight:700; font-size:13px; padding:.55rem 1rem; white-space:nowrap; }
.pricing .btn-warning:hover    { background:var(--ak-accent-hover); border-color:var(--ak-accent-hover); color:var(--accent-ink); }