/* 4rthur_page.css — /tools.html, /team.html, /advisories.html.
   Shared chrome is duplicated verbatim across all five stylesheets by
   convention; see docs/CONVENTIONS.md.
   Rules here point at docs/CSS_RATIONALE.md instead of carrying the reasoning
   inline: there is no build step, so a comment is a delivered byte on every
   uncached load, and docs/ is 404'd in production. Put new explanations
   there. */

:root {
  --bg: #0a0a0a;
  --bg-alt: #141412;
  --bg-card: #16151300;
  --fg: #f5f5f0;
  --fg-dim: #b8b7b1;
  --muted: #6b6a66;
  --subtle: #2a2a26;
  --line: rgb(var(--fg-rgb) / 0.08);
  --line-strong: rgb(var(--fg-rgb) / 0.18);
  --accent: #ff3e1f;
  --accent-warm: #ff7a3e;
  --accent-2: #6efe6e;
  --sev-med: #ffa726;

  /* RGB triplets for alpha-tinting */
  --accent-rgb: 255 62 31;
  --accent-warm-rgb: 255 122 62;
  --accent-2-rgb: 110 254 110;
  --sev-med-rgb: 255 167 38;
  --fg-rgb: 245 245 240;
  --bg-rgb: 10 10 10;
  --bg-alt-rgb: 20 20 18;

  --italic: 'Instrument Sans', 'Times New Roman', Georgia, serif;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Spacing scale. Block level and up; gaps under 12px stay literal.
     See docs/DESIGN_SYSTEM.md "Spacing rhythm". */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 72px;
  --sp-6: 120px;

  /* Type scale, eight steps. --t-display is the one-per-page hero and sits
     outside the scale; .footer-hero is a wordmark and sits outside it too.
     See docs/DESIGN_SYSTEM.md "Type scale". */
  --t-1: 11px;
  --t-2: 13px;
  --t-3: 15px;
  --t-4: 17px;
  --t-5: clamp(19px, 1.6vw, 22px);
  --t-6: clamp(24px, 2.6vw, 30px);
  --t-7: clamp(28px, 3.4vw, 42px);
  --t-8: clamp(34px, 4.4vw, 56px);
  --t-display: clamp(38px, 5.5vw, 72px);

  /* Height of the fixed nav. Drops to 71px under 768px, where the
     nav's own padding tightens. */
  --nav-h: 81px;
}
@media (max-width: 768px) { :root { --nav-h: 71px; } }

[data-theme="light"] {
  --bg: #f7f5f0;
  --bg-alt: #eeebe2;
  --bg-card: #1a181300;
  --fg: #1a1813;
  --fg-dim: #4d4a42;
  --muted: #6b655a;
  --subtle: #d9d6cc;
  --line: rgba(26, 24, 19, 0.10);
  --line-strong: rgba(26, 24, 19, 0.22);
  --accent: #d23410;
  --accent-warm: #ab4e11;
  --accent-2: #3a7d18;
  --sev-med: #a35c00;

  --accent-rgb: 210 52 16;
  --accent-warm-rgb: 171 78 17;
  --accent-2-rgb: 58 125 24;
  --sev-med-rgb: 163 92 0;
  --fg-rgb: 26 24 19;
  --bg-rgb: 247 245 240;
  --bg-alt-rgb: 238 235 226;
}

/* Honour the OS motion setting. The scoped reduced-motion rules further down
   handle components that need more than a duration cut. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

  /* ── base reset + typography ───────────────────────────── */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-feature-settings: "ss01", "cv11";
    line-height: 1.4;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

  /* ── noise overlay ───────────────────────────────── */
  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
  }

  /* ── progress bar ───────────────────────────────── */
  .scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0%;
    background: var(--accent);
    z-index: 1000;
    box-shadow: 0 0 10px var(--accent);
  }

  /* ── nav ───────────────────────────────── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(var(--bg-rgb) / 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
  }
  .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  /* Two artwork variants, swapped by theme in CSS rather than JS so the
     correct one is painted on first frame — the inline theme script in
     <head> has already set data-theme before this rule is evaluated. */
  .logo-lockup {
    height: 28px;
    width: auto;
    display: block;
  }
  .logo-lockup--light { display: none; }
  [data-theme="light"] .logo-lockup--dark { display: none; }
  [data-theme="light"] .logo-lockup--light { display: block; }
  @media (max-width: 768px) { .logo-lockup { height: 24px; } }
  .nav-links { display: flex; gap: 32px; align-items: center; }
  .nav-links a {
    font-size: var(--t-2);
    font-weight: 400;
    color: var(--fg-dim);
    transition: color 0.2s;
    position: relative;
  }
  .nav-links a:hover, .nav-links a.active { color: var(--fg); }
  .nav-links a.active::after {
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    background: var(--accent);
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
  }
  .nav-cta {
    font-family: var(--mono);
    font-size: var(--t-2);
    letter-spacing: 0.04em;
    padding: 10px 18px;
    border: 1px solid var(--fg);
    background: var(--fg);
    color: var(--bg);
    text-transform: uppercase;
    transition: all 0.2s;
  }
  .nav-cta:hover { background: var(--accent); color: var(--fg); border-color: var(--accent); }
  .nav-links a.nav-cta {
	color: var(--bg);
  }
  .nav-links a.nav-cta:hover {
	color: var(--fg);
  }
  /* hamburger toggle */
  .nav-toggle {
    display: none;
    width: 28px; height: 28px;
    position: relative;
    border: 1.5px solid var(--fg);
    margin-left: 4px;
    flex-shrink: 0;
    background: transparent;
    transition: border-color 0.3s ease;
  }
  .nav-toggle span {
    position: absolute;
    left: 50%; top: 50%;
    width: 12px; height: 1px;
    background: var(--fg);
    transition: transform 0.3s ease, background 0.3s ease;
  }
  .nav-toggle span:nth-child(1) { transform: translate(-50%, -3px); }
  .nav-toggle span:nth-child(2) { transform: translate(-50%, 3px); }
  .nav-toggle.open { border-color: var(--accent); }
  .nav-toggle.open span { background: var(--accent); }
  .nav-toggle.open span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

  .theme-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--fg);
  background: transparent;
  margin-left: 4px;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg {
  width: 14px;
  height: 14px;
  color: var(--fg);
  transition: color 0.3s ease;
}
.theme-toggle:hover svg { color: var(--accent); }

/* show sun in dark mode (click switches to light) */
[data-theme="dark"] .theme-toggle .icon-moon,
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun,
.theme-toggle .icon-sun { display: block; }

/* show moon in light mode (click switches to dark) */
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

@media (max-width: 768px) {
  .theme-toggle { width: 26px; height: 26px; }
  .theme-toggle svg { width: 12px; height: 12px; }
}

  /* mobile menu overlay */
  .mobile-menu {
    position: fixed; inset: 0;
    z-index: 99;
    background: var(--bg);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    overflow-y: auto;
  }
  .mobile-menu.open { visibility: visible; opacity: 1; }
  .mobile-menu-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
    pointer-events: none;
  }
  .mobile-menu-inner {
    position: relative; z-index: 2;
    min-height: 100%;
    display: flex; flex-direction: column;
    padding: 100px 24px 40px;
  }
  .mobile-menu-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono);
    font-size: var(--t-1);
    color: var(--muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-menu-status {
    display: flex; align-items: center; gap: 8px;
    color: var(--accent-2);
  }
  .mobile-menu-status .pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 8px var(--accent-2);
    animation: mobile-pulse 1.6s ease-in-out infinite;
  }
  @keyframes mobile-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
  }
  .mobile-menu-list {
    list-style: none;
    flex-grow: 1;
    margin: 0; padding: 0;
  }
  .mobile-menu-list li {
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .mobile-menu.open .mobile-menu-list li { opacity: 1; transform: translateY(0); }
  .mobile-menu.open .mobile-menu-list li:nth-child(1) { transition-delay: 0.18s; }
  .mobile-menu.open .mobile-menu-list li:nth-child(2) { transition-delay: 0.24s; }
  .mobile-menu.open .mobile-menu-list li:nth-child(3) { transition-delay: 0.30s; }
  .mobile-menu.open .mobile-menu-list li:nth-child(4) { transition-delay: 0.36s; }
  .mobile-menu.open .mobile-menu-list li:nth-child(5) { transition-delay: 0.42s; }
  .mobile-menu-list a,
  .mobile-menu-list .mm-group-trigger {
    display: flex; align-items: baseline; gap: 18px;
    padding: 22px 0;
    font-size: var(--t-7);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--fg);
    line-height: 1;
  }
  .mobile-menu-list a .num,
  .mobile-menu-list .mm-group-trigger .num {
    font-family: var(--mono);
    font-size: var(--t-1);
    color: var(--accent);
    letter-spacing: 0.15em;
    font-weight: 400;
    flex-shrink: 0;
    width: 28px;
  }
  .mobile-menu-list a .lbl,
  .mobile-menu-list .mm-group-trigger .lbl { flex-grow: 1; }
  .mobile-menu-list a .arr,
  .mobile-menu-list .mm-group-trigger .arr {
    font-size: var(--t-4);
    color: var(--muted);
    transition: color 0.2s, transform 0.2s;
  }
  .mobile-menu-list a:active .arr,
  .mobile-menu-list .mm-group-trigger:active .arr { color: var(--accent); transform: translate(2px, -2px); }
  .mobile-menu-list li.active a .lbl {
    font-family: var(--italic);
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
  }
  .mobile-menu-list li.active a .num { color: var(--accent); }
  .mobile-menu-foot {
    padding-top: 28px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
  }
  .mobile-menu.open .mobile-menu-foot {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
  }
  .mobile-menu-foot .lbl {
    font-family: var(--mono);
    font-size: var(--t-1);
    color: var(--muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .mobile-menu-foot a, .mobile-menu-foot span {
    color: var(--fg-dim);
    font-size: var(--t-3);
  }
  body.menu-open { overflow: hidden; }

  /* ─── announcement bar ───
     Fixed above the nav on every page that carries .ann (all but the post it
     announces). body.has-ann offsets the page and the nav while it shows;
     html.ann-hidden (scrolled) and body.menu-open slide it away, and
     html.ann-off (dismissed, set in <head>) removes it. The same block is in
     all five stylesheets; see docs/CONVENTIONS.md. */
  :root { --ann-h: 36px; }
  .ann {
    position: fixed; top: 0; left: 0; right: 0; z-index: 101;
    height: var(--ann-h); display: flex; align-items: center; justify-content: center;
    padding: 0 48px; background: color-mix(in srgb, var(--accent) 9%, var(--bg));
    border-bottom: 1px solid rgb(var(--accent-rgb) / .3);
    transition: transform .3s ease, visibility 0s;
  }
  .ann-link { display: flex; align-items: center; gap: 12px; min-width: 0;
    font-size: var(--t-2); color: var(--fg-dim); text-decoration: none; }
  .ann-link > .ann-long, .ann-link > .ann-short { min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .ann-tag, .ann-cta { flex: none; font-family: var(--mono); font-size: var(--t-1);
    letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  .ann-link:hover { color: var(--fg); }
  .ann-link:hover .ann-cta { text-decoration: underline; text-underline-offset: 3px; }
  .ann-short { display: none; }
  .ann-x { position: absolute; right: 10px; top: 50%; translate: 0 -50%;
    display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
    background: none; border: 0; color: var(--muted); cursor: pointer; }
  .ann-x:hover { color: var(--fg); }
  .has-ann nav { transform: translateY(var(--ann-h)); transition: transform .3s ease; }
  :root:not(.ann-off) body.has-ann { padding-top: var(--ann-h); }
  .ann-hidden .ann, .menu-open .ann {
    transform: translateY(-100%); visibility: hidden;
    transition: transform .3s ease, visibility 0s .3s;
  }
  .ann-hidden .has-ann nav, .has-ann.menu-open nav, .ann-off .has-ann nav { transform: none; }
  .ann-off .ann { display: none; }
  @media (max-width: 640px) {
    .ann { justify-content: flex-start; padding: 0 44px 0 16px; }
    .ann-long { display: none; }
    .ann-short { display: inline; }
  }

  @media (max-width: 768px) {
    nav { padding: 16px 20px; }
    .nav-links { gap: 12px; }
    .nav-links a:not(.nav-cta) { display: none; }
    /* See docs/CSS_RATIONALE.md § Shared chrome > nav .nav-dd. */
    nav .nav-dd { display: none; }
    .nav-toggle { display: block; }
    .nav-cta {
      padding: 9px 14px;
      font-size: var(--t-1);
      letter-spacing: 0.03em;
      white-space: nowrap;
    }
    .mobile-menu-list a,
    .mobile-menu-list .mm-group-trigger { font-size: var(--t-6); }
  }

  /* ── shared ───────────────────────────────── */
  .container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
  :target, section[id] { scroll-margin-top: var(--nav-h); }
  @media (max-width: 768px) { .container { padding: 0 20px; } }

  .eyebrow {
    font-family: var(--mono);
    font-size: var(--t-1);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before {
    content: '';
    width: 24px; height: 1px;
    background: var(--accent);
    display: inline-block;
  }
  .section-num {
    font-family: var(--mono);
    font-size: var(--t-1);
    color: var(--muted);
    letter-spacing: 0.1em;
  }
  h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.03em; line-height: 0.98; }
  .italic-serif { font-family: var(--italic); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--accent)}

  /* ── buttons ───────────────────────────────── */
  .btn {
    font-family: var(--mono);
    font-size: var(--t-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 16px 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
  }
  .btn-primary {
    background: var(--accent);
    color: var(--fg);
    border: 1px solid var(--accent);
  }
  .btn-primary:hover { background: transparent; color: var(--accent); }
  .btn-secondary {
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--line-strong);
  }
  .btn-secondary:hover { border-color: var(--fg); background: rgba(255,255,255,0.04); }
  .btn .arrow { transition: transform 0.3s; }
  .btn:hover .arrow { transform: translateX(4px); }

  /* ── section shared ───────────────────────────────── */
  section { padding: var(--sp-6) 0; position: relative; }
  .section-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    margin-bottom: var(--sp-5);
    align-items: end;
  }
  .section-header-full { grid-template-columns: 1fr; }
  .section-header h2 {
    font-size: var(--t-8);
    letter-spacing: -0.04em;
  }
  .section-header h2 em {
    font-family: var(--italic);
    color: var(--accent);
    font-weight: 400;
  }
  .section-header p {
    color: var(--fg-dim);
    font-size: var(--t-4);
    line-height: 1.5;
  }
  @media (max-width: 900px) {
    section { padding: var(--sp-5) 0; }
    .section-header { grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
  }

  /* ── footer ───────────────────────────────── */
  footer {
    padding: 80px 0 40px;
    border-top: 1px solid var(--line);
  }
  .footer-hero {
    font-size: clamp(24px, 4.5vw, 64px);
    font-weight: 500;
    line-height: 0.85;
    margin-bottom: 60px;
    position: relative;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 40px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .footer-col h5 {
    font-family: var(--mono);
    font-size: var(--t-1);
    color: var(--muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .footer-col a {
    display: block;
    color: var(--fg-dim);
    font-size: var(--t-3);
    padding: 6px 0;
    transition: color 0.2s;
  }
  .footer-col a:hover { color: var(--accent); }
  .footer-tag {
    font-family: var(--italic);
    font-style: italic;
    font-size: var(--t-5);
    color: var(--fg-dim);
    max-width: 360px;
    line-height: 1.4;
    margin-bottom: var(--sp-2);
  }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 32px;
    font-family: var(--mono);
    font-size: var(--t-1);
    color: var(--muted);
    letter-spacing: 0.1em;
  }
  .footer-bottom .accent { color: var(--accent); }
  /* Company registration. Its own line so the legal detail never competes
     with the brand line above it, and --fg-dim rather than --muted because
     --muted fails AA against the footer background in dark mode. */
  .footer-legal { margin-top: 6px; color: var(--fg-dim); letter-spacing: .06em; }
  @media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; gap: 12px; }
  }

  /* These elements function as "thumbnails" or code views and intentionally
   stay dark in both themes for visual consistency with the rest of the web. */
[data-theme="light"] .terminal,
[data-theme="light"] .terminal-body,
[data-theme="light"] .tool-visual,
[data-theme="light"] .featured-visual,
[data-theme="light"] .author-avatar,
[data-theme="light"] .author-mark {
  --line: rgba(245, 245, 240, 0.08);
  --line-strong: rgba(245, 245, 240, 0.18);
  --fg: #f5f5f0;
  --fg-dim: #b8b7b1;
  --muted: #6b6a66;
  --accent: #ff3e1f;
  --accent-rgb: 255 62 31;
  background-color: #0a0a0a;
  color: var(--fg);
}
[data-theme="light"] .tool-visual,
[data-theme="light"] .featured-visual {
  /* background-image, NOT the `background` shorthand.
     See docs/CSS_RATIONALE.md § Shared chrome > The stay-dark tint. */
  background-image: linear-gradient(rgb(255 255 255 / 0.015), rgb(255 255 255 / 0.015));
}

/* ─── Services nav dropdown (desktop) ─── */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-trigger {
  font: inherit; font-size: var(--t-2); color: var(--fg-dim); background: none; border: 0; padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s ease;
}
.nav-dd-trigger:hover { color: var(--fg); }
.nav-dd-caret { font-size: .8em; transition: transform .2s ease; }
.nav-dd:hover .nav-dd-caret,
.nav-dd:focus-within .nav-dd-caret,
.nav-dd[data-open] .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-panel {
  position: absolute; top: 100%; right: 0; margin-top: 12px;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 20px 50px rgb(0 0 0 / .5);
  overflow: hidden; z-index: 200;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* The first dropdown opens rightward: anchored right, it runs off the left edge below ~900px. */
.nav-links > .nav-dd:first-child .nav-dd-panel { left: 0; right: auto; }
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel,
.nav-dd[data-open] .nav-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
/* Escape's override; the nav script clears it once the menu is left. */
.nav-dd[data-closed] .nav-dd-panel { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.nav-dd[data-closed] .nav-dd-caret { transform: none; }
.nav-dd-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--fg);
}
.nav-dd-item:last-child { border-bottom: 0; }
.nav-dd-item:hover, .nav-dd-item:focus-visible { background: rgb(var(--accent-rgb) / .06); outline: none; }
.nav-dd-item--promo { background: rgb(var(--accent-rgb) / .07); }
.nav-dd-mark { color: var(--accent); font-size: var(--t-1); padding-top: 3px; flex: 0 0 auto; }
.nav-dd-t { display: block; font-size: var(--t-3); font-weight: 600; line-height: 1.25; }
.nav-dd-tag {
  font-family: var(--mono); font-size: var(--t-1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgb(var(--accent-rgb) / .5);
  border-radius: 4px; padding: 1px 5px; margin-left: 4px; white-space: nowrap;
}
.nav-dd-d { display: block; font-size: var(--t-2); color: var(--fg-dim); margin-top: 2px; line-height: 1.4; }

/* ─── Mobile menu groups ─── */
.mm-group-trigger {
  font: inherit; color: inherit; background: none; border: 0; width: 100%;
  display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left;
}
.mm-group-trigger .arr { margin-left: auto; transition: transform .2s ease; }
.mm-group[data-open] > .mm-group-trigger .arr { transform: rotate(180deg); }
.mm-sub { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.mm-group[data-open] > .mm-sub { max-height: 60vh; }
.mm-sub a { display: flex; gap: 10px; align-items: center; padding: 10px 0 10px 28px; color: var(--fg-dim); text-decoration: none; }
.mm-sub a .mm-mark { color: var(--accent); font-size: var(--t-1); }

/* ─── tools page ─── */
.tp-hero { padding: var(--sp-6) 0 var(--sp-4); }
.tp-eyebrow { font-family: var(--mono); font-size: var(--t-2); letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }
.tp-hero h1 { font-size: var(--t-7); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 10px 0 16px; }
.tp-hero h1 em { font-family: var(--italic); font-style: italic; color: var(--accent); font-weight: 500; }
.tp-dek { font-size: var(--t-4); color: var(--fg-dim); line-height: 1.55; }

.tp-tool { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.tp-tool-grid { display: block; }
.tp-tool-body, .tp-tool-list { max-width: 70ch; }
.tp-tool-name { font-family: var(--mono); font-size: var(--t-5); color: var(--accent); letter-spacing: -.01em; }
.tp-tool-role { display: block; font-family: var(--mono); font-size: var(--t-2); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.tp-tool-body { color: var(--fg-dim); font-size: var(--t-4); line-height: 1.6; margin-top: 16px; }
.tp-tool-list { list-style: none; margin: 16px 0 0; padding: 0; }
.tp-tool-list li { position: relative; padding-left: 22px; font-size: var(--t-4); color: var(--fg-dim); line-height: 1.5; margin-bottom: 12px; }
.tp-tool-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-family: var(--mono); font-size: var(--t-2); }

/* tp-runs — the reverse of the service pages' What runs it section: which
   services a given tool is used on. ROUNDT4BLE carries none; it is the portal,
   not a tool. */
.tp-runs { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.tp-runs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--sp-2); }
.tp-runs-svc { padding: var(--sp-3); border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-alt); }
.tp-runs-svc-n { font-family: var(--mono); font-size: var(--t-2); color: var(--accent);
  text-decoration: none; border-bottom: 1px solid rgb(var(--accent-rgb) / .35); }
.tp-runs-svc-n:hover { border-bottom-color: var(--accent); }
.tp-runs-step { display: block; margin-top: 12px; font-family: var(--mono); font-size: var(--t-1);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tp-runs-q { margin: 8px 0 0; font-size: var(--t-2); line-height: 1.5; color: var(--fg-dim); }
.tp-runs-label { display: block; font-family: var(--mono); font-size: var(--t-1); color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }

/* The base area. The grid is two repeating gradients rather than an asset, so it
   costs no request and re-tints with the theme. */
/* Between stages: a rule across the gutter with a head, on the tile centre line. */
/* Between nodes in a stage: the same treatment, turned through ninety degrees. */
/* tp-bench — a published benchmark on a tool panel. Sits BELOW .tp-tool-grid,
   never inside its copy column: the table needs the full measure. The wrapper
   scrolls so a narrow screen scrolls the table, not the page body. */
.tp-bench { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.tp-bench-label { display: block; font-family: var(--mono); font-size: var(--t-1); color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.tp-bench-scroll { overflow-x: auto; }
.tp-bench table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: var(--t-2); }
.tp-bench thead th { text-align: left; font-weight: 400; color: var(--muted); font-size: var(--t-1);
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  padding: 0 18px 9px 0; border-bottom: 1px solid var(--line-strong); }
.tp-bench td { padding: 9px 18px 9px 0; border-bottom: 1px solid var(--line); color: var(--fg-dim); }
/* severity labels down the left; a <th scope="row">, not the first cell, which
   is why the old td:first-child rule had to go — that cell is now G4LAHAD's
   own column and has to stay accent. */
.tp-bench tbody th { text-align: left; font-weight: 400; color: var(--fg-dim);
  font-size: var(--t-2); text-transform: none; letter-spacing: 0; white-space: nowrap;
  padding: 9px 18px 9px 0; border-bottom: 1px solid var(--line); }
/* one <tbody> per target, its name heading the group */
.tp-bench tbody .tp-bench-grp th { color: var(--fg); font-size: var(--t-2); font-weight: 600;
  text-transform: none; letter-spacing: .01em; padding: 12px 14px;
  background: rgb(var(--fg-rgb) / .05);
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.tp-bench tbody:first-of-type .tp-bench-grp th { border-top: 0; }
/* the band runs edge to edge; the severity column keeps its own left gutter */
.tp-bench tbody .tp-bench-grp th::before { content: '/ '; color: var(--accent); }
.tp-bench-tot th, .tp-bench-tot td { color: var(--fg); border-bottom: 1px solid var(--line-strong); }
.tp-bench .is-ours { color: var(--accent); }
.tp-bench-foot { margin-top: 14px; font-family: var(--mono); font-size: var(--t-1); color: var(--fg-dim); }
.tp-bench-foot a { color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgb(var(--accent-rgb) / .35); }
.tp-bench-foot a:hover { border-bottom-color: var(--accent); }

/* The tool picker. Same tablist the round table was — five tabs, five panels,
   ARIA and the roving tabindex applied from 4rthur_tools.js once it confirms
   it can run. Only the shape changed: the 504px disc cost 601px of vertical
   space to choose one of five tools, and each panel is now four sections long,
   so the chooser has to stay reachable while you read rather than sit above
   the fold. Sticky under the nav, 68px instead of 601px. */
.tp-picker {
  position: sticky; top: var(--nav-h); z-index: 50;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgb(var(--bg-rgb) / .88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.tp-picker-row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tp-picker-row::-webkit-scrollbar { display: none; }
.tp-pick {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: none; border: 0;
  border-bottom: 2px solid transparent; cursor: pointer;
  font: inherit; color: var(--fg-dim); white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.tp-pick:disabled { cursor: default; }
.tp-pick:hover:not(:disabled) { color: var(--fg); }
.tp-pick.is-active { color: var(--fg); border-bottom-color: var(--accent); }
.tp-pick-l { font-family: var(--mono); font-size: var(--t-2); letter-spacing: .06em; }
/* ROUNDT4BLE is the portal the other four report into, not a fifth tool. */
.tp-pick--hub { margin-left: 10px; padding-left: 26px; border-left: 1px solid var(--line); }
.tp-sig { width: 26px; height: 26px; flex: 0 0 auto; opacity: .55;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  transition: opacity .18s ease; }
.tp-pick:hover .tp-sig, .tp-pick.is-active .tp-sig { opacity: 1; }

/* One tool, four sections: what it does, how it works, runs in, benchmark.
   ROUNDT4BLE publishes no benchmark, so it carries three. */
.tp-part { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.tp-part:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.tp-tool-head { margin-bottom: var(--sp-4); }
@media (min-width: 901px) {
  /* Label in a left rail, content in the right column. The page ran a 770px
     measure down a 1400px container with the label stacked on top, which
     spent the width on nothing and the height on sprawl. This is the same
     1fr/2fr idiom .section-header already uses elsewhere on the site. */
  .tp-part {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 0 var(--sp-5);
    align-items: start;
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-5);
  }
  /* Only the label belongs in the rail. Everything else is one column of
     content beside it, or the body wraps at 190px. */
  .tp-part > * { grid-column: 2; }
  .tp-part > .tp-part-label { grid-column: 1; grid-row: 1; margin-bottom: 0; padding-top: 4px; }
  .tp-tool-head { margin-bottom: var(--sp-3); }

  /* The diagram sits in the same content column as every other section, so
     the page keeps one left edge all the way down. That leaves it ~1058px,
     just over its own 1040px floor; below that its scroller takes over. */
}
.tp-part-label { display: block; font-family: var(--mono); font-size: var(--t-1);
  color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.tp-tool-head { display: block; }
.tp-soon {
  margin: 0; padding: 32px 20px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: 10px;
  font-family: var(--mono); font-size: var(--t-2); color: var(--muted);
  letter-spacing: .06em;
}

/* ROUNDT4BLE's "In use" video: a copy of the landing page's frame, without its
   margin-top, so it lines up with the part label. */
.engine-showcase { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background-color: #0a0a0a; /* stay-dark: use background-color, never the shorthand */ }
.engine-video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  /* stay-dark: background-color + background-image, never the shorthand.
     See docs/CSS_RATIONALE.md § Landing page > .engine-video under reduced motion. */
  .engine-video { display: none; }
  .engine-showcase {
    background-color: #0a0a0a;
    background-image: var(--platform-poster, none);
    background-size: cover;
    background-position: center;
  }
}

/* background-image, not <img>: a display:none <img> is still fetched.
   See docs/CSS_RATIONALE.md § Tool picker > The sigils follow the page theme.
   The picker tabs carry every sigil, so all 20 files in img/sigils/ stay in
   use after the round table was removed. */

/* PNG first, WebP second — keep both formats.
   See docs/CSS_RATIONALE.md § Tool picker > The sigils follow the page theme. */
.tp-pick[data-tool="l4ncelot"] .tp-sig {
  background-image: url("/img/sigils/l4ncelot-dark.png");
  background-image: image-set(url("/img/sigils/l4ncelot-dark.webp") type("image/webp"),
                              url("/img/sigils/l4ncelot-dark.png")  type("image/png"));
}
.tp-pick[data-tool="g4lahad"] .tp-sig {
  background-image: url("/img/sigils/g4lahad-dark.png");
  background-image: image-set(url("/img/sigils/g4lahad-dark.webp") type("image/webp"),
                              url("/img/sigils/g4lahad-dark.png")  type("image/png"));
}
.tp-pick[data-tool="g4wain"] .tp-sig {
  background-image: url("/img/sigils/g4wain-dark.png");
  background-image: image-set(url("/img/sigils/g4wain-dark.webp") type("image/webp"),
                              url("/img/sigils/g4wain-dark.png")  type("image/png"));
}
.tp-pick[data-tool="g4reth"] .tp-sig {
  background-image: url("/img/sigils/g4reth-dark.png");
  background-image: image-set(url("/img/sigils/g4reth-dark.webp") type("image/webp"),
                              url("/img/sigils/g4reth-dark.png")  type("image/png"));
}
.tp-pick[data-tool="roundt4ble"] .tp-sig {
  background-image: url("/img/sigils/roundt4ble-dark.png");
  background-image: image-set(url("/img/sigils/roundt4ble-dark.webp") type("image/webp"),
                              url("/img/sigils/roundt4ble-dark.png")  type("image/png"));
}

[data-theme="light"] .tp-pick[data-tool="l4ncelot"] .tp-sig {
  background-image: url("/img/sigils/l4ncelot-light.png");
  background-image: image-set(url("/img/sigils/l4ncelot-light.webp") type("image/webp"),
                              url("/img/sigils/l4ncelot-light.png")  type("image/png"));
}
[data-theme="light"] .tp-pick[data-tool="g4lahad"] .tp-sig {
  background-image: url("/img/sigils/g4lahad-light.png");
  background-image: image-set(url("/img/sigils/g4lahad-light.webp") type("image/webp"),
                              url("/img/sigils/g4lahad-light.png")  type("image/png"));
}
[data-theme="light"] .tp-pick[data-tool="g4wain"] .tp-sig {
  background-image: url("/img/sigils/g4wain-light.png");
  background-image: image-set(url("/img/sigils/g4wain-light.webp") type("image/webp"),
                              url("/img/sigils/g4wain-light.png")  type("image/png"));
}
[data-theme="light"] .tp-pick[data-tool="g4reth"] .tp-sig {
  background-image: url("/img/sigils/g4reth-light.png");
  background-image: image-set(url("/img/sigils/g4reth-light.webp") type("image/webp"),
                              url("/img/sigils/g4reth-light.png")  type("image/png"));
}
[data-theme="light"] .tp-pick[data-tool="roundt4ble"] .tp-sig {
  background-image: url("/img/sigils/roundt4ble-light.png");
  background-image: image-set(url("/img/sigils/roundt4ble-light.webp") type("image/webp"),
                              url("/img/sigils/roundt4ble-light.png")  type("image/png"));
}


/* See docs/CSS_RATIONALE.md § The recurring one. */
.tp-detail { padding: 0 0 var(--sp-5); }

/* never hide panels by default — agents fetch this page with JS off.
   See docs/CSS_RATIONALE.md § Tool picker > Panels ship visible. */
.tp-detail--js .tp-tool { display: none; }
.tp-detail--js .tp-tool.is-active { display: block; border-top: 0;
  animation: tp-panel-in .28s cubic-bezier(.4, 0, .2, 1); }
/* The swap flips display:none -> block, which no transition can animate, so
   the entrance is a keyframe instead. It also plays once on load, which reads
   as intentional rather than as a flash. */
@keyframes tp-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-detail--js .tp-tool.is-active { animation: none; }
}

@media (max-width: 640px) {
  .tp-pick { padding: 12px; gap: 8px; }
  .tp-pick--hub { margin-left: 0; }
  .tp-sig { width: 22px; height: 22px; }
}


/* ─── team page ─── */
.tm-hero { padding: var(--sp-6) 0 var(--sp-4); }
.tm-hero h1 { font-size: var(--t-7); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 10px 0 16px; }
.tm-hero h1 em { font-family: var(--italic); font-style: italic; color: var(--accent); font-weight: 500; }
.tm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
/* See docs/CSS_RATIONALE.md § The recurring one. */
.tm-body { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.tm-card { border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-3); background: var(--bg-alt); }
/* hardcoded colours, never the `background` shorthand; deliberately not in
   the stay-dark block. See docs/CSS_RATIONALE.md § Team page > .tm-avatar. */
.tm-avatar {
  aspect-ratio: 1 / 1; border-radius: 10px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--t-1); letter-spacing: .1em; color: #6a6a6a;
  background-color: #141412;
  background-image: linear-gradient(rgb(255 255 255 / .02), rgb(255 255 255 / .02));
}
.tm-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
:root[data-theme="light"] .tm-avatar {
  background-color: #141412;
  background-image: linear-gradient(rgb(255 255 255 / .02), rgb(255 255 255 / .02));
}
.tm-name { font-size: var(--t-4); font-weight: 600; }
.tm-role { display: block; font-family: var(--mono); font-size: var(--t-1); color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin-top: 5px; }
.tm-bio { font-size: var(--t-2); color: var(--fg-dim); line-height: 1.55; margin-top: 10px; }
.tm-link { display: inline-block; font-family: var(--mono); font-size: var(--t-1); color: var(--fg-dim); margin-top: 12px; }
.tm-link:hover { color: var(--accent); }
@media (max-width: 900px) { .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tm-grid { grid-template-columns: minmax(0, 1fr); } }

/* ─── team certifications ─── */
/* See docs/CSS_RATIONALE.md § The recurring one. */
.tm-certs { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
/* See docs/CSS_RATIONALE.md § Team page > .tm-certs-h and .adv-policy-h. */
.tm-certs-h { font-size: var(--t-5); line-height: 1.55; color: var(--fg); margin: 10px 0 0; }
/* See docs/CSS_RATIONALE.md § Team page > .tm-cert-lede. */
.tm-cert-lede { font-size: var(--t-2); color: var(--fg-dim); margin-top: 12px; }
.tm-cert-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.tm-cert {
  border: 1px solid var(--line); border-radius: 12px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
/* See docs/CSS_RATIONALE.md § Team page > .tm-cert-badge has no plate. */
.tm-cert-badge {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.tm-cert-badge img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* white plate in BOTH themes; never filter a regulator's mark.
   See docs/CSS_RATIONALE.md § Team page > The NACSA plate is white. */
.tm-nacsa { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.tm-nacsa-box { display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 12px; padding: 24px;
  background-color: var(--bg-alt); }
/* no-op on desktop by construction — no media query needed.
   See docs/CSS_RATIONALE.md § Team page > .tm-nacsa-mark margin-inline. */
.tm-nacsa-mark { flex: 0 0 auto; background: #fff; border-radius: 10px;
  padding: 14px 18px; display: grid; place-items: center; margin-inline: auto; }
.tm-nacsa-mark img { display: block; width: 220px; max-width: 100%; height: auto; }
.tm-nacsa-copy { flex: 1 1 320px; min-width: 0; }
.tm-nacsa-h { font-size: var(--t-6); font-weight: 600; line-height: 1.2;
  margin: 10px 0 8px; letter-spacing: -.01em; }
.tm-nacsa-h em { font-family: var(--italic); font-style: italic; color: var(--accent); font-weight: 500; }
.tm-nacsa-d { font-size: var(--t-3); color: var(--fg-dim); line-height: 1.6; }
.tm-nacsa-d strong { color: var(--fg); font-family: var(--mono); font-size: var(--t-2); letter-spacing: .04em; }
@media (max-width: 640px) {
  .tm-nacsa-box { gap: 18px; padding: 18px; }
  .tm-nacsa-mark { padding: 12px 14px; }
  .tm-nacsa-mark img { width: 180px; }
}

.tm-cert-label { font-family: var(--mono); font-size: var(--t-1); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); }
/* See docs/CSS_RATIONALE.md § Team page > .tm-cert-note takes --fg-dim. */
.tm-cert-note { font-size: var(--t-2); color: var(--fg-dim); margin-top: 18px; }
@media (max-width: 1100px) { .tm-cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tm-cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tm-cert-grid { grid-template-columns: minmax(0, 1fr); } }

/* ─── advisories page ─── */
.adv-hero { padding: var(--sp-6) 0 var(--sp-4); }
.adv-hero h1 { font-size: var(--t-7); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 10px 0 16px; }
.adv-hero h1 em { font-family: var(--italic); font-style: italic; color: var(--accent); font-weight: 500; }

/* See docs/CSS_RATIONALE.md § The recurring one. */
.adv-disclosures { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }

.adv-list { border-top: 1px solid var(--line); }
.adv { border-bottom: 1px solid var(--line); }
/* no `outline: none` here — the summary is the keyboard control.
   See docs/CSS_RATIONALE.md § Advisories > Marker suppression. */
.adv > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto auto auto;
  gap: 16px; align-items: center; padding: 16px 0;
}
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary:hover .adv-id { color: var(--accent); }
.adv-id { font-family: var(--mono); font-size: var(--t-2); color: var(--fg); white-space: nowrap; }
.adv-product { font-size: var(--t-3); color: var(--fg-dim); }
.adv-date { font-family: var(--mono); font-size: var(--t-2); color: var(--muted); white-space: nowrap; }
/* The caret is a grid item, so it is blockified and `transform` applies —
   it would be a no-op on a non-replaced inline box. */
.adv-caret { font-size: .8em; color: var(--muted); transition: transform .2s ease; }
.adv[open] .adv-caret { transform: rotate(180deg); }

/* See docs/CSS_RATIONALE.md § Advisories > .adv-sev chips are border-only. */
.adv-sev {
  font-family: var(--mono); font-size: var(--t-1); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid; border-radius: 5px; padding: 4px 8px; white-space: nowrap;
}
.adv-sev b { font-weight: 600; margin-left: 6px; }
.adv-sev.crit { color: var(--accent);      border-color: rgb(var(--accent-rgb) / .5); }
.adv-sev.high { color: var(--accent-warm); border-color: rgb(var(--accent-warm-rgb) / .5); }
.adv-sev.med  { color: var(--sev-med);     border-color: rgb(var(--sev-med-rgb) / .5); }
/* See docs/CSS_RATIONALE.md § Advisories > .adv-sev.low takes --line-strong. */
.adv-sev.low  { color: var(--fg-dim);      border-color: var(--line-strong); }

.adv-body { padding: 4px 0 28px; max-width: 70ch; }
.adv-field { margin-bottom: 16px; }
.adv-field-label { font-family: var(--mono); font-size: var(--t-1); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.adv-field p, .adv-field li { color: var(--fg-dim); font-size: var(--t-3); line-height: 1.6; margin-top: 6px; }
/* See docs/CSS_RATIONALE.md § Advisories > why the :not(). */
.adv-field ul:not(.adv-timeline) { margin: 6px 0 0 18px; }
.adv-timeline { list-style: none; margin: 6px 0 0; padding: 0; }
/* margin-top: 0 and align-items: baseline are both load-bearing.
   See docs/CSS_RATIONALE.md § Advisories > .adv-timeline li. */
.adv-timeline li { display: flex; gap: 14px; font-size: var(--t-3); color: var(--fg-dim); line-height: 1.9; margin-top: 0; align-items: baseline; }
.adv-timeline .d { font-family: var(--mono); font-size: var(--t-2); color: var(--muted); flex: 0 0 100px; }

/* always present — it is the empty state; no :empty conditional.
   See docs/CSS_RATIONALE.md § Advisories > .adv-note is the empty state. */
.adv-note { margin-top: 24px; font-size: var(--t-3); color: var(--fg-dim); }

/* See docs/CSS_RATIONALE.md § Advisories > .adv-policy has its own class. */
.adv-policy { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.adv-policy-h { font-size: var(--t-5); line-height: 1.55; color: var(--fg); margin: 10px 0 12px; }

/* u9up provenance: the strip explains the tag, the tag marks a u9up row */
.adv-strip { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 24px; }
/* stays dark in both themes: the only u9up mark is light-on-dark, as on team.html */
.adv-strip-mark { flex: 0 0 auto; background: #0a0a0a; border-radius: 6px; padding: 6px 8px; }
.adv-strip-mark img { display: block; height: 30px; width: auto; }
.adv-strip p { font-size: var(--t-3); color: var(--fg-dim); line-height: 1.6; }
.adv-tag { font-family: var(--mono); font-size: var(--t-1); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); border: 1px solid var(--line-strong); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.adv-product .adv-tag { margin-left: 6px; }

/* underline is the affordance, not decoration — alpha is measured.
   See docs/CSS_RATIONALE.md § Advisories > Inline links on this page. */
.adv-body a,
.adv-policy a,
.adv-strip a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgb(var(--accent-rgb) / .7);
  text-underline-offset: 3px;
}
.adv-body a:hover,
.adv-policy a:hover,
.adv-strip a:hover { text-decoration-color: var(--accent); }

@media (max-width: 780px) {
  /* See docs/CSS_RATIONALE.md § Advisories > summary orders every grid item. */
  .adv > summary { grid-template-columns: 1fr auto; row-gap: 6px; }
  .adv-id      { order: 1; }
  .adv-caret   { order: 2; }
  /* The chip lands in the 1fr column here, and grid items stretch by default.
     Without justify-self it would fill the whole row and read as a banner
     rather than a pill. Not needed on desktop, where its column is auto. */
  .adv-sev     { order: 3; justify-self: start; }
  .adv-product { order: 4; grid-column: 1 / -1; }
  .adv-date    { order: 5; grid-column: 1 / -1; }
}

/* ─── CTA band — used by both tools.html and team.html ─── */
/* The service pages' own CTA band was stripped with the rest of their
   page block; the markup on these two pages uses .tp-ctaband instead. */
.tp-ctaband { text-align: center; padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.tp-ctaband h2 { font-size: var(--t-7); font-weight: 600; margin-bottom: 16px; }
.tp-ctaband h2 em { font-family: var(--italic); font-style: italic; color: var(--accent); }

/* ─── Tool workflow diagrams — tools.html ───────────────────────────────
   Three drop-in SVG sections: .iwf (L4NCELOT), .wf (G4LAHAD) and .cwf
   (G4WAIN). Their marker ids are document-global and first-in-DOM wins,
   which is why each keeps its own namespace — do not merge them. Geometry:
   see docs/CSS_RATIONALE.md § Tool workflow diagrams.

   All three shipped with a hardcoded slate-and-ochre palette on a #0D1013 plate.
   Re-pointed at the site tokens here so they follow the theme rather than
   freezing dark, which is the lesson the round table left behind: a diagram
   that reads in one theme only is a diagram that is wrong in the other. The
   ochre becomes --accent, so "outside the core workflow" is signalled in the
   brand red the rest of the site already uses for that job. */
.cwf, .wf, .iwf {
  --cwf-bg: transparent;            --wf-bg: transparent;
  --cwf-line: var(--line-strong);   --wf-line: var(--line-strong);
  --cwf-hair: var(--line);          --wf-hair: var(--line);
  --cwf-rail: var(--line-strong);   --wf-rail: var(--line-strong);
  --cwf-node-stroke: var(--line-strong); --wf-node-stroke: var(--line-strong);
  --cwf-node-fill: rgb(var(--fg-rgb) / .04); --wf-node-fill: rgb(var(--fg-rgb) / .04);
  --cwf-icon: var(--fg-dim);        --wf-icon: var(--fg-dim);
  --cwf-title: var(--fg);           --wf-title: var(--fg);
                                    --wf-stage: var(--muted);
                                    --wf-num: var(--muted);
  --cwf-warm: var(--accent);        --wf-warm: var(--accent);
  --cwf-warm-line: rgb(var(--accent-rgb) / .55);  --wf-warm-line: rgb(var(--accent-rgb) / .55);
  --cwf-warm-stroke: rgb(var(--accent-rgb) / .38); --wf-warm-stroke: rgb(var(--accent-rgb) / .38);
  --cwf-warm-fill: rgb(var(--accent-rgb) / .07);  --wf-warm-fill: rgb(var(--accent-rgb) / .07);
  --cwf-warm-title: var(--accent);  --wf-warm-title: var(--accent);
  --cwf-font: var(--sans);          --wf-font: var(--sans);
  --iwf-line: var(--line-strong);   --iwf-node-stroke: var(--line-strong);
  --iwf-node-fill: rgb(var(--fg-rgb) / .04);    --iwf-icon: var(--fg-dim);
  --iwf-title: var(--fg);           --iwf-warm: var(--accent);
  --iwf-warm-line: rgb(var(--accent-rgb) / .55); --iwf-warm-stroke: rgb(var(--accent-rgb) / .38);
  --iwf-warm-fill: rgb(var(--accent-rgb) / .07); --iwf-warm-title: var(--accent);

  font-family: var(--sans);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--sp-3) 0;
  overflow: hidden;
}
/* The marker arrowheads carry their colour as a presentation attribute in the
   markup, which CSS outranks — this is what keeps the heads in step with the
   connectors they terminate. */
#cwf-tip path, #wf-tip path, #iwf-tip path { stroke: var(--line-strong); }
#cwf-tip-warm path, #wf-tip-warm path, #iwf-tip-warm path { stroke: var(--accent); }
.dg-sig--light { display: none; }
[data-theme="light"] .dg-sig--dark { display: none; }
[data-theme="light"] .dg-sig--light { display: block; }

  .cwf__scroller{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .cwf__frame{
    min-width:1040px;
    max-width:1280px;
    margin:0 auto;
    padding:0 28px;
  }
  .cwf__svg{display:block;width:100%;height:auto;}

  /* connectors */
  .cwf-conn{
    fill:none;
    stroke:var(--cwf-line);
    stroke-width:1.1;
    stroke-linecap:round;
    vector-effect:non-scaling-stroke;
    marker-end:url(#cwf-tip);
  }
  .cwf-conn.cwf-warm{
    stroke:var(--cwf-warm-line);
    marker-end:url(#cwf-tip-warm);
  }
  /* two-way: one marker definition serves both ends via auto-start-reverse */
  .cwf-conn.cwf-bi{
    marker-start:url(#cwf-tip-warm);
    marker-end:url(#cwf-tip-warm);
  }

  /* structure line */
  .cwf-rail{stroke:var(--cwf-rail);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;}

  /* nodes */
  .cwf-box{
    fill:var(--cwf-node-fill);
    stroke:var(--cwf-node-stroke);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
    transition:stroke .2s ease, fill .2s ease;
  }
  .cwf-ic{fill:none;stroke:var(--cwf-icon);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .cwf-ttl{fill:var(--cwf-title);font-size:13px;font-weight:450;text-anchor:middle;letter-spacing:.002em;}

  .cwf-node--warm .cwf-box{fill:var(--cwf-warm-fill);stroke:var(--cwf-warm-stroke);}
  .cwf-node--warm .cwf-ic{stroke:var(--cwf-warm);}
  .cwf-node--warm .cwf-ttl{fill:var(--cwf-warm-title);}

  .cwf-node:hover .cwf-box{stroke:rgb(var(--fg-rgb) / .34);}
  .cwf-node--warm:hover .cwf-box{stroke:rgb(var(--accent-rgb) / .6);}

  @media (prefers-reduced-motion: reduce){
    .cwf-box{transition:none;}
  }

  .wf__scroller{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .wf__frame{
    min-width:1040px;
    max-width:1280px;
    margin:0 auto;
    padding:0 28px;
  }
  .wf__svg{display:block;width:100%;height:auto;}

  /* connectors */
  .wf-conn{
    fill:none;
    stroke:var(--wf-line);
    stroke-width:1.1;
    stroke-linecap:round;
    vector-effect:non-scaling-stroke;
    marker-end:url(#wf-tip);
  }
  .wf-conn.wf-warm{
    stroke:var(--wf-warm-line);
    marker-end:url(#wf-tip-warm);
  }
  /* two-way: one marker definition serves both ends via auto-start-reverse */
  .wf-conn.wf-bi{
    marker-start:url(#wf-tip-warm);
    marker-end:url(#wf-tip-warm);
  }

  /* structure lines */
  .wf-band{stroke:var(--wf-hair);stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke;}
  .wf-rail{stroke:var(--wf-rail);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;}

  /* nodes */
  .wf-box{
    fill:var(--wf-node-fill);
    stroke:var(--wf-node-stroke);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
    transition:stroke .2s ease, fill .2s ease;
  }
  .wf-ic{fill:none;stroke:var(--wf-icon);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .wf-ttl{fill:var(--wf-title);font-size:13px;font-weight:450;text-anchor:middle;letter-spacing:.002em;}

  .wf-node--warm .wf-box{fill:var(--wf-warm-fill);stroke:var(--wf-warm-stroke);}
  .wf-node--warm .wf-ic{stroke:var(--wf-warm);}
  .wf-node--warm .wf-ttl{fill:var(--wf-warm-title);}

  .wf-node:hover .wf-box{stroke:rgb(var(--fg-rgb) / .34);}
  .wf-node--warm:hover .wf-box{stroke:rgb(var(--accent-rgb) / .6);}

  /* stage headers */
  .wf-stage{font-size:12px;font-weight:500;fill:var(--wf-stage);text-anchor:middle;}
  .wf-stage .wf-n{fill:var(--wf-num);font-weight:400;font-variant-numeric:tabular-nums;}

  @media (prefers-reduced-motion: reduce){
    .wf-box{transition:none;}
  }

  .iwf__scroller{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .iwf__frame{
    min-width:1040px;
    max-width:1280px;
    margin:0 auto;
    padding:0 28px;
  }
  .iwf__svg{display:block;width:100%;height:auto;}

  /* connectors */
  .iwf-conn{
    fill:none;
    stroke:var(--iwf-line);
    stroke-width:1.1;
    stroke-linecap:round;
    vector-effect:non-scaling-stroke;
    marker-end:url(#iwf-tip);
  }
  .iwf-conn.iwf-warm{
    stroke:var(--iwf-warm-line);
    marker-end:url(#iwf-tip-warm);
  }

  /* nodes */
  .iwf-box{
    fill:var(--iwf-node-fill);
    stroke:var(--iwf-node-stroke);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
    transition:stroke .2s ease, fill .2s ease;
  }
  .iwf-ic{fill:none;stroke:var(--iwf-icon);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .iwf-ttl{fill:var(--iwf-title);font-size:13px;font-weight:450;text-anchor:middle;letter-spacing:.002em;}

  .iwf-node--warm .iwf-box{fill:var(--iwf-warm-fill);stroke:var(--iwf-warm-stroke);}
  .iwf-node--warm .iwf-ic{stroke:var(--iwf-warm);}
  .iwf-node--warm .iwf-ttl{fill:var(--iwf-warm-title);}

  .iwf-node:hover .iwf-box{stroke:rgb(var(--fg-rgb) / .34);}
  .iwf-node--warm:hover .iwf-box{stroke:rgb(var(--accent-rgb) / .6);}