@charset "utf-8";

/* =============================================================================
   ALLIAKIT — GuardSite (WatchGuard)
   Ported from the VMBackupWorks/DiskDataWorks AlliaKit implementation and
   retinted to the WatchGuard palette.

   Loads AFTER /css/styles.css. The legacy sheet still owns the ~430 pages that
   have not been rebuilt yet; this file owns the chrome and every .alk-* page.
   Nothing here redefines a legacy GuardSite class (.card, .well-container,
   .card-prod, .gs-*), so an un-rebuilt page only picks up the new chrome.

   PALETTE — WatchGuard red over the AlliaKit neutral ground.
     accent          #e4002b  WatchGuard red — fills, CTA surfaces, rules
     accent-dark     #b8001f  pressed/hover, and accent AS TEXT on white (6.9:1)
     accent-on-dark  #ff4d5e  DERIVED: #e4002b is 3.2:1 on #232323, under the
                              4.5:1 AA floor; this tint measures 4.85:1
     accent-2        #0066cc  BlueAlly blue — secondary/authority surfaces
     accent-2-dark   #001278  BlueAlly navy — saturated CTA band
     bands           #000 #232323 #282828 #f0f0f0 #ffffff
     text            #232323 #505861 #848991 #f0f0f0 #adacaf
     borders         #dcdce4 #b0b0b0 rgba(255,255,255,.08)
   ============================================================================= */
:root {
  --accent: #e4002b;
  --accent-dark: #b8001f;
  --accent-on-dark: #ff4d5e; /* DERIVED — see palette note above */
  --accent-2: #0066cc;
  --accent-2-dark: #001278;
  --ink: #232323;
  --ink-soft: #282828;
  --muted: #505861;
  --muted-2: #848991;
  --dim: #999999;
  --on-dark: #f0f0f0;
  --on-dark-muted: #adacaf;
  --tint: #fbfbfb;
  --tint-2: #eef4f6;
  --grey: #f0f0f0;
  --hero: #232323;
  --black: #000000;
  --line: #dcdce4;
  --line-soft: #dcdce499;
  --line-strong: #b0b0b0;
  /* Square everywhere. AlliaKit's stance is border-radius:0. */
  --radius: 0;
  --radius-lg: 0;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --hairline: #00000026;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 10px -3px rgba(0, 0, 0, 0.08), 0 10px 22px -8px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 26px -8px rgba(0, 0, 0, 0.13), 0 26px 52px -14px rgba(0, 0, 0, 0.16);
  /* One content box for the whole site — chrome and every .alk-* band share
     the same left and right edge. */
  --container: 1280px;
  --container-pad: 2.5rem;
  --bs-link-color: #b8001f;
  --bs-link-hover-color: #e4002b;
}
/* ===== NO ROUNDED CORNERS =====
   AlliaKit's stance is border-radius:0 everywhere.

   Bootstrap drives every one of its radii through CSS variables, so zeroing the
   variables flattens the whole framework at the source — inputs, input-groups,
   buttons, modals, accordions, badges, pills. This is the only approach that
   actually works: Bootstrap's input-group rules are selector chains like
   `.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle)…`
   carrying ~7 classes of specificity, which no practical override selector beats
   (an earlier :where() list here had zero specificity and silently lost, which is
   why the search bar stayed round). Variables sidestep specificity entirely. */
:root {
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
}
/* A few Bootstrap radii are hardcoded rather than variable-driven, and the two
   dynamicpricing stylesheets set their own on legacy components. Both load before
   this file, so a plain selector list wins on source order. */
.form-check-input,
.panel, .panel-group, .panel-group .panel, .panel-group .panel-heading,
.contact-container, .breadcrumb, .btn-outline, .btn-warning-outline,
.btn-gray-outline, .prod-well,
.dropdown-submenu.pull-left > .dropdown-menu { border-radius: 0; }
/* The legacy sheet sets `.btn { border-radius: 12px }` on a bare class, which
   Bootstrap's variables cannot reach. Same specificity, later source order. */
.btn { border-radius: 0; }

/* ===== BASE ===== */
/* `clip`, not `hidden`. The .fw full-bleed trick (width:100vw + negative margin)
   overhangs the viewport by the scrollbar width, so this has to contain it - but
   overflow-x:hidden makes body a scroll container, which silently kills
   position:sticky for everything inside it (the PDP sub-nav and buy box both
   stopped sticking). overflow:clip contains the same overhang without creating a
   scroll container. Supported everywhere we target; the fallback keeps old
   engines on the previous behaviour. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body {
  color: var(--ink);
  /* !important is load-bearing here and nowhere else in this file. The
     DynamicPricing sheet ships `body { background-color:#f5f5f5 !important }`
     and it is a shared submodule we do not own, so source order cannot win it.
     Every .alk-sec is transparent and sits on the body, so without this the
     whole kit renders on grey instead of white. */
  background: #ffffff !important;
  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;
}
/* Type scale (loaded weights: 400 / 600 / 700 only). Hierarchy comes from
   size + weight + tracking + line-height, not bold alone. */
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 700; line-height: 1.18; }
h1, h2 { line-height: 1.12; letter-spacing: -0.018em; }
/* The ink colour above wins by specificity over an inherited one, so a heading
   inside a Bootstrap .bg-dark / .text-white band (the legacy heroes) rendered
   near-black on near-black. Headings inherit inside an explicitly on-dark
   container, and go back to ink inside a light panel nested in one. */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6 { color: inherit; }
.text-white .bg-white h1, .text-white .bg-white h2, .text-white .bg-white h3,
.text-white .bg-white h4, .text-white .bg-white h5, .text-white .bg-white h6,
.text-white .bg-light h1, .text-white .bg-light h2, .text-white .bg-light h3,
.text-white .bg-light h4, .text-white .bg-light h5, .text-white .bg-light h6,
.bg-dark .bg-white h1, .bg-dark .bg-white h2, .bg-dark .bg-white h3,
.bg-dark .bg-white h4, .bg-dark .bg-white h5, .bg-dark .bg-white h6,
.bg-dark .bg-light h1, .bg-dark .bg-light h2, .bg-dark .bg-light h3,
.bg-dark .bg-light h4, .bg-dark .bg-light h5, .bg-dark .bg-light h6 { color: var(--ink); }
h3 { font-weight: 600; line-height: 1.28; letter-spacing: -0.006em; }
h4, h5, h6 { font-weight: 600; line-height: 1.35; }
/* Measure. Scoped to <main> on purpose: this sheet loads on all 460 pages, but
   only the rebuilt ones are wrapped in <main>. Unscoped, the 72ch cap squeezed
   every legacy product page's <p> to ~670px, which made `mx-auto` centre the
   product shot inside that box instead of the content width, and pushed the
   "More pricing below" line left with it. */
main p { max-width: 72ch; }
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { color: var(--accent-dark); text-decoration: underline; }
/* Make links inside prose visibly identifiable without affecting navigation,
   buttons, card links, or other component-owned interaction patterns. */
main :is(p, li, td, blockquote) a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
/* Two-tone keyboard ring remains visible on both white and dark surfaces. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--accent);
}

.gtm-noscript { display: none; visibility: hidden; }
/* max-width and height:auto must travel together. Every <img> carries its real
   intrinsic width/height attributes so the browser reserves the right box, but
   max-width:100% alone shrinks only the width when a container is narrower than
   the file — the height attribute survives and the image stretches vertically.
   Deliberate crop containers (.alk-imgcard, .alk-catcard, .alk-media-banner,
   .alk-hero-photo__img) set an explicit height on a class selector and still win. */
img { max-width: 100%; height: auto; }
.tel { color: var(--accent); font-weight: 700; white-space: nowrap; }

.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 var(--container-pad);
}

/* ===== HEADER / NAV =====
   Chrome follows the DiskDataWorks/AlliaKit pattern: one continuous dark block
   (utility strip + primary nav on the same ground), square dropdowns, accent
   underline on hover, and an .alk-btn CTA in the bar. */
.alk-utility { background: var(--hero); color: #fff; }
/* Layout comes from Bootstrap utilities in topmenu.inc (the AlliaKit pattern);
   this only sets the vertical rhythm of the strip. */
.alk-utility__bar { padding-top: 1.25rem; padding-bottom: 0.6rem; }
.alk-utility__left { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--on-dark-muted); }
.alk-utility__left [data-lucide] { width: 16px; height: 16px; color: var(--accent-on-dark); }
.alk-utility__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.alk-utility__sep { color: rgba(255, 255, 255, 0.28); }
/* Account menu lives in the utility strip, not the primary nav, so the nav
   itself still fits one row at 1280px. */
.alk-utility__account .dropdown-menu { background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 6px; margin-top: 8px; min-width: 200px; }
.alk-utility__account .dropdown-item { padding: 8px 14px; font-size: 0.9rem; color: var(--ink); border-radius: 0; }
.alk-utility__account .dropdown-item:hover, .alk-utility__account .dropdown-item:focus { background: var(--tint-2); color: var(--accent-dark); }
.alk-utility__accountbtn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; padding: 0; color: var(--on-dark); font-size: 0.9rem; font-weight: 600; }
.alk-utility__accountbtn:hover { color: var(--accent-on-dark); }
.alk-utility__phone { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); font-size: 0.9rem; margin: 0; }
/* No ring around the phone glyph — just the icon. */
.alk-utility__phone-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent-on-dark); }
.alk-utility__phone .tel { color: #fff; }
.alk-utility__phone .tel:hover { color: var(--accent-on-dark); }
.alk-utility a { color: var(--on-dark); }
.alk-utility a:hover { color: var(--accent-on-dark); text-decoration: none; }

/* Below lg the utility strip wraps to four stacked rows (221px on a 390px
   phone). Collapse it to one: the trust blurb is already the brand tagline
   directly underneath, and the phone label is redundant next to the number. */
@media (max-width: 991.98px) {
  .alk-utility__left { display: none; }
  .alk-utility__bar { padding-top: 0.5rem; padding-bottom: 0.5rem; gap: 0.75rem; flex-wrap: nowrap; }
  .alk-utility__right { flex: 1 1 auto; gap: 0.75rem; flex-wrap: nowrap; justify-content: flex-end; }
  .alk-utility__right .top-search { flex: 1 1 auto; min-width: 0; }
  .top-search .input-group { width: 100%; max-width: none; }
  .alk-utility__phone { gap: 5px; flex: 0 0 auto; }
  .alk-utility__phone-label { display: none; }
}
@media (max-width: 575.98px) {
  .alk-utility__accountbtn.dropdown-toggle::after,
  .alk-utility__accountlabel { display: none; }
  .alk-utility__phone .tel { font-size: 0.85rem; }
}
.top-search { margin: 0; }
.alk-nav .navbar-brand { padding: 12px 0; }
.alk-nav .navbar-brand img { max-height: 48px; width: auto; }
/* Text brand-mark, ported from the DiskDataWorks chrome. Live text rather than a
   raster logo, so the wordmark and tagline stay crisp at any DPR and the tagline
   is actually readable (the PNG version rendered it as ~7px of blurry pixels). */
.alk-brand { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.05; text-decoration: none; }
.alk-brand:hover { text-decoration: none; }
.alk-brand__name { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.alk-brand__red { color: var(--accent-on-dark); }
.alk-brand__tld { font-weight: 500; color: #fff; opacity: 0.6; }
.alk-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) {
  .alk-brand__name { font-size: 1.3rem; }
  .alk-brand__tagline { font-size: 0.58rem; letter-spacing: 0.12em; }
}
.top-search .input-group { width: 260px; max-width: 60vw; }
.top-search .form-control {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.9rem;
  box-shadow: none;
}
.top-search .form-control::placeholder { color: rgba(255, 255, 255, 0.55); }
.top-search .form-control:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent-on-dark);
  color: #fff;
  box-shadow: 0 0 0 0.15rem rgba(228, 0, 43, 0.3);
}

.alk-nav.navbar {
  /* !important + 2-class specificity overrides dynamicpricing's
     `.navbar-dark { background-color:#949494 !important }` */
  background: var(--hero) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--hairline-dark);
  padding: 0;
  /* DP's sheet also ships `.navbar { margin-bottom: 10px }`, which pushed a
     10px gap between the nav and the breadcrumb on every page. Same two-class
     specificity, and this file loads later, so a plain 0 clears it. */
  margin-bottom: 0;
}
/* .alk-container is a flex child of the Bootstrap navbar, so it shrinks to its
   content — force it to fill so the nav lines up with the utility strip. */
.alk-nav > .alk-container { width: 100%; }
/* Eight top-level items plus the CTA is wider than VMBackupWorks' five, so the
   row is allowed to stay a row: no wrapping above lg, and tighter link padding
   so brand + nav + CTA fit the 1280px box. */
@media (min-width: 992px) {
  .alk-nav > .alk-container { flex-wrap: nowrap; }
  .alk-nav .nav-link { padding-left: 0.7rem !important; padding-right: 0.7rem !important; }
  .alk-nav .nav-link::after { left: 0.7rem; right: 0.7rem; }
}
.alk-nav .navbar-nav { align-items: center; }
.alk-nav .nav-link {
  font-weight: 600;
  font-size: 0.96rem;
  padding: 1.15rem 0.95rem !important;
  position: relative;
}
.alk-nav .nav-link,
.alk-nav .nav-link:hover,
.alk-nav .nav-link:focus { text-decoration: none !important; }
.alk-nav .navbar-nav > .nav-item > .nav-link,
.alk-nav .navbar-nav > .nav-item > .nav-link:link,
.alk-nav .navbar-nav > .nav-item > .nav-link:visited { color: var(--on-dark) !important; }
.alk-nav .navbar-nav > .nav-item > .nav-link:hover,
.alk-nav .navbar-nav > .nav-item > .nav-link:focus,
.alk-nav .navbar-nav > .nav-item.show > .nav-link { color: var(--accent-on-dark) !important; }
.alk-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.55rem;
  height: 3px;
  background: var(--accent-on-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.alk-nav .nav-link:hover::after,
.alk-nav .nav-link:focus-visible::after,
.alk-nav .nav-item.show > .nav-link::after { transform: scaleX(1); }
.alk-nav .dropdown-toggle::after { vertical-align: middle; }
.alk-nav .dropdown-menu {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
  padding: 8px;
  margin-top: 10px;
  min-width: 268px;
}
.alk-nav .dropdown-item {
  border-radius: 0;
  padding: 10px 16px;
  font-size: 0.93rem;
}
.alk-nav .dropdown-item,
.alk-nav .dropdown-item:link,
.alk-nav .dropdown-item:visited { color: var(--ink) !important; }
.alk-nav .dropdown-item:hover,
.alk-nav .dropdown-item:focus { background: var(--tint-2) !important; color: var(--accent) !important; }
.alk-nav .dropdown-item strong { color: inherit; }
.alk-nav .alk-viewall,
.alk-nav .alk-viewall:link,
.alk-nav .alk-viewall:visited {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--accent) !important;
  font-weight: 700;
  border-radius: 0;
}
.alk-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;
}
.alk-nav .dropdown-submenu { position: relative; }
.alk-nav .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin: 0; border-radius: 0; }
@media (min-width: 992px) {
  .alk-nav .dropdown-submenu:hover > .dropdown-menu { display: block; }
}
.alk-nav .navbar-toggler { border-color: rgba(255, 255, 255, 0.25); }
/* min-height 44px: the toggler measures 40px, under the WCAG 2.5.8 tap-target
   floor. Scoped inside the media query on purpose — an unscoped `display:
   inline-flex` here has the same specificity as Bootstrap's
   `.navbar-expand-lg .navbar-toggler { display: none }` and, loading later,
   would beat it and leave the hamburger visible on desktop. */
@media (max-width: 991.98px) {
  .alk-nav .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

/* ===== FOOTER ===== */
.site-footer { color: var(--on-dark-muted); }
.footer-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); }
.footer-main { background: var(--hero); 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: var(--on-dark-muted); font-size: 0.94rem; display: inline-block; padding: 3px 0; } /* >=24px tap target; li margin reduced 9->3 to keep the same vertical rhythm */
.footer-links a:hover { color: var(--accent-on-dark); text-decoration: none; }
.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(--accent-on-dark); flex: 0 0 auto; margin-top: 2px; }
.footer-contact-item a { color: var(--on-dark-muted); }
.footer-contact-item a:hover { color: var(--accent-on-dark); text-decoration: none; }
.footer-search .form-control { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; }
.footer-search .form-control::placeholder { color: rgba(255, 255, 255, 0.5); }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 0;
  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: #fff; text-decoration: none; }
.footer-social [data-lucide], .footer-social svg { width: 20px; height: 20px; display: block; }
.footer-copyright { background: var(--black); padding: 18px 0; font-size: 0.85rem; color: var(--dim); }
.footer-copyright a { color: var(--on-dark); text-decoration: underline; }
.footer-copyright p { margin: 0; }

/* ===== MOTION ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: alk-rise 0.7s ease forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 28%;
}
@keyframes alk-rise { to { opacity: 1; transform: none; } }
@supports not (animation-timeline: view()) {
  .reveal { opacity: 1; transform: none; animation: none; }
}

/* =============================================================================
   ALLIAKIT — page bands. Namespace .alk-*.

   PALETTE MAPPING — AlliaKit's Seagate tokens onto the WatchGuard palette:
     --sg-green      #6ebe49  ->  #e4002b   fills, CTA bg, active rules
     --sg-green-dim  #467c2d  ->  #b8001f   accent AS TEXT on white (6.9:1)
     --sg-dark       #11181f  ->  #232323
     --sg-slate      #1a2332  ->  #282828
     --sg-mid        #535a5f  ->  #505861
     --sg-light      #f4f4f4  ->  #f0f0f0
     --sg-border     #e4e4e4  ->  #dcdce4
     --ba-blue/navy  #0066cc  ->  #001278   saturated CTA band, AuthorityPanel
   ============================================================================= */
:root {
  --alk-accent: var(--accent);                /* #e4002b — fills, CTA surfaces, rules */
  --alk-accent-hover: var(--accent-dark);     /* #b8001f */
  /* Red-as-text needs two values. On WHITE, #b8001f is 6.9:1 (#e4002b is
     4.85:1 — passes, but sits close to the floor at 13-14px, which is most of
     the kit's label sizes). On the #232323 / #000 bands, #e4002b drops to
     3.2:1, so on-dark accent text uses the derived #ff4d5e tint (4.85:1). */
  --alk-accent-text: var(--accent-dark);
  --alk-accent-on-dark: var(--accent-on-dark);
  --alk-accent-ink: #ffffff;                  /* text on a red surface — 4.85:1 */
  --alk-dark: #232323;
  --alk-slate: #282828;
  --alk-mid: var(--muted);
  --alk-light: var(--grey);
  --alk-border: var(--line);
  --alk-navy: var(--accent-2-dark);           /* saturated CTA band + AuthorityPanel */
  --on-dark-85: rgba(255, 255, 255, 0.85);
  --on-dark-72: rgba(255, 255, 255, 0.74);
  --on-dark-65: rgba(255, 255, 255, 0.65);
  --on-dark-60: rgba(255, 255, 255, 0.6);
  --on-dark-55: rgba(255, 255, 255, 0.55);
  --on-dark-50: rgba(255, 255, 255, 0.5);
  --hairline-dark: rgba(255, 255, 255, 0.08);
}
/* ----- Tailwind-utility shims used directly in band markup ----- */
.max-w-7xl { max-width: 80rem; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.alk-container { max-width: var(--container); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); }

/* ----- 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; }
/* Column divider for side-by-side bands: a rule between columns on wide screens,
   a rule above each item once they stack. */
@media (min-width: 992px) { .border-start-lg { border-left: 1px solid var(--alk-border); } }
@media (max-width: 991.98px) { .border-start-lg { border-top: 1px solid var(--alk-border); } }
@media (max-width: 767.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: 3rem; }
}
.alk-dark { background: var(--alk-dark); color: #fff; }
.alk-black { background: #000; color: #fff; }
.alk-light { background: var(--alk-light); }
.alk-slate { background: var(--alk-slate); color: #fff; }
.alk-navy { background: var(--alk-navy); color: #fff; }
.alk-body { color: var(--alk-mid); font-size: 16px; line-height: 1.7; }
.alk-body-lg { color: var(--alk-mid); font-size: 17px; line-height: 1.75; }
/* Spec blurbs and other support copy that sits directly under a heading. */
.alk-body-sm { color: var(--alk-mid); font-size: 13.5px; line-height: 1.65; }
/* Dark-surface context. The hero bands set their own dark background rather
   than composing with .alk-dark, so they have to be listed alongside it —
   otherwise body copy inherits --alk-mid (#505861) and lands at ~1.9:1 on
   #232323. Keep this list in sync with the kicker and grid rules below. */
.alk-dark .alk-body, .alk-black .alk-body, .alk-slate .alk-body, .alk-navy .alk-body,
.alk-hero-stage .alk-body, .alk-hero-banner .alk-body, .alk-hero-icon-grid .alk-body, .alk-hero-photo .alk-body,
.alk-dark .alk-body-lg, .alk-black .alk-body-lg, .alk-slate .alk-body-lg, .alk-navy .alk-body-lg,
.alk-hero-stage .alk-body-lg, .alk-hero-banner .alk-body-lg, .alk-hero-icon-grid .alk-body-lg, .alk-hero-photo .alk-body-lg,
.alk-dark .alk-body-sm, .alk-black .alk-body-sm, .alk-slate .alk-body-sm, .alk-navy .alk-body-sm,
.alk-hero-stage .alk-body-sm, .alk-hero-banner .alk-body-sm, .alk-hero-icon-grid .alk-body-sm, .alk-hero-photo .alk-body-sm { color: var(--on-dark-72); }
.alk-h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: inherit; }
.alk-h2 { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 800; line-height: 1.1; color: inherit; }
.alk-h2-compact { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.1; color: inherit; }
.alk-h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; line-height: 1.2; color: inherit; }
/* Kicker/eyebrow: indigo on light bands, green on dark ones — see --alk-accent-text. */
.alk-kicker { color: var(--alk-accent-text); font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.alk-eyebrow-sm { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--alk-accent-text); }
.alk-dark .alk-kicker, .alk-black .alk-kicker, .alk-slate .alk-kicker, .alk-navy .alk-kicker,
.alk-hero-stage .alk-kicker, .alk-hero-banner .alk-kicker, .alk-hero-icon-grid .alk-kicker, .alk-hero-photo .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, .alk-hero-banner .alk-eyebrow-sm, .alk-hero-icon-grid .alk-eyebrow-sm, .alk-hero-photo .alk-eyebrow-sm { color: var(--alk-accent-on-dark); }
/* Headings on these heroes. The body copy, kicker and eyebrow above already get
   on-dark colours here, but the headings never did, so an h1 sat at #232323 on a
   dark photo. That the --light variant explicitly re-darkens .alk-h2 shows the
   dark variant was always meant to carry white headings; the base rule was just
   missing. */
.alk-hero-stage .alk-h1, .alk-hero-banner .alk-h1, .alk-hero-icon-grid .alk-h1, .alk-hero-photo .alk-h1,
.alk-hero-stage .alk-h2, .alk-hero-banner .alk-h2, .alk-hero-icon-grid .alk-h2, .alk-hero-photo .alk-h2,
.alk-hero-stage .alk-h2-compact, .alk-hero-banner .alk-h2-compact, .alk-hero-icon-grid .alk-h2-compact, .alk-hero-photo .alk-h2-compact,
.alk-hero-stage .alk-h3, .alk-hero-banner .alk-h3, .alk-hero-icon-grid .alk-h3, .alk-hero-photo .alk-h3 { color: #fff; }
/* Same trap for a plain <h2> (no .alk-h2 class) dropped into a dark band - the
   global h1-h6 ink colour wins over the band's inherited white. */
.alk-dark h1, .alk-dark h2, .alk-dark h3, .alk-dark h4, .alk-dark h5, .alk-dark h6,
.alk-black h1, .alk-black h2, .alk-black h3, .alk-black h4, .alk-black h5, .alk-black h6,
.alk-slate h1, .alk-slate h2, .alk-slate h3, .alk-slate h4, .alk-slate h5, .alk-slate h6,
.alk-navy h1, .alk-navy h2, .alk-navy h3, .alk-navy h4, .alk-navy h5, .alk-navy h6 { color: inherit; }
.alk-dark .alk-panel h1, .alk-dark .alk-panel h2, .alk-dark .alk-panel h3,
.alk-navy .alk-panel h1, .alk-navy .alk-panel h2, .alk-navy .alk-panel h3,
.alk-slate .alk-panel h1, .alk-slate .alk-panel h2, .alk-slate .alk-panel h3,
.alk-black .alk-panel h1, .alk-black .alk-panel h2, .alk-black .alk-panel h3 { color: var(--ink); }
.alk-grid { border-left: 1px solid var(--alk-border); border-top: 1px solid var(--alk-border); }
.alk-grid > [class*="col"] { border-right: 1px solid var(--alk-border); border-bottom: 1px solid var(--alk-border); }
.alk-dark .alk-grid, .alk-black .alk-grid, .alk-slate .alk-grid { border-left-color: var(--hairline-dark); border-top-color: var(--hairline-dark); }
.alk-dark .alk-grid > [class*="col"], .alk-black .alk-grid > [class*="col"], .alk-slate .alk-grid > [class*="col"] { border-right-color: var(--hairline-dark); border-bottom-color: var(--hairline-dark); }

/* ----- AuthBadge ----- */
.alk-authbadge { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--alk-accent); background: #000; padding: 0.5rem 0.75rem; }
.alk-authbadge.is-light { background: transparent; }
.alk-authbadge .lbl { color: var(--alk-accent-on-dark); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.alk-authbadge .sub { font-weight: 600; font-size: 11px; white-space: nowrap; color: var(--on-dark-50); }
.alk-authbadge.is-light .lbl { color: var(--alk-accent-text); }
.alk-authbadge.is-light .sub { color: var(--alk-mid); }

/* ----- 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 0.15s, border-color 0.15s, color 0.15s; }
.alk-btn:hover { text-decoration: none; }
.alk-btn--md { font-size: 15px; padding: 14px 28px; letter-spacing: 0.01em; }
.alk-btn--sm { font-size: 13px; padding: 9px 18px; }
.alk-btn--primary { background: var(--alk-accent); color: var(--alk-accent-ink); letter-spacing: 0.01em; }
.alk-btn--primary:hover { background: var(--alk-accent-hover); color: var(--alk-accent-ink); }
.alk-btn--secondary-dark { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); letter-spacing: 0.02em; }
.alk-btn--secondary-dark:hover { border-color: #ffffff80; color: #fff; }
.alk-btn--secondary-light { background: transparent; color: var(--ink); border: 1px solid var(--ink); letter-spacing: 0.02em; }
.alk-btn--secondary-light:hover { background: var(--ink); color: #fff; }
.alk-btn--ghost-dark { background: transparent; color: var(--on-dark-55); padding: 6px 0; }
.alk-btn--ghost-dark:hover { color: #fff; }
.alk-btn--ghost-light { background: transparent; color: var(--alk-accent-text); padding: 6px 0; }
.alk-btn--ghost-light:hover { color: var(--alk-dark); }

.alk-dark .alk-body a, .alk-slate .alk-body a, .alk-navy .alk-body a, .alk-black .alk-body a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.alk-dark .alk-body a:hover, .alk-slate .alk-body a:hover, .alk-navy .alk-body a:hover, .alk-black .alk-body a:hover { color: var(--alk-accent-on-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(--alk-accent-on-dark); font-weight: 600; font-size: 13px; }
.alk-stat .lbl { font-weight: 700; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-dark-60); margin-bottom: 8px; }
.alk-stat .track { position: relative; height: 1px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-bottom: 8px; }
.alk-stat .fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--alk-accent); }
.alk-stat .ctx { font-size: 11px; color: var(--on-dark-60); line-height: 1.6; margin: 0; }

/* ===== .alk-stat light variant =====
   .alk-stat is white-ink and only legible on a dark band, but plenty of
   sections show stats on a light one (they were .alk-stat cards before the
   AlliaKit conversion). This restores that treatment: a raised white card with
   dark ink, keeping the same .lbl/.num/.track/.ctx contract. */
.alk-stat--light { background: var(--surface-raised); border: 1px solid var(--alk-border); padding: 1.75rem; height: 100%; }
.alk-stat--light .lbl { color: var(--muted); }
.alk-stat--light .num { color: var(--ink); }
.alk-stat--light .unit { color: var(--alk-accent-text); }
.alk-stat--light .track { background: var(--alk-border); }
.alk-stat--light .ctx { color: var(--alk-mid); }

/* ===== .alk-panel: light surface inside a dark band =====
   The CTA form sits on white inside .alk-navy, but `.alk-navy .alk-body`
   (and friends) colour their children for a dark backdrop, which wins over an
   inherited ink colour and renders white-on-white. This resets the children.
   Must stay AFTER the band rules to win the cascade at equal specificity. */
.alk-panel { background: #fff; padding: 2.5rem; color: var(--ink); }
.alk-panel .alk-h1, .alk-panel .alk-h2, .alk-panel .alk-h2-compact,
.alk-panel .alk-h3 { color: var(--ink); }
.alk-panel .alk-body, .alk-panel .alk-body-lg { color: var(--alk-mid); }
.alk-panel .alk-kicker, .alk-panel .alk-eyebrow-sm { color: var(--alk-accent-text); }

/* ----- ResourceCard ----- */
.alk-rescard { display: flex; flex-direction: column; text-decoration: none; background: #fff; transition: background 0.15s; height: 100%; }
a.alk-rescard:hover, a.alk-rescard:focus-visible { background: var(--alk-light); text-decoration: none; }
.alk-rescard .title { font-weight: 700; color: var(--alk-dark); font-size: 14px; line-height: 1.4; margin-bottom: 8px; }
.alk-rescard .desc { flex-grow: 1; font-size: 13px; color: var(--alk-mid); line-height: 1.65; margin-bottom: 12px; }
.alk-rescard .cta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--alk-mid); font-weight: 600; }
.alk-badge { display: inline-block; font-weight: 700; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 0; padding: 3px 7px; }
.alk-badge--grey { background: var(--alk-border); color: var(--alk-mid); }
.alk-badge--dark { background: var(--alk-dark); color: #fff; }
.alk-badge--accent { background: var(--alk-accent); color: var(--alk-accent-ink); }

/* ----- 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(--alk-dark); min-height: 140px; }
.alk-prodcard .tag { font-weight: 700; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--alk-accent-on-dark); }
.alk-prodcard .name { font-weight: 700; color: #fff; font-size: 17px; margin-top: 4px; }
.alk-prodcard .sub { color: var(--on-dark-50); 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(--alk-mid); margin-bottom: 8px; }
.alk-prodcard .spec .dash { color: var(--alk-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(--ink); transition: color 0.15s; }
.alk-prodcard .learn:hover { color: var(--alk-accent-text); }

/* ----- ProductImageCard (image header) ----- */
.alk-imgcard { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--alk-border); }
/* Was a dark plate. Roughly a third of the product PNGs have white baked in, so
   those cards showed a white box floating on black. White throughout, with a
   hairline doing the separating, so every tile reads the same way. */
.alk-imgcard .imgwrap { background: #fff; border-bottom: 1px solid var(--alk-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: 0.14em; text-transform: uppercase; color: var(--alk-accent-text); margin-bottom: 8px; }
.alk-imgcard .name { font-weight: 700; font-size: 17px; color: var(--alk-dark); margin-bottom: 6px; line-height: 1.3; }
.alk-imgcard .desc { font-size: 15.5px; color: var(--alk-mid); line-height: 1.7; flex-grow: 1; margin-bottom: 20px; }
/* Card actions. .ds is the purchase action and gets the button; it used to be
   12px muted text, quieter than the .learn link sitting next to it. Both clear
   a 44px touch target. */
/* ----- ResCard: resource tiles (datasheets, comparison charts, brochures) -----
   Fixed 16:10 frame so covers and product shots share one height, 19px title
   instead of .alk-h3 (which clamps up to 28px and wrapped to three lines),
   equal padding, action pinned to the bottom so buttons line up across a row. */
.alk-rescard { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--alk-border); }
.alk-rescard__frame { aspect-ratio: 16/10; background: #fff; border-bottom: 1px solid var(--alk-border); overflow: hidden; }
.alk-rescard__frame img { width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; }
.alk-rescard__body { display: flex; flex-direction: column; flex-grow: 1; padding: 1.5rem; }
.alk-rescard__kind { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--alk-mid); margin-bottom: 8px; }
.alk-rescard__title { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--alk-dark); margin: 0 0 8px; }
.alk-rescard__desc { font-size: 15px; line-height: 1.6; color: var(--alk-mid); margin: 0 0 20px; }
.alk-rescard__foot { margin-top: auto; }
.alk-rescard__foot .alk-btn { min-height: 44px; font-size: 14px; }
@media (max-width: 575.98px) { .alk-rescard__frame { aspect-ratio: 21/9; } .alk-rescard__body { padding: 1.25rem; } }

.alk-imgcard .cardactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.alk-imgcard .ds { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; background: var(--alk-accent); color: var(--alk-accent-ink); text-decoration: none; transition: background 0.15s; }
.alk-imgcard .ds:hover { background: var(--alk-accent-hover); color: var(--alk-accent-ink); text-decoration: none; }
.alk-imgcard .learn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; }
.alk-imgcard .learn:hover { color: var(--alk-accent-text); }

/* ----- FAQItem ----- */
.alk-faq { border-top: 1px solid var(--alk-border); }
.alk-faq__item { border-bottom: 1px solid var(--alk-border); }
.alk-faq__ico { flex-shrink: 0; margin-top: 2px; }
.alk-faq__ico .ico-plus { color: var(--alk-mid); }
.alk-faq__ico .ico-minus { color: var(--alk-accent-text); }
.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(--alk-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(--alk-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, 102, 204, 0.08), 0 8px 40px rgba(0, 0, 0, 0.14), 0 0 80px rgba(0, 102, 204, 0.1); }
.alk-floatcard .pad { padding: 3.5rem 3rem; }

/* ----- TrustChecklist ----- */
/* Hero support image, right column. Product shots range from 604x254 letterbox to
   1494x1494 square; uncapped, a square one renders ~380px tall and shoves the
   headline and CTA down the band. Cap the height so every hero keeps its shape. */
.alk-sec .col-lg-4.offset-lg-1 > img { max-height: 260px; width: auto; max-width: 100%; }
.alk-trust { display: flex; flex-direction: column; gap: 0.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: 0.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(--alk-accent-on-dark); }
.alk-trust--dark .row span { color: var(--on-dark-85); }
.alk-trust--ba-blue [data-lucide] { color: var(--alk-accent-on-dark); }
.alk-trust--ba-blue .row span { color: #fff; }

/* ----- AuthorityPanel ----- */
.alk-authority { background: var(--alk-navy); 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, 0.2); padding-top: 20px; margin-top: 20px; }
.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, 0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.alk-authority .op span { font-size: 13px; color: rgba(255, 255, 255, 0.9); }
.alk-authority .foot { font-size: 12px; color: #fff; display: flex; align-items: center; gap: 8px; }
/* Links inherit the accent red, which reads at 3.19:1 on --alk-navy and fails AA.
   Underlined white instead, so the link is still obviously a link. */
.alk-navy a:not(.alk-btn),
.alk-authority a:not(.alk-btn) { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3px; }
.alk-navy a:not(.alk-btn):hover,
.alk-authority a:not(.alk-btn):hover { color: #fff; text-decoration-color: #fff; }

/* ----- PartnerGrid ----- */
.alk-partners { display: flex; flex-wrap: wrap; gap: 1px; background: var(--alk-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 0.15s; }
.alk-partners a:hover { background: var(--alk-light); }
.alk-partners span { font-weight: 800; font-size: 18px; color: var(--alk-dark); letter-spacing: -0.01em; }
.alk-partners img { max-height: 40px; width: auto; }
/* A single partner mark leading a section: sized to its own content and left
   aligned, rather than stretched across the full row like a logo wall. */
.alk-partners--lead { display: inline-flex; }
.alk-partners--lead .cell { flex-grow: 0; padding: 20px 32px; }
.alk-partners--lead img { max-height: 46px; }

/* ----- TechTabs ----- */
.alk-techtabs { display: grid; gap: 0; }
.alk-tab { width: 100%; text-align: left; border: 0; position: relative; padding: 0.75rem; background: #fff; color: var(--alk-mid); transition: background 0.15s, color 0.15s; cursor: pointer; }
.alk-tab.is-active { background: var(--alk-dark); color: #fff; }
.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(--alk-accent); }
.alk-tabpanel { background: #fff; border: 1px solid var(--alk-border); border-top: 0; }
.alk-tabpanel[hidden] { display: none; }
.alk-tabpanel .aside { background: var(--alk-light); padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.alk-tabpanel .aside .spec { font-weight: 700; color: var(--alk-dark); font-size: 1.75rem; margin-bottom: 4px; }
.alk-tabpanel .aside .speclbl { font-weight: 600; text-transform: uppercase; font-size: 11px; color: var(--alk-mid); letter-spacing: 0.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: 0.15em; color: var(--alk-accent-text); margin-bottom: 12px; }
.alk-tabpanel .main p { color: var(--alk-mid); font-size: 15px; line-height: 1.75; max-width: 560px; margin: 0; }

/* ----- SubNav (sticky in-page anchors) ----- */
.alk-subnav { position: sticky; top: 0; z-index: 20; width: 100vw; margin-left: calc(50% - 50vw); background: #fff; border-bottom: 1px solid var(--alk-border); }
.alk-subnav.is-stuck { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
.alk-subnav .inner { display: flex; gap: 1.5rem; min-height: 52px; align-items: center; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
.alk-subnav .alk-btn { flex: 0 0 auto; align-self: center; }
.alk-subnav .inner::-webkit-scrollbar { display: none; }
.alk-subnav a { white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--alk-mid); align-self: stretch; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; text-decoration: none; }
.alk-subnav a.alk-btn { align-self: center; border-bottom: 0; color: var(--alk-accent-ink); }
.alk-subnav a:hover { color: var(--alk-dark); }
.alk-subnav a.is-active { color: var(--alk-dark); border-bottom-color: var(--alk-accent); }

/* Dark variant. Used when the sub-nav sits directly under a dark band so the two
   read as one block instead of a white seam, and so it stays legible once stuck
   over light content below. */
/* One step lighter than --alk-dark plus a hairline above, so the bar separates
   from the hero band it sits under instead of merging into it. Deliberately not
   an accent rule on top: a coloured bar there reads as template decoration. */
.alk-subnav--dark { background: var(--alk-slate); border-top: 1px solid var(--hairline-dark); border-bottom-color: var(--hairline-dark); }
.alk-subnav--dark a { color: var(--on-dark-72); }
.alk-subnav--dark a:hover { color: #fff; }
.alk-subnav--dark a.is-active { color: #fff; border-bottom-color: var(--alk-accent); }
.alk-subnav--dark.is-stuck { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }

/* Mobile: drop the optional entries, tighten the gap, and fade the right edge so
   the remaining overflow is visible rather than silent. */
@media (max-width: 767.98px) {
  .alk-subnav { position: relative; }
  .alk-subnav .inner { gap: 1.1rem; }
  /* .alk-subnav a sets display:inline-flex, so this needs the same specificity. */
  .alk-subnav a.alk-subnav__opt { display: none; }
  .alk-subnav::after { content: ""; position: absolute; top: 0; right: 0; width: 40px; height: 100%; pointer-events: none; z-index: 1; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff); }
  .alk-subnav--dark::after { background: linear-gradient(to right, rgba(27, 27, 27, 0), var(--alk-slate)); }
  /* The primary action stays put while the links scroll under it, so it is never
     the item hidden past the edge. */
  .alk-subnav .inner > .alk-btn { position: sticky; right: 0; z-index: 2; margin-left: auto; box-shadow: -14px 0 12px -6px var(--alk-slate); }
  .alk-subnav:not(.alk-subnav--dark) .inner > .alk-btn { box-shadow: -14px 0 12px -6px #fff; }
}

/* ----- Product card foot -----
   Price and buttons travel together and are pinned to the bottom of the cell,
   so the money line lands on the same baseline in every card in a row however
   long the description or the spec list above it runs. Without this the price
   floated mid-copy and the grid did not read as a shop. */
.alk-prodcard__foot { padding-top: 1rem; border-top: 1px solid var(--alk-border); }
.alk-prodcard__msrp { font-size: 13px; color: var(--muted-2); }
.alk-prodcard__msrp s { text-decoration-thickness: 1px; }
.alk-prodcard__note { font-size: 13.5px; line-height: 1.5; color: var(--alk-mid); }
.alk-prodcard__note a { color: var(--alk-accent-text); }
/* Badges sit on the product shot rather than in the text flow. In the flow they
   pushed each card's title to a different line, so nothing aligned across a row. */
.alk-prodcard__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 1; }
.p-4.h-100.d-flex.flex-column { position: relative; }
/* Product shots vary in aspect, which pushed each card's title to a different
   height. One ratio, contained not cropped, so the titles line up across a row
   and no appliance gets clipped. */
/* aspect-ratio alone won't hold: max-height:100% resolves against the figure's own
   content-driven height, so a portrait shot stretches the box and the card titles
   fall out of line. Take the image out of flow so the ratio is the only thing sizing it. */
.p-4.h-100.d-flex.flex-column > .alk-media { aspect-ratio: 16/9; position: relative; display: block; }
/* The grid hairline already encloses the cell, so a framed figure inside it reads
   as a border drawn around a border. Drop the stroke. The fill stays white because
   a fair few product PNGs have white baked in, and on a tinted cell those would
   otherwise show as a plate with no edge, which looks worse than the border did. */
.p-4.h-100.d-flex.flex-column > .alk-media--light { border: 0; background: #fff; }
.p-4.h-100.d-flex.flex-column > .alk-media img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Compare picker tiles. This is a chooser, not a listing, so the whole set has
   to be visible at once rather than scrolled past three at a time. */
#cmp-track .alk-imgcard .imgwrap { aspect-ratio: 16/10; }
#cmp-track .alk-imgcard .body { padding: 0.85rem; }
#cmp-track .alk-imgcard .name { font-size: 14px; margin-bottom: 4px; }
#cmp-track .alk-imgcard .desc { font-size: 12px; line-height: 1.45; margin-bottom: 10px; }
#cmp-track .alk-btn { width: 100%; justify-content: center; }
/* Six tiles on one row so the whole choice is visible without scrolling.
   Bootstrap's col-2 is 16.6667% and six of those total 100.0002%, just enough
   to wrap the last tile; 16.5% leaves the rounding somewhere to go. */
/* css/styles.css still carries #cmp-track from the old horizontal scroll rail:
   display:flex with gap:1rem and overflow:auto. The rebuilt pages reuse that id
   on a Bootstrap row, so the stray gap was added on top of the gutters and
   pushed the sixth tile onto its own line. Neutralised for rebuilt pages only. */
main #cmp-track { gap: 0; overflow: visible; padding-block: 0; }

/* ----- Legal prose -----
   Terms and privacy pages are one long run of <p> with <strong> acting as the
   headings. The kit has no component for that and should not grow one; this
   just makes the existing markup readable: a bounded measure, room between
   paragraphs, and the bold run-in heads given some air above them. */
.alk-legal { max-width: 68ch; }
.alk-legal p { color: var(--alk-mid); font-size: 15px; line-height: 1.8; margin-bottom: 1.15rem; }
.alk-legal p > strong:first-child { display: inline-block; color: var(--alk-dark); margin-top: 0.75rem; }
.alk-legal h2, .alk-legal h3 { font-size: 1.0625rem; font-weight: 700; color: var(--alk-dark); margin: 2rem 0 0.75rem; }
.alk-legal ul, .alk-legal ol { color: var(--alk-mid); font-size: 15px; line-height: 1.8; padding-left: 1.25rem; margin-bottom: 1.15rem; }
.alk-legal a { color: var(--alk-accent-text); }
.alk-legal u { text-underline-offset: 3px; }

/* ===== Legacy (not yet rebuilt) pages =====
   These load this sheet too. Nothing here styles the kit; it only repairs what
   the kit's base rules disturb, or what the old markup never handled. Delete a
   rule here once its page is rebuilt. */

/* The old product template opens each section with a bare <h2> and no space
   above it, so the heading collides with the block before it. */
body:not(:has(main)) #overview > h2,
body:not(:has(main)) #features > h2,
body:not(:has(main)) #specifications > h2 { margin-top: 2.5rem; }

/* ----- Breadcrumbs (left-aligned strip under the primary nav) ----- */
.alk-breadcrumb { background: #fff; border-bottom: 1px solid var(--alk-border); }
.alk-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0.7rem 0; font-size: 0.82rem; }
.alk-breadcrumb li { display: flex; align-items: center; gap: 0.5rem; color: var(--alk-mid); }
.alk-breadcrumb li:not(:last-child)::after { content: "/"; color: var(--alk-border); }
.alk-breadcrumb a { color: var(--alk-mid); text-decoration: none; }
.alk-breadcrumb a:hover { color: var(--alk-accent-text); text-decoration: underline; }
.alk-breadcrumb li[aria-current="page"] { color: var(--alk-dark); font-weight: 600; }

/* ----- CTA form (translucent inputs on the saturated CTA band) ----- */
.alk-form .form-control,
.alk-form .form-select { border-radius: 0; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; }
.alk-form .form-control::placeholder { color: var(--on-dark-55); }
.alk-form .form-control:focus,
.alk-form .form-select:focus { background: rgba(255, 255, 255, 0.16); border-color: var(--alk-accent); color: #fff; box-shadow: none; }
.alk-form .form-select option { color: var(--ink); }
.alk-form .alk-btn { border-radius: 0; width: 100%; justify-content: center; }


/* ----- LinkCard ----- */
.alk-linkcard { display: flex; flex-direction: column; justify-content: space-between; height: 100%; text-decoration: none; padding: 22px; border: 1px solid var(--alk-border); background: #fff; transition: border-color 0.15s, background 0.15s; }
a.alk-linkcard:hover, a.alk-linkcard:focus-visible { border-color: var(--alk-accent); background: var(--alk-light); 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: 0.14em; text-transform: uppercase; color: var(--alk-accent-text); margin-bottom: 10px; }
.alk-linkcard .title { font-weight: 700; font-size: 16px; color: var(--alk-dark); margin-bottom: 8px; line-height: 1.3; }
.alk-linkcard .desc { font-size: 13px; color: var(--alk-mid); line-height: 1.6; }
.alk-linkcard .go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--alk-accent-text); margin-top: 16px; }
.alk-linkcard--dark { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
a.alk-linkcard--dark:hover, a.alk-linkcard--dark:focus-visible { border-color: var(--alk-accent); }
.alk-linkcard--dark .eyebrow { color: var(--alk-accent-on-dark); }
.alk-linkcard--dark .title { color: #fff; }
.alk-linkcard--dark .desc { color: var(--on-dark-55); }
.alk-linkcard--dark .go { color: var(--alk-accent-on-dark); }

/* ----- Quote ----- */
.alk-quote { margin: 0; border-left: 3px solid var(--alk-accent); padding: 8px 0 8px 24px; }
.alk-quote p { font-size: 1.25rem; font-weight: 700; color: var(--alk-dark); line-height: 1.45; margin: 0 0 16px; }
.alk-quote footer { font-size: 14px; color: var(--alk-mid); }
.alk-quote footer strong { color: var(--alk-dark); display: block; }
/* Source line under an attributed pull-quote: who, where it was published, and
   any disclosure the platform flagged. Quieter than the name, still readable. */
.alk-quote footer .meta { display: block; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); margin-top: 3px; }
.alk-quote footer .meta a { color: inherit; text-decoration: underline; }
.alk-quote footer .meta a:hover { color: var(--alk-accent-text); }
.alk-quote--dark footer .meta { color: var(--on-dark-55); }
.alk-quote--dark footer .meta a:hover { color: var(--alk-accent-on-dark); }
.alk-quote--dark p { color: #fff; }
.alk-quote--dark footer { color: var(--on-dark-55); }
.alk-quote--dark footer strong { color: var(--alk-accent-on-dark); }
.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 ----- */
.alk-media { background: #000; padding: 8px; }
/* height:auto is load-bearing. Every <img> here carries its real intrinsic
   width/height attributes (required, so the browser reserves the right box and
   the page does not shift on load). Without height:auto the attribute wins over
   the width:100% and the image is stretched vertically whenever the column is
   narrower than the file — a 3312x1757 hero rendered 560x1757. */
.alk-media img { display: block; width: 100%; height: auto; }
.alk-media--light { background: transparent; padding: 0; border: 1px solid var(--alk-border); }
/* Line-art diagrams (panel callouts, port maps) read at their own scale, not at
   column width. Cap them and caption them instead of blowing them up. */
.alk-media--diagram { max-width: 420px; padding: 1.25rem; }
.alk-media--diagram figcaption { margin-top: 0.75rem; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); }
.alk-media--thumb { aspect-ratio: 16/10; overflow: hidden; }
.alk-media--thumb img { height: 100%; object-fit: cover; }

/* ----- PillarCard ----- */
.alk-pillar { transition: background 0.15s; }
.alk-pillar svg, .alk-pillar [data-lucide] { color: var(--alk-accent-text); }
.alk-pillar .num { font-weight: 700; font-size: 10px; letter-spacing: 0.15em; color: var(--alk-accent-text); }
.alk-pillar .title { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--alk-dark); margin: 14px 0 8px; }
.alk-pillar .body { font-size: 14px; line-height: 1.7; color: var(--alk-mid); margin: 0; }
.alk-pillar--dark svg, .alk-pillar--dark [data-lucide] { color: var(--alk-accent-on-dark); }
.alk-pillar--dark .num { color: var(--alk-accent-on-dark); }
.alk-pillar--dark .title { color: #fff; }
.alk-pillar--dark .body { color: var(--on-dark-55); }

/* ----- CategoryCard ----- */
.alk-catcard { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: #fff; border: 1px solid var(--alk-border); transition: border-color 0.2s; }
a.alk-catcard:hover, a.alk-catcard:focus-visible { border-color: var(--alk-accent); text-decoration: none; }
.alk-catcard .imgwrap { background: var(--alk-dark); overflow: hidden; aspect-ratio: 1/1; }
.alk-catcard .imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
a.alk-catcard:hover .imgwrap img, a.alk-catcard:focus-visible .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: 0.14em; text-transform: uppercase; color: var(--alk-accent-text); margin-bottom: 8px; }
.alk-catcard .name { font-weight: 700; font-size: 17px; color: var(--alk-dark); margin-bottom: 8px; line-height: 1.3; }
.alk-catcard .desc { font-size: 14px; color: var(--alk-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(--ink); }
a.alk-catcard:hover .go, a.alk-catcard:focus-visible .go { color: var(--alk-accent-text); }

/* ----- SpecTable ----- */
.alk-spectable { background: #fff; padding: 1.5rem; border: 1px solid var(--alk-border); }
.alk-spectable > .wrap { overflow-x: auto; }
.alk-spectable table { width: 100%; margin: 0; border-collapse: collapse; }
.alk-spectable th, .alk-spectable td { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--alk-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(--alk-dark); text-align: left; }
.alk-spectable td { color: var(--alk-mid); }
.alk-spectable__note { margin: 1.25rem 0 0; font-size: 13px; line-height: 1.6; color: var(--alk-mid); }
@media (min-width: 768px) { .alk-spectable { padding: 2.5rem; } }

/* ----- CompareTable ----- */
.alk-comparetable { background: #fff; padding: 1.5rem; border: 1px solid var(--alk-border); }
.alk-comparetable > .wrap { overflow-x: auto; }
.alk-comparetable table { width: 100%; margin: 0; border-collapse: collapse; }
.alk-comparetable th, .alk-comparetable td { padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--alk-border); vertical-align: top; font-size: 13px; line-height: 1.55; }
.alk-comparetable thead th { border-bottom: 2px solid var(--alk-dark); font-weight: 700; color: var(--alk-dark); text-align: left; white-space: nowrap; background: #fff; }
.alk-comparetable tbody th[scope="row"] { font-weight: 700; color: var(--alk-dark); text-align: left; background: #fff; position: sticky; left: 0; min-width: 190px; }
.alk-comparetable tbody td { color: var(--alk-mid); min-width: 170px; }
.alk-comparetable tr:last-child th, .alk-comparetable tr:last-child td { border-bottom: 0; }
.alk-comparetable thead th a { color: var(--alk-accent-text); text-decoration: none; border-bottom: 1px solid rgba(228, 0, 43, 0.4); }
.alk-comparetable thead th a:hover { color: var(--alk-accent-text); border-bottom-color: var(--alk-accent-text); text-decoration: none; }
@media (min-width: 768px) { .alk-comparetable { padding: 2.5rem; } .alk-comparetable th, .alk-comparetable td { font-size: 14px; } }
.alk-comparetable__note { margin: 1.25rem 0 0; font-size: 13px; line-height: 1.6; color: var(--alk-mid); }
.alk-comparetable__thumb { width: 52px; height: 24px; object-fit: contain; margin-right: 10px; vertical-align: middle; flex: 0 0 auto; }
/* Model cell: thumb and name stay on one line so the spec columns start at a constant x.
   Kept as a table-cell - flex here would drop the header out of the column grid. */
.alk-comparetable tbody th[scope="row"] { white-space: nowrap; min-width: 212px; vertical-align: middle; }
.alk-comparetable tbody td { min-width: 110px; }
/* Lineup tables carry long metric names - let those headers wrap rather than
   pushing the whole table into horizontal scroll on a desktop width. */
.alk-tabpanel .alk-comparetable thead th { white-space: normal; }
.alk-details__body .alk-comparetable thead th { white-space: normal; }
/* Accordion bodies are inset, so the model column gets a little less room. */
.alk-details__body .alk-comparetable tbody th[scope="row"] { min-width: 194px; }
.alk-comparetable tbody th[scope="row"] a { color: var(--alk-dark); text-decoration: none; border-bottom: 1px solid var(--alk-border); }
.alk-comparetable tbody th[scope="row"] a:hover { color: var(--alk-accent-text); border-bottom-color: var(--alk-accent-text); }
/* Thumbnails are recognition aids, not data - drop them where the row header has to stay narrow. */
@media (max-width: 767.98px) { .alk-comparetable__thumb { display: none; } .alk-comparetable tbody th[scope="row"] { min-width: 140px; } .alk-comparetable tbody td { min-width: 120px; } }

/* ----- SiteIndex (products.asp / category sitemaps) -----
   The source's shape here is a nested link index, not a set of product cards,
   so this is a typographic index: a ruled group heading, sub-headings, and
   link lists separated by whitespace. No boxes. */
.alk-index { height: 100%; }
.alk-index__head { font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 800; line-height: 1.2; margin: 0 0 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--alk-accent); }
.alk-index__head, .alk-index__head a { color: var(--alk-dark); text-decoration: none; }
.alk-index__head a:hover { color: var(--alk-accent-text); text-decoration: none; }
.alk-index__sub { font-size: 0.98rem; font-weight: 700; letter-spacing: 0.02em; margin: 1.75rem 0 0.6rem; color: var(--alk-dark); }
.alk-index__sub:first-of-type { margin-top: 0; }
.alk-index__sub a { color: inherit; text-decoration: none; }
.alk-index__sub a:hover { color: var(--alk-accent-text); }
.alk-index p { margin: 1.5rem 0 0.5rem; font-size: 0.98rem; }
.alk-index p strong { color: var(--alk-dark); }
.alk-index ul { list-style: none; margin: 0; padding: 0; }
.alk-index ul ul { margin: 4px 0 10px; padding-left: 14px; border-left: 1px solid var(--alk-border); }
.alk-index li { font-size: 0.9rem; line-height: 1.5; color: var(--alk-mid); }
.alk-index li > a { display: inline-block; padding: 4px 0; color: var(--alk-mid); text-decoration: none; border-bottom: 1px solid transparent; }
.alk-index li > a:hover, .alk-index li > a:focus-visible { color: var(--alk-accent-text); border-bottom-color: var(--alk-accent); text-decoration: none; }
.alk-index li > strong > a { font-weight: 700; color: var(--alk-dark); }
.alk-index .redText { color: var(--alk-accent-text); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.alk-index .badge { border-radius: 0; font-weight: 700; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 767.98px) { .alk-index li > a { padding: 8px 0; } }

/* ----- SpecTable / CompareTable helpers -----
   The source product tables carry .row-header / .redText / .smallText, which
   are not defined anywhere on the site. They still mean something (band row,
   accent text, footnote), so they are defined here scoped INSIDE the AlliaKit
   tables — a bare .redText rule would repaint 450 pages that were not rebuilt. */
.alk-spectable tr.row-header td,
.alk-comparetable tr.row-header td {
  background: var(--alk-dark);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.alk-spectable .alk-st-key { width: 30%; }
.alk-spectable .redText, .alk-comparetable .redText { color: var(--alk-accent-text); font-weight: 700; }
.alk-sec .smallText { display: block; margin-top: 1.25rem; font-size: 12px; line-height: 1.6; color: var(--alk-mid); }

/* Tier-comparison cells */
.alk-comparetable .alk-ct-icon { width: 8%; text-align: center; }
.alk-comparetable .alk-ct-icon img { max-width: 50px; height: auto; }
.alk-comparetable .alk-ct-center { text-align: center; vertical-align: middle; }
.alk-comparetable .alk-ct-tier { width: 18%; text-align: center; }
.alk-comparetable .alk-ct-yes { width: 22px; height: 22px; color: var(--alk-mid); vertical-align: middle; }
.alk-comparetable .alk-ct-yes--accent { color: var(--alk-accent-text); }
.alk-comparetable .alk-ct-indent { display: inline-block; padding-left: 15px; }

/* ----- PDP: gallery + buy box -----
   E-commerce shape for a product page: the image and the live DynamicPricing
   price sit side by side above the fold, and the subscription tables move down
   into a Configure & buy section. Same tokens as the rest of the kit. */
.alk-gallery__stage { background: var(--alk-dark); border: 1px solid var(--alk-border); display: flex; align-items: center; justify-content: center; padding: 2.5rem; min-height: 340px; }
.alk-gallery__stage img { max-height: 280px; width: auto; object-fit: contain; }
.alk-gallery__thumbs { display: flex; gap: 1px; margin-top: 1px; background: var(--alk-border); }
.alk-gallery__thumb { border: 0; padding: 10px; background: var(--alk-dark); cursor: pointer; line-height: 0; transition: background 0.15s; }
.alk-gallery__thumb img { height: 62px; width: auto; object-fit: contain; }
.alk-gallery__thumb:hover { background: #000; }
.alk-gallery__thumb.is-active { background: #000; box-shadow: inset 0 -3px 0 var(--alk-accent); }
.alk-gallery__caption { margin: 1rem 0 0; font-size: 13px; line-height: 1.6; color: var(--alk-mid); max-width: 62ch; }

.alk-buybox { border: 1px solid var(--alk-border); background: #fff; padding: 2rem; position: sticky; top: 72px; }
.alk-buybox__price { border-top: 1px solid var(--alk-border); border-bottom: 1px solid var(--alk-border); padding: 1.25rem 0; margin-bottom: 1.5rem; }
.alk-buybox__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--alk-mid); margin-bottom: 0.75rem; }
/* DynamicPricing emits its own markup here (a <center>, a .price span and a
   .btn-warning submit). Re-tone it rather than fork the shared renderer. */
.alk-buybox__price center { text-align: left; }
.alk-buybox__price p { margin: 0 0 0.5rem; font-size: 14px; color: var(--alk-mid); }
.alk-buybox__price strong { color: var(--alk-dark); }
.alk-buybox__price del { color: var(--muted-2); }
.alk-buybox__price .price { display: block; font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; color: var(--alk-dark); }
.alk-buybox__price form { margin: 0; }
.alk-buybox__trust { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.alk-buybox__trust li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--alk-mid); border-bottom: 1px solid var(--line-soft); }
.alk-buybox__trust li:last-child { border-bottom: 0; }
.alk-buybox__trust [data-lucide] { flex: 0 0 auto; color: var(--alk-accent-text); }
/* Same list under the gallery, where the column is wide enough to run it in two
   tracks instead of one long stack. */
.alk-buybox__trust--wide { margin-top: 1.75rem; border-top: 1px solid var(--alk-border); padding-top: 0.5rem; }
@media (min-width: 576px) { .alk-buybox__trust--wide { column-count: 2; column-gap: 2.5rem; } .alk-buybox__trust--wide li { break-inside: avoid; } }
.alk-buybox__note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted-2); }
@media (max-width: 991.98px) { .alk-buybox { position: static; } }

/* At-a-glance strip: the overview icons laid on their side under the buy box. */
.alk-atglance { padding-top: 0; padding-bottom: 0; }
/* The three CDN icons are near-black line art (measured avg luminance 12-30) and
   this band is #232323, so unfiltered they disappear into it. The files are WORM'd
   on R2 and can't be re-cut, so knock them to flat white here. brightness(0) first
   flattens the red accents to black, then invert(1) takes everything opaque to
   white; transparent areas are untouched, so the counters still read. */
.alk-atglance .alk-pillar img { flex: 0 0 auto; filter: brightness(0) invert(1); }
/* 55% white at 14px was too faint for copy that is carrying the product pitch. */
.alk-atglance .alk-pillar .body { color: var(--on-dark-85); font-size: 15px; }
.alk-atglance .alk-pillar .body strong { color: #fff; }

/* Sticky buy bar — appears once the buy box has scrolled past. */
.alk-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--alk-dark); border-top: 1px solid var(--alk-accent); }
.alk-buybar .inner { display: flex; align-items: center; gap: 1rem; padding-top: 10px; padding-bottom: 10px; }
.alk-buybar__name { flex: 1 1 auto; color: #fff; font-weight: 700; font-size: 15px; }
.alk-buybar .alk-btn--secondary-light { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.alk-buybar .alk-btn--secondary-light:hover { background: #fff; color: var(--alk-dark); }
@media (max-width: 575.98px) { .alk-buybar__name { display: none; } .alk-buybar .alk-btn { flex: 1 1 0; justify-content: center; } }

/* ----- PDP configurator ----- */
.alk-config { border-top: 1px solid var(--alk-border); border-bottom: 1px solid var(--alk-border); padding: 1.5rem 0; margin-bottom: 1.5rem; }
.alk-config__field { margin-bottom: 1rem; }
.alk-config__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--alk-mid); margin-bottom: 0.4rem; }
.alk-config__select { width: 100%; min-height: 44px; padding: 0.6rem 0.75rem; font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 0; }
.alk-config__select:focus { outline: none; border-color: var(--alk-accent); box-shadow: 0 0 0 2px rgba(228, 0, 43, 0.18); }
.alk-config__name { margin: 1.25rem 0 0.5rem; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--alk-dark); }
.alk-config__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.alk-config__sku { font-size: 13px; color: var(--alk-mid); }
.alk-config__list { font-size: 14px; color: var(--muted-2); text-decoration: line-through; }
.alk-config__ourlabel { flex: 1 0 100%; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--alk-mid); margin-top: 4px; }
.alk-config__ourlabel:empty { display: none; }
.alk-config__our { flex: 1 0 100%; font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; color: var(--alk-dark); }
.alk-config__cart form { margin: 0.9rem 0 0; }
/* DP renders its own .btn-warning submit; re-tone it rather than fork the
   shared renderer, which every other page on the site also uses. */
.alk-config__includes:empty { display: none; }
.alk-config__includes { margin: 0.9rem 0 0; font-size: 12px; line-height: 1.55; color: var(--alk-mid); }

/* ----- Details disclosure (full part-number table) ----- */
.alk-details { border: 1px solid var(--alk-border); background: #fff; }
.alk-details__summary { cursor: pointer; list-style: none; padding: 1rem 1.25rem; font-weight: 700; font-size: 14px; color: var(--alk-dark); display: flex; align-items: center; gap: 10px; }
.alk-details__summary::-webkit-details-marker { display: none; }
.alk-details__summary::after { content: "+"; margin-left: auto; font-size: 18px; line-height: 1; color: var(--alk-accent-text); }
.alk-details[open] > .alk-details__summary::after { content: "−"; }
.alk-details__summary:hover { color: var(--alk-accent-text); }
.alk-details__body { border-top: 1px solid var(--alk-border); padding: 1.25rem; }

/* ----- DynamicPricing table -----
   DP renders its price list as Bootstrap rows, not a <table>, and ships no
   separators of its own: every row runs into the next. These rules give it the
   same ruled-row treatment as .alk-spectable without touching the shared
   renderer, which every other site in the org also uses. */
.pricing.card { border: 1px solid var(--alk-border); background: #fff; }
.pricing .card-header {
  background: var(--alk-dark); color: #fff; border-bottom: 0; border-radius: 0;
  padding: 0.85rem 1.25rem;
  font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.pricing .card-body { padding: 0; }
/* Group heading: its own ruled band, so the eye can find where a family starts. */
.pricing .card-subheading {
  background: var(--alk-light);
  border-top: 1px solid var(--alk-border);
  border-bottom: 1px solid var(--alk-border);
  padding: 0.8rem 1.25rem;
  font-size: 14px; line-height: 1.4; color: var(--alk-dark);
}
.pricing .card-body > .card-subheading:first-child { border-top: 0; }
.pricing .card-subheading strong { font-weight: 700; }
.pricing .panel-subtext {
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--alk-border);
  background: var(--tint);
  font-size: 12px; line-height: 1.6; color: var(--alk-mid);
}
/* Product row. Bootstrap's negative row margin is zeroed so the rule spans the
   full card width instead of stopping short of it. */
.pricing .card-body > .row {
  margin: 0;
  align-items: center;
  padding: 0.9rem 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.12s;
}
.pricing .card-body > .row:last-child { border-bottom: 0; }
.pricing .card-body > .row:hover { background: var(--tint-2); }
.pricing .card-body > .row > [class*="col-"] { padding-left: 0.75rem; padding-right: 0.75rem; }
.pricing .col-sm-7 { font-size: 14px; line-height: 1.45; color: var(--alk-dark); }
.pricing .col-sm-7 strong { font-weight: 600; }
.pricing .col-sm-3 { font-size: 13px; line-height: 1.55; color: var(--alk-mid); font-variant-numeric: tabular-nums; }
.pricing .col-sm-3 del { color: var(--muted-2); }
.pricing .price { font-weight: 700; color: var(--alk-dark); }
.pricing .col-sm-2 { text-align: right; }
.pricing .col-sm-2 form { margin: 0; }
.pricing .btn-warning {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--alk-accent); border: 0; color: var(--alk-accent-ink);
  font-weight: 700; font-size: 13px; padding: 9px 16px; white-space: nowrap;
}
.pricing .btn-warning:hover { background: var(--alk-accent-hover); color: var(--alk-accent-ink); }
.pricing .btn-warning.mx-auto { margin-left: auto !important; margin-right: 0 !important; }
@media (max-width: 575.98px) {
  .pricing .card-body > .row { padding: 1rem 0.5rem; row-gap: 8px; }
  .pricing .col-sm-2 { text-align: left; }
  .pricing .btn-warning { width: 100%; min-height: 44px; }
  .pricing .btn-warning.mx-auto { margin-left: 0 !important; }
}

/* ----- ModelIndex ----- */
.alk-modelindex { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--alk-border); display: flex; flex-direction: column; gap: 1.25rem; }
.alk-modelindex .lbl { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--alk-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(--alk-dark); background: #fff; border: 1px solid var(--alk-border); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.alk-modelindex a:hover { border-color: var(--alk-accent); color: var(--alk-accent-text); text-decoration: none; }
.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, 0.04); border-color: var(--hairline-dark); color: #fff; }
.alk-dark .alk-modelindex a:hover, .alk-black .alk-modelindex a:hover { border-color: var(--alk-accent-on-dark); color: var(--alk-accent-on-dark); }

/* ----- Hero: photo band ----- */
.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(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.84) 42%, rgba(0, 0, 0, 0.34) 70%, rgba(0, 0, 0, 0.04) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.45) 100%);
}
.alk-hero-photo .alk-h1 { text-shadow: 0 2px 20px rgba(0, 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(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.91) 100%); }
}

/* Modifier: alk-hero-photo--light
   For banner artwork that is itself light-ground with the subject held to the
   right and deliberate empty space at the left for copy. The stock dark scrim
   would mute that artwork, so the ramp inverts
   to white and the copy switches to ink. Band background is --tint (#fbfbfb),
   which is within ~1% of the banners' own #f9f9f9 ground, so the transparent
   letterbox padding baked into the images blends invisibly. */
.alk-hero-photo--light { background: var(--tint); color: var(--ink); }
.alk-hero-photo--light::after {
  background:
    linear-gradient(90deg, rgba(251, 251, 251, 0.94) 0%, rgba(251, 251, 251, 0.86) 40%, rgba(251, 251, 251, 0.30) 66%, rgba(251, 251, 251, 0) 88%);
}
.alk-hero-photo--light .alk-h1,
.alk-hero-photo--light .alk-h1, .alk-hero-photo--light .alk-h2,
.alk-hero-photo--light .alk-h2-compact, .alk-hero-photo--light .alk-h3 { color: var(--ink); text-shadow: none; }
.alk-hero-photo--light .alk-body, .alk-hero-photo--light .alk-body-lg { color: var(--alk-mid); }
.alk-hero-photo--light .alk-kicker, .alk-hero-photo--light .alk-eyebrow-sm { color: var(--alk-accent-text); }
.alk-hero-photo--light .alk-hero-trust-strip { border-top-color: var(--alk-border); background: transparent; }
.alk-hero-photo--light .alk-hero-trust-item { border-right-color: var(--alk-border); }
.alk-hero-photo--light .alk-hero-trust-item .lbl { color: var(--ink); }
.alk-hero-photo--light .alk-hero-trust-item .sub { color: var(--alk-mid); }
@media (max-width: 767.98px) {
  .alk-hero-photo--light .alk-hero-trust-item { border-bottom-color: var(--alk-border); }
}
@media (max-width: 991.98px) {
  .alk-hero-photo--light::after { background: linear-gradient(180deg, rgba(251, 251, 251, 0.90) 0%, rgba(251, 251, 251, 0.95) 100%); }
}

/* Modifier: alk-hero-photo--trust
   Companion to .alk-hero-stage--trust, for a photo hero that ends in an
   .alk-hero-trust-strip. The strip is meant to sit flush on the band's bottom
   edge, so the .alk-sec bottom padding is dropped — without this the strip
   floats with 5rem of dead band beneath it. */
.alk-hero-photo--trust { padding-bottom: 0; border-top: 1px solid var(--alk-accent); }

/* ----- Hero: centered command banner ----- */
.alk-hero-banner { padding-top: 5.5rem; padding-bottom: 0; background: #000; color: #fff; border-top: 3px solid var(--alk-accent); border-bottom: 1px solid var(--hairline-dark); text-align: center; }
.alk-hero-trust-strip { margin-top: 4rem; border-top: 1px solid var(--hairline-dark); background: rgba(255, 255, 255, 0.02); }
.alk-hero-trust-item { padding: 1.5rem 1rem; border-right: 1px solid var(--hairline-dark); 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-60); }
@media (max-width: 767.98px) {
  .alk-hero-trust-item { border-right: none; border-bottom: 1px solid var(--hairline-dark); }
  .alk-hero-trust-item:last-child { border-bottom: none; }
}

/* ----- Hero: product showcase stage ----- */
.alk-hero-stage { padding-top: 4.5rem; padding-bottom: 5rem; background: var(--alk-dark); color: #fff; border-bottom: 1px solid var(--hairline-dark); position: relative; }
.alk-hero-stage--trust { padding-bottom: 0; border-top: 1px solid var(--alk-accent); }
.alk-stage-media { position: relative; background: radial-gradient(circle at center, rgba(228, 0, 43, 0.18) 0%, rgba(0, 0, 0, 0.95) 75%), #000; border: 1px solid var(--hairline-dark); 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; }

/* ----- Hero: icon-card grid ----- */
.alk-hero-icon-grid { padding-top: 4.5rem; padding-bottom: 5rem; background: var(--alk-slate); color: #fff; border-bottom: 1px solid var(--hairline-dark); }
.alk-icon-card { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hairline-dark); padding: 1.75rem; height: 100%; transition: border-color 0.2s; display: flex; flex-direction: column; justify-content: space-between; }
.alk-icon-box { width: 44px; height: 44px; background: rgba(228, 0, 43, 0.1); border: 1px solid rgba(228, 0, 43, 0.35); color: var(--alk-accent-on-dark); 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; }

/* ----- MegaMenu ----- */
.alk-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) {
  .alk-nav .dropdown-menu.alk-mega { position: static !important; transform: none !important; left: 0 !important; width: 100% !important; max-width: 100% !important; }
}
/* auto-fit, not a hard repeat(4): the MegaMenu API is documented as 2-4 columns,
   and a fixed 4 tracks left a dead ~200px track on the right of the 960px panel
   when the Solutions menu dropped to 3 categories. auto-fit collapses the empty
   tracks so 2, 3 or 4 columns each fill the panel evenly. */
.alk-mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.35rem 2rem; }
.alk-mega__col { min-width: 0; }
.alk-mega .dropdown-header { padding: 0 0 0.5rem; margin: 0 0 0.4rem; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--alk-accent-text); border-bottom: 1px solid var(--alk-border); }
.alk-mega .dropdown-item { padding: 0.45rem 0; font-size: 0.9rem; line-height: 1.35; white-space: normal; transition: padding-left 0.15s, color 0.15s; }
/* Group blurb under a mega-menu heading. */
.alk-mega__note { display: block; margin: 0 0 0.5rem; font-size: 12px; line-height: 1.5; color: var(--alk-mid); }
.alk-mega .dropdown-header i { vertical-align: -2px; margin-right: 5px; }
.alk-nav .dropdown-menu.alk-mega .dropdown-item:hover,
.alk-nav .dropdown-menu.alk-mega .dropdown-item:focus { background: transparent !important; color: var(--alk-accent-text) !important; padding-left: 0.4rem; }

/* ----- AlliaKit responsive ----- */
@media (max-width: 991px) {
  .alk-floatcard { margin: 0; padding: 0; }
  .alk-floatcard .pad { padding: 2.5rem 1.5rem; }
  .alk-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: 0.25rem; }
}
@media (max-width: 767.98px) {
  :root { --container-pad: 1.25rem; }
  /* Legacy pages use Bootstrap .container (12px sides). Bring them up to the
     same 20px gutter the AlliaKit container uses, rather than editing 350 files. */
  .container, .container-fluid { padding-left: var(--container-pad); padding-right: var(--container-pad); }
}
@media (max-width: 640px) {
  .alk-tabpanel .aside, .alk-tabpanel .main { padding: 2rem; }
}
/* WCAG 2.5.8 touch floor — scoped to mobile so desktop spacing is unchanged. */
@media (max-width: 767.98px) {
  .alk-btn--ghost-light, .alk-btn--sm { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .alk-catcard:hover .imgwrap img { transform: none !important; }
  .alk-pillar, .alk-icon-card, .alk-catcard, .alk-linkcard, .alk-btn { transition: none; }
}

/* ===== YouTubeLightbox (AlliaKit shared include) ===== */
.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(--alk-dark); aspect-ratio: 16 / 9; border-top: 3px solid var(--alk-accent); }
.allia-yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: opacity 0.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(--alk-accent); color: var(--alk-accent-ink); display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; }
.allia-yt-trigger:hover .allia-yt-playbtn-inner { background: var(--alk-accent-hover); transform: scale(1.08); }
.allia-yt-caption { background: var(--alk-slate); padding: 14px 20px; border-top: 1px solid var(--hairline-dark); }
.allia-yt-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--alk-accent-on-dark); 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(0, 0, 0, 0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.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(--on-dark-60); font-weight: 400; }
.allia-yt-close { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; cursor: pointer; padding: 6px 10px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; font-family: inherit; letter-spacing: 0.06em; transition: border-color 0.15s; }
.allia-yt-close:hover { border-color: #ffffff80; }
.allia-yt-player-wrap { width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: #000; border-top: 3px solid var(--alk-accent); }
#allia-yt-iframe { width: 100%; height: 100%; display: block; border: none; }
.allia-yt-hint { margin-top: 12px; font-size: 11px; color: var(--on-dark-50); letter-spacing: 0.04em; }

/* ===== CHROME RESPONSIVE — WCAG 2.5.8 tap targets on mobile ===== */
@media (max-width: 640px) {
  .top-search .input-group { width: 100%; max-width: 100%; }
  .top-search .form-control,
  .top-search .btn { min-height: 44px; }
  .top-search .btn { min-width: 44px; }
  .footer-links li { margin-bottom: 0; }
  .footer-links a,
  .footer-contact-item a,
  .footer-copyright a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-social a { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; animation: none; }
}

/* ===== SECTION BLEED / OVERLAP =====
   Bands flow into one another instead of reading as a stack of identical
   hard-edged boxes. Static geometry only — no motion, no layout shift, so it
   stays CLS-safe. Overlaps intrude only into a neighbour's own padding. */

/* Dark bands sit above their neighbours so the tonal hand-off reads cleanly. */
.alk-dark, .alk-black, .alk-slate, .alk-navy { position: relative; z-index: 2; }

/* Soft hand-off: a light band emerges from a near-white top edge so
   white -> grey feathers instead of hard-cutting. The bottom edge stays crisp,
   so the page keeps structure — only some transitions bleed. */
.alk-light--feather { background: linear-gradient(180deg, #ffffff 0%, var(--tint) 11%, var(--alk-light) 30%, var(--alk-light) 100%); }

/* Straddle: a band that overlaps the one above it by a fixed amount. Used
   sparingly — one per page at most. */
.alk-straddle { margin-top: -3.5rem; }
@media (max-width: 640px) { .alk-straddle { margin-top: -1.5rem; } }

/* ----- ProductHero (includes/alk-product-hero.inc) -----
   The legacy product pages led with a full-width product shot and pushed the
   price and the contact link below the fold. Copy leads, shot sits in the
   narrower column, and the image is capped so a square PNG cannot set the
   height of the band. */
.alk-phero { padding-top: 2.5rem; }
.alk-phero__partner { width: 172px; height: auto; margin-bottom: 1.25rem; }
.alk-phero__title { margin-bottom: 0.75rem; }
.alk-phero__sub { color: var(--alk-mid); margin-bottom: 1.75rem; max-width: 46ch; }
.alk-phero__note { margin: 1.25rem 0 0; color: var(--alk-mid); }
.alk-phero__trust { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--alk-border); }
.alk-phero__product { margin: 0; }
.alk-phero__product img { width: 100%; height: auto; max-height: 300px; object-fit: contain; object-position: right center; }
@media (max-width: 991.98px) {
  .alk-phero__product img { max-height: 220px; object-position: left center; }
}

/* ----- Cart button -----
   One definition for the buy action, in two sizes: --compact for a price-table
   row, --panel for a product's purchase block (full width, bigger target).
   The last selector catches the legacy .btn-warning submit that the shared
   DynamicPricing renderer emits - this site does not own that renderer, and
   every other microsite uses it, so it gets re-toned here instead of forked. */
.alk-cart,
.alk-buybox__price .btn-warning,
.alk-config__cart .btn-warning,
form[action*="addtocart"] .btn.btn-warning,
a[href*="quoterequest.asp"] > .btn.btn-warning {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--alk-accent); color: var(--alk-accent-ink);
  border: 0; border-radius: 0; font-family: inherit; font-weight: 700;
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.alk-cart:hover,
.alk-buybox__price .btn-warning:hover,
.alk-config__cart .btn-warning:hover,
form[action*="addtocart"] .btn.btn-warning:hover,
a[href*="quoterequest.asp"] > .btn.btn-warning:hover {
  background: var(--alk-accent-hover); color: var(--alk-accent-ink); text-decoration: none;
}
/* Table rows: has to sit inside a cell without setting the row height. */
.alk-cart--compact,
form[action*="addtocart"] .btn.btn-warning,
a[href*="quoterequest.asp"] > .btn.btn-warning {
  min-height: 40px; padding: 9px 18px; font-size: 13px;
}
/* Purchase panel: the page's buy action, so it takes the full column. */
.alk-cart--panel,
.alk-buybox__price .btn-warning,
.alk-config__cart .btn-warning {
  width: 100%; min-height: 48px; padding: 14px 28px; font-size: 15px;
}
.alk-buybox__price .btn-warning { margin: 0.75rem 0 0; }
.alk-cart [data-lucide], .alk-cart .fa { flex: 0 0 auto; }
.alk-cart--block { display: flex; width: 100%; }

/* ----- Hero figure -----
   Campaign banners come from the vendor at ~3.5:1, which only worked as a strip
   under the copy - the hero then read as a lone col-lg-7 with five empty columns
   beside it. This crops the banner to a square tile for the right-hand column,
   the same slot the product heroes use. Set object-position per image: these
   banners put their subject off-centre, so the default centre crop lands on
   empty gradient. */
.alk-hero-figure { margin: 0; overflow: hidden; border: 1px solid var(--hairline-dark); }
.alk-hero-figure img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
/* On a light band the dark hairline disappears. */
.alk-sec:not(.alk-dark):not(.alk-navy):not(.alk-slate):not(.alk-black) .alk-hero-figure { border-color: var(--alk-border); }
/* Stacked, a square tile eats the fold - go back to a letterbox. */
@media (max-width: 991.98px) { .alk-hero-figure img { aspect-ratio: 16 / 9; } }