/* ============================================================
   Header / Top navigation
   ============================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--charcoal);
  color: #fff;
  border-bottom: 3px solid var(--teal);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--container-x);
  height: var(--header-h);
}

header .brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: opacity var(--t-base);
}
header .brand:hover {
  text-decoration: none;
  opacity: 0.85;
}
header .brand img {
  display: block;
  height: 34px;
  width: auto;
}

/* EmSA wordmark on the right of the header. nav has flex:1 so this is
   naturally pushed to the right edge on desktop. */
.emsa-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: opacity var(--t-base);
}
.emsa-logo img {
  display: block;
  height: 45px;
  width: auto;
}
.emsa-logo:hover { opacity: 0.8; text-decoration: none; }

header nav { flex: 1; }

header nav ul {
  list-style: none;
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: wrap;
}

header nav a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  border-bottom: 2px solid transparent;
  transition: all var(--t-base);
}
header nav a:hover {
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
}
header nav a.nav-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.menu-toggle svg { width: 24px; height: 24px; }

@media (max-width: 980px) {
  header {
    height: auto;
    padding: 14px 20px;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  header nav {
    order: 3;
    flex-basis: 100%;
    display: none;
  }
  header nav.open { display: block; }
  header nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--space-2);
  }
  header nav a {
    display: block;
    padding: 14px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
  }
  header nav a.nav-active { border-bottom-color: var(--gold); }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* On mobile the EmSA wordmark stays visible on the right while the
     hamburger sits next to the home button on the left. */
  .emsa-logo {
    display: flex;
    margin-left: auto;
  }
}


/* ============================================================
   Submenu (dropdowns on desktop, accordion on mobile)
   ============================================================ */

header nav .has-submenu {
  position: relative;
}

/* Toggle button is hidden on desktop (hover handles it). Shown on mobile. */
header nav .submenu-toggle {
  display: none;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
}

/* Submenu list. The base header rule (display: flex on every header nav ul)
   would otherwise lay submenu items out horizontally; ul.submenu opts out and
   is hidden by default. */
header nav ul.submenu {
  list-style: none;
  display: none;
  flex-direction: column;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* Desktop: open as absolute dropdown on hover or keyboard focus-within. */
@media (min-width: 981px) {
  header nav .has-submenu:hover > ul.submenu,
  header nav .has-submenu:focus-within > ul.submenu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--charcoal);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid var(--teal);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    padding: 6px 0;
    z-index: 60;
  }
  header nav .submenu a {
    display: block;
    padding: 9px 18px;
    border: none;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: var(--lh-normal);
    background: transparent;
  }
  header nav .submenu a:hover,
  header nav .submenu a:focus {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
  }
  header nav .submenu a.nav-active {
    color: var(--gold);
  }
}

/* Mobile (hamburger nav open): toggle button visible, submenu opens inline as
   an indented accordion controlled by aria-expanded. */
@media (max-width: 980px) {
  header nav .has-submenu {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  header nav .has-submenu > a {
    flex: 1;
  }
  header nav .submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    color: rgba(255, 255, 255, 0.78);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform var(--t-base);
  }
  header nav .submenu-toggle[aria-expanded="true"] {
    color: var(--gold);
    transform: rotate(180deg);
  }
  header nav ul.submenu {
    flex-basis: 100%;
  }
  header nav .has-submenu .submenu-toggle[aria-expanded="true"] ~ ul.submenu {
    display: block;
    background: rgba(0, 0, 0, 0.18);
  }
  header nav .submenu a {
    display: block;
    padding: 12px 8px 12px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
  }
  header nav .submenu a.nav-active {
    color: var(--gold);
    border-bottom-color: var(--gold);
  }
}


/* ============================================================
   Hero (landing page intro band)
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #2D2D2D 55%, #1d4d3f 100%);
  color: #fff;
  padding: var(--space-20) var(--container-x) var(--space-24);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/bg-texture-lines.jpeg');
  background-size: cover;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(to bottom, var(--teal) 0%, var(--gold) 100%);
}
.hero-inner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: #fff;
  max-width: 900px;
  margin: 0;
}
.hero .lead {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-lead);
  line-height: 1.65;
  max-width: 760px;
  margin-top: var(--space-6);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  font-family: var(--font-display);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--gold);
}

@media (max-width: 600px) {
  .hero { padding: var(--space-14) 20px var(--space-16); }
}

/* Breadcrumb on dark hero — overrides the default light-bg breadcrumb colours */
.hero .breadcrumb {
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}
.hero .breadcrumb a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color var(--t-base);
}
.hero .breadcrumb a:hover,
.hero .breadcrumb a:focus {
  color: var(--gold);
}
.hero .breadcrumb .sep {
  color: rgba(255, 255, 255, 0.3);
}


/* ============================================================
   Body wrap (landing page topic-block container)
   ============================================================ */
.body-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-y) var(--container-x) 0;
}

.body-wrap > h2 {
  position: relative;
  margin-top: 0;
  margin-bottom: 14px;
  padding-left: 20px;
}
.body-wrap > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background: var(--teal);
  border-radius: 2px;
}
/* Section break: every h2 inside .body-wrap that follows another flow
   element gets the section-break top margin. Without this rule the
   section-end gap had to live on the first paragraph's margin-bottom,
   which broke as soon as a section ran longer than one paragraph
   (paragraph 1 had a huge bottom margin, paragraphs 2+ had the default,
   so the gap between p1 and p2 was visibly larger than between p2 and p3).
   The first h2 in .body-wrap is unaffected because it has no preceding
   sibling. */
.body-wrap > * + h2 {
  margin-top: var(--space-12);
}
.body-wrap > h2 + p {
  color: var(--grey-700);
  margin-top: 0;
  /* Match the default paragraph margin so the gap between paragraph 1
     and paragraph 2 of a section is the same as the gap between
     paragraphs 2 and 3. The section-end gap lives on the next h2's
     margin-top (rule above), not here. */
  margin-bottom: var(--space-4);
  padding-left: 20px;
  /* font-size, line-height, and max-width intentionally NOT set here;
     the global .body-wrap > p rule below handles them so the lead
     paragraph and subsequent paragraphs share one typographic scale
     and one column. The only remaining lead-paragraph distinction is
     the muted grey-700 color above. */
}
.body-wrap > h2 + p a {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--teal-dark);
  border-bottom: 2px solid var(--teal-light);
  padding-bottom: 2px;
  text-decoration: none;
  transition: all var(--t-base);
}
.body-wrap > h2 + p a:hover {
  border-bottom-color: var(--teal);
  color: var(--teal);
  text-decoration: none;
}

/* Global indent and width cap: every direct-child paragraph in
   .body-wrap aligns with the h2 left edge AND shares the same 960px
   reading-measure cap. Without the indent rule, paragraphs 2+ in a
   multi-paragraph section flushed left of the indented first-after-h2
   paragraph. Without the width cap, the first paragraph after each h2
   was held narrower by the lead rule above while subsequent paragraphs
   expanded to the full body-wrap, producing a visible width jump
   between p1 and p2. */
.body-wrap > p {
  padding-left: 20px;
  max-width: 960px;
  font-size: 1.05rem;
  line-height: var(--lh-relaxed);
}

@media (max-width: 600px) {
  .body-wrap > h2 { padding-left: 14px; }
  .body-wrap > h2::before { width: 3px; }
  .body-wrap > p,
  .body-wrap > h2 + p { padding-left: 14px; }
}


/* ============================================================
   Routing question card grid
   ============================================================ */
ul.routing-questions {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: var(--space-6) 0 var(--space-14);
}
ul.routing-questions li {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  transition: all var(--t-slow);
  box-shadow: var(--shadow-sm);
  margin: 0;
  padding: 0;
}
ul.routing-questions li:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
ul.routing-questions a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: var(--lh-snug);
  font-family: var(--font-display);
  text-decoration: none;
}
ul.routing-questions a:hover {
  color: var(--teal-dark);
  text-decoration: none;
}
ul.routing-questions a::after {
  content: "→";
  flex-shrink: 0;
  color: var(--teal);
  font-weight: 700;
  transition: transform var(--t-base);
}
ul.routing-questions li:hover a::after {
  transform: translateX(4px);
}

@media (max-width: 980px) {
  ul.routing-questions { grid-template-columns: 1fr; }
}


/* ============================================================
   Product callout aside (EmSA Training)
   ============================================================ */
.product-callout {
  background: linear-gradient(135deg, var(--ink) 0%, var(--charcoal) 100%);
  color: #fff;
  padding: var(--space-10) clamp(28px, 4vw, 48px);
  border-radius: var(--radius-md);
  margin: var(--space-8) 0 var(--space-16);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
}
/* When markup is unwrapped (h3 + p + a as direct children),
   make text span full width and let the CTA wrap onto its own row. */
.product-callout > h3,
.product-callout > p {
  grid-column: 1 / -1;
}
.product-callout > .cta-link {
  justify-self: start;
}
.product-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/bg-texture-lines.jpeg') center / cover;
  opacity: 0.06;
  pointer-events: none;
}
.product-callout::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gold);
}
.product-callout > * { position: relative; z-index: 1; }

.product-callout h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: var(--ls-tight);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 10px;
}
.product-callout h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.product-callout p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: var(--lh-normal);
  max-width: 600px;
  margin: 0;
}

.product-callout .cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--gold);
  color: var(--charcoal);
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: all var(--t-base);
}
.product-callout .cta-link:hover {
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}

/* Leading clickable icon — same href as the CTA, slight zoom on hover */
.callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 12px;
  transition: transform 0.25s ease, background 0.25s ease;
}
.callout-icon:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}
.callout-icon:focus-visible {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.12);
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* tier: soft — single standalone icon on a plain card surface. */
.callout-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--icon-shadow-soft);
}

@media (max-width: 980px) {
  .product-callout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-8) 28px;
  }
  .product-callout .cta-link { justify-self: start; }
  .callout-icon { width: 64px; height: 64px; padding: 10px; justify-self: start; }
}

/* ---------- Two-column row wrapping for back-to-back product callouts ----------
   Place consecutive <aside class="product-callout"> blocks inside a single
   <div class="product-callout-row"> to render them side by side. A trailing
   odd-count item spans the full row so it does not sit lonely in a half-column. */
.product-callout-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin: var(--space-8) 0 var(--space-16);
}
.product-callout-row > .product-callout {
  margin: 0;
  grid-template-columns: 1fr;
  text-align: left;
  align-items: start;
}
.product-callout-row > .product-callout > * { grid-column: 1 / -1; }
.product-callout-row > .product-callout > .callout-icon { justify-self: start; }
.product-callout-row > .product-callout > .cta-link    { justify-self: start; }
/* Trailing odd item: span full width, restore horizontal layout */
.product-callout-row > .product-callout:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.product-callout-row > .product-callout:last-child:nth-child(odd) > * {
  grid-column: auto;
}
.product-callout-row > .product-callout:last-child:nth-child(odd) > h3,
.product-callout-row > .product-callout:last-child:nth-child(odd) > p {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .product-callout-row { grid-template-columns: 1fr; }
  .product-callout-row > .product-callout:last-child:nth-child(odd) {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   FAQ section
   ============================================================ */
.faq {
  background: var(--grey-100);
  margin: 0 calc(-1 * var(--container-x));
  padding: var(--section-y) var(--container-x);
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
  position: relative;
}

.faq > h2 {
  max-width: var(--max-w);
  margin: 0 auto var(--space-2);
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.faq > h2::before { display: none; }
.faq > h2::after {
  content: "FAQ";
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  color: var(--teal);
  background: var(--teal-light);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
}

.faq h3,
.faq > h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}

.faq > h3 {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-6) 0;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.faq > h3::before {
  content: "Q";
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  line-height: 26px;
  margin-right: var(--space-3);
  vertical-align: middle;
  font-family: var(--font-mono);
}

.faq > p {
  max-width: var(--max-w);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-2) var(--space-6) var(--space-6) 62px;
  font-size: 0.97rem;
  color: var(--grey-700);
  line-height: var(--lh-relaxed);
}
.faq > p a { font-weight: 600; }

@media (max-width: 600px) {
  .faq > h3 { padding: var(--space-5) 18px 0; }
  .faq > p  { padding: var(--space-2) 18px var(--space-5) 56px; }
}


/* ============================================================
   Footer
   ============================================================ */
footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.55);
  padding: var(--space-14) var(--container-x) var(--space-8);
  border-top: 3px solid var(--teal);
  text-align: center;
}

footer .footer-copy {
  font-family: var(--font-display);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  margin-bottom: var(--space-6);
}

footer .footer-links {
  list-style: none;
  padding: var(--space-6) 0;
  margin: 0 0 var(--space-7, 28px);
  display: flex;
  gap: var(--space-2) var(--space-7, 28px);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
footer .footer-links a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  transition: color var(--t-fast);
}
footer .footer-links a:hover {
  color: var(--gold);
  text-decoration: none;
}
footer .footer-links a svg { display: block; }

footer .footer-legal {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  gap: var(--space-2) var(--space-5);
  flex-wrap: wrap;
  justify-content: center;
}
footer .footer-legal a {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.04em;
  font-family: var(--font-display);
  font-weight: 500;
  transition: color var(--t-fast);
}
footer .footer-legal a:hover {
  color: var(--gold);
  text-decoration: none;
}

@media (max-width: 600px) {
  footer .footer-links { gap: var(--space-2) var(--space-4); }
  footer .footer-legal { gap: var(--space-2) var(--space-4); }
}


/* ============================================================
   Language toggle (legal pages only)
   ============================================================ */
.lang-toggle {
  font-size: var(--text-sm);
  margin: var(--space-3) 0 0;
  letter-spacing: 0.02em;
}
.lang-toggle a {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-md);
  color: var(--charcoal);
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.lang-toggle a:hover,
.lang-toggle a:focus {
  background: var(--teal-light);
  color: var(--teal-deep);
  border-color: var(--teal);
}

/* Override for dark hero — the legal pages use the standard .hero (dark
   gradient), so the default charcoal-on-light styling above is invisible
   there. Switch to light text + translucent border. */
.hero .lang-toggle a {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
}
.hero .lang-toggle a:hover,
.hero .lang-toggle a:focus {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: var(--gold);
}


/* ============================================================
   Other site components (preserved from previous design)
   ============================================================ */

.breadcrumb {
  font-size: var(--text-sm);
  color: var(--grey-600);
  margin: 0 0 var(--space-4);
  letter-spacing: 0.02em;
}

.breadcrumb a {
  color: var(--grey-700);
}

.breadcrumb a:hover,
.breadcrumb a:focus {
  color: var(--teal-dark);
}

.breadcrumb .sep {
  margin: 0 var(--space-2);
  color: var(--grey-300);
}

.tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--teal-deep);
  color: #ffffff;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  margin-right: var(--space-2);
  vertical-align: middle;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.sl-matrix {
  font-size: var(--text-sm);
}

.sl-matrix th {
  font-size: var(--text-xs);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}

.sl-matrix td {
  text-align: center;
  font-family: var(--font-mono);
}

.sl-matrix td:first-child {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  background: var(--grey-50);
  color: var(--ink);
}

.sl-matrix caption {
  caption-side: bottom;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--grey-600);
  padding-top: var(--space-2);
  line-height: var(--lh-snug);
}

.matrix-legend {
  font-size: var(--text-sm);
  color: var(--grey-600);
  margin-top: 0;
}

.glossary h3 {
  border-bottom: 1px solid var(--grey-200);
  padding-bottom: var(--space-2);
  color: var(--teal-deep);
}

.resource-card {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-8);
  margin-bottom: var(--space-4);
  background: #ffffff;
  transition: box-shadow var(--t-base), border-color var(--t-base);
}

.resource-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--grey-300);
}

.resource-card h3 {
  margin-top: 0;
  color: var(--teal-deep);
}


/* ============================================================
   Spec / feature card row (icon-topped, staggered pop-in)
   Direct child of .body-wrap; carries its own 20px indent and
   960px cap to align with the h2 pill instead of inheriting the
   global .body-wrap > p rule. Used on /spsec/crypto.html (AEAD
   constructions) and /spsec/hardware.html (security functions).
   ============================================================ */
.spec-cards {
  display: grid;
  gap: 14px;
  padding-left: 20px;
  max-width: 960px;
  margin: var(--space-6) 0 var(--space-12);
  clear: both;
}
.spec-cards--3 { grid-template-columns: repeat(3, 1fr); }

.spec-card {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-5) var(--space-6);
  opacity: 0;
  transform: translateY(8px);
  animation: spec-card-pop 0.45s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 0.12s);
}
.spec-card-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  margin-bottom: var(--space-3);
  filter: var(--icon-shadow-soft);
}
.spec-card h3 {
  margin: 0 0 var(--space-2);
  color: var(--teal-deep);
}
.spec-card-meta {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--teal-dark);
  font-weight: 600;
}
.spec-card p {
  margin: 0;
  font-size: 0.97rem;
  line-height: var(--lh-snug);
  color: var(--grey-700);
}
@keyframes spec-card-pop {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .spec-card { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  .spec-cards--3 { grid-template-columns: 1fr; }
  .spec-cards { padding-left: 14px; }
}


/* ============================================================
   Defense-in-depth layered diagram
   ============================================================ */
.did-diagram {
  margin: var(--space-8) 0 var(--space-12);
  max-width: 720px;
}

.did-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.did-diagram figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--grey-600);
  line-height: var(--lh-snug);
  font-style: italic;
  text-align: center;
}

/* Dark panel: presents a diagram that has a dark/black canvas as an
   intentional dark card on the light page, instead of a raw black block. */
.did-diagram--dark img {
  background: #000;
  padding: 14px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  border: 1px solid var(--grey-300);
  box-shadow: var(--shadow-sm);
}

/* Collage figure: several diagrams plus an icon tile in a 2x2 grid, used on
   /spsec/ ("What SPsec Is"). Each piece sits on its own light card. */
.spsec-collage {
  max-width: 880px;
  margin: var(--space-8) auto var(--space-12);
}
.spsec-collage > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--grey-200);
}

/* Right-aligned floating diagram: body text wraps to its left. Sized about
   30% smaller than the inline figure cap. Headings clear the float so a new
   section always starts below it. */
.did-diagram--float {
  float: right;
  width: 46%;
  max-width: 500px;
  margin: var(--space-1) 0 var(--space-5) var(--space-8);
}
.body-wrap h2 { clear: right; }
@media (max-width: 760px) {
  .did-diagram--float {
    float: none;
    width: auto;
    max-width: 560px;
    margin: var(--space-8) 0 var(--space-12);
  }
}


/* ---------- Landing hero side visual: layered shells centred, icons orbit ---------- */

.hero--with-visual .hero-inner {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.hero--with-visual .hero-text {
  flex: 1 1 auto;
  min-width: 0;
}

.hero-visual {
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, 28vw, 320px);
  aspect-ratio: 1;
}
.hv-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96%;
  height: 96%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  display: block;
  object-fit: contain;
}
.hv-center > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}
a.hv-center {
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease;
}
a.hv-center:hover,
a.hv-center:focus-visible {
  filter: brightness(1.12);
}
a.hv-center:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
/* Plain-icon variant (used on /risk-assessment/): smaller, no circle backdrop */
.hv-center.hv-center--plain {
  width: 67%;
  height: 67%;
  background: transparent;
  border-radius: 0;
}
.hv-ring {
  position: absolute;
  inset: 0;
  animation: hv-orbit 40s linear infinite;
}
.hv-icon {
  position: absolute;
  width: 56px;
  height: 56px;
  object-fit: contain;
  animation: hv-counter 40s linear infinite;
}
.hv-icon-top { top: -8%;    left: calc(50% - 28px); }
.hv-icon-bl  { bottom: -2%; left: -2%; }
.hv-icon-br  { bottom: -2%; right: -2%; }

@keyframes hv-orbit   { to { transform: rotate(360deg);  } }
@keyframes hv-counter { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hv-ring,
  .hv-icon { animation: none; }
}

@media (max-width: 860px) {
  .hero--with-visual .hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-visual {
    align-self: center;
    width: clamp(200px, 60vw, 260px);
  }
}

/* ---------- Hero side visual: zoning bridge (copied verbatim from can_security, used on /use-cases/) ----------
   The SPsec icon traverses the visible bridge lines. Positions and keyframe
   waypoints are percentages of the container, so the animation scales with the
   image and stays locked to the lines in the PNG. The chained
   .hero-visual.hero-visual--zoning-bridge selector raises specificity above the
   base .hero-visual rule AND the mobile media-query override of .hero-visual. */
.hero-visual.hero-visual--zoning-bridge {
  position: relative;
  width: 100%;
  max-width: 436px;
  aspect-ratio: 578 / 584;
  margin: 0 auto;
}

.hero-visual.hero-visual--zoning-bridge .zb-bridge {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hero-visual--zoning-bridge .zb-icon {
  position: absolute;
  top: 42.4%;
  left: 13.5%;
  width: 14.7%;
  height: auto;
  filter: var(--icon-shadow-strong);
  animation: zb-traverse 5s ease-in-out infinite alternate;
}

@keyframes zb-traverse {
  0%   { top: 42.4%; left: 13.5%; }
  49%  { top: -1.3%; left: 13.5%; }
  76%  { top: -1.3%; left: 38.2%; }
  100% { top: 20.5%; left: 38.2%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual--zoning-bridge .zb-icon { animation: none; }
}

/* ---------- Hero side visual: zoom-in image ---------- */

.hero-visual--zoom-in > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  animation: zoom-in 1.2s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes zoom-in {
  from { transform: scale(0.82); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--zoom-in > img { animation: none; opacity: 1; transform: none; }
}

/* ---------- Hero side visual: threat cloud + orbiting icons (used on /threats/) ----------
   Background image zooms in once; two foreground icons orbit on a slow ring. */
.hero-visual--threat-cloud { overflow: hidden; }
.threat-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96%;
  height: 96%;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(0.82);
  opacity: 0;
  animation: threat-bg-zoom 1.2s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes threat-bg-zoom {
  from { transform: translate(-50%, -50%) scale(0.82); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}
.threat-orbit {
  position: absolute;
  inset: 0;
  animation: hv-orbit 24s linear infinite;
  pointer-events: none;
}
.threat-icon {
  position: absolute;
  width: 30%;
  height: auto;
  object-fit: contain;
  animation: hv-counter 24s linear infinite;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}
.threat-icon-tl { top:  2%;    left: 2%; }
.threat-icon-br { bottom: 2%;  right: 2%; }
@media (prefers-reduced-motion: reduce) {
  .threat-bg   { animation: none; transform: translate(-50%, -50%); opacity: 1; }
  .threat-orbit,
  .threat-icon { animation: none; }
}

/* ---------- Regulations + Standards two-column layout (used on /why-now/) ---------- */

.regs-standards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: var(--section-y, 48px);
}
@media (min-width: 860px) {
  .regs-standards-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.regs-standards-grid > div > h2:first-child { margin-top: 0; }

/* ---------- Hero side visual: falling-names pile (used on /why-now/) ---------- */

.hero-visual--pile {
  overflow: hidden;
}
.pile-name {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
  opacity: 0;
  transform-origin: 50% 50%;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  animation: pile-drop 1s cubic-bezier(.45, 1.5, .45, 1) forwards;
}
@keyframes pile-drop {
  0%   { opacity: 0; transform: translateY(-180%) rotate(0deg); }
  100% { opacity: 1; transform: translateY(0)     rotate(var(--rot, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .pile-name { animation: none; opacity: 1; transform: rotate(var(--rot, 0deg)); }
}

.pn-1 { bottom:  6%; left: 10%; font-size: 28px; color: var(--gold);                --rot:  -8deg; animation-delay: 0.05s; }
.pn-2 { bottom: 14%; left: 48%; font-size: 22px; color: rgba(255, 255, 255, 0.92);  --rot:  10deg; animation-delay: 0.20s; }
.pn-3 { bottom: 26%; left: 16%; font-size: 22px; color: var(--teal-light);          --rot:  -3deg; animation-delay: 0.35s; }
.pn-4 { bottom: 14%; left: 30%; font-size: 18px; color: rgba(255, 255, 255, 0.7);   --rot:  14deg; animation-delay: 0.50s; }
.pn-5 { bottom: 40%; left: 38%; font-size: 18px; color: var(--gold);                --rot: -10deg; animation-delay: 0.65s; }
.pn-6 { bottom: 50%; left:  6%; font-size: 16px; color: var(--teal-light);          --rot:   5deg; animation-delay: 0.80s; }
.pn-7 { bottom: 60%; left: 28%; font-size: 16px; color: rgba(255, 255, 255, 0.78);  --rot:  -6deg; animation-delay: 0.95s; }

/* ---------- Hero side visual: diagonal chain reveal (used on /supply-chain-integrity/) ----------
   Bottom-left → middle → top-right. Container itself scales subtly during reveal,
   so the bounding "box" of the animation visibly changes size. */
.hero-visual--diagonal-chain {
  animation: diag-box-grow 2.4s ease-in-out forwards;
}
@keyframes diag-box-grow {
  0%   { transform: scale(0.78); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.diag-item {
  position: absolute;
  width: 24%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.5);
  animation: diag-arrive 0.55s cubic-bezier(.4, 1.4, .5, 1) forwards;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.diag-item-1 { bottom:  6%; left:   6%; animation-delay: 0.20s; }
.diag-item-2 { bottom: 40%; left:  38%; animation-delay: 0.80s; }
.diag-item-3 { top:     6%; right:  6%; animation-delay: 1.40s; }
@keyframes diag-arrive {
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--diagonal-chain { animation: none; transform: scale(1); }
  .diag-item { animation: none; opacity: 1; transform: scale(1); }
}

/* ---------- Hero side visual: fan-in card grid (used on /products/) ----------
   Wider container + 2×3 grid so each icon roughly doubles in visible size. */
.hero-visual.hero-visual--fan {
  width: clamp(260px, 34vw, 400px);
}
.hero-visual--fan {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4%;
  padding: 4%;
  place-items: center;
}
.fan-icon {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.8) rotate(-3deg);
  animation: fan-fade 0.6s ease-out forwards;
}
.fan-icon-1 { animation-delay: 0.05s; }
.fan-icon-2 { animation-delay: 0.20s; }
.fan-icon-3 { animation-delay: 0.35s; }
.fan-icon-4 { animation-delay: 0.50s; }
.fan-icon-5 { animation-delay: 0.65s; }
.fan-icon-6 { animation-delay: 0.80s; }
@keyframes fan-fade {
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fan-icon { animation: none; opacity: 1; transform: none; }
}

/* ---------- Hero side visual: stack of papers (used on /resources/) ----------
   Three file cards form a pile in the upper area; download icon lands separately
   below the pile so it has its own clear space. */
.stack-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  height: 42%;
  object-fit: contain;
  opacity: 0;
  animation: stack-drop 0.7s cubic-bezier(.4, 1.4, .5, 1) forwards;
}
.stack-card-1 { --rot:  -9deg; --dx: -12%; --dy: -38%; animation-delay: 0.10s; }
.stack-card-2 { --rot:   5deg; --dx:   8%; --dy: -42%; animation-delay: 0.40s; }
.stack-card-3 { --rot:  -3deg; --dx:  -3%; --dy: -32%; animation-delay: 0.70s; }
.stack-card-4 { --rot:   0deg; --dx:   0%; --dy:  60%; width: 32%; height: 32%; animation-delay: 1.00s; }
@keyframes stack-drop {
  from { opacity: 0; transform: translate(-50%, -160%) rotate(0); }
  to   { opacity: 1; transform: translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, 0))) rotate(var(--rot, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .stack-card { animation: none; opacity: 1; transform: translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, 0))) rotate(var(--rot, 0)); }
}

/* ---------- Hero side visual: breath-pulse (used on /contact/) ---------- */

.hero-visual--breath > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 75%;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(1);
  animation: breath-pulse 2.4s ease-in-out infinite;
}
@keyframes breath-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    }
  50%      { transform: translate(-50%, -50%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--breath > img { animation: none; }
}

/* ---------- Hero side visual: magnify tour (used on /defense-in-depth/bus-load-monitoring/) ---------- */

.hero-visual--magnify {
  overflow: hidden;
}
.magnify-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74%;
  height: 74%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  /* White halo so the light document separates from the dark hero. */
  filter: var(--icon-glow-soft);
}
.magnify-glass {
  position: absolute;
  width: 38%;
  height: auto;
  object-fit: contain;
  /* Strong drop shadow so the magnifier reads as floating above the document. */
  filter: var(--icon-shadow-strong);
  animation: magnify-tour 14s ease-in-out infinite;
}
@keyframes magnify-tour {
  0%   { top:  6%; left:  8%; }
  25%  { top:  6%; left: 54%; }
  50%  { top: 56%; left: 54%; }
  75%  { top: 56%; left:  8%; }
  100% { top:  6%; left:  8%; }
}
@media (prefers-reduced-motion: reduce) {
  .magnify-glass { animation: none; top: 30%; left: 30%; }
}

/* ---------- Hero side visual: sparkle (used on /versions/v2/) ----------
   The logo fades and scales gently into view, then a few four-point glints
   twinkle over it in sequence, the visual shorthand for "clean / pristine". */
.hero-visual--sparkle > .sparkle-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 63%;
  height: 63%;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  filter: var(--icon-glow-soft);
  animation: sparkle-img-in 1s ease-out forwards;
}
@keyframes sparkle-img-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* Slow twinkle: two gentle pulses across one 3s run, then it settles
   (no loop). With per-glint delays up to ~1.9s the effect ends by ~5s. */
.hero-visual--sparkle .sparkle {
  position: absolute;
  width: var(--s, 20px);
  height: var(--s, 20px);
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #ffe9c2 45%, rgba(255, 255, 255, 0) 72%);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  opacity: 0;
  transform: scale(0);
  animation: sparkle-twinkle 3s ease-in-out forwards;
  animation-delay: var(--d, 0s);
}
@keyframes sparkle-twinkle {
  0%       { opacity: 0; transform: scale(0)   rotate(0deg); }
  14%      { opacity: 1; transform: scale(1)   rotate(10deg); }
  28%      { opacity: 0; transform: scale(0.2) rotate(18deg); }
  56%      { opacity: 0; transform: scale(0.2) rotate(18deg); }
  70%      { opacity: 1; transform: scale(1)   rotate(26deg); }
  84%, 100% { opacity: 0; transform: scale(0)  rotate(34deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--sparkle > .sparkle-img { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .hero-visual--sparkle .sparkle { display: none; }
}

/* ---------- Hero side visual: compare orbit (used on /versions/comparison.html) ----------
   The SPsec logo sits at top centre, CANcrypt and CANsec pills at the lower
   corners, and a magnifier icon orbits all three, the visual shorthand for
   "examined side by side". Pills reuse the .topping style from the V2 page. */
.hero-visual--compare { overflow: visible; }
.hero-visual--compare .cmp-logo {
  position: absolute;
  top: 2%;
  left: 50%;
  width: 51%;
  height: auto;
  transform: translateX(-50%);
  z-index: 2;
  filter: var(--icon-glow-soft);
}
.hero-visual--compare .cmp-pill {
  position: absolute;
  z-index: 2;
  white-space: nowrap;
  transform: scale(1.5);
}
.cmp-pill--bl { bottom: 18%; left: 1%; transform-origin: left bottom; }
.cmp-pill--br { bottom: 18%; right: 1%; transform-origin: right bottom; }
.hero-visual--compare .cmp-ring {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.hero-visual--compare .cmp-zoom {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 138px;
  height: 138px;
  margin: -69px 0 0 -69px;   /* centres the icon on the top/left point */
  object-fit: contain;
  filter: var(--icon-glow-soft);
  animation: cmp-triangle 9s linear infinite;
}
/* Travel the triangle: SPsec logo (top) -> CANcrypt (lower-left) -> CANsec (lower-right). */
@keyframes cmp-triangle {
  0%   { top: 30%; left: 50%; }
  33%  { top: 73%; left: 27%; }
  66%  { top: 73%; left: 73%; }
  100% { top: 30%; left: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--compare .cmp-ring,
  .hero-visual--compare .cmp-zoom { animation: none; }
}

/* ---------- Hero side visual: logo with orbiting zoom icon (used on /spsec/) ----------
   The SPsec logo fades into view (as on the V2 page) and a magnifier orbits it. */
.hero-visual--logo-orbit > .lo-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 63%;
  height: 63%;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  filter: var(--icon-glow-soft);
  animation: sparkle-img-in 1s ease-out forwards;
}
/* Orbit centred on the lower-right of the logo. The ring diameter is 150% of
   the zoom-icon width (radius = 0.75 x icon), so the magnifier loops tightly. */
.hero-visual--logo-orbit .lo-ring {
  position: absolute;
  width: 40px;   /* circle diameter = 2 x radius; radius = 20px */
  height: 40px;
  top: 70%;
  left: 70%;
  margin: -20px 0 0 -20px;  /* circle centered 70%/70% */
  z-index: 3;
  animation: hv-orbit 14s linear infinite;
}
.hero-visual--logo-orbit .lo-zoom {
  position: absolute;
  top: -75px;
  left: 50%;
  width: 150px;
  height: 150px;
  max-width: none;   /* override global img{max-width:100%}, which here is 100% of the tiny ring */
  margin-left: -75px;
  object-fit: contain;
  filter: var(--icon-glow-soft);
  animation: hv-counter 14s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--logo-orbit > .lo-img { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .hero-visual--logo-orbit .lo-ring,
  .hero-visual--logo-orbit .lo-zoom { animation: none; }
}

/* ---------- Hero side visual: SPsec logo inside the magnifier lens (used on /spsec/) ----------
   Static magnifying glass; inside its lens the SPsec logo fades and zooms in once,
   then a single sparkle glints. Nothing loops. Lens centre of the icon is at
   ~40.4%/40.8%, inner hole ~39% of the icon width. */
.hero-visual--lens > .lens-glass {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: var(--icon-glow-soft);
  z-index: 1;
}
.hero-visual--lens > .lens-logo {
  position: absolute;
  /* Centre sits in the magnifier lens hole, nudged 10px lower for optical centring. */
  top: calc(41.5% + 10px);
  left: 41.2%;
  /* Sized to the magnifier's teal ring (~48% edge-to-edge), enlarged to fully cover it. */
  width: 52.9%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  filter: var(--icon-glow-soft);
  z-index: 2;
  animation: lens-zoom 3s ease-out forwards;
}
@keyframes lens-zoom {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.hero-visual--lens > .lens-sparkle {
  position: absolute;
  top: 27%;
  left: 50%;
  width: 24px;
  height: 24px;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #ffe9c2 45%, rgba(255, 255, 255, 0) 72%);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  opacity: 0;
  transform: scale(0);
  animation: lens-sparkle 1.3s ease-in-out forwards;
  animation-delay: 2.3s;
}
@keyframes lens-sparkle {
  0%   { opacity: 0; transform: scale(0)   rotate(0deg); }
  50%  { opacity: 1; transform: scale(1)   rotate(15deg); }
  100% { opacity: 0; transform: scale(0)   rotate(30deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--lens > .lens-logo { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .hero-visual--lens > .lens-sparkle { display: none; }
}

/* ---------- Hero side visual: wrench with orbiting key exchange (used on /spsec/keys.html) ----------
   A configuration wrench sits centred; the key-exchange handshake icon orbits it. */
.hero-visual--wrench-orbit > .wo-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 0.5;   /* static background wrench, faded to 50% */
  filter: var(--icon-glow-soft);
}
.hero-visual--wrench-orbit .wo-ring {
  position: absolute;
  inset: 12% 17% 22% 17%;
  z-index: 3;
  animation: hv-orbit 18s linear infinite;
}
.hero-visual--wrench-orbit .wo-orbit {
  position: absolute;
  top: 0;
  left: 50%;
  width: 128px;
  height: 128px;
  margin: -64px 0 0 -64px;
  object-fit: contain;
  filter: var(--icon-glow-soft);
  animation: hv-counter 18s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--wrench-orbit > .wo-img { opacity: 0.5; transform: translate(-50%, -50%); }
  .hero-visual--wrench-orbit .wo-ring,
  .hero-visual--wrench-orbit .wo-orbit { animation: none; }
}

/* ---------- Hero side visual: morph crossfade (used on /spsec/crypto.html) ----------
   Three icons stacked centre, crossfading one into the next on a 9s loop. */
.hero-visual--morph > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  height: 62%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: var(--icon-glow-soft);
  animation: morph-fade 12s ease-in-out infinite;
}
.hero-visual--morph > img:nth-child(1) { animation-delay: 0s; }
.hero-visual--morph > img:nth-child(2) { animation-delay: 4s; }
.hero-visual--morph > img:nth-child(3) { animation-delay: 8s; }
@keyframes morph-fade {
  0%   { opacity: 0; }
  17%  { opacity: 1; }
  25%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--morph > img { animation: none; opacity: 0; }
  .hero-visual--morph > img:first-child { opacity: 1; }
}

/* ---------- Hero side visual: control-plane stack (used on /spsec/control-plane.html) ----------
   Wrench top-left in the background, lock in the middle, a green gear at the
   lower-right in the foreground rotating slowly. */
.hero-visual--cp > img { position: absolute; object-fit: contain; filter: var(--icon-glow-soft); }
.hero-visual--cp .cp-wrench { top: 16%; left: 14%;  width: 37%; z-index: 1; opacity: 0.85; }
.hero-visual--cp .cp-lock   { top: 32%; left: 30%;  width: 42%; z-index: 2; }
.hero-visual--cp .cp-gear   { bottom: 0; right: 2%; width: 40%; z-index: 3; transform-origin: 50% 50%;
  animation: cp-gear-spin 18s linear infinite; }
@keyframes cp-gear-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hero-visual--cp .cp-gear { animation: none; }
}

/* ---------- Hero side visual: hardware pair (used on /spsec/hardware.html) ----------
   Two icons overlap diagonally and pulse gently in opposite phase (~10% scale). */
.hero-visual--hw > img {
  position: absolute;
  width: 56%;
  height: auto;
  object-fit: contain;
  filter: var(--icon-glow-soft);
  animation: hw-pulse 10s ease-in-out infinite;
}
.hero-visual--hw .hw-a { top: 2%;    left: 2%;  z-index: 1; }
.hero-visual--hw .hw-b { bottom: 2%; right: 2%; z-index: 2; animation-delay: -5s; }
@keyframes hw-pulse {
  0%, 100% { transform: scale(0.95); }
  50%      { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--hw > img { animation: none; }
}

/* ---------- Hero side visual: single gently pulsing icon (used on /contact/) ---------- */
.hero-visual--pulse > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: var(--icon-glow-soft);
  animation: pulse-soft 4s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%, 100% { transform: translate(-50%, -50%) scale(0.95); }
  50%      { transform: translate(-50%, -50%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--pulse > img { animation: none; }
}

/* ---------- Hero side visual: network under review (used on /spsec/architecture.html) ----------
   A network-attention icon fades in; a shield-and-magnifier "security review"
   icon zooms gently in and out at its lower-right corner. */
.hero-visual--attention > .att-base {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56%;
  height: 56%;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  filter: var(--icon-glow-soft);
  animation: sparkle-img-in 0.9s ease-out forwards;
}
.hero-visual--attention > .att-shield {
  position: absolute;
  bottom: 16%;
  right: 12%;
  width: 44%;
  height: auto;
  object-fit: contain;
  transform-origin: 60% 60%;
  filter: var(--icon-glow-soft);
  animation: att-zoom 3s ease-in-out infinite;
}
@keyframes att-zoom {
  0%, 100% { transform: scale(0.82); }
  50%      { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--attention > .att-base { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .hero-visual--attention > .att-shield { animation: none; transform: scale(1); }
}
/* Architecture-only: shield nudged 15px right; it enlarges to the right (left edge fixed). */
.hero-visual--attention > .att-shield.att-arch {
  right: calc(12% - 15px);
  transform-origin: left center;
}
/* CAN FD-only: db9 base 33% larger and at 50% opacity, held static. */
.hero-visual--attention > .att-base.att-canfd {
  width: 74%;
  height: 74%;
  opacity: 0.5;
  transform: translate(-50%, -50%) scale(1);
  animation: none;
}

/* ---------- Hero side visual: deflect (used on /defense-in-depth/local-injection-detection/) ---------- */

.deflect-shield {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.deflect-bug {
  position: absolute;
  width: 26%;
  height: auto;
  top: 8%;
  right: 6%;
  object-fit: contain;
  animation: deflect 2s ease-in-out forwards 0.4s;
}
@keyframes deflect {
  0%   { transform: translate(0, 0) rotate(0);                 opacity: 1; }
  35%  { transform: translate(-55%, 55%) rotate(-15deg);       opacity: 1; }
  50%  { transform: translate(-50%, 50%) rotate(-10deg);       opacity: 1; }
  100% { transform: translate(40%, -40%) rotate(45deg);        opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .deflect-bug { animation: none; opacity: 0.6; }
}

/* ---------- Hero side visual: gear rotate (used on /defense-in-depth/frame-authentication/) ---------- */

.hero-visual--gear > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(0);
  animation: gear-turn 1.1s cubic-bezier(.4, .8, .3, 1) forwards 0.3s;
}
@keyframes gear-turn {
  from { transform: translate(-50%, -50%) rotate(0); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--gear > img { animation: none; }
}

/* ---------- Hero side visual: alert popup (used on /defense-in-depth/anomaly-event-monitoring/) ---------- */

.alert-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88%;
  height: 88%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.alert-pop {
  position: absolute;
  width: 22%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.5);
  animation: alert-pop-in 0.4s cubic-bezier(.5, 1.6, .5, 1) forwards;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
@keyframes alert-pop-in {
  to { opacity: 1; transform: scale(1); }
}
.alert-pop-1 { top: 12%; right: 12%; animation-delay: 0.6s; }
.alert-pop-2 { top: 50%; left: 10%;  animation-delay: 1.0s; }
.alert-pop-3 { bottom: 14%; right: 22%; animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) {
  .alert-pop { animation: none; opacity: 1; transform: scale(1); }
}

/* ---------- Hero side visual: drop and lock (used on /defense-in-depth/secure-fieldbus-object-access/) ---------- */

.dl-file {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 65%;
  height: 65%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  animation: dl-glow 0.8s ease-out forwards 1.4s;
}
@keyframes dl-glow {
  0%   { filter: drop-shadow(0 0 0 transparent); }
  40%  { filter: drop-shadow(0 0 18px var(--gold)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}
.dl-key {
  position: absolute;
  top: 22%;
  left: 50%;
  width: 36%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%, -260%);
  animation: dl-drop 1.1s cubic-bezier(.4, 1.6, .5, 1) forwards 0.3s;
}
@keyframes dl-drop {
  0%   { transform: translate(-50%, -260%); opacity: 0; }
  60%  { transform: translate(-50%, 0);     opacity: 1; }
  100% { transform: translate(-50%, 0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-key  { animation: none; opacity: 1; transform: translate(-50%, 0); }
  .dl-file { animation: none; }
}

/* ---------- Hero side visual: slide from right (used on /threats/physical-access/) ---------- */

.hero-visual--slide-right > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  object-fit: contain;
  animation: slide-right 1s cubic-bezier(.3, 1.2, .4, 1) forwards;
}
@keyframes slide-right {
  from { transform: translate(60%, -50%);  opacity: 0; }
  to   { transform: translate(-50%, -50%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--slide-right > img { animation: none; opacity: 1; transform: translate(-50%, -50%); }
}

/* ---------- Hero side visual: descend from above (used on /threats/remote-attack/) ---------- */

.hero-visual--descend > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  object-fit: contain;
  animation: descend 1.2s cubic-bezier(.3, 1.2, .4, 1) forwards;
}
@keyframes descend {
  from { transform: translate(-50%, -260%); opacity: 0; }
  to   { transform: translate(-50%, -50%);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--descend > img { animation: none; opacity: 1; transform: translate(-50%, -50%); }
}

/* ---------- Hero side visual: illustration with gentle pulse (used on /defense-in-depth/) ---------- */

.hero-visual--illustration > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96%;
  height: 96%;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(1);
  animation: breath-pulse 3.0s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--illustration > img { animation: none; }
}

/* ---------- Hero side visual: glitch jitter (used on /threats/protocol-weaknesses/) ---------- */

.hero-visual--glitch > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  animation: glitch-jitter 0.8s steps(8, end) 0.6s 2;
}
@keyframes glitch-jitter {
  0%   { transform: translate(-50%, -50%);                  filter: none; }
  10%  { transform: translate(calc(-50% - 3px), -50%);      filter: hue-rotate(15deg); }
  20%  { transform: translate(calc(-50% + 3px), -50%);      filter: none; }
  30%  { transform: translate(-50%, -50%);                  filter: hue-rotate(-10deg); }
  40%  { transform: translate(calc(-50% - 2px), calc(-50% - 1px)); filter: none; }
  60%  { transform: translate(calc(-50% + 2px), -50%);      filter: none; }
  100% { transform: translate(-50%, -50%);                  filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--glitch > img { animation: none; }
}

/* ---------- Hero side visual: file + lock (used on /privacy/ and /privacy/de/) ----------
   A document zooms into view, then a padlock fades in at the lower-right —
   the document is being protected. 3 s one-shot; final state preserved. */
.pv-file {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  z-index: 1;
  filter: var(--icon-shadow-strong);
  animation: pv-file-zoom 3s ease-in-out forwards;
}
.pv-lock {
  position: absolute;
  bottom: 12%;
  right: 12%;
  width: 24%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  z-index: 2;
  filter: var(--icon-shadow-strong);
  animation: pv-lock-fade 3s ease-in-out forwards;
}
@keyframes pv-file-zoom {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  35%  { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}
@keyframes pv-lock-fade {
  0%   { opacity: 0; }
  45%  { opacity: 0; }
  70%  { opacity: 1; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-file { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .pv-lock { animation: none; opacity: 1; }
}

/* ---------- Hero side visual: file + paragraph sign (used on /imprint/ and /imprint/de/) ----------
   A document zooms into view, then a § paragraph symbol (mark of statute /
   legal-text reference) fades in at the lower-right. Mirrors the /privacy/
   file-lock pattern; only the second element differs (text glyph). */
.ip-file {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  z-index: 1;
  filter: var(--icon-shadow-strong);
  animation: pv-file-zoom 3s ease-in-out forwards;
}
.ip-paragraph {
  position: absolute;
  bottom: 8%;
  right: 18%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  opacity: 0;
  z-index: 2;
  animation: pv-lock-fade 3s ease-in-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .ip-file      { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .ip-paragraph { animation: none; opacity: 1; }
}


/* ============================================================
   Comparison table (used on /spsec/comparison.html)
   ============================================================ */
.comparison-table-wrap {
  overflow-x: auto;
  margin: clamp(24px, 4vw, 40px) 0;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-md);
  background: #fff;
}

.comparison-table {
  min-width: 980px;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
}

.comparison-table th,
.comparison-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid var(--grey-100);
}

.comparison-table thead th {
  background: var(--grey-50);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 1;
}

.comparison-table tbody td:first-child {
  font-weight: 600;
  color: var(--ink);
  background: var(--grey-50);
  width: 22%;
}

.comparison-table tr.section-header td {
  background: var(--teal-light);
  color: var(--teal-deep);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-size: var(--text-xs);
  padding: 8px 14px;
}

.comparison-table td.cell-tbd {
  color: var(--grey-500);
  font-style: italic;
}


/* ============================================================
   Compass hero visual (used on /spsec/comparison.html)
   Static compass photo as base, SPsec logo pulsing in the top-right.
   ============================================================ */
.hero-visual--compass {
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  width: clamp(280px, 36vw, 420px);
}
.hero-visual--compass .compass-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-visual--compass .compass-logo {
  position: absolute;
  bottom: 17%;
  left: 11.5%;
  width: 22%;
  height: auto;
  transform-origin: center;
  animation: compass-logo-pulse 2.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
@keyframes compass-logo-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual--compass .compass-logo { animation: none; }
}


/* ============================================================
   Pizza of ingredients (used on /index.html)
   Each item is a .topping-slot li (carrying the tooltip) wrapping
   a .topping span (the visible, rotated, translated box).
   Tooltip lives on the slot so it is not affected by the
   topping's rotation/translate transforms.
   Sizes: --sm, --md (default), --lg
   Colours: default (white), --gold, --teal, --charcoal, --ghost
   ============================================================ */
.pizza {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 var(--space-14);
  display: flex;
  flex-wrap: wrap;
  gap: 28px 36px;
  justify-content: center;
  align-items: center;
}

.topping-slot {
  position: relative;
  display: inline-flex;
  list-style: none;
}

.topping {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--grey-200);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.25;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
  cursor: default;
}

.topping--sm { font-size: var(--text-xs); padding: 6px 12px; }
.topping--md { font-size: var(--text-sm); padding: 9px 16px; }
.topping--lg {
  font-size: 1.1rem;
  padding: 14px 22px;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}

.topping--gold {
  background: var(--gold);
  color: var(--charcoal);
  border-color: var(--gold-dark);
}
.topping--teal {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal-dark);
}
.topping--charcoal {
  background: var(--charcoal);
  color: #fff;
  border-color: var(--ink);
}
.topping--ghost {
  background: transparent;
  color: var(--teal-dark);
  border-color: var(--teal);
  box-shadow: none;
}
.topping--orange {
  background: #d97a3a;
  color: #fff;
  border-color: #b86326;
}
.topping--teal-deep {
  background: var(--teal-deep);
  color: #fff;
  border-color: var(--teal-dark);
}
.topping--slate {
  background: var(--grey-700);
  color: #fff;
  border-color: var(--ink);
}

/* Per-slot rotation + translation for scattered pizza-topping feel.
   11-cycle gives broader variety than the 19 items align to. */
.pizza .topping-slot:nth-child(11n+1)  .topping { transform: rotate(-4.2deg) translate(-4px,  6px); }
.pizza .topping-slot:nth-child(11n+2)  .topping { transform: rotate( 2.8deg) translate( 7px, -3px); }
.pizza .topping-slot:nth-child(11n+3)  .topping { transform: rotate(-1.5deg) translate( 2px,  8px); }
.pizza .topping-slot:nth-child(11n+4)  .topping { transform: rotate( 4.5deg) translate(-6px, -2px); }
.pizza .topping-slot:nth-child(11n+5)  .topping { transform: rotate(-3.0deg) translate( 5px,  3px); }
.pizza .topping-slot:nth-child(11n+6)  .topping { transform: rotate( 1.0deg) translate(-8px, -5px); }
.pizza .topping-slot:nth-child(11n+7)  .topping { transform: rotate(-2.4deg) translate( 4px,  7px); }
.pizza .topping-slot:nth-child(11n+8)  .topping { transform: rotate( 3.6deg) translate(-2px, -6px); }
.pizza .topping-slot:nth-child(11n+9)  .topping { transform: rotate(-0.7deg) translate( 8px,  4px); }
.pizza .topping-slot:nth-child(11n+10) .topping { transform: rotate(-3.8deg) translate(-5px,  2px); }
.pizza .topping-slot:nth-child(11n)    .topping { transform: rotate( 2.2deg) translate( 3px, -7px); }

/* Hover/focus: snap upright, lift, raise shadow.
   Specificity matched (.pizza added) so source order resolves the cascade. */
.pizza .topping-slot:hover .topping,
.pizza .topping-slot:focus-within .topping {
  transform: rotate(0) translate(0, -2px);
  box-shadow: var(--shadow-md);
}

/* Tooltip, anchored to the slot so it is unrotated.
   Brief delay before reveal so it does not flicker on quick mouse-overs. */
.topping-slot[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  white-space: normal;
  width: max-content;
  max-width: 280px;
  padding: 10px 14px;
  background: var(--charcoal);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: 1.45;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease 0.4s, visibility 0s linear 0.55s;
  z-index: 10;
}

.topping-slot[data-tooltip]:hover::after,
.topping-slot[data-tooltip]:focus-within::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease 0.4s, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .topping { transition: none; }
  .pizza .topping-slot:hover .topping,
  .pizza .topping-slot:focus-within .topping { transform: none; }
  .topping-slot[data-tooltip]::after { transition: none; }
}