/* Design tokens. The look follows the Signal Console house style: neutral
   graphite surfaces, one flat steel-blue accent, a 2px corner, no glows,
   and a faint board grid behind the page. Dark values live here (the
   default theme); light values are on body.light-theme below. */

/* Arabic letters in a monospaced font are drawn one cell wide each, so words fall apart.
   This face covers only the Arabic ranges and is listed first in --mono: Arabic in an eyebrow,
   tag or button uses the system Arabic font, and Latin letters keep the mono font. */
@font-face {
  font-family: "Mono Arabic";
  src: local("Segoe UI"), local("Tahoma"), local("Noto Sans Arabic"), local("Geeza Pro"), local("Arial");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  --bg: #0c0e11;
  --bg-soft: #191d22;
  --surface: #13161a;
  --surface-2: #191d22;
  --text: #e3e6ea;
  --text-soft: #8d96a1;
  --accent: #6ea8dc;
  --accent-2: #6ea8dc;
  --on-accent: #0c0e11;
  --warning: #fbbf24;
  --ok: #4ade80;
  --danger: #f87171;
  --violet: #a78bfa;
  --lang-ink: #e27ab6;
  --border: #2a3038;
  --radius: 2px;
  --shadow: none;
  --grid-line: rgba(227, 230, 234, 0.028);
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Mono Arabic", "Cascadia Mono", "Cascadia Code", ui-monospace, Consolas, "Courier New", monospace;
  /* Handwriting already on the visitor's device (Windows, Apple, then the system cursive): no font download. */
  --script: "Segoe Script", "Snell Roundhand", "Apple Chancery", "Lucida Handwriting", "Brush Script MT", cursive;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t: 0.16s;
  /* One soft lift shadow for every hovered card. */
  --shadow-hover: 0 8px 18px -14px color-mix(in srgb, var(--text) 32%, transparent);
  /* The logo's red mark: kept for live/attention dots only. */
  --brand-red: #e53b3a;
  --nav-height: 50px;
  --promo-height: 0px;
  --header-height: calc(var(--nav-height) + var(--promo-height));
}
#navbar {
    position: sticky;
    top: 0;
    overflow: hidden;
    background-color: #333;
}

/* Navbar links */
#navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

/* Page content */
.content {
    padding: 16px;
}
body.light-theme {
  --bg: #eceef1;
  --bg-soft: #f2f3f5;
  --surface: #fbfbfc;
  --surface-2: #f2f3f5;
  --text: #14181d;
  --text-soft: #5b6470;
  --accent: #2c6aa8;
  --accent-2: #2c6aa8;
  --on-accent: #ffffff;
  --warning: #d97706;
  --ok: #16a34a;
  --danger: #dc2626;
  --violet: #7c3aed;
  --lang-ink: #b02f7a;
  --border: #c6ccd3;
  --shadow: none;
  --grid-line: rgba(20, 24, 29, 0.09);
}

/* SweetAlert popups follow the modal style: a flat card with an accent top
   edge. The !important flags beat SweetAlert's own inline-level styles.
   .intrusion-swal-popup is the class the enrollment alerts pass in. */
.swal2-popup,
.intrusion-swal-popup {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-top: 2px solid var(--accent) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6) !important;
  font-family: inherit !important;
}

.swal2-title,
.swal2-html-container {
  color: var(--text) !important;
}

.swal2-title {
  font-size: 1.3rem !important;
  font-weight: 650 !important;
}

.swal2-confirm {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-radius: var(--radius) !important;
}

.swal2-cancel {
  border-radius: var(--radius) !important;
}

.swal2-icon.swal2-success {
  border-color: var(--ok) !important;
  color: var(--ok) !important;
}

.swal2-success-line-tip,
.swal2-success-line-long,
.swal2-success-ring {
  background-color: var(--ok) !important;
  border-color: var(--ok) !important;
}

.swal2-success-circular-line-left,
.swal2-success-circular-line-right,
.swal2-success-fix {
  background-color: transparent !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The page sits on a faint 24px board grid: flat, quiet, behind everything. */
html,
/* The footer stays at the bottom of short pages (About, errors...). */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Type scale: Signal's compact density. A 14px root scales every rem-based
   Bootstrap size (text, buttons, spacing utilities) down together; headings
   use a calm, fluid scale instead of Bootstrap's large defaults. */
html {
  font-size: 14px;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

/* Measured against Signal Console at 1440x900: its biggest heading is 20px
   and card titles are 14.5px. A marketing site keeps more hierarchy, but in
   the same compact family. */
h1, .h1 { font-size: clamp(1.55rem, 1.15rem + 1vw, 1.95rem); }
h2, .h2 { font-size: clamp(1.2rem, 1rem + 0.5vw, 1.4rem); }
h3, .h3 { font-size: 1.14rem; }
h4, .h4 { font-size: 1.08rem; }
h5, .h5 { font-size: 1.04rem; }
h6, .h6 { font-size: 0.96rem; }

.display-5 {
  font-size: clamp(1.75rem, 1.25rem + 1.3vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lead {
  font-size: 1.05rem;
  font-weight: 400;
}

/* Signal's content area is 1400px wide; widen Bootstrap's largest
   container to match so content is denser, not bigger. */
@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}

p {
  text-wrap: pretty;
}

:root:has(.promo-strip) {
  --promo-height: 26px;
}

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease);
}

a:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

/* Keyboard focus: one crisp accent outline everywhere. */
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* Thin, quiet scrollbars in the page's own colours. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 2px solid var(--bg);
  border-radius: var(--radius);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ---- Controls: buttons, badges, forms, alerts ----------------------- */
/* Buttons: flat, squared, a mechanical press. */
/* Signal's buttons: 14px text, 6px x 14px padding, about 35px tall. */
.btn {
  --bs-btn-padding-y: 0.4rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--radius);
  --bs-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  letter-spacing: 0.01em;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform 0.08s;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-lg {
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: var(--radius);
}

.btn-sm {
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.88rem;
  --bs-btn-border-radius: var(--radius);
}

/* Secondary buttons are ghost buttons in both themes. */
.btn-outline-light,
.btn-outline-dark {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
}

.btn-outline-light:hover,
.btn-outline-dark:hover,
.btn-outline-light:focus-visible,
.btn-outline-dark:focus-visible,
.btn-outline-light:active,
.btn-outline-dark:active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Tags: text and a hairline frame, no fill - Signal's tag style. */
.badge-soft,
.blog-keyword {
  background: transparent;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius);
  padding: 0.3em 0.55em;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

a.badge-soft:hover,
a.blog-keyword:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Form labels read like Signal's section labels: small monospace capitals. */
.form-label {
  margin-bottom: 0.4rem;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.form-check-input {
  background-color: var(--bg);
  border-color: var(--border);
  border-radius: var(--radius);
}

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--danger);
}

.invalid-feedback {
  color: var(--danger);
}

/* Alerts: a flat panel edged in the message's colour. */
.alert {
  --bs-alert-border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
}

.alert-success {
  border-inline-start-color: var(--ok);
}

.alert-danger {
  border-inline-start-color: var(--danger);
}

.alert-warning {
  border-inline-start-color: var(--warning);
}

.text-soft {
  color: var(--text-soft);
}

.section-pad {
  padding: 3rem 0;
  position: relative;
}

.contact-form-section {
  min-height: calc(100vh - var(--header-height));
  padding: calc(var(--header-height) + 2.5rem) 0 3rem;
}

.contact-form-wrap {
  width: min(100%, 860px);
  margin-inline: auto;
}

/* Eyebrow labels: Signal's section label - monospace capitals behind a
   small accent square. (The hero's eyebrow keeps its "> " prompt.) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.eyebrow:not(.terminal-prompt)::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-inline-end: 0.6rem;
  background: var(--accent);
  flex: none;
}

/* ---- Header: promo strip + top bar --------------------------------- */
/* The top bar is flat and frosted; its lower edge is an accent rule that
   fades out, as on Signal Console's top bar. */
.site-nav {
  backdrop-filter: blur(10px) saturate(1.2);
  background-color: color-mix(in srgb, var(--surface) 86%, transparent);
  border-bottom: 1px solid var(--border);
  min-height: var(--nav-height);
  padding-top: 0;
  padding-bottom: 0;
  top: var(--promo-height);
}

.site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: min(320px, 40%);
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  pointer-events: none;
}

/* The promo strip reads like a status line: monospace, quiet, the small
   logo between messages with a live brand-red dot at its heart. */
.promo-strip {
  z-index: 1040;
  min-height: var(--promo-height);
  display: flex;
  align-items: center;
  color: var(--text);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
}

.promo-strip-track {
  min-height: 26px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

.promo-strip-marquee {
  display: flex;
  align-items: center;
  width: max-content;
  /* Two identical groups: moving by one group's width loops without a seam.
     site.js sets --promo-duration from the text length for a steady,
     readable speed; 90s is the fallback. */
  animation: promo-marquee var(--promo-duration, 90s) linear infinite;
  will-change: transform;
}

/* Arabic messages: the same strip mirrored, entering at the left and moving right. */
.promo-strip--rtl .promo-strip-marquee {
  direction: rtl;
  animation-name: promo-marquee-rtl;
}

@keyframes promo-marquee-rtl {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(50%);
  }
}

.promo-strip:hover .promo-strip-marquee {
  animation-play-state: paused;
}

.promo-strip-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.promo-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.2rem 0;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.promo-strip-mark {
  flex: none;
  display: inline-flex;
  width: 18px;
  height: 18px;
  /* With the item gap after it, the same 1.5rem on each side: the logo sits
     midway between two messages. */
  margin-inline: 1.5rem 0.75rem;
  color: var(--text);
}

.promo-strip-mark svg {
  width: 100%;
  height: 100%;
}

/* The dot is drawn in the logo's own SVG, so it sits exactly at the ring's centre. */
.promo-strip-dot {
  fill: var(--brand-red);
}

.promo-strip-pulse {
  stroke: var(--brand-red);
  transform-box: fill-box;
  transform-origin: center;
  animation: promo-dot-pulse 2s ease-out infinite;
}

@keyframes promo-dot-pulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

.promo-strip-item a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.promo-strip-item a:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

@keyframes live-dot {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-red) 60%, transparent);
  }

  70%,
  100% {
    box-shadow: 0 0 0 6px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-strip-pulse {
    animation: none;
    opacity: 0;
  }
}

@keyframes promo-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.03em;
  padding-top: 0;
  padding-bottom: 0;
  margin-inline-end: 1.25rem;
}

.header-wide {
  max-width: 1600px;
  align-items: center;
}

/* The logo (theme/intrusion-logo.webp) is pre-cropped to the wordmark;
   only its height is set. */
.site-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  padding: 0;
  filter: none;
  transition: opacity var(--t) var(--ease);
}

.navbar-brand:hover .site-logo {
  opacity: 0.85;
}

.site-logo-light {
  display: none;
}

.site-logo-dark {
  display: inline-block;
  filter: brightness(0) invert(1) contrast(1.08);
}

.navbar-toggler-icon {
  filter: invert(1) brightness(1.3);
}

.brand-mark {
  color: var(--accent);
}

/* Nav links: muted until hovered; the current page gets the full text
   colour and an accent bar under it that slides open. */
.nav-link {
  position: relative;
  color: var(--text-soft);
  padding-inline-start: 0.85rem !important;
  padding-inline-end: 0.85rem !important;
  font-size: 0.96rem;
  font-weight: 550;
  transition: color var(--t) var(--ease);
}

.site-nav .nav-link::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}

@media (min-width: 992px) {
  .navbar-nav {
    gap: 0.5rem;
  }
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link.show,
.site-nav .nav-item.show .nav-link {
  color: var(--text);
}

.site-nav .nav-link.active,
.site-nav .nav-link[aria-current="page"] {
  color: var(--text);
  font-weight: 650;
}

.site-nav .nav-link.active::before,
.site-nav .nav-link[aria-current="page"]::before {
  transform: scaleX(1);
}

/* The trainings menu: a flat card that drops in, each item ticked in the
   accent on hover like a Signal table row. */
.dropdown-menu-dark {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--radius);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-color: var(--text);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--accent) 10%, transparent);
  --bs-dropdown-link-active-bg: color-mix(in srgb, var(--accent) 18%, transparent);
  --bs-dropdown-font-size: 0.95rem;
  padding: 0.35rem;
  margin-top: 0.35rem !important;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.45);
  animation: drop-in 0.16s var(--ease);
}

.dropdown-item {
  position: relative;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius);
  color: var(--text);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.dropdown-item:hover {
  box-shadow: inset 2px 0 0 var(--accent);
}

.nav-training__menu {
  min-width: 19rem;
}

.nav-training__item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  white-space: normal;
}

.nav-training__item strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 650;
}

.nav-training__item small {
  display: block;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.nav-training__item[aria-current="page"],
.nav-training__item.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}

.nav-training__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-training__item .course-code {
  flex: none;
  margin-top: 0.1rem;
}

.nav-training__header {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-training .dropdown-divider {
  border-color: var(--border);
}

/* In the phone menu the list opens in place, without the floating card. */
@media (max-width: 991.98px) {
  .nav-training__menu {
    min-width: 0;
    margin-top: 0 !important;
    box-shadow: none;
  }
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* The primary button: solid accent, text in --on-accent for contrast, a
   soft accent glow under it on hover. */
.btn-accent {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
  font-weight: 650;
  border-radius: var(--radius);
}

.btn-accent:hover,
.btn-accent:focus-visible,
.btn-accent:active {
  color: var(--on-accent);
  background: color-mix(in srgb, var(--accent) 86%, var(--text));
  border-color: color-mix(in srgb, var(--accent) 86%, var(--text));
  box-shadow: 0 6px 14px -10px var(--accent);
}

.nav-actions {
  row-gap: 0.55rem !important;
}

.nav-auth-link,
.nav-actions .btn-group-training {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}

/* Header buttons are ghost buttons whatever Bootstrap class the theme
   script gives them (btn-outline-light / btn-outline-dark). */
.site-nav .btn-outline-light,
.site-nav .btn-outline-dark {
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.8rem;
  --bs-btn-font-size: 0.9rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 550;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background-color var(--t) var(--ease), transform 0.08s;
}

.site-nav .btn-outline-light:hover,
.site-nav .btn-outline-dark:hover,
.site-nav .btn-outline-light:focus-visible,
.site-nav .btn-outline-dark:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.site-nav .btn:active {
  transform: translateY(1px);
}

.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius);
}

.site-nav .btn-icon {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
}

.nav-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}

.btn-icon:hover .nav-icon {
  transform: translateY(-1px);
}

/* The theme button's icon turns, as Signal's does. */
#themeToggle:hover .nav-icon {
  transform: rotate(40deg);
}

.auth-card a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.auth-card a:hover,
.auth-card a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

/* ---- Home hero ------------------------------------------------------- */
/* The hero is always a dark "operations room": its own dark token values
   apply in both themes, so the text and buttons read over the media. */
.hero-section {
  padding-top: var(--header-height);
  padding-bottom: 1.5rem;
}

.hero-wide {
  min-height: 100svh;
  height: auto;
}

.hero-video-bg {
  --text: #e3e6ea;
  --text-soft: #a3abb5;
  --border: #2a3038;
  --surface: #13161a;
  --accent: #6ea8dc;
  --on-accent: #0c0e11;
  --grid-line: rgba(227, 230, 234, 0.05);
  position: relative;
  overflow: hidden;
  color: var(--text);
  background-color: #0c0e11;
}

/* A shade from the left keeps the copy readable over the backdrop words;
   the radar (z-index 2) sits above it, the copy (3) above everything. */
.hero-video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 14, 17, 0.92) 0%, rgba(12, 14, 17, 0.55) 45%, rgba(12, 14, 17, 0) 75%),
    linear-gradient(180deg, rgba(12, 14, 17, 0) 60%, rgba(12, 14, 17, 0.85) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
}

.hero-title {
  font-size: clamp(1.8rem, 1.25rem + 1.5vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}

/* Marked words in the hero lines (dashboard: **bold**, [[accent]]). */
.hero-section .hero-accent {
  color: var(--accent);
}

/* The script faces have no Arabic letters: Arabic keeps the site's own face. */
html[dir="rtl"] .rulebook-pledge__name {
  font-family: inherit;
  font-weight: 600;
}

.hero-section .lead strong {
  color: var(--text);
  font-weight: 650;
}

.hero-row-offset {
  margin-top: 0;
  min-height: calc(100svh - var(--header-height) - 1.5rem);
}

/* On wide screens the copy sits in the lower part of the hero, lifted off the bottom edge. */
@media (min-width: 992px) {
  .hero-row-offset {
    padding-bottom: clamp(3rem, 14vh, 9rem);
  }
}

/* The board grid over the whole hero. */
.hero-video-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* The hero copy sits in a bracketed console panel. */
.terminal-hero {
  position: relative;
  padding: 1.75rem 2rem 1.9rem;
  background-color: color-mix(in srgb, #0c0e11 55%, transparent);
  backdrop-filter: blur(3px);
  border-inline-start: 1px solid var(--border);
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.hero-section .lead.text-soft {
  color: var(--text-soft);
  max-width: 70ch;
}


.hero-media-placeholder {
  min-height: 360px;
  border-radius: var(--radius);
  border: 1px dashed rgba(143, 217, 255, 0.5);
  background:
    linear-gradient(140deg, rgba(19, 39, 63, 0.95), rgba(9, 22, 39, 0.95)),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.03) 0,
      rgba(255, 255, 255, 0.03) 12px,
      rgba(255, 255, 255, 0.01) 12px,
      rgba(255, 255, 255, 0.01) 24px
    );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.4rem;
}

.placeholder-label {
  display: inline-block;
  margin-bottom: 0.8rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(24, 214, 165, 0.5);
  color: #aefbe8;
  font-weight: 700;
}

/* ---- Cards ------------------------------------------------------------- */
/* A card is a flat panel framed by corner brackets (an evidence frame, the
   same brackets as the Intrusion logo). The brackets take the accent while
   the pointer is over the card. --brk is registered so it can animate. */
@property --brk {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

.glass-card,
.card-theme::before {
  --brk: color-mix(in srgb, var(--text) 30%, transparent);
  background-image:
    linear-gradient(var(--brk), var(--brk)),
    linear-gradient(var(--brk), var(--brk)),
    linear-gradient(var(--brk), var(--brk)),
    linear-gradient(var(--brk), var(--brk));
  background-size: 12px 2px, 2px 12px, 12px 2px, 2px 12px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  transition: --brk 0.25s var(--ease);
}

/* Panels (forms, sidebars, content blocks): brackets only, no lift. */
.glass-card {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  transition: --brk 0.25s var(--ease), border-color 0.25s var(--ease);
}

.glass-card:hover {
  --brk: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

/* About page gaps: the gap in red, our answer in the accent blue under a dashed line. */
.about-gap {
  --brk: var(--danger);
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: 2px solid color-mix(in srgb, var(--danger) 70%, transparent);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}

.about-gap:hover {
  --brk: var(--danger);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  border-top-color: var(--danger);
}

.about-gap__number,
.about-gap__label {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-gap__number {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--danger);
}

/* A small blinking marker, like an open alert. */
.about-gap__number::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent);
  animation: about-gap-blink 1.6s steps(1) infinite;
}

@keyframes about-gap-blink {
  50% {
    opacity: 0.25;
  }
}

.about-gap__title {
  color: var(--danger);
}

.about-gap__answer {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
  color: var(--text);
}

.about-gap__label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent);
}

/* Founder: a large "7" beside the text, then the fields as tags. */
.about-founder {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: start;
}

.about-founder__side {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.about-founder__photo {
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  border: 1px solid var(--border);
}

.about-founder__bio > :last-child {
  margin-bottom: 0;
}

.about-founder__bio {
  color: var(--text-soft);
}

.about-founder__years {
  display: grid;
  justify-items: center;
  min-width: 8rem;
  padding: 1rem 0.5rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.about-founder__number {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
}

.about-founder__unit {
  margin-top: 0.4rem;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.about-founder__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.about-founder__tags li {
  padding: 0.3rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
}

/* Team cards: avatar or initial, name and role, then the expertise tags. */
.about-person {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-person__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.about-person__avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 700;
}

.about-person__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-person__link {
  color: var(--text);
  text-decoration: none;
}

.about-person__link:hover {
  color: var(--accent);
}

.about-person__bio {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

.about-person__bio > :last-child {
  margin-bottom: 0;
}

.about-person__tags li {
  font-size: 0.75rem;
}

@media (max-width: 767.98px) {
  .about-founder {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .about-founder__side {
    justify-items: start;
    grid-auto-flow: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-gap,
  .about-gap:hover {
    transition: none;
    transform: none;
  }

  .about-gap__number::before {
    animation: none;
  }
}

/* Listing cards: the brackets are drawn over the card (so a cover image
   cannot hide them), and the card lifts a little under the pointer. */
.card-theme {
  --bs-card-color: var(--text);
  --bs-card-border-radius: var(--radius);
  --bs-card-inner-border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.card-theme::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  pointer-events: none;
}

.card-theme:hover::before,
.course-link:hover .card-theme::before,
.course-link:focus-visible .card-theme::before {
  --brk: var(--accent);
}

.card-theme:not(.testimonial-card):hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: var(--shadow-hover);
}

.card-theme .card-img-top {
  border-radius: 0;
  object-fit: cover;
  height: 150px;
  border-bottom: 1px solid var(--border);
}

/* Lists with a small accent square per item (Signal's section mark). */
.feature-list li {
  margin-bottom: 0.8rem;
  padding-inline-start: 1.4rem;
  position: relative;
}

.feature-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  position: absolute;
  inset-inline-start: 0;
  top: 0.6rem;
}

.vp-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(59, 130, 246, 0.25), rgba(14, 165, 233, 0.16));
  border: 1px solid rgba(143, 217, 255, 0.32);
  font-size: 1.25rem;
}

.course-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.blog-link {
  text-decoration: none;
  color: inherit;
}

.blog-card .blog-card__title {
  color: var(--text);
}

/* Cards / List switch: a segmented pair of Signal chips. */
.blog-layout-toggle .btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-soft);
  min-height: 36px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blog-layout-toggle .btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.blog-layout-toggle .btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.blog-layout-toggle .btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.blog-list-view > .blog-post-column {
  width: 100%;
}

.blog-list-view .blog-card {
  flex-direction: row;
  overflow: hidden;
}

.blog-list-view .blog-card > .blog-link {
  flex: 0 0 30%;
  max-width: 280px;
}

.blog-list-view .blog-card .card-img-top {
  height: 100%;
  min-height: 200px;
  border-radius: 0;
}

.blog-list-view .card-body {
  min-width: 0;
}

@media (max-width: 575.98px) {
  .blog-list-view .blog-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
    align-items: start;
  }

  .blog-list-view .blog-card > .blog-link {
    display: none;
  }

  .blog-list-view .blog-card .card-img-top {
    width: 100%;
    height: 88px;
    min-height: 0;
  }

  .blog-list-view .card-body {
    display: contents;
  }

  .blog-list-view .blog-post-keywords {
    grid-column: 1;
    min-width: 0;
  }

  .blog-list-view .blog-card .blog-card__title {
    grid-column: 1;
    margin: 0 !important;
    overflow-wrap: anywhere;
  }

  .blog-list-view .card-body > p,
  .blog-list-view .card-body > .btn {
    grid-column: 1 / -1;
    margin: 0;
  }

  .blog-list-view .card-body > .btn {
    justify-self: start;
  }
}

.blog-card .blog-card__title .blog-link {
  transition: color var(--t) var(--ease);
}

.blog-card .blog-card__title .blog-link:hover,
.blog-card .blog-card__title .blog-link:focus {
  color: var(--accent);
  text-decoration: none;
}

.course-card {
  overflow: hidden;
}

.course-card h3 {
  color: var(--text);
  font-size: 1.04rem;
}

.course-keywords {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  min-width: 0;
}

.course-keywords .badge {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.35em 0.5em;
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#course-listing {
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

/* Cover images are a little muted at rest and come to full colour, slightly
   zoomed, under the pointer. */
.card-theme .card-img-top {
  filter: saturate(0.8) brightness(0.95);
  transition: transform 0.5s var(--ease), filter 0.35s var(--ease);
}

.card-theme:hover .card-img-top,
.course-link:hover .card-img-top {
  filter: none;
}

.course-structure-cover {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* "View course" reads as a console command: monospace capitals and an
   arrow that slides forward on hover. */
.course-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.course-cta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}

.course-link:hover .course-cta-icon,
.course-link:focus-visible .course-cta-icon {
  transform: translateX(5px);
}

.course-link:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  .course-cta-icon {
    transition: none;
  }

  .course-link:hover .course-cta-icon,
  .course-link:focus-visible .course-cta-icon {
    transform: none;
  }
}

.course-link:hover .course-card {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: var(--shadow-hover);
}

.course-link:hover .card-img-top {
  transform: scale(1.03);
}

.blog-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.blog-card-hover-image {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  object-fit: cover;
  filter: blur(3px);
  opacity: 0;
  transform: translateY(105%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
  pointer-events: none;
  z-index: -1;
}

.blog-card:focus-within .blog-card-hover-image {
  transform: translateY(0);
  opacity: 0.35;
}

@media (max-width: 575.98px) {
  .blog-card > .blog-link {
    display: none;
  }

  .blog-card .blog-card-hover-image {
    transform: translateY(0);
    opacity: 0.3;
  }
}

.blog-card > .blog-link {
  display: block;
  overflow: hidden;
}

.blog-card .card-img-top {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .blog-card:hover .blog-card-hover-image {
    transform: translateY(0);
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card .blog-card-hover-image {
    transition: none;
    transform: none;
  }
}

/* Blog index: a console-style search line, topic chips, a wide feature for
   the newest post, and a one-line date stamp on every card. */
.blog-hero__lead {
  max-width: 57.5rem;
  margin: 0.5rem 0 1.25rem;
}

.blog-search {
  display: flex;
  align-items: stretch;
  max-width: 46rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--t) var(--ease);
}

.blog-search:focus-within {
  border-color: var(--accent);
}

.blog-search__prompt {
  display: flex;
  align-items: center;
  padding-inline: 0.85rem;
  border-inline-end: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.82rem;
  white-space: nowrap;
}

.blog-search__input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.85rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.92rem;
}

.blog-search__input:focus {
  outline: none;
}

.blog-search__clear {
  display: flex;
  align-items: center;
  padding-inline: 0.75rem;
  color: var(--text-soft);
  font-size: 0.85rem;
  text-decoration: none;
}

.blog-search__clear:hover,
.blog-search__clear:focus-visible {
  color: var(--accent);
}

.blog-search .btn {
  border-radius: 0;
}

.blog-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}

.blog-topic {
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-decoration: none;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.blog-topic:hover,
.blog-topic:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.blog-topic[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.blog-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  margin-bottom: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.blog-feature:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow-hover);
}

.blog-feature__media {
  display: block;
  background: var(--bg);
}

.blog-feature__media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.blog-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.blog-feature__label {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog-feature h2 {
  margin: 0.6rem 0 0.75rem;
  font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem);
}

.blog-meta {
  margin-top: auto;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.blog-feature .blog-meta {
  margin-top: 0;
}

.blog-feature__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.blog-feature__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.blog-feature__label svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* A post's language tag: a language name in either script, so no capitals or letter-spacing.
   An Arabic post's tag takes the batch cards' language colour. */
.course-tag.blog-lang-tag {
  --chip-track: 0em;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: none;
  text-box: none;
}

.blog-lang-tag--ar {
  color: var(--lang-ink);
  border-color: color-mix(in srgb, var(--lang-ink) 45%, var(--border));
}

/* On a blog card the tag sits on the top corner of the cover. */
.blog-card__lang {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 1;
  pointer-events: none;
}

.blog-card__lang .blog-lang-tag {
  background: var(--surface);
}

/* Phones show no cover: the tag opens the card instead. */
@media (max-width: 575.98px) {
  .blog-card__lang {
    position: static;
    padding: 1rem 1rem 0;
  }

  .blog-list-view .blog-card__lang {
    padding: 0;
  }
}

.blog-meta__comments {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.blog-meta__comments svg {
  width: 0.9rem;
  height: 0.9rem;
}

.blog-languages {
  align-items: center;
  margin-top: 0.6rem;
}

.blog-languages__label {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-results {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.blog-empty {
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.blog-empty__code {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
}

@media (max-width: 767.98px) {
  .blog-feature {
    grid-template-columns: 1fr;
  }

  .blog-feature__media img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .blog-search__prompt {
    display: none;
  }
}

.blog-subscribe-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-inline-start: 3px solid var(--accent);
}

/* Pagination: squared monospace cells, the current page in the accent. */
.blog-pagination nav {
  width: 100%;
  gap: 1rem;
}

.blog-pagination nav > div {
  gap: 1rem;
}

.blog-pagination .pagination {
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0;
}

.blog-pagination .page-link {
  min-width: 2.4rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius) !important;
  background: transparent;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.86rem;
  text-align: center;
  box-shadow: none;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.blog-pagination .page-link:hover,
.blog-pagination .page-link:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  box-shadow: none;
}

.blog-pagination .page-item.active .page-link {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.blog-pagination .page-item.disabled .page-link {
  border-color: var(--border);
  background: transparent;
  color: var(--text-soft);
  opacity: 0.5;
}

.blog-pagination .small {
  margin-bottom: 0;
  color: var(--text-soft) !important;
  font-family: var(--mono);
}

@media (max-width: 575.98px) {
  .blog-pagination nav,
  .blog-pagination nav > div,
  .blog-pagination .pagination {
    justify-content: center !important;
  }

  .blog-pagination .page-link {
    min-width: 7.5rem;
  }
}

.course-link:hover .course-cta,
.course-cta:hover,
.course-cta:focus-visible {
  color: var(--text);
  border-color: var(--text);
}

.course-link:hover .course-card .badge-soft {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.btn-group-training {
  background: rgb(229, 58, 58);
  color: #ffffff;
  font-weight: 700;
  border: none;
}

.btn-group-training:hover {
  color: #ffffff;
  background: rgb(210, 48, 48);
}

/* ---- Testimonials ----------------------------------------------------- */
.testimonial-shell {
  position: relative;
  min-height: 420px;
  margin-top: 1rem;
  overflow: hidden;
}

.testimonial-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(400px, 82%);
  min-height: 330px;
  padding: 1.25rem 1.25rem 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease), filter 0.45s var(--ease), border-color 0.25s var(--ease);
  transform-origin: center center;
}

/* A large monospace quote mark in the accent opens each quote. */
.testimonial-text {
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: auto;
  padding-bottom: 1rem;
}

.testimonial-text::before {
  content: "\201C";
  display: block;
  height: 1.6rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 2.6rem;
  line-height: 1;
}

.testimonial-card h3 {
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
  font-weight: 650;
}

.testimonial-card .text-soft {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.testimonial-center {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.testimonial-center {
  opacity: 1;
  filter: blur(0);
  z-index: 4;
  transform: translateX(-50%) translateY(0) scale(1);
}

.testimonial-left {
  opacity: 0.45;
  filter: blur(0.4px);
  z-index: 3;
  transform: translateX(calc(-50% - 230px)) translateY(38px) scale(0.88);
}

.testimonial-right {
  opacity: 0.45;
  filter: blur(0.4px);
  z-index: 3;
  transform: translateX(calc(-50% + 230px)) translateY(38px) scale(0.88);
}

.testimonial-hidden {
  opacity: 0;
  z-index: 1;
  transform: translateX(-50%) translateY(46px) scale(0.82);
  pointer-events: none;
}

/* Carousel arrows: squared ghost buttons. */
.testimonial-arrow {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  z-index: 6;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.testimonial-arrow:hover,
.testimonial-arrow:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.testimonial-arrow-left {
  left: 2px;
}

.testimonial-arrow-right {
  right: 2px;
}

/* ---- Section heads ----------------------------------------------------- */
/* Each section heading on a page is numbered like a report section
   ("01 /", "02 /" ...) in the accent, generated by a CSS counter. */
main {
  flex: 1 0 auto;
  counter-reset: section;
}

.section-head {
  counter-increment: section;
  margin-bottom: 1.25rem;
}

.section-head h2::before {
  content: counter(section, decimal-leading-zero) " /";
  display: block;
  margin-bottom: 0.55rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.section-head p {
  max-width: 77.5ch;
}

/* Home section subtitles are one sentence each: let them run the full width instead of breaking early. */
body[data-page="home"] .section-head p {
  max-width: none;
}

/* The terminal hero: a green prompt and a cursor in the logo's red. */
[data-terminal-hero] .terminal-line {
  min-height: 1em;
}

[data-terminal-hero] .terminal-prompt::before {
  content: ">";
  margin-inline-end: 0.6em;
  color: var(--ok);
  font-weight: 700;
}

[data-terminal-hero] .terminal-line.is-typing::after {
  content: "_";
  display: inline-block;
  margin-inline-start: 0.08em;
  color: var(--brand-red);
  animation: terminal-cursor 700ms step-end infinite;
}

/* The paragraph fades in whole once the typed lines are done (site.js adds .is-faded-in). */
[data-terminal-hero] [data-terminal-fade] {
  transition: opacity 700ms ease, transform 700ms ease;
}

.terminal-hero.is-terminal-running [data-terminal-fade]:not(.is-faded-in) {
  opacity: 0;
  transform: translateY(6px);
}

.terminal-hero.is-terminal-running .terminal-actions {
  opacity: 0;
  transform: translateY(8px);
}

.terminal-hero .terminal-actions {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 450ms ease, transform 450ms ease;
}

@keyframes terminal-cursor {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-terminal-hero] .terminal-line.is-typing::after {
    animation: none;
  }
}

.section-head h2 {
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.015em;
}

/* ---- Home standards: the rulebook ------------------------------------------ */
/* The academy's standards: an index beside one reading panel, like a rule file open
   in the console. Wide screens show one standard at a time and turn to the next by
   themselves (site.js); phones list every standard in full and hide the index. */
.rulebook {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem;
  align-items: stretch;
}

.rulebook__index {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.rulebook__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.95rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-soft);
  font-size: 1rem;
  font-weight: 550;
  line-height: 1.35;
  text-align: start;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

/* The accent bar on the current rule draws in from the top. */
.rulebook__tab::before {
  content: "";
  position: absolute;
  inset-block: -1px;
  inset-inline-start: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease);
}

.rulebook__tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.rulebook__tab[aria-selected="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.rulebook__tab[aria-selected="true"]::before {
  transform: scaleY(1);
}

.rulebook__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.rulebook__tab-number {
  flex: none;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.rulebook__tab[aria-selected="true"] .rulebook__tab-number {
  color: var(--accent);
}

.rulebook__panels {
  position: relative;
}

/* The reading panel: bracketed corners like the other console panels. */
.rulebook__panel {
  --brk: var(--accent);
  display: none;
  flex-direction: column;
  height: 100%;
  padding: 2rem 2.25rem 1.75rem;
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--brk), var(--brk)),
    linear-gradient(var(--brk), var(--brk)),
    linear-gradient(var(--brk), var(--brk)),
    linear-gradient(var(--brk), var(--brk));
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.rulebook__panel.is-active {
  display: flex;
  animation: rulebook-in 0.45s var(--ease) both;
}

@keyframes rulebook-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Behind the text: the standard's number, large and faint, and a light that follows the pointer. */
.rulebook__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.rulebook__panel::before {
  content: attr(data-number);
  position: absolute;
  inset-inline-end: 1.25rem;
  bottom: -2.2rem;
  z-index: -1;
  font-family: var(--mono);
  font-size: 11rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  opacity: 0.16;
  pointer-events: none;
}

.rulebook__panel.is-active::before {
  animation: rulebook-ghost 0.9s var(--ease) both;
}

.rulebook__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(260px circle at var(--rulebook-x, 85%) var(--rulebook-y, 15%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}

.rulebook:hover .rulebook__panel::after {
  opacity: 1;
}

@keyframes rulebook-ghost {
  from {
    opacity: 0;
    transform: translateY(2.5rem);
  }
}

.rulebook__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.rulebook__code {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rulebook__count {
  color: var(--text-soft);
}

/* The panel icon sits in a framed box that a scan line sweeps across, like the radar in the hero. */
.rulebook__icon-frame {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--radius);
}

.rulebook__icon-frame::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  transform: translateY(-110%);
  animation: rulebook-scan 3.2s var(--ease) infinite;
}

.rulebook__icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.rulebook__panel.is-active .rulebook__icon {
  animation: rulebook-icon-in 0.55s var(--ease) both;
}

@keyframes rulebook-scan {
  0% { transform: translateY(-110%); }
  55%, 100% { transform: translateY(260%); }
}

@keyframes rulebook-icon-in {
  from {
    opacity: 0;
    transform: scale(0.7) rotate(-8deg);
  }
}

/* Index entries: a small icon, and a bar that fills while the standard is on screen. */
.rulebook__tab-icon {
  flex: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease), transform 0.25s var(--ease);
}

.rulebook__tab:hover .rulebook__tab-icon,
.rulebook__tab[aria-selected="true"] .rulebook__tab-icon {
  opacity: 1;
  filter: none;
}

.rulebook__tab[aria-selected="true"] .rulebook__tab-icon {
  transform: scale(1.12);
}

.rulebook__tab-progress {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}

html[dir="rtl"] .rulebook__tab-progress {
  transform-origin: right;
}

.rulebook.is-turning .rulebook__tab[aria-selected="true"] .rulebook__tab-progress {
  opacity: 0.7;
  animation: rulebook-progress var(--rulebook-time, 8s) linear both;
}

.rulebook.is-held .rulebook__tab-progress {
  animation-play-state: paused !important;
}

@keyframes rulebook-progress {
  to { transform: scaleX(1); }
}

/* The panel's lines come in one after another. */
.rulebook__panel.is-active .rulebook__title {
  animation: rulebook-in 0.5s var(--ease) 0.08s both;
}

.rulebook__panel.is-active .rulebook__text {
  animation: rulebook-in 0.5s var(--ease) 0.18s both;
}

.rulebook__title {
  margin-bottom: 1rem;
  color: var(--text);
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.rulebook__text {
  max-width: 60ch;
  margin: 0;
  color: color-mix(in srgb, var(--text) 80%, var(--text-soft));
  font-size: 1.1rem;
  line-height: 1.75;
}

/* Text on the left, the standard's pixel scene on the right. */
.rulebook__body {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.rulebook__scene {
  flex: 0 0 auto;
  width: clamp(150px, 15vw, 210px);
  height: auto;
  image-rendering: pixelated;
  opacity: 0.95;
}

.rulebook__panel.is-active .rulebook__scene {
  animation: rulebook-scene-in 0.6s steps(6) 0.15s both;
}

@keyframes rulebook-scene-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
}

/* The founder's pledge: one line, then the name set like a signature. */
.rulebook-pledge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
}

.rulebook-pledge__text {
  margin: 0;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: end;
}

.rulebook-pledge figcaption {
  position: relative;
  display: grid;
  justify-items: end;
}

.rulebook-pledge__name {
  color: var(--accent);
  font-family: var(--script);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.rulebook-pledge__role {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[dir="rtl"] .rulebook-pledge figcaption {
  justify-items: end;
}

/* Where this rule sits among the others. */
.rulebook__ticks {
  display: flex;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 1.75rem;
}

.rulebook__ticks span {
  width: 12px;
  height: 3px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--text) 25%, transparent);
}

.rulebook__ticks span.is-on {
  width: 28px;
  background: var(--accent);
}

html[dir="rtl"] .rulebook [dir="auto"] {
  text-align: right;
}

@media (max-width: 991.98px) {
  .rulebook {
    grid-template-columns: 1fr;
  }

  .rulebook__index {
    display: none;
  }

  .rulebook__panels {
    display: grid;
    gap: 1rem;
  }

  .rulebook__panel,
  .rulebook__panel.is-active {
    display: flex;
    animation: none;
  }

  .rulebook__panel {
    padding: 1.4rem 1.35rem 1.35rem;
  }

  .rulebook__panel-head {
    margin-bottom: 1.1rem;
  }

  .rulebook__panel::before {
    font-size: 6.5rem;
    bottom: -1.2rem;
  }

  .rulebook__icon-frame {
    width: 56px;
    height: 56px;
  }

  .rulebook__icon {
    width: 36px;
    height: 36px;
  }

  .rulebook__panel .rulebook__title,
  .rulebook__panel .rulebook__text,
  .rulebook__panel .rulebook__icon {
    animation: none !important;
  }

  .rulebook__text {
    font-size: 1rem;
  }

  .rulebook__ticks {
    display: none;
  }

  .rulebook__scene {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rulebook__panel.is-active {
    animation: none;
  }

  .rulebook__tab::before {
    transition: none;
  }

  .rulebook__icon-frame::after,
  .rulebook__panel.is-active::before,
  .rulebook__panel.is-active .rulebook__scene,
  .rulebook__panel.is-active .rulebook__icon,
  .rulebook__panel.is-active .rulebook__title,
  .rulebook__panel.is-active .rulebook__text {
    animation: none;
  }
}

.cta-strip {
  border: 1px solid rgba(143, 217, 255, 0.23);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: linear-gradient(120deg, rgba(21, 40, 66, 0.95), rgba(9, 27, 37, 0.95));
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.subhero {
  padding: calc(var(--header-height) + 2.25rem) 0 2rem;
}

.subhero h1 {
  font-size: clamp(1.55rem, 1.15rem + 1vw, 1.95rem);
}

/* Training catalog: a deliberate spacing rhythm for the page header, filters, and cards. */
.subhero.trainings-hero {
  padding-top: calc(var(--header-height) + 2.25rem);
  padding-bottom: 2rem;
}

.trainings-hero .eyebrow {
  display: flex;
  width: fit-content;
  margin-bottom: 0.85rem;
}

.trainings-hero h1 {
  max-width: 72rem;
  margin: 0;
  line-height: 1.18;
}

.section-pad.trainings-catalog {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.trainings-catalog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 3rem;
  margin-bottom: 1.5rem;
}

.trainings-catalog-copy h2 {
  margin-bottom: 0.6rem;
}

.trainings-catalog-copy p {
  max-width: 52.5rem;
}

/* Catalog filters: Signal chips - hairline, monospace capitals; the chosen
   filter is filled with the accent. */
.trainings-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.trainings-filters .badge {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.trainings-grid {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.trainings-filters a.badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.trainings-filters a.badge:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.trainings-filters a.badge[aria-current="true"] {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.trainings-filters a.badge:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.training-card {
  overflow: hidden;
}

.training-card .card-body {
  padding: 1.1rem 1.1rem 1.2rem;
}

.training-card .card-body h2 {
  margin-bottom: 0.6rem;
  font-size: 1.04rem;
  line-height: 1.35;
}

.training-card-description {
  margin-bottom: 1.1rem;
  font-size: 0.96rem;
}

.training-card-meta {
  margin-bottom: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
}

/* Live trainings and self-paced courses. The track code is the first thing
   above every title: a monospace chip in the track's colour (tokens only, so
   it reads in both themes); then type, language, format and Free as tags. */
.course-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.course-code {
  --track-color: var(--accent);
  display: inline-flex;
  align-items: center;
  padding: 0.18em 0.5em;
  border: 1px solid var(--track-color);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--track-color) 14%, transparent);
  color: var(--track-color);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  white-space: nowrap;
}

.course-code--cyan { --track-color: var(--accent); }
.course-code--green { --track-color: var(--ok); }
.course-code--violet { --track-color: var(--violet); }
.course-code--amber { --track-color: var(--warning); }
.course-code--red { --track-color: var(--danger); }

.course-code--lg {
  font-size: 0.6em;
  vertical-align: middle;
  padding: 0.12em 0.45em;
}

.course-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.18em 0.45em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A small "on air" dot marks live trainings. */
.course-tag--live {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.course-tag--live::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-inline-end: 0.35rem;
  border-radius: 50%;
  background: currentColor;
}

.course-tag--ondemand {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.course-tag--free {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 55%, var(--border));
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}

/* Boxed capitals (tags, codes, chips) sit in the middle both ways: the box is trimmed to the
   capitals' height (they have no descenders, so a normal line box leaves them high), and the
   trailing letter-spacing is given back on the end side. */
.course-tag,
.course-code,
.blog-keyword,
.trainings-filters .badge {
  justify-content: center;
  padding-inline-end: calc(var(--chip-pad-x, 0.45em) - var(--chip-track, 0.06em));
}

.blog-keyword {
  --chip-pad-x: 0.55em;
  --chip-track: 0.04em;
}

.course-code {
  --chip-pad-x: 0.5em;
}

.trainings-filters .badge {
  --chip-pad-x: 0.8rem;
}

@supports (text-box: trim-both cap alphabetic) {
  .course-tag,
  .course-code,
  .blog-keyword {
    padding-block: 0.42em;
    line-height: 1;
    text-box: trim-both cap alphabetic;
  }

  .trainings-filters .badge {
    padding-block: 0.6rem;
    text-box: trim-both cap alphabetic;
  }
}

.training-card .card-body h3 {
  margin-bottom: 0.6rem;
  font-size: 1.04rem;
  line-height: 1.35;
}

.eyebrow-sep {
  margin: 0 0.5rem;
}

/* Arabic titles keep their own direction (dir="auto") but line up with the
   badges above them, like every other title. */
.training-card [dir="auto"],
.course-hero-overlay h1[dir="auto"] {
  text-align: left;
}

.eyebrow-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
}

.eyebrow-link:hover {
  text-decoration-color: currentColor;
}

.course-hero-overlay .course-tags {
  margin: 0.9rem 0 0;
}

/* What a live training / a self-paced course is: three short lines under
   the catalog title, each led by a monospace term. */
.catalog-explainer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 64rem;
}

.catalog-explainer li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-inline-start: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.93rem;
}

.catalog-explainer__term {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.catalog-other {
  color: var(--text-soft);
  font-size: 0.93rem;
}

/* Filters: one row of dropdowns; a chosen filter is outlined in the accent. */
.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.catalog-filters .form-select {
  width: auto;
  min-width: 10rem;
  max-width: 15rem;
  padding-inline-end: 2.1rem;
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

.catalog-filters .form-select[data-active] {
  border-color: var(--accent);
  color: var(--accent);
}

.catalog-filters__reset {
  font-family: var(--mono);
  font-size: 0.78rem;
}

@media (max-width: 767.98px) {
  .catalog-explainer {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-filters .form-select {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

/* Home: one tile per learning track. */
.track-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem;
}

.track-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.track-tile:hover {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-2px);
}

.track-tile:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.track-tile span.text-soft {
  font-family: var(--mono);
  font-size: 0.74rem;
}

/* Track roadmap: planned trainings in the track's one colour (--track-color from .course-code--*).
   Flat like the rest of the site: a phase shows by its status word and icon, and by how strongly
   the track colour shows on the meter (--phase-mix). */
.roadmap {
  --tc: var(--track-color, var(--accent));
}

.roadmap-phase--concept { --phase-mix: 0%; --phase-ink: var(--text-soft); }
.roadmap-phase--in_design { --phase-mix: 30%; --phase-ink: var(--violet); }
.roadmap-phase--in_production { --phase-mix: 55%; --phase-ink: var(--warning); }
.roadmap-phase--releasing { --phase-mix: 78%; --phase-ink: var(--accent); }
.roadmap-phase--available { --phase-mix: 100%; --phase-ink: var(--ok); }

/* Each track: its name, then its roadmap, straight on the section background. */
.roadmap-track {
  --tc: var(--track-color, var(--accent));
}

.roadmap-track + .roadmap-track,
.roadmap-track + .track-strip {
  margin-top: 2.5rem;
}

.roadmap-track__name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  color: var(--text);
  font-size: 1.15rem;
  text-decoration: none;
}

.roadmap-track__name:hover {
  color: var(--accent);
}

.roadmap-head {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.roadmap-vision {
  margin: 0;
  padding-inline-start: 0.85rem;
  border-inline-start: 2px solid var(--tc);
  color: var(--text);
}

.roadmap-icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* The meter: one bar, shaded from full colour (open) to faint (concept). */
.roadmap-meter {
  display: flex;
  gap: 2px;
  height: 6px;
}

.roadmap-meter__part,
.roadmap-legend__swatch {
  background: color-mix(in srgb, var(--tc) max(var(--phase-mix), 12%), var(--border));
}

.roadmap-meter__part {
  flex: 1 1 0;
}

.roadmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.74rem;
}

.roadmap-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.roadmap-legend__swatch {
  width: 10px;
  height: 6px;
}

.roadmap-legend li .roadmap-icon {
  color: var(--phase-ink);
}

.roadmap-legend b {
  color: var(--text);
}

/* Cards wrap; their order is the admin's, not a promise of release order. */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: 0.85rem;
  margin: 0;
}

.roadmap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--t) var(--ease);
}

.roadmap-card:hover,
.roadmap-card:focus-within {
  border-color: var(--tc);
}

/* Not out yet: the card fades back, all but its status word and icon; hover brings it back. */
.roadmap-phase--concept.roadmap-card,
.roadmap-phase--in_design.roadmap-card,
.roadmap-phase--in_production.roadmap-card {
  --card-fade: 0.3;
}

.roadmap-card > :not(.roadmap-card__top),
.roadmap-card__top > :not(.roadmap-status) {
  opacity: var(--card-fade, 1);
  transition: opacity var(--t) var(--ease);
}

.roadmap-card:hover > *,
.roadmap-card:focus-within > *,
.roadmap-card:hover .roadmap-card__top > *,
.roadmap-card:focus-within .roadmap-card__top > * {
  opacity: 1;
}

.roadmap-card__top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.roadmap-card__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--tc) 10%, transparent);
  color: var(--tc);
  font-size: 1.25rem;
}

.roadmap-card__code {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.roadmap-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  color: var(--phase-ink);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.roadmap-status .roadmap-icon {
  font-size: 0.95rem;
}

.roadmap-card__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.roadmap-card__summary {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.86rem;
}

.roadmap-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.roadmap-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.roadmap-tag {
  padding: 0.1em 0.45em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.roadmap-tag--strong {
  border-color: var(--tc);
  color: var(--tc);
}

.roadmap-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tc);
  font-family: var(--mono);
  font-size: 0.74rem;
  text-decoration: none;
}

.roadmap-card__action:hover {
  color: var(--text);
}

.roadmap-card__action:focus-visible {
  outline: 1px solid var(--tc);
  outline-offset: 3px;
}

.roadmap-modal__course {
  margin-bottom: 0.4rem;
  font-family: var(--mono);
  font-weight: 700;
}

/* Track page: one block per level. */
.roadmap-level {
  margin: 1.5rem 0 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* Track page: the path, one numbered step per program. */
.track-path {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1.5rem;
}

.track-path-step {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Course title and subtitle: the subtitle reads as the course's scope line,
   set off by a short gradient rule in the theme accents. */
.course-title {
  margin-bottom: 0;
  letter-spacing: -0.01em;
}

.course-subtitle {
  position: relative;
  max-width: 65rem;
  margin: 0.75rem 0 0;
  padding-inline-start: 1rem;
  color: color-mix(in srgb, var(--text) 82%, var(--accent));
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.5;
}

.course-subtitle::before {
  content: "";
  position: absolute;
  top: 0.2em;
  bottom: 0.2em;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--violet));
}

/* Quiet link from every course to the academy's standards on the home page. */
.course-standards-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.course-standards-link:hover span,
.course-standards-link:focus-visible span {
  transform: translateX(4px);
}

.course-standards-link span {
  transition: transform 0.2s var(--ease);
}

html[dir="rtl"] .course-standards-link span {
  display: inline-block;
  scale: -1 1;
}

.training-card-subtitle {
  margin: -0.35rem 0 0.6rem;
  color: color-mix(in srgb, var(--text) 70%, var(--accent));
  font-size: 0.86rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Play buttons: a triangle in a ring. */
.course-play {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.course-play__icon {
  position: relative;
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  flex: none;
}

.course-play__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 0.5rem;
  border-color: transparent transparent transparent currentColor;
}

.course-play__icon--lg {
  width: 3.6rem;
  height: 3.6rem;
  border-width: 2px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}

.course-play__icon--lg::after {
  border-width: 0.65rem 0 0.65rem 1.05rem;
}

.course-overview__lead {
  font-size: 1.05rem;
}

/* "Why take this course": a poster that becomes the player in place. */
/* Course overview: a note when the course runs in several languages, and
   the prerequisites as a checklist. */
.course-lang-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--lang-ink) 40%, var(--border));
  border-inline-start: 3px solid var(--lang-ink);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--lang-ink) 7%, transparent);
  color: var(--text);
}

.course-lang-note svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  fill: none;
  stroke: var(--lang-ink);
  stroke-width: 1.6;
}

.course-lang-note a {
  color: var(--lang-ink);
  font-weight: 600;
}

.course-prereqs {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--border);
}

.course-prereqs__title {
  margin-bottom: 0.6rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.course-prereqs li {
  position: relative;
  padding-inline-start: 1.5rem;
  margin-bottom: 0.4rem;
  color: var(--text-soft);
}

.course-prereqs li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  color: var(--ok);
  font-weight: 700;
}

/* Two "why" videos: a pair of language chips above the player. */
.course-why__langs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.course-why__langs button {
  flex: 1;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.course-why__langs button:hover {
  border-color: var(--lang-ink);
  color: var(--lang-ink);
}

.course-why__langs button[aria-pressed="true"] {
  border-color: var(--lang-ink);
  background: var(--lang-ink);
  color: var(--bg);
}

.course-why {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.course-why__title {
  margin-bottom: 0.75rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.course-why__poster {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  color: #fff;
  cursor: pointer;
}

.course-why__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: opacity var(--t) var(--ease), transform 0.4s var(--ease);
}

.course-why__poster .course-play__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.6rem;
  height: 3.6rem;
  transform: translate(-50%, -50%);
}

.course-why__poster:hover img,
.course-why__poster:focus-visible img {
  opacity: 0.95;
  transform: scale(1.03);
}

.course-why__poster:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.course-why__player {
  border-radius: var(--radius);
  overflow: hidden;
}

.course-video-modal .modal-body {
  background: #000;
}

.course-video-modal__frame {
  width: min(100%, calc((100vh - 4.5rem) * 16 / 9));
}

/* Course testimonials: quote cards in a responsive grid. */
.course-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}

.course-quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.course-quote blockquote {
  position: relative;
  margin: 0;
  padding-top: 1.4rem;
  line-height: 1.6;
}

.course-quote blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.6rem;
  left: -0.1rem;
  color: var(--accent);
  font-size: 2.6rem;
  line-height: 1;
}

.course-quote figcaption {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  font-size: 0.9rem;
}

.course-quote figcaption span {
  color: var(--text-soft);
}

/* Request form: what it costs, line by line. */
.price-summary {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  font-size: 0.93rem;
}

.price-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0;
}

.price-summary dt {
  font-weight: 400;
  color: var(--text-soft);
}

.price-summary dd {
  margin: 0;
  font-family: var(--mono);
}

.price-summary__minus dd {
  color: var(--ok);
}

.price-summary__total {
  margin-top: 0.35rem;
  padding-top: 0.5rem !important;
  border-top: 1px dashed var(--border);
}

.price-summary__total dt,
.price-summary__total dd {
  color: var(--text);
  font-weight: 700;
}

.coupon-check {
  display: flex;
  gap: 0.5rem;
}

.coupon-check .form-control {
  text-transform: uppercase;
}

.coupon-result {
  margin: 0.4rem 0 0;
  font-size: 0.86rem;
  color: var(--text-soft);
}

.coupon-result[data-state="ok"] {
  color: var(--ok);
}

.coupon-result[data-state="error"] {
  color: var(--danger);
}

/* Home "Our products": Signal as one showcase - the pitch on one side, a Signal Console
   window with the time-to-answer bars laid over it on the other. */
.signal-showcase {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem 2.5rem;
  align-items: center;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--ok) 8%, transparent), transparent 50%),
    var(--surface);
}

.signal-showcase__brand {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
  color: inherit;
  text-decoration: none;
}

.signal-showcase .signal-mark--light,
body.light-theme .signal-showcase .signal-mark--dark {
  display: none;
}

body.light-theme .signal-showcase .signal-mark--light {
  display: inline-block;
}

.signal-showcase h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.3rem, 1rem + 0.8vw, 1.7rem);
}

.signal-showcase h3 a {
  color: inherit;
  text-decoration: none;
}

.signal-showcase h3 a:hover {
  color: var(--accent);
}

.signal-showcase__points {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 1.5rem;
}

.signal-showcase__points li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  color: var(--text-soft);
}

.signal-showcase__points svg {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signal-showcase__points strong {
  color: var(--text);
  font-family: var(--mono);
}

/* The enterprise line under the points, linking to the Signal page's enterprise section. */
.signal-showcase__enterprise {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: -0.5rem 0 1.5rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--border));
  border-inline-start: 3px solid var(--ok);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ok) 7%, transparent);
  color: var(--text-soft);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color var(--t) var(--ease);
}

.signal-showcase__enterprise:hover {
  border-color: var(--ok);
  color: var(--text-soft);
}

.signal-showcase__enterprise svg {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--ok);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signal-showcase__enterprise strong {
  color: var(--ok);
}

.signal-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.signal-showcase__visual {
  position: relative;
  display: block;
  padding-bottom: 2rem;
  color: inherit;
  text-decoration: none;
}

.signal-showcase__window {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #0c0f14;
  box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}

.signal-showcase__visual:hover .signal-showcase__window {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.signal-showcase__bar {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid #1f2630;
  color: #8b95a3;
  font: 0.72rem/1 var(--mono);
}

.signal-showcase__bar i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #3a4350;
}

.signal-showcase__bar span {
  margin-inline-start: 0.5rem;
}

.signal-showcase__window img {
  display: block;
  width: 100%;
  height: auto;
}

/* The bars card overlaps the window's lower corner. */
.signal-showcase__race {
  position: absolute;
  inset-inline-start: -1.25rem;
  bottom: 0;
  display: grid;
  gap: 0.35rem;
  width: min(19rem, 70%);
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.6);
}

.signal-showcase__race-title {
  color: var(--accent);
  font: 600 0.7rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signal-showcase__lane {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  color: var(--text-soft);
  font-size: 0.75rem;
}

.signal-showcase__lane i {
  display: block;
  width: 0;
  height: 0.45rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--danger) 65%, var(--surface));
  transition: width 1.1s var(--ease);
}

.signal-showcase__lane.is-signal {
  color: var(--ok);
  font-weight: 600;
}

.signal-showcase__lane.is-signal i {
  min-width: 0.35rem;
  background: var(--ok);
}

.reveal.show .signal-showcase__lane i {
  width: var(--w);
}

@media (max-width: 991.98px) {
  .signal-showcase {
    grid-template-columns: minmax(0, 1fr);
  }

  .signal-showcase__race {
    inset-inline-start: 0.75rem;
  }
}

@media (max-width: 575.98px) {
  .signal-showcase {
    padding: 1.1rem;
  }

  .signal-showcase__visual {
    padding-bottom: 0;
  }

  .signal-showcase__race {
    position: static;
    width: 100%;
    margin-top: 0.75rem;
  }
}

/* Home: a section that opens the page (the hero hidden in the dashboard)
   clears the fixed header. */
.home-section--lead {
  padding-top: calc(var(--header-height) + 2.5rem);
}

/* Home: a custom section written in the dashboard - text in a flat box. */
.home-custom__box {
  max-width: 62rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}

.home-custom__box p {
  color: var(--text-soft);
  line-height: 1.7;
}

.home-custom__box .btn {
  margin-top: 0.5rem;
}

/* Home: teams and companies - the pitch, three steps, and what they get. */
.team-plan {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 50%),
    var(--surface);
}

.team-plan h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.2;
}

.team-plan__lead {
  margin: 0.75rem 0 1.5rem;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}

.team-plan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.team-plan__steps {
  display: grid;
  gap: 0.55rem;
  margin: 1.75rem 0 0;
}

.team-plan__steps li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.team-plan__steps span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
}

.team-plan__benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  align-content: start;
}

.team-plan__benefits li {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}

.team-plan__benefits svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.team-plan__benefits h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.team-plan__benefits p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  .team-plan {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .team-plan__benefits {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Prices are readouts: monospace figures, the current price in the "ok"
   green, the saving as a text-only green tag. */
.training-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
}

.training-price-amounts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}

.training-price-original {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.training-price-current {
  color: var(--ok);
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.training-price-saving {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.41rem 0.15rem 0.45rem;
  line-height: 1.3;
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ok);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.training-price-plan {
  flex-basis: 100%;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.training-price-panel {
  padding: 0.9rem 1rem;
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.training-batch-price {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem 0;
}

.training-batch-price + .training-batch-price {
  border-top: 1px dashed var(--border);
}

.training-card-actions {
  padding-top: 0.25rem;
}

@media (max-width: 991.98px) {
  .subhero.trainings-hero {
    padding-top: calc(var(--header-height) + 2.5rem);
    padding-bottom: 2.25rem;
  }

  .section-pad.trainings-catalog {
    padding-top: 2.25rem;
    padding-bottom: 4rem;
  }

  .trainings-catalog-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.4rem;
  }

  .trainings-filters {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .subhero.trainings-hero {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 1.75rem;
  }

  .section-pad.trainings-catalog {
    padding-top: 1.75rem;
    padding-bottom: 3rem;
  }

  .trainings-catalog-head {
    margin-bottom: 1.75rem;
  }

  .trainings-grid {
    --bs-gutter-y: 1.25rem;
  }

  .training-card .card-body {
    padding: 1.1rem;
  }
}

/* ---- Course page ------------------------------------------------------ */
/* The course hero is the same always-dark console as the home hero: local
   dark tokens, the media under a graphite overlay and the board grid. */
.course-hero {
  --text: #e3e6ea;
  --text-soft: #a3abb5;
  --border: #2a3038;
  --surface: #13161a;
  --accent: #6ea8dc;
  --on-accent: #0c0e11;
  position: relative;
  width: 100%;
  min-height: min(76svh, 760px);
  margin-top: var(--header-height);
  overflow: hidden;
  color: var(--text);
  background-color: #0c0e11;
}

.course-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(227, 230, 234, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227, 230, 234, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.course-hero-media {
  position: absolute;
  inset: 0;
}

.course-hero-media iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Fallback cover when the course has no intro video. */
.course-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.8);
}

.course-hero-overlay {
  position: relative;
  z-index: 2;
  min-height: min(76svh, 760px);
  display: flex;
  align-items: flex-end;
  padding: 2rem 0 2.5rem;
  background:
    linear-gradient(90deg, rgba(12, 14, 17, 0.85) 0%, rgba(12, 14, 17, 0.35) 75%),
    linear-gradient(180deg, rgba(12, 14, 17, 0.25) 0%, rgba(12, 14, 17, 0.85) 60%, rgba(12, 14, 17, 0.97) 100%);
}

.course-hero h1 {
  max-width: 24ch;
  text-wrap: balance;
}

.course-overview {
  max-width: none;
}

.course-overview-band {
  margin-top: 0;
  padding-bottom: 1.5rem;
}

.course-overview {
  padding: 1.25rem 1.4rem;
}

.course-overview-band + .section-pad {
  padding-top: 1.5rem;
}

.course-overview p {
  line-height: 1.8;
  margin-bottom: 1rem;
  color: var(--text-soft);
}

.course-sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-height) + 1.25rem);
  align-self: flex-start;
  width: 100%;
  z-index: 5;
  border-top: 2px solid var(--accent);
}

.training-content-section .training-curriculum-column,
.training-content-section .training-sidebar-column {
  min-width: 0;
}

.training-content-section .training-sidebar-column {
  position: sticky;
  top: calc(var(--header-height) + 1.25rem);
  align-self: flex-start;
}

.training-content-section .course-sidebar-sticky h2 {
  max-width: none;
  font-size: 1.04rem;
  line-height: 1.35;
}

.sidebar-instructor {
  margin-top: 1rem;
  position: relative;
  z-index: 1;
}

.course-old-price {
  color: var(--text-soft);
  font-family: var(--mono);
  text-decoration: line-through;
}

.course-new-price {
  color: var(--ok);
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 600;
}

/* Course facts: a Signal facts table - monospace keys, dashed row rules. */
.key-attrs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px dashed var(--border);
  padding: 0.55rem 0;
}

.key-attrs li:last-child {
  border-bottom: 0;
}

.key-attrs li span {
  flex: none;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.key-attrs li strong {
  color: var(--text);
  font-size: 0.93rem;
  font-weight: 600;
  text-align: end;
}

/* Target audience: the label on its own line, then one accent tag per audience. */
.key-attrs li.key-attrs__audience {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0.2rem 0 0.85rem;
}

.audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.key-attrs .audience-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.19rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: start;
}

/* A small target mark before each audience. */
.key-attrs .audience-tag::before {
  content: "";
  flex: none;
  width: 0.38rem;
  height: 0.38rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 12%, var(--surface));
  background: currentColor;
}

/* Curriculum and FAQ accordions: Signal collapsible cards. An open module
   gets an accent bar at its left edge. */
.course-accordion {
  --bs-accordion-bg: var(--surface);
  --bs-accordion-color: var(--text);
  --bs-accordion-border-color: var(--border);
  --bs-accordion-border-radius: var(--radius);
  --bs-accordion-inner-border-radius: var(--radius);
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-padding-x: 1rem;
  --bs-accordion-btn-padding-y: 0.85rem;
  --bs-accordion-btn-focus-box-shadow: inset 0 0 0 1px var(--accent);
  --bs-accordion-active-color: var(--text);
  --bs-accordion-active-bg: var(--surface-2);
  --bs-accordion-body-padding-x: 1rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-btn-icon-width: 0.9rem;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238d96a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236ea8dc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

body.light-theme .course-accordion {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235b6470' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232c6aa8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Same specificity as Bootstrap's flush :first-child/:last-child rules, and
   later, so every item keeps its full frame. */
.course-accordion.accordion-flush > .accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.course-accordion .accordion-item {
  position: relative;
  margin-bottom: 0.6rem;
  overflow: hidden;
  background: var(--surface);
  transition: border-color var(--t) var(--ease);
}

.course-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: inset 2px 0 0 var(--accent);
}

.course-accordion .accordion-button {
  font-size: 1rem;
  font-weight: 600;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.course-accordion .accordion-button:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.course-accordion .accordion-button:not(.collapsed) {
  box-shadow: none;
}

.course-accordion .accordion-body {
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* A unit inside a module: a framed instance on the module's page colour. */
.unit-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}

.unit-block:last-child {
  margin-bottom: 0;
}

.unit-block h4 {
  color: var(--text);
  font-size: 0.98rem;
}

.content-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

/* Self-paced progress: a thin bar in the "ok" green above the curriculum
   (and on My Trainings), and a Mark done toggle at the end of each lesson. */
.course-progress {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.course-progress__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.93rem;
}

.course-progress__percent {
  color: var(--ok);
  font-family: var(--mono);
  font-weight: 700;
}

.course-progress__track {
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow: hidden;
}

.course-progress__track span {
  display: block;
  height: 100%;
  background: var(--ok);
  transition: width 0.3s var(--ease);
}

.course-progress__continue {
  display: inline-block;
  margin-top: 0.65rem;
  font-size: 0.93rem;
}

.course-progress--compact {
  padding: 0;
  border: 0;
  background: none;
  max-width: 26rem;
}

.course-progress--compact .course-progress__head {
  margin-bottom: 0.3rem;
  font-size: 0.82rem;
}

.content-list li:has(.lesson-progress) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lesson-progress {
  flex: none;
  margin: 0;
}

.lesson-progress__toggle {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.lesson-progress__toggle:hover {
  border-color: var(--ok);
  color: var(--ok);
}

.lesson-progress__toggle[aria-pressed="true"] {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok);
}

.lesson-progress__toggle[aria-pressed="true"]::before {
  content: "\2713\00a0";
}

.lesson-progress__toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* Lessons and quizzes are rows, each opened by a text-only tag - FREE
   (green), OPEN (accent, enrolled), QUIZ (violet), LOCKED (muted). A row
   under the pointer gets Signal's accent tick at its left edge. */
.content-open,
.content-locked {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  font-size: 0.93rem;
  text-align: start;
}

.content-open::before,
.content-locked::before {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 3.6rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.content-open::before {
  content: "FREE";
  color: var(--ok);
}

.content-open[data-lesson-free="0"]::before {
  content: "OPEN";
  color: var(--accent);
}

/* A locked row opens with a padlock icon (drawn as a mask in the muted
   text colour); the word "Locked" stays for screen readers only. Its box
   matches the width of the FREE/OPEN/QUIZ tags so titles stay aligned. */
.content-locked::before {
  content: "";
  height: 1.05rem;
  border: 0;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='5' y='11' width='14' height='10' rx='1.5'/%3e%3cpath d='M8 11V7.5a4 4 0 0 1 8 0V11M12 15v2'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='5' y='11' width='14' height='10' rx='1.5'/%3e%3cpath d='M8 11V7.5a4 4 0 0 1 8 0V11M12 15v2'/%3e%3c/svg%3e") center / contain no-repeat;
}

.content-locked--empty::before {
  content: none;
}

.content-open {
  color: var(--text);
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--border);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.content-open:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  box-shadow: inset 2px 0 0 var(--accent);
}

.content-quiz-open {
  appearance: none;
  font: inherit;
  font-size: 0.93rem;
  cursor: pointer;
}

.content-quiz-open::before {
  content: "QUIZ";
  color: var(--violet);
}

.content-open.active-lesson {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Payment instructions: a note edged in the accent, the number as a
   monospace readout. */
.instapay-transfer-note {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg);
}

.instapay-transfer-note span,
.instapay-transfer-note small {
  color: var(--text-soft);
}

.instapay-transfer-note strong {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.lesson-video-modal .modal-dialog {
  width: min(1180px, calc(100% - 2rem));
  max-width: 1180px;
}

.lesson-video-modal .modal-content {
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  background-color: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}

.lesson-video-modal .modal-header {
  gap: 1rem;
  border-bottom-color: var(--border);
}

/* Bootstrap's close icon is dark; invert it in the dark theme only. */
body:not(.light-theme) .lesson-video-modal .btn-close,
body:not(.light-theme) .quiz-modal .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
}

.lesson-video-modal__meta {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-video-modal__stage {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #000;
  aspect-ratio: 16 / 9;
  --plyr-color-main: #6ea8dc;
  --plyr-video-background: #000;
}

.lesson-video-modal__stage > .plyr,
.lesson-video-modal__stage > video,
.lesson-video-modal__stage > .ratio {
  width: 100%;
  height: 100%;
}

/* The viewer's name over a private recording (site.js attachVideoWatermark). Always over video, so not themed. */
.video-watermark {
  position: absolute;
  z-index: 2;
  max-width: 60%;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
  /* Body font, not --mono: names may be Arabic. */
  font-size: clamp(0.7rem, 1.6vw, 0.95rem);
  font-weight: 600;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: top 1.2s ease, left 1.2s ease;
}

[data-lesson-stream-player],
.lesson-video-modal__stage {
  position: relative;
}

.lesson-video-modal__empty {
  display: grid;
  min-height: 280px;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-soft);
  text-align: center;
}

@media (max-width: 575.98px) {
  .lesson-video-modal .modal-dialog {
    width: auto;
    margin: 0.75rem;
  }

  .lesson-video-modal .modal-body,
  .lesson-video-modal .modal-header {
    padding: 1rem;
  }
}

.lesson-loading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-soft);
  font-size: 0.94rem;
}

.lesson-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lesson-spin 0.85s linear infinite;
}

@keyframes lesson-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Quizzes: one question at a time in a framed block; the answers are rows
   that tint on hover and take the accent frame when ticked. */
.quiz-modal__content {
  overflow: hidden;
}

/* "You can submit once" / "Submitted on ..." line above the questions. */
.quiz-modal__note {
  margin-bottom: 1rem;
  padding: 0.55rem 0.8rem;
  border-inline-start: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--text-soft);
  font-size: 0.9rem;
}

.quiz-modal__note a {
  color: var(--accent);
}

.quiz-modal__questions {
  display: grid;
  gap: 1rem;
}

.quiz-modal__questions .quiz-question {
  display: none;
}

.quiz-modal__questions .quiz-question.is-active {
  display: block;
  animation: drop-in 0.2s var(--ease);
}

.quiz-question {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.quiz-question legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-bottom: 0.65rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quiz-question legend small {
  color: var(--text-soft);
  font-weight: 500;
}

.quiz-question p {
  margin-bottom: 0.8rem;
}

.quiz-answer-options {
  display: grid;
  gap: 0.45rem;
}

.quiz-answer-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.quiz-answer-option:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.quiz-answer-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
}

.quiz-answer-option input {
  margin-top: 0.2rem;
}

.quiz-question__error {
  margin: 0.65rem 0 0;
  color: var(--danger);
  font-size: 0.88rem;
}

.quiz-pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-inline-end: auto;
}

.quiz-pagination__status {
  min-width: 8rem;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.82rem;
  text-align: center;
}

.blog-post-card {
  overflow: hidden;
}

/* Post details as an NTFS $MFT record: a flat console strip, set flags in the
   accent and cleared ones (-) dimmed. */
.mft-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  width: fit-content;
  max-width: 100%;
  margin: 1.1rem 0 0;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.82rem;
}

.mft-record__head {
  display: flex;
  gap: 0.5rem;
  flex-basis: 100%;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--border);
  color: var(--text-soft);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mft-record__head span:first-child {
  color: var(--accent);
  font-weight: 700;
}

.mft-record__path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

.mft-record__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.mft-record dt {
  color: var(--text-soft);
  font-weight: 400;
}

.mft-record dd {
  margin: 0;
  color: var(--text);
}

.mft-flags {
  color: var(--text-soft);
  text-decoration: none;
  cursor: help;
  letter-spacing: 0.06em;
}

.mft-flags span {
  color: var(--accent);
  font-weight: 700;
}

.mft-flags span.is-off {
  color: var(--text-soft);
  font-weight: 400;
  opacity: 0.7;
}

.blog-post-cover {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--border);
}

/* Article body: a readable measure and rhythm; code in Signal's flat dark
   code block (dark in both themes); quotes edged in the accent. */
.blog-content {
  max-width: 76ch;
  margin-inline: auto;
  font-size: 1.07rem;
  line-height: 1.8;
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
  margin: 2.2rem 0 0.8rem;
}

.blog-content p,
.blog-content ul,
.blog-content ol {
  margin-bottom: 1.15rem;
}

.blog-content a {
  text-decoration: underline;
}

.blog-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.blog-content blockquote {
  margin: 1.5rem 0;
  padding: 0.75rem 1.1rem;
  border-inline-start: 3px solid var(--accent);
  background: var(--bg);
  color: var(--text-soft);
}

.blog-content code {
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.88em;
}

.blog-content pre {
  margin: 1.5rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid #262c36;
  border-radius: var(--radius);
  background: #12151b;
  color: #d7dae0;
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* A detection rule (YARA, Sigma, Snort...) in a post: language, title and a copy button over the code. */
.blog-content .rule-block {
  margin: 1.5rem 0;
  border: 1px solid #262c36;
  border-radius: var(--radius);
  background: #12151b;
  overflow: hidden;
}

.rule-block__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.45rem 0.6rem 0.45rem 0.9rem;
  border-bottom: 1px solid #262c36;
  color: #9aa3ae;
  font-family: var(--mono);
  font-size: 0.78rem;
}

.rule-block__lang {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rule-block__title {
  min-width: 0;
  overflow: hidden;
  color: #d7dae0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rule-block__copy {
  margin-inline-start: auto;
  padding: 0.2rem 0.6rem;
  border: 1px solid #333a46;
  border-radius: var(--radius);
  background: transparent;
  color: #d7dae0;
  font: inherit;
  line-height: 1.4;
}

.rule-block__copy:hover,
.rule-block__copy:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.blog-content .rule-block__code {
  margin: 0;
  border: 0;
  border-radius: 0;
  text-align: left;
}

.blog-content pre code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}

.blog-content table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.blog-content th,
.blog-content td {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--border);
  text-align: start;
}

.blog-content th {
  color: var(--text-soft);
  background: var(--surface-2);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.content-locked {
  color: var(--text-soft);
  background: transparent;
  border: 1px dashed var(--border);
}

.timeline-item {
  border-inline-start: 2px solid rgba(32, 164, 255, 0.4);
  padding-inline-start: 1rem;
  margin-bottom: 1.25rem;
}

/* A pill is a Signal chip: squared, hairline, accent on hover. */
.pill {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0.2rem;
  color: var(--text);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.pill.active,
.pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* A post's love button, beside "All posts". */
.post-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.post-reactions .pill {
  margin: 0;
}

.post-love {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 0.92rem;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.post-love svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.post-love:hover:not(:disabled),
.post-love[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.post-love:disabled {
  cursor: default;
  opacity: 1;
}

.post-love__count {
  font-family: var(--mono);
  color: var(--text-soft);
}

.post-love[aria-pressed="true"] .post-love__count {
  color: var(--accent);
}

/* A post's share row: square icon buttons, network logos filled, the rest outlined. */
.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.post-share__label {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.post-share__link {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-soft);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.post-share__link:hover,
.post-share__link:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.post-share__link svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.post-share__link--email svg,
[data-share-copy] svg,
[data-share-native] svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.post-share__status {
  color: var(--ok);
  font-size: 0.85rem;
}

/* A loved post: the heart fills in. */
.post-love[aria-pressed="true"] svg {
  fill: currentColor;
}

/* A post's comments: the approved ones as a thread (the form is its own card below). */
.post-comments__list {
  margin: 0;
  border-top: 1px solid var(--border);
}

.post-comment {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
}

.post-comment:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.post-comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.35rem;
}

.post-comment__title {
  color: var(--accent);
}

.post-comment__date {
  margin-inline-start: auto;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.post-comment__body {
  color: var(--text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* The course survey: a row of 1-5 buttons per question. */
.course-feedback__rating {
  margin: 0 0 1.25rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--border);
}

.course-feedback__rating legend {
  float: none;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.course-feedback__scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 3.25rem));
  gap: 0.4rem;
}

.course-feedback__score {
  display: grid;
  place-items: center;
  height: 2.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.course-feedback__score:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-check:checked + .course-feedback__score {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.btn-check:focus-visible + .course-feedback__score {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.course-feedback__ends {
  display: flex;
  justify-content: space-between;
  max-width: calc(5 * 3.25rem + 4 * 0.4rem);
  margin-top: 0.3rem;
  font-size: 0.8rem;
}

/* Notes and empty states: a quiet panel with an accent edge (Signal's KPI
   note). */
.placeholder-note {
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.85rem 1rem;
  color: var(--text-soft);
  font-size: 0.96rem;
}

.course-faqs {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
}

/* Inputs sit on the page colour inside a hairline frame; hover darkens the
   frame, focus turns it accent with a soft ring. */
.form-control,
.form-select,
.input-group-text,
.form-control:focus,
.form-select:focus {
  background-color: var(--bg);
  border-color: var(--border);
  border-radius: var(--radius);
  color: var(--text);
}

.form-control,
.form-select {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--text) 35%, var(--border));
}

.form-control::placeholder {
  color: var(--text-soft);
  opacity: 0.75;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Bootstrap's select arrow is drawn dark; in the dark theme draw it in the
   muted text colour so it shows. */
body:not(.light-theme) .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238d96a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-control[type="file"]::file-selector-button {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

.comment-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem;
}

/* ---- Instructor card and profile ------------------------------------- */
/* The card's heading is a Signal section label; the avatar is a squared
   frame like every other box. */
.instructor-card h2 {
  display: flex;
  align-items: center;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.78rem !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.6rem;
  margin-bottom: 0.8rem !important;
}

.instructor-card h2::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-inline-end: 0.6rem;
  background: var(--accent);
}

.instructor-card__body {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.75rem;
}

.instructor-card__avatar {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
}

.instructor-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instructor-card__avatar svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.instructor-card__content {
  min-width: 0;
}

.instructor-social-links {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.instructor-social-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.instructor-social-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.instructor-social-links--profile {
  margin-top: 1.25rem;
}

.instructor-profile-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 920px;
}

.instructor-profile-hero__avatar {
  width: 120px;
  height: 120px;
  flex-basis: 120px;
}

.instructor-card--linked {
  transition: --brk 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.instructor-card--linked:hover,
.instructor-card--linked:focus-within {
  --brk: var(--accent);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: var(--shadow-hover);
}

.instructor-card__link {
  color: var(--text);
  text-decoration: none;
}

.instructor-card__link:hover {
  color: var(--accent);
}

@media (max-width: 575.98px) {
  .instructor-card__body {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .instructor-card__avatar {
    width: 80px;
    height: 80px;
    flex-basis: 80px;
  }

  .instructor-profile-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .instructor-profile-hero__avatar {
    width: 96px;
    height: 96px;
    flex-basis: 96px;
  }
}

/* ---- Footer ----------------------------------------------------------- */
/* A flat panel under a hairline whose top edge carries the same fading
   accent rule as the header; monospace section labels, chip-style social
   buttons and contact "instances". */
.site-footer {
  position: relative;
  padding: 2.25rem 0 1.4rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: min(320px, 40%);
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.footer-shell {
  position: relative;
}

.footer-logo-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.25rem 0;
}

/* The pre-cropped logo; white in the dark
   theme. */
.footer-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}

body:not(.light-theme) .footer-logo {
  filter: brightness(0) invert(1) contrast(1.08);
}

.footer-tagline {
  max-width: 42.5rem;
  margin: 1rem 0 1.25rem;
  color: var(--text-soft);
  font-size: 0.96rem;
}

.footer-heading {
  display: flex;
  align-items: center;
  margin-bottom: 0.9rem;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-heading::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-inline-end: 0.6rem;
  background: var(--accent);
}

.footer-links {
  display: grid;
  gap: 0.5rem;
}

.footer-links a {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: fit-content;
  color: var(--text);
  text-decoration: none;
  transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}

.footer-links__icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  /* Centred on the first line, so a long track name wraps under its text, not its icon. */
  margin-top: calc((1lh - 1rem) / 2);
  color: var(--text-soft);
  transition: color var(--t) var(--ease);
}

.footer-links a:hover .footer-links__icon {
  color: var(--accent);
}

.footer-links a:hover {
  color: var(--accent);
  transform: translateX(3px);
}

.footer-contact {
  display: grid;
  gap: 0.6rem;
}

.footer-contact a {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.footer-contact a:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: inset 2px 0 0 var(--accent);
}

.footer-contact span {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-social a {
  min-height: 38px;
  padding: 0.45rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 550;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform 0.08s;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
}

.footer-social a:active {
  transform: translateY(1px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--border);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.82rem;
}

.footer-bottom a {
  color: var(--text-soft);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--accent);
}

.footer-bottom__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

/* Policies: a list of the policies beside the text of the one being read. */
.policy-nav {
  position: sticky;
  top: 6rem;
}

.policy-nav a {
  display: block;
  padding: 0.45rem 0.75rem;
  border-inline-start: 2px solid var(--border);
  color: var(--text-soft);
  text-decoration: none;
}

.policy-nav a:hover,
.policy-nav a[aria-current="page"] {
  border-inline-start-color: var(--accent);
  color: var(--accent);
}

.policy-meta {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.82rem;
}

.policy-accept-list {
  max-height: 46vh;
  overflow-y: auto;
}

.policy-accept-list details + details {
  margin-top: 0.75rem;
}

.policy-accept-list summary {
  cursor: pointer;
  font-weight: 600;
}

.policy-check .form-check-label a {
  color: var(--accent);
}

@media (max-width: 575.98px) {
  .site-footer {
    padding: 2.5rem 0 1.5rem;
  }

  .footer-logo {
    height: 40px;
    width: auto;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 1.75rem;
  }
}

/* ---- Modals ---------------------------------------------------------- */
/* A modal is a flat card with an accent top edge (Signal's login card),
   rising a few pixels into place over a dimmed page. */
.modal {
  --bs-modal-border-radius: var(--radius);
  --bs-modal-inner-border-radius: var(--radius);
  --bs-modal-header-padding: 1rem 1.25rem;
  --bs-modal-padding: 1.25rem;
}

.modal-backdrop {
  --bs-backdrop-bg: #05070a;
  --bs-backdrop-opacity: 0.65;
}

.modal.fade .modal-dialog {
  transform: translateY(10px) scale(0.985);
  transition: transform 0.24s var(--ease);
}

.modal.show .modal-dialog {
  transform: none;
}

.modal-theme {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}

/* Bootstrap's border utility uses !important; keep modal rules on tokens. */
.modal .border-secondary-subtle {
  border-color: var(--border) !important;
}

.modal-title {
  font-weight: 650;
  letter-spacing: -0.01em;
}

body.light-theme {
  background-color: var(--bg);
}

/* The light tokens live on body, so the root element (seen below short
   pages and on overscroll) needs the light page colour set directly. Keep
   in sync with body.light-theme's --bg. */
html:has(> body.light-theme) {
  background-color: #eceef1;
}

/* Header in the light theme: tokens carry the colours; only the toggler
   icon and the logo variant change. */
body.light-theme .navbar-toggler-icon {
  filter: none;
}

body.light-theme .site-logo-light {
  display: inline-block;
}

body.light-theme .site-logo-dark {
  display: none;
  filter: none;
}

body:not(.light-theme) .site-logo-dark {
  filter: brightness(0) invert(1) contrast(1.08);
}

/* ---- Sign-in pages ---------------------------------------------------- */
/* Signal's sign-in: the page's own grid behind, the brand and slogan in a
   bracketed frame on the left, and a flat card with an accent top edge. */
.auth-section {
  min-height: 100vh;
  padding: calc(var(--header-height) + 1.5rem) 0 1.5rem;
  display: flex;
  align-items: center;
}

.auth-split {
  background: transparent;
}

.auth-split-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  width: 100%;
  max-width: 1240px;
}

.auth-copy {
  position: relative;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
  overflow: hidden;
}

.auth-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-size: 22px 2px, 2px 22px, 22px 2px, 2px 22px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.auth-copy > * {
  position: relative;
  z-index: 1;
}

/* The pre-cropped logo, white in the dark theme. */
.auth-hero-photo {
  width: auto;
  max-width: 60vw;
  height: 84px;
  object-fit: contain;
  margin-bottom: 2rem;
}

body:not(.light-theme) .auth-hero-photo {
  filter: brightness(0) invert(1) contrast(1.08);
}

.auth-copy h1 {
  color: var(--text);
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 1rem;
}

.auth-slogan {
  max-width: 42.5rem;
  margin: 0 0 1.5rem;
  color: var(--text-soft);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
}

/* A short accent rule that fades out. */
.auth-rule {
  width: 160px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border: 0;
  margin-bottom: 1.25rem;
}

.auth-switch-link {
  width: fit-content;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.auth-switch-link:hover {
  color: var(--text);
}

.auth-enterprise {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
  color: var(--text);
  font-weight: 600;
}

.auth-enterprise a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.auth-enterprise a:hover {
  color: var(--text);
}

.auth-card {
  width: min(100%, 460px);
  min-height: 0;
  margin: 0;
  justify-self: center;
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  background-color: var(--surface);
}

.auth-card-title {
  color: var(--text);
  text-align: center;
  font-size: 1.4rem;
  font-weight: 650;
  margin-bottom: 1.4rem;
}

.auth-page-photo {
  display: block;
  width: min(220px, 70%);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.auth-card .form-control {
  min-height: 42px;
}

.auth-card .btn-accent {
  min-height: 44px;
  margin-top: 0.6rem;
}

/* A decorative shell line (command or output) above a heading or in an empty state. */
.cli-line {
  display: block;
  margin: 0 0 0.6rem;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.cli-line > span {
  color: var(--accent);
  font-weight: 700;
}

/* Login: a console list of what waits inside, a status line on the card,
   inputs with a leading icon and a show-password toggle. */
.auth-console {
  max-width: 30rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.auth-console__cmd {
  margin: 0 0 0.5rem;
  color: var(--accent);
}

.auth-console li {
  color: var(--text-soft);
  line-height: 1.8;
}

.auth-console li::before {
  content: "> ";
  color: var(--accent);
}

.auth-card__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auth-card__status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.auth-field {
  position: relative;
}

.auth-field > svg {
  position: absolute;
  inset-inline-start: 0.75rem;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--text-soft);
  stroke-width: 1.6;
  stroke-linejoin: round;
  pointer-events: none;
}

.auth-field .form-control {
  padding-inline-start: 2.5rem;
}

.auth-field:has(.auth-field__toggle) .form-control {
  padding-inline-end: 2.75rem;
}

.auth-field:focus-within > svg {
  stroke: var(--accent);
}

.auth-field__toggle {
  position: absolute;
  inset-inline-end: 0.35rem;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  transform: translateY(-50%);
}

.auth-field__toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--text-soft);
  stroke-width: 1.6;
}

.auth-field__toggle:hover svg,
.auth-field__toggle[aria-pressed="true"] svg {
  stroke: var(--accent);
}

.auth-card__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
  color: var(--text-soft);
  font-size: 0.9rem;
}

body[data-page="auth"] .site-footer {
  display: none;
}

body.light-theme .btn-close.btn-close-white {
  filter: none;
}

/* Sections rise a few pixels into place as they scroll in (Signal's
   rise-in); reduced motion shows them at once. */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* Cards in a grid arrive one after another instead of all at once. */
.row > .reveal:nth-child(2) { transition-delay: 60ms; }
.row > .reveal:nth-child(3) { transition-delay: 120ms; }
.row > .reveal:nth-child(4) { transition-delay: 180ms; }
.row > .reveal:nth-child(n+5) { transition-delay: 220ms; }

/* Each page fades in as it opens. Opacity only: a transform on main would
   re-anchor the modals that open on load (enrollment, quiz) while it runs. */
main {
  animation: page-in 0.4s var(--ease) backwards;
}

@keyframes page-in {
  from {
    opacity: 0;
  }
}

/* In-page links (#sections, "How it works") glide instead of jumping. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  main {
    animation: none;
  }
}

@media (max-width: 991.98px) {
  :root {
    --nav-height: 50px;
  }

  /* The opened mobile menu: a panel under the bar, its links in rows. */
  .site-nav .navbar-collapse {
    margin: 0 -0.75rem;
    padding: 0.5rem 0.75rem 0.85rem;
    border-top: 1px solid var(--border);
  }

  .site-nav .nav-link::before {
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0;
    right: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
  }

  .site-nav .nav-link.active::before,
  .site-nav .nav-link[aria-current="page"]::before {
    transform: scaleY(1);
  }

  .section-pad {
    padding: 3.2rem 0;
  }

  .contact-form-section {
    padding: calc(var(--header-height) + 2.25rem) 0 3rem;
  }

  .hero-section {
    padding-top: var(--header-height);
  }

  .subhero {
    padding: calc(var(--header-height) + 2.25rem) 0 2.75rem;
  }

  .site-logo {
    height: 30px;
    width: auto;
  }

  .hero-media-placeholder {
    min-height: 260px;
  }

  .hero-wide {
    min-height: 100svh;
    height: auto;
  }

  .hero-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }

  .hero-row-offset {
    margin-top: 0;
    min-height: calc(100svh - var(--header-height) - 1.5rem);
  }

  .terminal-hero {
    padding: 1.25rem 1.25rem 1.4rem;
  }

  .course-hero,
  .course-hero-overlay {
    min-height: 70svh;
  }

  .course-hero {
    margin-top: var(--header-height);
  }

  .course-sidebar-sticky {
    position: static;
    top: auto;
  }

  .training-content-section .training-sidebar-column {
    position: static;
    top: auto;
  }

  .sidebar-instructor {
    margin-top: 1rem;
  }

  .testimonial-shell {
    min-height: 450px;
  }

  .testimonial-card {
    width: min(360px, 88%);
    min-height: 330px;
  }

  .testimonial-arrow {
    top: auto;
    bottom: 10px;
    transform: none;
  }

  .testimonial-arrow-left {
    left: calc(50% - 52px);
  }

  .testimonial-arrow-right {
    right: calc(50% - 52px);
  }

  .testimonial-left,
  .testimonial-right {
    opacity: 0;
    transform: translateX(-50%) translateY(46px) scale(0.82);
    pointer-events: none;
  }

  .auth-section {
    padding: calc(var(--header-height) + 1rem) 0 1.5rem;
  }

  .auth-split-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .auth-copy {
    min-height: auto;
    justify-content: flex-start;
    padding: 0.5rem 0 0;
    text-align: start;
  }

  .auth-copy::before,
  .auth-enterprise {
    display: none;
  }

  .auth-hero-photo {
    width: auto;
    height: 60px;
    margin-bottom: 1rem;
  }

  .auth-copy h1 {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
  }

  .auth-card {
    width: 100%;
    min-height: auto;
  }

  .footer-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-subscribe-strip {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---- Signal (product page and nav item) ---------------------------------- */
/* The nav item carries Signal's mark: its gradient mark in the dark theme,
   the flat blue one in the light theme (as Signal Console does). */
.nav-link--signal {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.nav-signal-mark {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.4s var(--ease);
}

.nav-link--signal:hover .nav-signal-mark {
  transform: rotate(-20deg);
}

.nav-signal-mark--light,
body.light-theme .nav-signal-mark--dark {
  display: none;
}

body.light-theme .nav-signal-mark--light {
  display: inline-block;
}

/* The product hero: the same always-dark console as the home hero. */
.signal-hero {
  --text: #e3e6ea;
  --text-soft: #a3abb5;
  --border: #2a3038;
  --surface: #13161a;
  --accent: #6ea8dc;
  --on-accent: #0c0e11;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(100svh, 820px);
  padding: calc(var(--header-height) + 3rem) 0 3rem;
  color: var(--text);
  background-color: #0c0e11;
  background-image:
    radial-gradient(circle at 78% 40%, rgba(110, 168, 220, 0.12), transparent 42%),
    linear-gradient(rgba(227, 230, 234, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227, 230, 234, 0.05) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
  border-bottom: 1px solid var(--border);
}

.signal-hero__inner {
  position: relative;
  z-index: 1;
}

.signal-hero__brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.signal-mark {
  width: 56px;
  height: 56px;
}

/* Signal's wordmark is used as a mask filled with the text colour, as in
   Signal Console. */
.signal-wordmark {
  display: inline-block;
  width: 150px;
  height: 25px;
  background: var(--text);
  -webkit-mask: url("../signal/signal-wordmark.png") center / contain no-repeat;
  mask: url("../signal/signal-wordmark.png") center / contain no-repeat;
}

.signal-hero__title {
  margin: 0.75rem 0 0.6rem;
  max-width: 22ch;
  font-size: clamp(1.8rem, 1.25rem + 1.5vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}

.signal-hero__lead {
  max-width: 65ch;
  margin: 0;
  color: var(--text-soft);
  font-size: 1.12rem;
}

/* Key facts as a Signal summary strip: monospace figures split by rules. */
/* Four facts as two even rows; the first of each row has no rule before it. */
/* One fact per line: the label in a fixed column, the value beside it. */
.signal-facts {
  display: grid;
  row-gap: 0.6rem;
  margin: 2.25rem 0 0;
}

.signal-facts > div {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
}

@media (max-width: 575.98px) {
  .signal-facts > div {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: 0.75rem;
  }
}

.signal-facts dt {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.signal-facts dd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  font-weight: 600;
}

.signal-facts dd svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The Windows logo is four filled panes, as in the Signal Survey host bar. */
.signal-facts dd .signal-facts__windows {
  fill: #4cc2ff;
  stroke: none;
}

.signal-point h3 {
  margin-bottom: 0.5rem;
}

/* How it works: three numbered steps joined by a dashed rail. */
.signal-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signal-steps li {
  position: relative;
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}

.signal-steps__index {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.signal-steps h3 {
  margin-bottom: 0.45rem;
}

/* Modules: a dense grid of module "badges" - the name in monospace, the
   question it answers beside it. */
.signal-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6rem;
}

/* Name and question centred in the box, both ways, whatever the row height. */
.signal-module {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 0.3rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.signal-module:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: inset 2px 0 0 var(--accent);
}

.signal-module__name {
  width: fit-content;
  padding: 0.05rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.signal-module p {
  color: var(--text-soft);
  font-size: 0.93rem;
}

.signal-not li {
  position: relative;
  margin-bottom: 0.6rem;
  padding-inline-start: 1.4rem;
}

.signal-not li::before {
  content: "\2715";
  position: absolute;
  inset-inline-start: 0;
  color: var(--danger);
  font-size: 0.8rem;
}

.signal-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-inline-start: 3px solid var(--accent);
}

/* The two halves of the slogan: a small label over each card; the blind spots in amber. */
.signal-point__label {
  display: inline-block;
  margin-bottom: 0.6rem;
  color: var(--accent);
  font: 600 0.75rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.signal-point--gaps {
  border-top: 2px solid var(--warning, #f5b84b);
}

.signal-point--gaps .signal-point__label {
  color: var(--warning, #f5b84b);
}

/* The command under step 01. */
.signal-steps__code {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.82rem;
}

/* A module card that links to its docs page. */
a.signal-module {
  color: inherit;
  text-decoration: none;
}

a.signal-module:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Where it fits: one row per tool - the tool, and the gap Signal fills. */
.signal-fits {
  display: grid;
  gap: 0.6rem;
  height: 100%;
}

.signal-fits__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.signal-fits__row strong {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.85rem;
}

@media (max-width: 575.98px) {
  .signal-fits__row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* Rules and the community library: copy beside its links. */
.signal-rules {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  border-inline-start: 3px solid var(--accent);
}

.signal-rules__actions {
  display: grid;
  gap: 0.5rem;
}

@media (max-width: 767.98px) {
  .signal-rules {
    grid-template-columns: 1fr;
  }

  .signal-rules__actions {
    grid-template-columns: 1fr;
  }
}

/* What it is not: two columns of crossed items. */
.signal-not--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 2rem;
  margin: 0;
}

@media (max-width: 767.98px) {
  .signal-not--grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .signal-steps {
    grid-template-columns: 1fr;
  }
}

/* ---- Home: one screen per section ---------------------------------------- */
/* On the home page every section fills the screen below the header and the
   scroll moves from one to the next like turning pages (CSS scroll snap).
   A section taller than the screen (a long course list) still scrolls
   freely inside its snap area. The promo height is on :root so the root's
   scroll padding sees it. */
html:has(body[data-page="home"]) {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-height);
}

body[data-page="home"] main > section {
  min-height: calc(100svh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}

body[data-page="home"] main > section.hero-section {
  min-height: 100svh;
}

body[data-page="home"] main > section.pt-0 {
  padding-top: 3rem !important;
}

body[data-page="home"] .site-footer {
  scroll-snap-align: end;
}

/* Phones: keep the full-height sections, but let the scroll settle only
   near a section start so long sections never feel stuck. */
@media (max-width: 767.98px) {
  html:has(body[data-page="home"]) {
    scroll-snap-type: y proximity;
  }
}

/* The section rail (site.js initSectionRail): Signal's section navigator -
   a tick per section at the right edge, the current one long and accent;
   hovering the rail unfolds the section names. */
.section-rail {
  position: fixed;
  right: 10px;
  top: 50%;
  z-index: 1020;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 6px 4px;
  transform: translateY(-50%);
  border-radius: var(--radius);
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  animation: rail-in 0.35s var(--ease) backwards;
}

@keyframes rail-in {
  from {
    opacity: 0;
    translate: 8px 0;
  }
}

.section-rail button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--text-soft);
  font: 600 0.74rem/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.section-rail__tick {
  flex: none;
  display: block;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--text) 40%, transparent);
  transition: width 0.25s var(--ease), background-color 0.25s var(--ease);
}

.section-rail__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.3s var(--ease), opacity 0.2s var(--ease);
}

.section-rail button[aria-current="true"] {
  color: var(--accent);
}

.section-rail button[aria-current="true"] .section-rail__tick {
  width: 22px;
  background: var(--accent);
}

.section-rail button:hover .section-rail__tick {
  width: 22px;
  background: var(--text);
}

.section-rail:hover,
.section-rail:focus-within {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 0 0 1px var(--border);
  backdrop-filter: blur(6px);
}

.section-rail:hover .section-rail__label,
.section-rail:focus-within .section-rail__label {
  max-width: 200px;
  opacity: 1;
}

@media (max-width: 767.98px) {
  .section-rail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-rail,
  .section-rail * {
    animation: none;
    transition: none;
  }
}

/* ---- Hero animations (library: App\Support\HeroAnimations) ---------------- */
/* The slot an animation sits in: beside the copy on the inline end (right in
   English, left in Arabic), centred in the hero; on smaller screens it moves
   behind the copy, centred and quieter. The copy sits above it (z-index 3 on
   the home hero; .hero-animation ~ .container elsewhere). */
.hero-animation {
  position: absolute;
  z-index: 2;
  inset-inline-end: clamp(1rem, 5vw, 6rem);
  top: 50%;
  width: min(62vh, 44vw, 600px);
  transform: translateY(-50%);
  pointer-events: none;
}

/* The home and Signal heroes run under the fixed header: centre in the part below it. */
.hero-animation--home,
.hero-animation--signal {
  top: calc(50% + var(--header-height) / 2);
}

/* Signal: the animation takes the inline-end half of the hero; the copy keeps
   to the other half (the container is centred, so its middle is the hero's). */
@media (min-width: 992px) {
  .hero-animation--signal {
    width: min(calc(50vw - clamp(1rem, 5vw, 6rem)), 880px);
  }

  .hero-animation--signal ~ .container > * {
    max-width: calc(50% - 2rem);
  }

  /* The engagements line sits above the animation, so it takes the full width on one line. */
  .hero-animation--signal ~ .container > .signal-hero__engagements {
    max-width: none;
  }

  .hero-animation--signal ~ .container > .signal-hero__engagements > * {
    white-space: nowrap;
  }
}

/* The course hero is shorter than the home one. */
.hero-animation--course {
  width: min(54vh, 40vw, 520px);
}

.hero-animation ~ .container {
  position: relative;
  z-index: 3;
}

@media (max-width: 991.98px) {
  .hero-animation {
    inset-inline: 0;
    top: 1.5rem;
    width: min(84vw, 460px);
    margin-inline: auto;
    transform: none;
    opacity: 0.7;
  }

  .hero-animation--home,
  .hero-animation--signal {
    top: calc(var(--header-height) + 1.5rem);
  }
}

/* ---- Home hero: SOC backdrop and radar ----------------------------------- */
/* Rows of SOC/DFIR terms drift slowly behind everything, shaded so they
   read as texture, not text (aria-hidden in the markup). Each row holds
   its terms twice, so a -50% shift loops seamlessly. */
.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 60% 50%, #000 30%, transparent 100%);
}

.hero-backdrop__row {
  display: flex;
  width: max-content;
  white-space: nowrap;
  color: rgba(227, 230, 234, 0.085);
  font-family: var(--mono);
  font-size: var(--row-size);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  animation: backdrop-drift var(--row-speed) linear infinite;
}

.hero-backdrop__row:nth-child(even) {
  animation-direction: reverse;
  color: rgba(110, 168, 220, 0.05);
}

/* Eight rows: every row keeps one font size (and drift speed) of its own,
   so the layers read as different depths. */
.hero-backdrop__row:nth-child(1) { --row-size: clamp(1.7rem, 1rem + 2.4vw, 3.4rem); --row-speed: 130s; }
.hero-backdrop__row:nth-child(2) { --row-size: clamp(0.95rem, 0.7rem + 0.8vw, 1.5rem); --row-speed: 90s; }
.hero-backdrop__row:nth-child(3) { --row-size: clamp(1.35rem, 0.9rem + 1.6vw, 2.6rem); --row-speed: 115s; }
.hero-backdrop__row:nth-child(4) { --row-size: clamp(0.8rem, 0.65rem + 0.5vw, 1.15rem); --row-speed: 75s; }
.hero-backdrop__row:nth-child(5) { --row-size: clamp(1.55rem, 1rem + 2vw, 3rem); --row-speed: 140s; }
.hero-backdrop__row:nth-child(6) { --row-size: clamp(1.1rem, 0.8rem + 1.1vw, 1.9rem); --row-speed: 100s; }
.hero-backdrop__row:nth-child(7) { --row-size: clamp(0.88rem, 0.68rem + 0.65vw, 1.3rem); --row-speed: 85s; }
.hero-backdrop__row:nth-child(8) { --row-size: clamp(1.25rem, 0.85rem + 1.4vw, 2.2rem); --row-speed: 120s; }

.hero-backdrop__group {
  display: inline-flex;
  gap: 3rem;
  padding-inline-end: 3rem;
}

@keyframes backdrop-drift {
  to {
    transform: translateX(-50%);
  }
}

/* The radar: range rings, crosshair and a faint rotating beam; the scan is
   a ring that travels outward from the sensor every --sweep seconds.
   A contact at distance --d (0-1 of the radius) lights up when the ring
   reaches it: its animation is delayed by --d x --sweep, on the ring's
   linear timing. */
.radar {
  --sweep: 6s;
  --contact: #ff4d4c;
}

.radar__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.radar__scope {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(110, 168, 220, 0.35);
  background:
    linear-gradient(rgba(110, 168, 220, 0.16), rgba(110, 168, 220, 0.16)) center / 1px 100% no-repeat,
    linear-gradient(rgba(110, 168, 220, 0.16), rgba(110, 168, 220, 0.16)) center / 100% 1px no-repeat,
    repeating-radial-gradient(circle, transparent 0 calc(12.5% - 1px), rgba(110, 168, 220, 0.14) calc(12.5% - 1px) 12.5%),
    radial-gradient(circle, rgba(110, 168, 220, 0.08), rgba(12, 14, 17, 0.6) 70%);
  box-shadow: 0 0 0 6px rgba(110, 168, 220, 0.04), inset 0 0 60px rgba(0, 0, 0, 0.5);
}

/* Tick marks around the rim. */
.radar__scope::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(110, 168, 220, 0.45) 0 0.6deg, transparent 0.6deg 10deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 95%, #000 95.5%);
  mask: radial-gradient(circle closest-side, transparent 95%, #000 95.5%);
}

.radar__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(110, 168, 220, 0.22), rgba(110, 168, 220, 0) 60deg, transparent 360deg);
  animation: radar-rotate 9s linear infinite;
}

.radar__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(110, 168, 220, 0.85);
  box-shadow: 0 0 18px rgba(110, 168, 220, 0.45), inset 0 0 18px rgba(110, 168, 220, 0.25);
  transform: scale(0);
  animation: radar-pulse var(--sweep) linear infinite;
}

.radar__pulse--echo {
  border-width: 1px;
  box-shadow: none;
  animation-delay: calc(var(--sweep) * -0.5);
  opacity: 0.4;
}

.radar__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #6ea8dc;
  box-shadow: 0 0 0 4px rgba(110, 168, 220, 0.2), 0 0 16px rgba(110, 168, 220, 0.8);
}

.radar__contact {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}

.radar__dot {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--contact);
  box-shadow: 0 0 10px var(--contact);
  opacity: 0;
  animation: contact-dot var(--sweep) linear infinite;
  animation-delay: calc(var(--d) * var(--sweep));
  animation-fill-mode: backwards;
}

/* The ping: a ring that bursts from a contact as it is found. */
.radar__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--contact);
  opacity: 0;
  animation: contact-ping var(--sweep) ease-out infinite;
  animation-delay: inherit;
  animation-fill-mode: backwards;
}

.radar__tag {
  position: absolute;
  left: 12px;
  top: -11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 5px;
  border: 1px solid rgba(255, 77, 76, 0.45);
  border-radius: var(--radius);
  background: rgba(12, 14, 17, 0.85);
  color: #ffd4d3;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none; /* keep tool and actor names as written (PsExec, APT29) */
  white-space: nowrap;
  opacity: 0;
  animation: contact-tag var(--sweep) linear infinite;
  animation-delay: calc(var(--d) * var(--sweep));
  animation-fill-mode: backwards;
}

.radar__contact--left .radar__tag {
  left: auto;
  right: 12px;
}

.radar__icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--contact);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.radar__readout {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  color: rgba(227, 230, 234, 0.55);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.radar__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--contact);
  animation: live-dot 2s ease-out infinite;
}

/* The readout is an alert: bold, in the contact red, gently blinking. */
.radar__count {
  color: var(--contact);
  font-weight: 700;
  letter-spacing: 0.14em;
  animation: alert-blink 1.6s ease-in-out infinite;
}

@keyframes alert-blink {
  50% {
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar__count {
    animation: none;
  }
}

@keyframes radar-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes radar-pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  85% {
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Found (0%), flare, hold, then fade before the next sweep reaches it. */
@keyframes contact-dot {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  4% {
    opacity: 1;
    transform: scale(1.5);
  }

  10% {
    transform: scale(1);
  }

  70% {
    opacity: 1;
  }

  92%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes contact-ping {
  0% {
    opacity: 0.9;
    transform: scale(0.6);
  }

  18%,
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}

@keyframes contact-tag {
  0%,
  5% {
    opacity: 0;
    translate: -4px 0;
  }

  12% {
    opacity: 1;
    translate: 0 0;
  }

  68% {
    opacity: 1;
  }

  88%,
  100% {
    opacity: 0;
  }
}

/* Smaller screens: the radar moves behind the copy, centred and quieter. */
@media (max-width: 991.98px) {
  .radar__readout {
    display: none;
  }
}

/* Reduced motion: a still radar with every contact shown. */
@media (prefers-reduced-motion: reduce) {
  .hero-backdrop__row,
  .radar__sweep,
  .radar__pulse,
  .radar__dot::after,
  .radar__live {
    animation: none;
  }

  .radar__pulse {
    display: none;
  }

  .radar__dot,
  .radar__tag {
    animation: none;
    opacity: 1;
  }
}

/* ---- Hero animation: Signal Survey ----------------------------------------- */
/* A host's records (rows of data) under a scan line. .survey__surveyed holds
   what the scan has passed: it is revealed with the line (clip-path), so its
   findings appear exactly as the line reaches them. Then the noise dims and
   the ranked findings are bracketed with their labels. One cycle: --cycle;
   the scan takes the first 4s. */
@property --survey-seconds {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.survey {
  --cycle: 14s;
  --scan: 4s; /* the rest of the cycle holds the findings for reading */
  --signal: #ff4d4c;
  --signal-soft: #ffb347;
  --read: rgba(110, 168, 220, 0.34);
  overflow: hidden;
  border: 1px solid rgba(110, 168, 220, 0.35);
  border-radius: var(--radius);
  background: rgba(12, 14, 17, 0.72);
  box-shadow: 0 0 0 6px rgba(110, 168, 220, 0.04), 0 24px 60px rgba(0, 0, 0, 0.45);
  font-family: var(--mono);
}

.survey__bar,
.survey__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.85rem;
  color: rgba(227, 230, 234, 0.6);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.survey__bar {
  border-bottom: 1px solid rgba(110, 168, 220, 0.2);
}

.survey__host {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #e3e6ea;
  font-weight: 600;
}

.survey__host svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #6ea8dc;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The Windows version and edition, shown once Signal has identified them. */
.survey__os {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: 0.5rem;
  padding: 1px 7px;
  border: 1px solid rgba(110, 168, 220, 0.3);
  border-radius: var(--radius);
  color: rgba(227, 230, 234, 0.75);
  font-weight: 500;
  opacity: 0;
  animation: survey-os var(--cycle) linear infinite;
}

.survey__os svg {
  width: 11px;
  height: 11px;
  fill: #4cc2ff;
  stroke: none;
}

@keyframes survey-os {
  0%,
  3.6% {
    opacity: 0;
  }

  6.4%,
  94.3% {
    opacity: 1;
  }

  97.9%,
  100% {
    opacity: 0;
  }
}

/* The run's clock: 00:00 to 00:41 while the scan runs, then held. */
.survey__clock {
  direction: ltr;
  unicode-bidi: isolate;
  color: #6ea8dc;
  font-weight: 700;
  counter-reset: survey-seconds var(--survey-seconds);
  animation: survey-clock var(--cycle) linear infinite;
}

.survey__clock::before {
  content: "00:" counter(survey-seconds, decimal-leading-zero);
}

.survey__screen {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0.6rem;
}

/* Records: rows of fields, like a table seen from afar. */
.survey__records {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--row, rgba(227, 230, 234, 0.06)) 0 9%, transparent 9% 11%,
    var(--row, rgba(227, 230, 234, 0.06)) 11% 24%, transparent 24% 26%,
    var(--row, rgba(227, 230, 234, 0.06)) 26% 33%, transparent 33% 35%,
    var(--row, rgba(227, 230, 234, 0.06)) 35% 61%, transparent 61% 63%,
    var(--row, rgba(227, 230, 234, 0.06)) 63% 71%, transparent 71% 73%,
    var(--row, rgba(227, 230, 234, 0.06)) 73% 88%, transparent 88%);
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 9px);
  mask: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 9px);
}

.survey__records--read {
  --row: var(--read);
  animation: survey-noise var(--cycle) linear infinite;
}

.survey__surveyed {
  position: absolute;
  inset: 0;
  animation: survey-reveal var(--cycle) linear infinite;
}

.survey__line {
  position: absolute;
  inset-inline: -0.6rem;
  top: 0;
  height: 2px;
  background: #6ea8dc;
  box-shadow: 0 0 14px 2px rgba(110, 168, 220, 0.7), 0 -24px 30px rgba(110, 168, 220, 0.12);
  animation: survey-line var(--cycle) linear infinite;
}

/* A source Signal could not read: hatched, dashed, named. */
.survey__gap {
  position: absolute;
  inset-inline-start: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border: 1px dashed rgba(255, 179, 71, 0.75);
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, rgba(255, 179, 71, 0.14) 0 4px, rgba(12, 14, 17, 0.92) 4px 9px);
}

/* A gap on the end half labels from its end edge, so the label stays inside the box. */
.survey__gap--end .survey__gap-tag {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.survey__gap-tag {
  position: absolute;
  inset-inline-start: 0;
  bottom: calc(100% + 4px);
  color: var(--signal-soft);
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
}

.survey__dot {
  position: absolute;
  inset-inline-start: var(--x);
  top: var(--y);
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: var(--signal-soft);
  box-shadow: 0 0 10px var(--signal-soft);
}

.survey__dot--1 {
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal);
}

/* The ping as the line finds it: delayed by where it sits (--found, 0-1 from the top). */
.survey__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  color: inherit;
  opacity: 0;
  animation: contact-ping var(--cycle) ease-out infinite;
  animation-delay: calc(var(--found) * var(--scan));
  animation-fill-mode: backwards;
}

.survey__dot--1::after {
  border-color: var(--signal);
}

.survey__dot:not(.survey__dot--1)::after {
  border-color: var(--signal-soft);
}

/* Focus: corner brackets round each finding and its label, ranked. */
.survey__focus {
  position: absolute;
  inset-inline-start: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  opacity: 0;
  animation: survey-focus var(--cycle) linear infinite;
  animation-delay: calc(var(--rank) * 0.3s);
  animation-fill-mode: backwards;
}

.survey__bracket {
  --tone: var(--signal-soft);
  position: absolute;
  inset: -15px;
  background:
    linear-gradient(var(--tone), var(--tone)) top left / 7px 1.5px no-repeat,
    linear-gradient(var(--tone), var(--tone)) top left / 1.5px 7px no-repeat,
    linear-gradient(var(--tone), var(--tone)) top right / 7px 1.5px no-repeat,
    linear-gradient(var(--tone), var(--tone)) top right / 1.5px 7px no-repeat,
    linear-gradient(var(--tone), var(--tone)) bottom left / 7px 1.5px no-repeat,
    linear-gradient(var(--tone), var(--tone)) bottom left / 1.5px 7px no-repeat,
    linear-gradient(var(--tone), var(--tone)) bottom right / 7px 1.5px no-repeat,
    linear-gradient(var(--tone), var(--tone)) bottom right / 1.5px 7px no-repeat;
}

/* The first place to look: red, larger, and breathing. */
.survey__focus--1 .survey__bracket {
  --tone: var(--signal);
  inset: -20px;
  animation: survey-target 1.4s ease-in-out infinite;
}

.survey__tag {
  position: absolute;
  inset-inline-start: 24px;
  top: -12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 179, 71, 0.45);
  border-radius: var(--radius);
  background: rgba(12, 14, 17, 0.9);
  color: #ffe2bf;
  font-size: 0.66rem;
  white-space: nowrap;
}

.survey__focus--start .survey__tag {
  inset-inline-start: auto;
  inset-inline-end: 24px;
}

.survey__focus--1 .survey__tag {
  inset-inline-start: 29px;
  border-color: rgba(255, 77, 76, 0.6);
  color: #ffd4d3;
}

.survey__focus--1.survey__focus--start .survey__tag {
  inset-inline-start: auto;
  inset-inline-end: 29px;
}

.survey__tag b {
  color: var(--signal-soft);
}

.survey__focus--1 .survey__tag b {
  color: var(--signal);
}

.survey__tag code {
  padding: 0;
  background: none;
  color: #6ea8dc;
  font-size: inherit;
}

.survey__status {
  border-top: 1px solid rgba(110, 168, 220, 0.2);
}

/* Thirteen segments, one per module, filling as the scan runs. */
.survey__progress {
  position: relative;
  flex: 0 0 34%;
  height: 6px;
  background: rgba(110, 168, 220, 0.14);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 13 - 2px), transparent calc(100% / 13 - 2px) calc(100% / 13));
  mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 13 - 2px), transparent calc(100% / 13 - 2px) calc(100% / 13));
}

.survey__progress::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: #6ea8dc;
  animation: survey-progress var(--cycle) linear infinite;
}

/* Two status lines in one place: surveying, then where to look. */
.survey__phases {
  display: grid;
  text-align: end;
}

.survey__phase {
  grid-area: 1 / 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.survey__phase--scan {
  animation: survey-phase-scan var(--cycle) linear infinite;
}

.survey__phase--focus {
  color: var(--signal);
  font-weight: 700;
  opacity: 0;
  animation: survey-phase-focus var(--cycle) linear infinite;
}

@keyframes survey-clock {
  0% {
    --survey-seconds: 0;
  }

  28.6%,
  100% {
    --survey-seconds: 41;
  }
}

@keyframes survey-line {
  0% {
    top: 0;
    opacity: 1;
  }

  28.6% {
    top: 100%;
    opacity: 1;
  }

  30%,
  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes survey-reveal {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
  }

  28.6% {
    clip-path: inset(0 0 0 0);
  }

  92.9% {
    opacity: 1;
  }

  97.9%,
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 0;
  }
}

/* Read records are bright while the scan runs, then sink to noise. */
@keyframes survey-noise {
  0%,
  28.6% {
    opacity: 1;
  }

  35.7%,
  100% {
    opacity: 0.22;
  }
}

@keyframes survey-focus {
  0%,
  32.1% {
    opacity: 0;
    transform: scale(1.4);
  }

  35.7% {
    opacity: 1;
    transform: scale(1);
  }

  90% {
    opacity: 1;
  }

  94.3%,
  100% {
    opacity: 0;
  }
}

@keyframes survey-target {
  50% {
    transform: scale(0.85);
  }
}

@keyframes survey-progress {
  0% {
    width: 0;
    opacity: 1;
  }

  28.6% {
    width: 100%;
  }

  92.9% {
    opacity: 1;
  }

  97.9%,
  100% {
    width: 100%;
    opacity: 0;
  }
}

@keyframes survey-phase-scan {
  0%,
  28.6% {
    opacity: 1;
  }

  31.4%,
  97.1% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes survey-phase-focus {
  0%,
  31.4% {
    opacity: 0;
  }

  34.3%,
  94.3% {
    opacity: 1;
  }

  97.1%,
  100% {
    opacity: 0;
  }
}

/* Smaller screens: behind the copy, so only the picture: no labels or status lines. */
@media (max-width: 991.98px) {
  .survey__status,
  .survey__tag,
  .survey__gap-tag {
    display: none;
  }
}

/* Reduced motion: the finished survey, still. */
@media (prefers-reduced-motion: reduce) {
  .survey__clock,
  .survey__os,
  .survey__records--read,
  .survey__surveyed,
  .survey__dot::after,
  .survey__focus,
  .survey__focus--1 .survey__bracket,
  .survey__progress::before,
  .survey__phase {
    animation: none;
  }

  .survey__clock {
    --survey-seconds: 41;
  }

  .survey__line,
  .survey__phase--scan {
    display: none;
  }

  .survey__records--read {
    opacity: 0.22;
  }

  .survey__os,
  .survey__focus,
  .survey__phase--focus {
    opacity: 1;
  }

  .survey__progress::before {
    width: 100%;
  }
}

/* ---- Enrollment request panel --------------------------------------------- */
/* Request form helpers: required / optional marks, hints, the coupon toggle. */
.form-legend {
  margin-bottom: 1rem;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.enrollment-panel .req {
  color: var(--danger);
  font-weight: 700;
}

.enrollment-panel .opt {
  margin-inline-start: 0.35rem;
  color: var(--text-soft);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.enrollment-panel .form-text {
  color: var(--text-soft);
  font-size: 0.8rem;
}

.enrollment-panel .form-control::placeholder {
  color: color-mix(in srgb, var(--text-soft) 70%, transparent);
}

.coupon-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 0.9rem;
  text-decoration: underline dashed;
  text-underline-offset: 4px;
}

.coupon-toggle:hover,
.coupon-toggle:focus-visible {
  color: var(--text);
}

[data-coupon-group]:not([hidden]) {
  animation: enroll-rise 0.3s var(--ease);
}

/* Sidebar note for a signed-in visitor whose request is already open. */
.request-state {
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--border));
  border-inline-start: 3px solid var(--ok);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  font-size: 0.92rem;
}

.request-state strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ok);
}

/* Hidden until "Enroll" is pressed, then it opens as a full-screen
   application over a blurred page (the script moves it to <body>). On wide
   screens the encouragement and steps sit left, the form right. */
.enroll-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px);
  animation: enroll-fade 0.25s var(--ease);
}

.enroll-backdrop[hidden] {
  display: none;
}

body.enroll-open {
  overflow: hidden;
}

.enrollment-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1070;
  width: min(1040px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 2px solid var(--accent);
  background: var(--surface);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  animation: enroll-open 0.35s var(--ease);
}

.enrollment-panel[hidden] {
  display: none;
}

@keyframes enroll-fade {
  from {
    opacity: 0;
  }
}

@keyframes enroll-open {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 24px)) scale(0.97);
  }
}

@media (min-width: 992px) {
  .enrollment-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-auto-rows: min-content;
    column-gap: 2rem;
    align-items: start;
    padding: 1.5rem 2rem !important;
  }

  .enrollment-panel > .enrollment-panel__head,
  .enrollment-panel > .enroll-success {
    grid-column: 1 / -1;
  }

  .enrollment-panel > .enroll-boost,
  .enrollment-panel > .enroll-steps {
    grid-column: 1;
  }

  .enrollment-panel > form {
    grid-column: 2;
    grid-row: 2 / span 3;
  }

  .enrollment-panel > .enroll-success {
    max-width: 560px;
    justify-self: center;
  }
}

@media (max-width: 575.98px) {
  .enrollment-panel {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }
}

.enrollment-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--border);
}

body:not(.light-theme) .enrollment-panel .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
}

/* How to enroll: numbered monospace steps and a note about other ways to
   pay. */
.enroll-steps {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg);
}

.enroll-steps[hidden] {
  display: none;
}

.enroll-steps__title {
  margin-bottom: 0.6rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.enroll-steps__list {
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  counter-reset: enroll-step;
}

.enroll-steps__list li {
  position: relative;
  margin-bottom: 0.45rem;
  padding-inline-start: 1.9rem;
  font-size: 0.93rem;
  line-height: 1.5;
  counter-increment: enroll-step;
}

.enroll-steps__list li::before {
  content: counter(enroll-step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0.1rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
}

.enroll-steps__note {
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
  color: var(--text-soft);
  font-size: 0.88rem;
}

/* The panel's parts rise in one after another when it opens. */
.enrollment-panel:not([hidden]) > * {
  animation: enroll-rise 0.45s var(--ease) both;
}

.enrollment-panel > :nth-child(2) { animation-delay: 0.06s; }
.enrollment-panel > :nth-child(3) { animation-delay: 0.12s; }
.enrollment-panel > :nth-child(4) { animation-delay: 0.18s; }

@keyframes enroll-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

[data-enroll-form-part][hidden],
.enroll-boost__lines[hidden] {
  display: none !important;
}

/* Encouragement above the form: a pulsing kicker, rotating lines and a bar
   that fills as the required fields are completed. */
.enroll-boost {
  margin-top: 1rem;
  padding: 0.9rem 1rem 0;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  overflow: hidden;
}

.enroll-boost__kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.enroll-boost__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: live-dot 1.6s ease-in-out infinite;
}

.enroll-boost__lines {
  display: grid;
  min-height: 3em;
}

.enroll-boost__lines p {
  grid-area: 1 / 1;
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.enroll-boost__lines p.is-active {
  opacity: 1;
  transform: none;
}

.enroll-progress {
  height: 3px;
  margin: 0 -1rem;
  background: color-mix(in srgb, var(--border) 60%, transparent);
}

.enroll-progress span {
  display: block;
  width: 8%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--ok));
  transition: width 0.4s var(--ease);
}

/* Submit button: a spinner and changing words while the request is sent. */
.enroll-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.enroll-submit__spinner {
  display: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: lesson-spin 0.7s linear infinite;
}

.enroll-submit.is-busy {
  opacity: 0.9;
  cursor: progress;
}

.enroll-submit.is-busy .enroll-submit__spinner {
  display: inline-block;
}

.enroll-status {
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  border-inline-start: 3px solid var(--danger);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  animation: enroll-rise 0.3s var(--ease);
}

.enroll-status p {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
}

.enroll-status p:last-child {
  margin-bottom: 0;
}

/* Success: a drawn check, a confetti burst and what happens next. */
.enroll-success {
  position: relative;
  padding: 1.25rem 0 0.25rem;
  text-align: center;
  outline: none;
}

.enroll-success[hidden] {
  display: none;
}

.enroll-success__burst {
  position: absolute;
  top: 3.2rem;
  left: 50%;
  pointer-events: none;
}

.enroll-success__burst span {
  position: absolute;
  width: 7px;
  height: 11px;
  border-radius: 1px;
  opacity: 0;
  animation: enroll-confetti 1.3s var(--ease) var(--d) forwards;
}

@keyframes enroll-confetti {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--r));
  }
}

.enroll-success__check {
  width: 76px;
  height: 76px;
  margin-bottom: 1rem;
  stroke: var(--ok);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: enroll-pop 0.5s var(--ease) 0.5s both;
}

.enroll-success__check circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: enroll-draw 0.6s var(--ease) forwards;
}

.enroll-success__check path {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: enroll-draw 0.35s var(--ease) 0.5s forwards;
}

@keyframes enroll-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes enroll-pop {
  50% {
    transform: scale(1.1);
  }
}

.enroll-success__title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.enroll-success__message {
  color: var(--text-soft);
}

.enroll-success__next {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--ok);
  border-radius: var(--radius);
  background: var(--bg);
  list-style: none;
  counter-reset: enroll-next;
  text-align: start;
}

.enroll-success__next li {
  position: relative;
  padding-inline-start: 1.9rem;
  margin-bottom: 0.4rem;
  font-size: 0.93rem;
  counter-increment: enroll-next;
  animation: enroll-rise 0.4s var(--ease) both;
}

.enroll-success__next li:nth-child(1) { animation-delay: 0.7s; }
.enroll-success__next li:nth-child(2) { animation-delay: 0.85s; }
.enroll-success__next li:nth-child(3) { animation-delay: 1s; margin-bottom: 0; }

.enroll-success__next li::before {
  content: counter(enroll-next, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  color: var(--ok);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
}

.enroll-success__quote {
  margin: 0 0 1.25rem;
  padding: 0 0.5rem;
  color: var(--accent);
  font-style: italic;
  animation: enroll-rise 0.5s var(--ease) 1.15s both;
}

@media (prefers-reduced-motion: reduce) {
  .enrollment-panel,
  .enrollment-panel:not([hidden]) > *,
  .enroll-boost__dot,
  .enroll-status,
  .enroll-success__check,
  .enroll-success__next li,
  .enroll-success__quote {
    animation: none;
  }

  .enroll-success__check circle,
  .enroll-success__check path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .enroll-boost__lines p {
    transition: none;
  }
}

/* ---- Contact page ---------------------------------------------------------- */
/* Left: what to ask about and direct channels; right: the form. */
.contact-title {
  margin: 0.75rem 0 0.75rem;
}

.contact-lead {
  max-width: 57.5ch;
  font-size: 1.05rem;
}

.contact-topics {
  margin: 1.5rem 0;
  border-top: 1px dashed var(--border);
}

.contact-topics li {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.7rem;
  padding-inline-start: 1rem;
  border-bottom: 1px dashed var(--border);
  position: relative;
}

.contact-topics li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 1.15rem;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

/* The bug and vulnerability report box under the contact topics. */
.contact-security {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  border-inline-start-width: 3px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 6%, transparent);
}

.contact-security a {
  color: var(--danger);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* ---- Hall of Fame ---------------------------------------------------------- */
/* Credited researchers as a findings log: one row each, target and severity tags. */
.hof-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hof-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.4rem 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}

.hof-entry__rank {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.82rem;
}

.hof-entry__name {
  font-weight: 700;
}

.hof-entry__name a {
  color: inherit;
}

.hof-entry__finding {
  grid-column: 2;
  color: var(--text-soft);
  font-size: 0.93rem;
}

.hof-entry__meta {
  grid-row: 1 / span 2;
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.hof-tag {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

.hof-tag--critical,
.hof-tag--high {
  border-color: color-mix(in srgb, var(--danger) 60%, var(--border));
  color: var(--danger);
}

.hof-empty {
  padding: 2rem 1rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-soft);
  font-family: var(--mono);
  text-align: center;
}

@media (max-width: 575.98px) {
  .hof-entry {
    grid-template-columns: 1fr;
  }

  .hof-entry__rank,
  .hof-entry__finding,
  .hof-entry__meta {
    grid-column: 1;
    grid-row: auto;
  }

  .hof-entry__meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

.contact-topics strong {
  font-weight: 600;
}

.contact-topics span {
  color: var(--text-soft);
  font-size: 0.93rem;
}

.contact-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
}

.contact-channel {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.contact-channel:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: inset 2px 0 0 var(--accent);
}

.contact-channel__label {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-form {
  border-top: 2px solid var(--accent);
}

.contact-required {
  color: var(--danger);
}

.contact-optional {
  color: var(--text-soft);
  font-size: 0.82rem;
}

/* Signal's own questions, set apart under the topic. */
.contact-signal {
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.contact-consent {
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: 0.86rem;
}

.contact-consent p {
  margin-bottom: 0.6rem;
}

.contact-consent .form-check {
  margin-bottom: 0.5rem;
  color: var(--text);
}

.contact-consent a {
  color: var(--accent);
}

.contact-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
}

.contact-captcha {
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
}

/* ---- Signal download page (the short-lived link from the welcome email) ------ */
.section-pad.signal-download {
  min-height: calc(100vh - var(--header-height));
  padding-top: calc(var(--header-height) + 2.5rem);
}

.signal-download__card {
  max-width: 720px;
  border-top: 2px solid var(--accent);
}

.signal-download__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0.4rem 0 0.6rem;
}

.signal-download__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 1.2rem;
}

.signal-download__button svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signal-download__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem 1rem;
  margin: 0 0 0.6rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.signal-download__facts dt {
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.signal-download__facts dd {
  margin: 0;
  font-family: var(--mono);
}

.signal-download__hash {
  grid-column: 1 / -1;
}

.signal-download__hash code {
  color: var(--text);
  font-size: 0.78rem;
  word-break: break-all;
}

.signal-download__timer {
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  color: var(--warning);
  font-size: 0.88rem;
}

.signal-download__next {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.4rem;
  font-size: 0.9rem;
}

.signal-download__next a {
  color: var(--accent);
}

.form-text {
  color: var(--text-soft);
  font-size: 0.82rem;
}

/* ---- Skip link -------------------------------------------------------------- */
/* Hidden until a keyboard user tabs to it, then it drops in above the
   header and jumps straight to the page content. */
.skip-link {
  position: fixed;
  left: 1rem;
  top: 0.5rem;
  z-index: 2000;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t) var(--ease);
}

.skip-link:focus {
  color: var(--on-accent);
  transform: translateY(0);
}

main:focus {
  outline: none;
}

/* ---- Error pages (resources/views/errors) -------------------------------- */
/* A centred, bracketed console panel on the board grid: the logo, a large
   monospace status code with a scan line passing over it, the message, a
   log-style line of the request and ways back. No header or footer - those
   read the database, which may be what failed. */
.error-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.error-page__inner {
  width: min(100%, 620px);
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}

.error-page__logo {
  width: auto;
  height: 48px;
  object-fit: contain;
}

body:not(.light-theme) .error-page__logo {
  filter: brightness(0) invert(1) contrast(1.08);
}

.error-panel {
  --brk: var(--accent);
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 2rem 2rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--brk), var(--brk)),
    linear-gradient(var(--brk), var(--brk)),
    linear-gradient(var(--brk), var(--brk)),
    linear-gradient(var(--brk), var(--brk));
  background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: drop-in 0.35s var(--ease);
}

/* A faint accent band sweeping down the panel, like the old hero scan. */
.error-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 40%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent));
  animation: error-scan 4s linear infinite;
  pointer-events: none;
}

@keyframes error-scan {
  to {
    transform: translateY(350%);
  }
}

.error-panel__code {
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: clamp(3.5rem, 2rem + 8vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.error-panel__title {
  margin: 0.6rem 0 0.5rem;
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.75rem);
}

.error-panel__message {
  margin: 0;
  /* The panel already limits the width; when it must wrap (phones), no lone last word. */
  text-wrap: pretty;
  color: var(--text-soft);
}

.error-panel__log {
  margin: 1.25rem 0 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.error-panel__log span {
  color: var(--brand-red);
  font-weight: 700;
}

.error-panel__log--shell {
  margin-top: 0.5rem;
  overflow-wrap: anywhere;
}

.error-panel__log--shell span {
  color: var(--accent);
}

.error-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

@media (max-width: 575.98px) {
  .error-panel {
    padding: 1.5rem 1.25rem 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .error-panel,
  .error-panel::before {
    animation: none;
  }
}

/* ---- My trainings (student area) ---------------------------------------------- */
/* One row per enrollment, live session or quiz: details on the left, status tag on the right. */
.my-trainings {
  min-height: calc(100vh - var(--header-height));
  padding: calc(var(--header-height) + 2.5rem) 0 3rem;
}

.my-trainings__block {
  margin-top: 2.25rem;
}

.my-trainings__title {
  margin-bottom: 0.85rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.my-trainings__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem;
}

.my-trainings__main {
  min-width: 0;
}

.my-trainings__main a {
  color: var(--text);
}

.my-trainings__main a:hover {
  color: var(--accent);
}

.my-trainings__status {
  flex-shrink: 0;
  white-space: nowrap;
}

.my-trainings__status--registered {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
}

.my-trainings__status--pending {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

.my-trainings__status--rejected {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

@media (max-width: 575.98px) {
  .my-trainings__item {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   Arabic interface (html[dir="rtl"]). Margins, paddings and borders above use
   logical properties, so they mirror on their own; these are the rest:
   Bootstrap pieces written for left-to-right, and decorations placed with
   left/right. */
html[lang="ar"] body {
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Kufi Arabic", system-ui, sans-serif;
}

/* Spacing letters apart breaks how Arabic letters join. */
html[lang="ar"] body * {
  letter-spacing: 0 !important;
}

/* The language switch shows the other language in its own script. */
.nav-language:lang(ar) {
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif;
}

.nav-language:lang(en) {
  font-family: var(--sans);
}

html[dir="rtl"] .ms-lg-3 {
  margin-left: 0 !important;
}

@media (min-width: 992px) {
  html[dir="rtl"] .ms-lg-3 {
    margin-right: 1rem !important;
  }
}

html[dir="rtl"] .me-1 {
  margin-right: 0 !important;
  margin-left: 0.25rem !important;
}

html[dir="rtl"] .form-select {
  padding-right: 0.75rem;
  padding-left: 2.25rem;
  background-position: left 0.75rem center;
}

html[dir="rtl"] .catalog-filters .form-select {
  padding-right: 0.75rem;
  padding-left: 2.1rem;
}

html[dir="rtl"] .accordion-button::after {
  margin-right: auto;
  margin-left: 0;
}

/* Titles typed in either script line up with the page. */
html[dir="rtl"] .training-card [dir="auto"],
html[dir="rtl"] .course-hero-overlay h1[dir="auto"],
html[dir="rtl"] .blog-card [dir="auto"],
html[dir="rtl"] .blog-feature [dir="auto"],
html[dir="rtl"] .roadmap-card [dir="auto"],
html[dir="rtl"] .testimonial-card [dir="auto"] {
  text-align: right;
}

html[dir="rtl"] .course-subtitle::before {
  right: 0;
  left: auto;
}

html[dir="rtl"] .course-quote blockquote::before {
  right: -0.1rem;
  left: auto;
  content: "\201D";
}

/* Arrows point the way the page reads. */
html[dir="rtl"] .course-cta-icon,
html[dir="rtl"] .testimonial-arrow {
  transform: scaleX(-1);
}

/* Hover nudges go the reading way too (the arrow stays mirrored). */
html[dir="rtl"] .course-link:hover .course-cta-icon,
html[dir="rtl"] .course-link:focus-visible .course-cta-icon {
  transform: scaleX(-1) translateX(5px);
}

html[dir="rtl"] .footer-links a:hover {
  transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
  html[dir="rtl"] .course-link:hover .course-cta-icon,
  html[dir="rtl"] .course-link:focus-visible .course-cta-icon {
    transform: scaleX(-1);
  }
}

/* Numbers, codes, emails and prices stay left-to-right inside Arabic text. */
html[dir="rtl"] .course-code,
html[dir="rtl"] .training-price-amounts,
html[dir="rtl"] .price-summary dd {
  unicode-bidi: isolate;
}

/* Menu labels stay on one line in both languages ("التدريب المباشر", "Live Training"). */
.navbar-nav .nav-link {
  white-space: nowrap;
}

/* Titles and subtitles are written in English: on Arabic pages they still sit on the reading side. */
html[dir="rtl"] .course-subtitle {
  text-align: right;
}

/* With the language switch, the header actions still fit one row on large screens. */
@media (min-width: 992px) {
  .navbar .nav-actions.flex-wrap {
    flex-wrap: nowrap !important;
  }

  .nav-language {
    min-width: 4.5rem;
  }
}

.nav-actions .btn {
  white-space: nowrap;
}


/* The language a batch is taught in: bold, in a flat magenta from the palette, in either interface language. */
.taught-language {
  color: var(--lang-ink);
  font-weight: 700;
}

.training-card-batch {
  margin: -0.3rem 0 0.6rem;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
}

/* A live training's batches as tiles, each opening its own page. */
.batch-list {
  display: grid;
  gap: 0.6rem;
}

.batch-tile {
  display: grid;
  gap: 0.4rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.batch-tile:hover,
.batch-tile:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-soft));
  color: var(--text);
}

.batch-tile__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

.batch-tile__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.batch-tile__price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ok);
  font-family: var(--mono);
  font-weight: 700;
}

.batch-tile__go {
  color: var(--accent);
  font-size: 0.8rem;
}

html[dir="rtl"] .batch-tile__go span,
html[dir="rtl"] .roadmap-card__action > span[aria-hidden] {
  display: inline-block;
  transform: scaleX(-1);
}

.request-batch {
  margin-bottom: 1rem;
}

/* "Questions about this training?" in the sidebar. */
.course-ask {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.course-ask__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* Always-visible "Questions? Ask us" on course pages. */
.ask-float {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 1rem;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  transition: transform var(--t) var(--ease);
}

.ask-float:hover,
.ask-float:focus-visible {
  color: var(--on-accent);
  transform: translateY(-2px);
}

.ask-float svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.enroll-open .ask-float {
  display: none;
}

@media (max-width: 575.98px) {
  .ask-float span {
    display: none;
  }

  .ask-float {
    padding: 0.75rem;
  }
}

/* Arabic home hero: the copy reads from the right, so the radar (a hero animation, placed on the
   inline end) sits on the left and the shade that keeps the copy readable comes from the right. */
html[dir="rtl"] .hero-video-bg::after {
  background:
    linear-gradient(270deg, rgba(12, 14, 17, 0.92) 0%, rgba(12, 14, 17, 0.55) 45%, rgba(12, 14, 17, 0) 75%),
    linear-gradient(180deg, rgba(12, 14, 17, 0) 60%, rgba(12, 14, 17, 0.85) 100%);
}

/* Page loader: a short boot screen on the first page of a visit (partials/page-loader). */
.page-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.page-loader.is-active { display: flex; }
.page-loader.is-done { opacity: 0; visibility: hidden; }
.page-loader__panel {
  width: min(360px, 100%);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.page-loader__logo { display: block; height: 40px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1) contrast(1.08); }
body.light-theme .page-loader__logo { filter: none; }
.page-loader__lines {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-soft);
}
.page-loader__lines li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  opacity: 0;
  animation: page-loader-line 0.25s var(--ease) forwards;
}
.page-loader__lines li:nth-child(2) { animation-delay: 0.3s; }
.page-loader__lines li:nth-child(3) { animation-delay: 0.6s; color: var(--text); }
.page-loader__prompt { color: var(--accent); }
.page-loader__ok { margin-inline-start: auto; color: var(--ok); }
.page-loader__cursor {
  width: 7px;
  height: 14px;
  background: var(--accent);
  animation: page-loader-blink 0.9s steps(1) infinite;
}
.page-loader__bar { height: 2px; background: var(--border); overflow: hidden; }
.page-loader__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  animation: page-loader-bar 1s var(--ease) forwards;
}
@keyframes page-loader-line { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes page-loader-blink { 50% { opacity: 0; } }
@keyframes page-loader-bar { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .page-loader__lines li, .page-loader__bar span, .page-loader__cursor { animation: none; opacity: 1; width: auto; }
  .page-loader__bar span { width: 100%; }
}

/* ---- Signal docs (/signal/doc/{version}) ---------------------------------
   Menu on the left (a drawer on phones), the page in the middle, the page's
   headings on the right as Signal section-rail ticks. The article body reuses
   .blog-content; the rules below add the docs' own blocks. */
.docs-shell {
  padding-top: var(--header-height);
  --docs-sidebar: 280px;
  --docs-toc: 230px;
}

.docs-layout {
  display: grid;
  grid-template-columns: var(--docs-sidebar) minmax(0, 1fr) var(--docs-toc);
  max-width: 1560px;
  margin-inline: auto;
}

/* The panel buttons above the article: the menu (start) and On this page (end). */
.docs-panels {
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.docs-panels__toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: none;
  color: var(--text-soft);
}

.docs-panels__toggle:hover,
.docs-panels__toggle:focus-visible,
.docs-panels__toggle[aria-expanded="false"] {
  border-color: var(--accent);
  color: var(--text);
}

.docs-panels__toggle[data-docs-panel="toc"] {
  margin-inline-start: auto;
}

.docs-panels__toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

@media (min-width: 992px) {
  .docs-shell.is-nav-hidden {
    --docs-sidebar: 0px;
  }

  .docs-shell.is-nav-hidden .docs-sidebar {
    visibility: hidden;
    overflow: hidden;
    border: 0;
  }
}

/* A hidden panel's room goes to a centred reading column, the body as wide as the rest. */
.docs-shell.is-nav-hidden .docs-main > *,
.docs-shell.is-toc-hidden .docs-main > * {
  max-width: 820px;
  margin-inline: auto;
}

@media (min-width: 1200px) {
  .docs-shell.is-toc-hidden {
    --docs-toc: 0px;
  }

  .docs-shell.is-toc-hidden .docs-toc {
    visibility: hidden;
    overflow: hidden;
    padding: 0;
  }
}

.docs-sidebar {
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  border-inline-end: 1px solid var(--border);
  background: var(--bg);
  --bs-offcanvas-bg: var(--surface);
  --bs-offcanvas-color: var(--text);
  --bs-offcanvas-width: min(320px, 88vw);
}

.docs-sidebar__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem 1rem 1.5rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.docs-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.docs-brand__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  text-decoration: none;
}

.docs-brand__name {
  font: 700 0.95rem/1 var(--mono);
  letter-spacing: 0.04em;
}

.docs-version {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.4rem 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: 600 0.78rem/1.2 var(--mono);
}

.docs-version svg,
.docs-tree__toggle svg,
.docs-mobilebar svg,
.docs-sidebar__changes svg,
.docs-search__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.docs-version:hover,
.docs-version:focus-visible {
  border-color: var(--accent);
}

.docs-version__menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-link-hover-color: var(--text);
  --bs-dropdown-link-active-bg: color-mix(in srgb, var(--accent) 18%, transparent);
  --bs-dropdown-link-active-color: var(--text);
  max-height: 60vh;
  overflow-y: auto;
  border-radius: var(--radius);
  font: 0.85rem var(--mono);
}

.docs-version__menu .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.docs-tag {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-soft);
  font: 600 0.68rem/1.4 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.docs-tag--ok {
  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
  color: var(--ok);
}

.docs-tag--accent {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
}

/* Search: a field with a results panel under it (site.js), or the results page without JS. */
.docs-search {
  position: relative;
}

.docs-search__icon {
  position: absolute;
  inset-inline-start: 0.65rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--text-soft);
  pointer-events: none;
}

.docs-search__input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 2.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
}

.docs-search__input::-webkit-search-cancel-button {
  display: none;
}

.docs-search__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.docs-search__key {
  position: absolute;
  inset-inline-end: 0.5rem;
  top: 50%;
  translate: 0 -50%;
  padding: 0 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-soft);
  font: 0.72rem/1.5 var(--mono);
}

.docs-search__input:focus ~ .docs-search__key {
  display: none;
}

.docs-search__results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 4px);
  z-index: 30;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.6);
}

.docs-search__result {
  display: block;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.docs-search__result:last-child {
  border-bottom: 0;
}

.docs-search__result[aria-selected="true"],
.docs-search__result:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.docs-search__result small {
  display: block;
  color: var(--text-soft);
  font: 0.7rem var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.docs-search__result strong {
  display: block;
  font-size: 0.9rem;
}

.docs-search__result span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.8rem;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.docs-search__result mark,
.docs-results mark {
  padding: 0;
  background: color-mix(in srgb, var(--warning) 35%, transparent);
  color: inherit;
}

.docs-search__empty {
  margin: 0;
  padding: 0.75rem;
  color: var(--text-soft);
  font-size: 0.85rem;
}

/* The menu: section headings, pages, and sub-pages behind a chevron. */
.docs-tree {
  flex: 1;
}

/* Sections fold (native details); only the open page's section starts open. */
.docs-tree__section + .docs-tree__section {
  margin-top: 0.25rem;
}

.docs-tree__heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius);
  color: var(--text-soft);
  font: 700 0.7rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.docs-tree__heading::-webkit-details-marker {
  display: none;
}

.docs-tree__heading:hover,
.docs-tree__section[open] > .docs-tree__heading {
  color: var(--text);
}

.docs-tree__heading:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.docs-tree__icon,
.docs-tree__chevron {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.docs-tree__icon {
  color: var(--accent);
}

.docs-tree__chevron {
  margin-inline-start: auto;
  transition: transform 0.15s ease;
}

[dir="rtl"] .docs-tree__chevron {
  transform: scaleX(-1);
}

.docs-tree__section[open] > .docs-tree__heading .docs-tree__chevron {
  transform: rotate(90deg);
}

.docs-tree__section > .docs-tree__list {
  margin: 0.15rem 0 0.6rem;
}

.docs-tree__list,
.docs-tree__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-tree__row {
  display: flex;
  align-items: center;
}

.docs-tree__link {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.38rem 0.6rem;
  border-inline-start: 2px solid transparent;
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.docs-tree__link:hover {
  color: var(--text);
  background: var(--surface-2);
}

.docs-tree__link.is-active {
  border-inline-start-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  font-weight: 600;
}

.docs-tree__toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-soft);
}

.docs-tree__toggle:hover {
  color: var(--text);
  background: var(--surface-2);
}

.docs-tree__toggle svg {
  transition: rotate 0.2s var(--ease);
}

.docs-tree__toggle[aria-expanded="true"] svg {
  rotate: 90deg;
}

[dir="rtl"] .docs-tree__toggle[aria-expanded="false"] svg {
  rotate: 180deg;
}

.docs-tree__sub {
  margin-block: 0.1rem 0.25rem;
  margin-inline-start: 0.85rem;
  border-inline-start: 1px solid var(--border);
}

.docs-tree__sub[hidden] {
  display: none;
}

.docs-tree__sub .docs-tree__link {
  font-size: 0.86rem;
}

.docs-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.docs-dot--new {
  background: var(--ok);
}

.docs-dot--updated {
  background: var(--accent);
}

.docs-sidebar__changes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-soft);
  font-size: 0.85rem;
  text-decoration: none;
}

.docs-sidebar__changes:hover,
.docs-sidebar__changes.is-active {
  border-color: var(--accent);
  color: var(--text);
}

/* The page. */
.docs-main {
  min-width: 0;
  padding: 2rem clamp(1rem, 4vw, 3.5rem) 4rem;
}

.docs-main > * {
  max-width: 820px;
  margin-inline: auto;
}

.docs-banner {
  margin-bottom: 1.25rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  font-size: 0.9rem;
}

.docs-banner a {
  margin-inline-start: 0.35rem;
  font-weight: 600;
}

.docs-banner--draft {
  border-color: color-mix(in srgb, var(--violet) 45%, var(--border));
  background: color-mix(in srgb, var(--violet) 8%, transparent);
}

.docs-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  color: var(--text-soft);
  font: 0.75rem var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.docs-crumbs > * + *::before {
  content: "/";
  margin-inline-end: 0.4rem;
  opacity: 0.6;
}

.docs-crumbs a {
  color: inherit;
}

.docs-head {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.docs-title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.docs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.docs-content.blog-content {
  max-width: none;
  font-size: 1rem;
  line-height: 1.75;
}

.docs-content h2,
.docs-content h3,
.docs-content h4 {
  position: relative;
  scroll-margin-top: calc(var(--header-height) + 1.25rem);
}

.docs-content h2 {
  margin-top: 2.6rem;
  padding-top: 0.4rem;
  font-size: 1.5rem;
}

.docs-content h3 {
  font-size: 1.2rem;
}

.docs-anchor {
  margin-inline-start: 0.4rem;
  color: var(--text-soft);
  font-weight: 400;
  text-decoration: none !important;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}

.docs-content :is(h2, h3):hover .docs-anchor,
.docs-anchor:focus-visible {
  opacity: 1;
}

.docs-content .lead {
  color: var(--text-soft);
  font-size: 1.18rem;
  line-height: 1.6;
}

.docs-content mark {
  padding: 0 0.15em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--warning) 32%, transparent);
  color: inherit;
}

.docs-content hr {
  margin: 2rem 0;
  border-color: var(--border);
  opacity: 1;
}

/* The editor's named text colours, in the theme's shades for dark and light mode. */
.docs-content .color[data-color="gray"] { color: var(--text-soft) !important; }
.docs-content .color[data-color="red"] { color: var(--danger) !important; }
.docs-content .color[data-color="orange"] { color: #fb923c !important; }
.docs-content .color[data-color="yellow"] { color: var(--warning) !important; }
.docs-content .color[data-color="green"] { color: var(--ok) !important; }
.docs-content .color[data-color="blue"] { color: var(--accent) !important; }
.docs-content .color[data-color="purple"] { color: var(--violet) !important; }
.docs-content .color[data-color="pink"] { color: var(--lang-ink) !important; }
body.light-theme .docs-content .color[data-color="orange"] { color: #c2410c !important; }
body.light-theme .docs-content .color[data-color="pink"] { color: #be185d !important; }

.docs-table {
  margin: 1.5rem 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.docs-content .docs-table table {
  margin: 0;
}

.docs-content td p,
.docs-content th p {
  margin: 0;
}

/* Toggles (the editor's "details"). */
.docs-content details {
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.docs-content summary {
  padding: 0.6rem 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.docs-content details > :not(summary) {
  padding: 0 0.9rem 0.25rem;
}

/* Columns (the editor's grid): stacked on phones. */
.docs-content [data-cols] {
  display: grid;
  gap: 1.25rem;
  margin: 1.5rem 0;
}

@media (min-width: 768px) {
  .docs-content [data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-content [data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .docs-content [data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .docs-content [data-col-span="2"] { grid-column: span 2; }
  .docs-content [data-col-span="3"] { grid-column: span 3; }
}

/* Callouts. */
.docs-callout {
  --callout: var(--accent);
  display: flex;
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--callout) 40%, var(--border));
  border-inline-start-width: 3px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--callout) 8%, transparent);
}

.docs-callout--tip { --callout: var(--ok); }
.docs-callout--important { --callout: var(--violet); }
.docs-callout--warning { --callout: var(--warning); }
.docs-callout--danger { --callout: var(--danger); }

.docs-callout__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.2rem;
  fill: none;
  stroke: var(--callout);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.docs-callout__body {
  min-width: 0;
}

.docs-callout__body .docs-callout__title {
  margin: 0 0 0.25rem;
  color: var(--callout);
  font-weight: 700;
}

.docs-callout__body > :last-child {
  margin-bottom: 0;
}

/* Steps: a numbered timeline. */
.docs-steps {
  margin: 1.75rem 0;
  padding: 0;
  list-style: none;
  counter-reset: docs-step;
}

.blog-content .docs-steps__item {
  position: relative;
  padding-block: 0 1.25rem;
  padding-inline: 2.75rem 0;
  counter-increment: docs-step;
}

.docs-steps__item::before {
  content: counter(docs-step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  font: 700 0.85rem/1 var(--mono);
}

.docs-steps__item::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(0.95rem - 0.5px);
  top: 2.1rem;
  bottom: 0.2rem;
  width: 1px;
  background: var(--border);
}

.docs-steps__item:last-child::after {
  display: none;
}

.docs-steps__item .docs-steps__title {
  margin: 0.15rem 0 0.35rem;
  font-weight: 700;
}

.docs-steps__item > :last-child {
  margin-bottom: 0;
}

/* Videos: 16:9. */
.docs-video {
  margin: 1.75rem 0;
}

.docs-video__frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #000;
}

.docs-video__frame iframe,
.docs-video__frame video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.docs-video figcaption {
  margin-top: 0.5rem;
  color: var(--text-soft);
  font-size: 0.85rem;
  text-align: center;
}

/* Previous / next. */
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.docs-pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.docs-pager__link:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}

.docs-pager__link--next {
  grid-column: 2;
  text-align: end;
}

.docs-pager__label {
  color: var(--text-soft);
  font: 0.72rem var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs-pager__title {
  font-weight: 600;
}

/* Search results page and "What's new". */
.docs-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-results a {
  display: block;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.docs-results a:hover .docs-results__title {
  color: var(--accent);
}

.docs-results__section {
  display: block;
  color: var(--text-soft);
  font: 0.72rem var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.docs-results__title {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
}

.docs-results__snippet {
  display: block;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.docs-changes__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0 0.75rem;
  font-size: 1.1rem;
}

.docs-changes__title span {
  color: var(--text-soft);
  font: 0.8rem var(--mono);
}

.docs-changes__list {
  padding-inline-start: 1.1rem;
}

.docs-changes__list li {
  margin-bottom: 0.35rem;
}

.docs-changes__list--added li::marker { color: var(--ok); }
.docs-changes__list--updated li::marker { color: var(--accent); }
.docs-changes__list--removed li { color: var(--text-soft); text-decoration: line-through; }

.docs-empty {
  padding: 4rem 0;
  text-align: center;
}

/* "On this page": the page's headings as Signal ticks, the one being read long and accent. */
.docs-toc {
  position: sticky;
  top: var(--header-height);
  align-self: start;
  max-height: calc(100vh - var(--header-height));
  padding-block: 2rem;
  padding-inline: 0.5rem 1rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.docs-toc__heading {
  margin: 0 0 0.6rem;
  color: var(--text-soft);
  font: 700 0.7rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.docs-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-toc__item a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.28rem 0;
  color: var(--text-soft);
  font-size: 0.83rem;
  line-height: 1.35;
  text-decoration: none;
}

.docs-toc__item--h3 a {
  padding-inline-start: 0.9rem;
  font-size: 0.8rem;
}

.docs-toc__tick {
  flex: none;
  width: 10px;
  height: 2px;
  margin-bottom: 0.2em;
  border-radius: 1px;
  background: color-mix(in srgb, var(--text) 40%, transparent);
  transition: width 0.25s var(--ease), background-color 0.25s var(--ease);
}

.docs-toc__item a:hover {
  color: var(--text);
}

.docs-toc__item a:hover .docs-toc__tick {
  width: 18px;
  background: var(--text);
}

.docs-toc__item a[aria-current="true"] {
  color: var(--accent);
}

.docs-toc__item a[aria-current="true"] .docs-toc__tick {
  width: 22px;
  background: var(--accent);
}

.docs-toc__top {
  display: inline-block;
  margin-top: 1rem;
  color: var(--text-soft);
  font: 0.75rem var(--mono);
  text-decoration: none;
}

.docs-toc__top:hover {
  color: var(--accent);
}

.docs-toc-inline {
  margin-bottom: 1.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.docs-toc-inline summary {
  color: var(--text-soft);
  font: 700 0.75rem var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.docs-toc-inline .docs-toc__list {
  margin-top: 0.5rem;
}

/* Phones and tablets: a bar with the menu button; the menu is a drawer. */
.docs-mobilebar {
  position: sticky;
  top: var(--header-height);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
}

.docs-mobilebar__menu {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: 600 0.8rem var(--mono);
}

.docs-mobilebar__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-version-pill {
  color: var(--text-soft);
  font: 0.75rem var(--mono);
}

.docs-sidebar .btn-close {
  filter: invert(1);
}

body.light-theme .docs-sidebar .btn-close {
  filter: none;
}

@media (max-width: 1199.98px) {
  .docs-layout {
    grid-template-columns: var(--docs-sidebar) minmax(0, 1fr);
  }
}

@media (max-width: 991.98px) {
  .docs-layout {
    display: block;
  }

  .docs-sidebar {
    position: fixed;
    height: auto;
    border: 0;
  }

  .docs-sidebar .offcanvas-header {
    border-bottom: 1px solid var(--border);
  }

  .docs-main {
    padding: 1.5rem 16px 3rem;
  }

  .docs-pager {
    grid-template-columns: 1fr;
  }

  .docs-pager__link--next {
    grid-column: auto;
  }
}

/* ---- Signal page: one screen per section --------------------------------- */
/* Like the home page: each section fills the screen below the header and the
   scroll settles on section starts; the hero's Download button glides to
   Get Started. Section subtitles stay on one line on wide screens. */
html:has(body[data-page="signal"]) {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-height);
}

@media (max-width: 767.98px) {
  html:has(body[data-page="signal"]) {
    scroll-snap-type: y proximity;
  }
}

body[data-page="signal"] main > section.signal-hero {
  min-height: 100svh;
  scroll-padding-top: 0;
}

body[data-page="signal"] .site-footer {
  scroll-snap-align: end;
}

/* Larger reading sizes on this page: body copy, notes and labels. */
body[data-page="signal"] main {
  font-size: 1.0625rem;
}

body[data-page="signal"] main .text-soft {
  font-size: 1rem;
}

body[data-page="signal"] main h3.h6 {
  font-size: 1.08rem;
}

body[data-page="signal"] .section-head h2 {
  font-size: clamp(1.45rem, 1.1rem + 0.9vw, 1.9rem);
}

body[data-page="signal"] .section-head p {
  font-size: 1.08rem;
}

/* Emphasis: accent for the key phrase, green for good news, amber for a warning. */
.sig-hl { color: var(--accent); }
.sig-ok { color: var(--ok); }
.sig-warn { color: var(--warning); }
.sig-red { color: var(--brand-red); }

body[data-page="signal"] main > section {
  min-height: calc(100svh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}

body[data-page="signal"] main > section.pt-0 {
  padding-top: 3rem !important;
}

body[data-page="signal"] .section-head p {
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body[data-page="signal"]) {
    scroll-behavior: auto;
  }
}

/* A "read more in the docs" link: accent, mono, with an arrow. */
.signal-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font: 600 0.82rem/1.4 var(--mono);
  text-decoration: none;
}

.signal-more::after {
  content: "\2192";
  transition: translate var(--t) var(--ease);
}

[dir="rtl"] .signal-more::after {
  content: "\2190";
}

.signal-more:hover::after {
  translate: 3px 0;
}

/* 01: by hand vs Signal - two bars that grow in when the card is revealed. */
.signal-race__caption {
  margin-bottom: 1rem;
  color: var(--text-soft);
  font: 600 0.72rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.signal-race__lane {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 8.5rem;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.signal-race__label,
.signal-race__time {
  font: 600 0.8rem/1.3 var(--mono);
}

.signal-race__time {
  color: var(--text-soft);
  text-align: end;
}

.signal-race__lane--signal .signal-race__time {
  color: var(--ok);
}

/* Each approach's bar: its length is its share of the longest, split into
   collect / process / triage; it grows in when the card is revealed. */
.signal-race__bar {
  height: 1.6rem;
  border-radius: var(--radius);
  background: var(--bg);
}

.signal-race__fill {
  display: flex;
  width: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  transition: width 1.2s var(--ease);
}

.reveal.show .signal-race__fill {
  width: calc(var(--width) * 1%);
  min-width: 0.6rem;
}

/* Signal's bar stays a sliver: about a minute next to hours. */
.reveal.show .signal-race__lane--signal .signal-race__fill {
  min-width: 0.3rem;
}

.signal-race__seg {
  flex: 0 0 calc(var(--share) * 1%);
  border-inline-end: 1px solid var(--bg);
}

.signal-race__seg--collect,
.signal-race__key--collect { background: color-mix(in srgb, var(--danger) 70%, var(--surface)); }

.signal-race__seg--process,
.signal-race__key--process { background: color-mix(in srgb, var(--warning) 70%, var(--surface)); }

.signal-race__seg--triage,
.signal-race__key--triage { background: color-mix(in srgb, var(--violet) 70%, var(--surface)); }

.signal-race__seg--signal {
  flex-basis: 100%;
  border: 0;
  background: var(--ok);
  animation: signal-pulse 1.8s ease-in-out infinite;
}

@keyframes signal-pulse {
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }
}

.signal-race__lane--signal .signal-race__label {
  color: var(--ok);
}

.signal-race__key {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-inline-end: 0.4rem;
  border-radius: 2px;
}

.signal-race__legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem 1.25rem;
  margin-top: 1.25rem;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.signal-race__legend strong {
  display: block;
  color: var(--text);
  font: 600 0.78rem/1.5 var(--mono);
}

/* 02: four ideas as numbered rows, and the run's readers side by side. */
.signal-ideas {
  display: grid;
  gap: 0.6rem;
}

.signal-idea {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.signal-idea__index {
  color: var(--accent);
  font: 600 0.85rem/1.6 var(--mono);
}

/* 03: evidence groups with chips, and the source-health legend. */
.signal-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.signal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.signal-chips li {
  padding: 0.1rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius);
  color: var(--accent);
  font: 500 0.72rem/1.6 var(--mono);
}

.signal-health li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
  font: 500 0.85rem/1.4 var(--mono);
}

.signal-health__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--text-soft);
}

.signal-health__dot--ok { background: var(--ok); }
.signal-health__dot--part { background: var(--warning); }
.signal-health__dot--no { background: var(--danger); animation: signal-blink 1.6s ease-in-out infinite; }

@keyframes signal-blink {
  50% { opacity: 0.35; }
}

/* 04: steps stacked beside the console screenshots. */
.signal-steps--stacked {
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.signal-steps--stacked li {
  padding: 0.85rem 1rem;
}

.signal-shots__nav {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.signal-shots__tabs {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}

.signal-shots__arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-soft);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.signal-shots__arrow:hover,
.signal-shots__arrow:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.signal-shots__arrow svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Arabic: the row runs right to left, so the arrows point the other way. */
[dir="rtl"] .signal-shots__arrow svg {
  transform: scaleX(-1);
}

.signal-shots__tabs button {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-soft);
  font: 600 0.78rem/1.4 var(--mono);
}

.signal-shots__tabs button[aria-selected="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.signal-shots__panel {
  margin: 0;
  animation: signal-shot-in 0.35s var(--ease);
}

.signal-shots__panel img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.signal-shots__panel figcaption {
  margin-top: 0.5rem;
}

@keyframes signal-shot-in {
  from { opacity: 0; translate: 0 6px; }
}

/* 05: headline numbers, and module cards with an icon. */
.signal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.signal-stats > div {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}

.signal-stats dt {
  font: 700 1.5rem/1.1 var(--mono);
}

.signal-stats dd {
  margin: 0.2rem 0 0;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.signal-module:has(.signal-module__icon) {
  grid-template-columns: 2rem minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  text-align: start;
  gap: 0.75rem;
}

.signal-module__icon {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t) var(--ease);
}

.signal-module:hover .signal-module__icon {
  transform: scale(1.12);
}

.signal-module:has(.signal-module__icon) p {
  margin-top: 0.25rem;
}

/* 06: when to run it as a numbered list, and the enterprise strip. */
.signal-when {
  counter-reset: when;
}

.signal-when li {
  position: relative;
  display: grid;
  margin-bottom: 0.6rem;
  padding-inline-start: 2rem;
  counter-increment: when;
  font-size: 0.9rem;
}

.signal-when li::before {
  content: counter(when, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  color: var(--accent);
  font: 600 0.78rem/1.6 var(--mono);
}

.signal-fleet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  border-inline-start: 3px solid var(--accent);
}

/* 07: the main limit on its own line, larger and marked. */
.signal-not-lead {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  border-inline-start: 4px solid var(--danger);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
}

/* 08: the docs map - a root and its sections on a rail, appearing one by one. */
.signal-docmap__root {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--mono);
}

.signal-docmap__sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--border));
  isolation: isolate;
}

.signal-docmap__sections > li {
  position: relative;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* The surface is see-through; the page colour under it hides the
     connectors that run behind the cards. */
  background: linear-gradient(var(--surface), var(--surface)), var(--bg);
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.4s var(--ease), translate 0.4s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}

.signal-docmap__sections > li::before {
  content: "";
  position: absolute;
  top: calc(-1.25rem - 1px);
  inset-inline-start: 1rem;
  height: 1.25rem;
  /* Behind the cards: a lower row's connector stops at the border of the
     card above instead of crossing its text. */
  z-index: -1;
  border-inline-start: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--border));
}

.reveal.show .signal-docmap__sections > li {
  opacity: 1;
  /* none, not 0 0: any translate makes each card its own layer, and a lower
     row's connector would then paint over the card above. */
  translate: none;
}

.signal-docmap__section {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent);
  font: 600 0.8rem/1.4 var(--mono);
}

.signal-docmap__sections ul {
  color: var(--text-soft);
  font-size: 0.85rem;
}

.signal-docmap__sections a {
  color: inherit;
}

.signal-docmap__sections a:hover {
  color: var(--accent);
}

/* Get Started: one contact panel under the plans; each link opens the form with its topic chosen. */
.signal-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.5rem;
  align-items: center;
}

.signal-contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.signal-contact__links a {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.signal-contact__links svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 10: three plans, the middle one marked. */
.signal-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: stretch;
}

.signal-plan {
  display: flex;
  flex-direction: column;
}

.signal-plan--featured {
  border-color: var(--accent);
  box-shadow: inset 0 2px 0 var(--accent);
}

.signal-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.signal-plan__price {
  flex: none;
  padding: 0.1rem 0.5rem;
  border: 1px solid currentColor;
  color: var(--accent);
  font: 600 0.72rem/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.signal-plan--community .signal-plan__price { color: var(--ok); }
/* Community card: the version on offer, as a small badge, and how updates arrive. */
.signal-plan__version { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--text-soft); line-height: 1.45; }
.signal-plan__version strong { color: var(--text); font-weight: 600; }
.signal-plan__badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-top: 0.1rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  font: 600 0.68rem/1.4 var(--mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* The version a download button gets: a second segment after a thin divider, like a release tag. */
.btn-version {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 0.65em;
  padding-inline-start: 0.65em;
  border-inline-start: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font: 600 0.72em/1 var(--mono);
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0.9;
}
.signal-plan--enterprise .signal-plan__price { color: var(--violet); }
.signal-plan--enterprise { border-color: var(--violet); box-shadow: inset 0 2px 0 var(--violet); }

.signal-plan__lead {
  margin-bottom: 0.35rem;
  color: var(--text);
  font: 600 0.8rem/1.4 var(--mono);
}

.signal-plan .feature-list li { font-size: 0.9rem; }

/* Which edition: three questions, each pointing at its card. */
.signal-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0 0 0.9rem;
}

.signal-paths a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--border);
  color: var(--text-soft);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.signal-paths a::after {
  content: "\2193";
  color: var(--accent);
}

.signal-paths a:hover,
.signal-paths a:focus-visible {
  color: var(--text);
  border-color: var(--accent);
}

.signal-paths strong {
  margin-inline-start: auto;
  color: var(--text);
  font-weight: 600;
}

.signal-paths__soon {
  margin-inline-start: 0.35rem;
  color: var(--warning);
  font: 600 0.68rem var(--mono);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* The Community license in one line, under the editions. */
.signal-license {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.9rem 0 0;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.signal-license svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  fill: none;
  stroke: var(--ok);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signal-license strong { color: var(--text); }

@media (max-width: 991.98px) {
  .signal-contact {
    grid-template-columns: 1fr;
  }

  .signal-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signal-plans,
  .signal-paths {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .signal-evidence,
  .signal-race__legend,
  .signal-fleet {
    grid-template-columns: 1fr;
  }

  .signal-race__lane {
    grid-template-columns: 3.75rem minmax(0, 1fr) 3.75rem;
    gap: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal-race__seg,
  .signal-docmap__sections > li {
    transition: none;
  }

  .signal-health__dot--no,
  .signal-shots__panel {
    animation: none;
  }
}

/* 05: the four severities as coloured bars; writing your own rules. */
.signal-sev {
  display: flex;
  gap: 0.3rem;
  height: 1.65rem;
  align-items: center;
}

.signal-sev i {
  width: 1.4rem;
  height: 0.55rem;
  border-radius: 2px;
}

.signal-sev .sev-critical { background: #e5484d; }
.signal-sev .sev-high { background: #f76b15; }
.signal-sev .sev-medium { background: var(--warning); }
.signal-sev .sev-low { background: var(--accent); }

.signal-own-rules {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-inline-start: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

/* 06: what Signal reads on the host, what it does there and in Signal Console,
   then what other tools work from - the Signal row lit. */
.signal-reach__flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.signal-reach__col {
  position: relative;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.signal-reach__col + .signal-reach__col::before {
  content: "\2192";
  position: absolute;
  inset-inline-start: -1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-weight: 700;
}

[dir="rtl"] .signal-reach__col + .signal-reach__col::before {
  content: "\2190";
}

.signal-reach__col--signal {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, var(--bg));
}

.signal-reach__col--console {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}

.signal-reach__tag {
  display: block;
  margin-bottom: 0.4rem;
  font: 700 0.8rem/1.3 var(--mono);
  color: var(--text-soft);
}

.signal-reach__col--signal .signal-reach__tag { color: var(--ok); }
.signal-reach__col--console .signal-reach__tag { color: var(--accent); }

.signal-reach__col li {
  padding: 0.2rem 0;
  font-size: 0.88rem;
}

.signal-reach__basis div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.signal-reach__basis dt {
  font: 600 0.8rem/1.5 var(--mono);
}

.signal-reach__basis dd {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.signal-reach__basis .is-signal {
  border-bottom: 0;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}

.signal-reach__basis .is-signal dt,
.signal-reach__basis .is-signal dd {
  color: var(--ok);
}

/* 07: Signal's run on top, and the kind of tool each next step takes. */
.signal-handoff__head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  font-size: 0.88rem;
}

.signal-handoff__tag {
  font: 700 0.85rem/1.3 var(--mono);
  color: var(--accent);
}

.signal-handoff__steps {
  margin-inline-start: 1.25rem;
  border-inline-start: 2px solid color-mix(in srgb, var(--accent) 50%, var(--border));
}

.signal-handoff__steps li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  position: relative;
  margin-inline-start: 1.25rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 0.9rem;
}

.signal-handoff__steps li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.3rem;
  top: 50%;
  width: 1.2rem;
  border-top: 2px solid color-mix(in srgb, var(--accent) 50%, var(--border));
}

.signal-handoff__steps strong {
  color: var(--accent);
  font: 600 0.8rem/1.6 var(--mono);
}

/* The last step is Signal's own, lit green. */
.signal-handoff__steps .signal-handoff__signal {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, var(--bg));
}

.signal-handoff__steps .signal-handoff__signal strong {
  color: var(--ok);
}

/* 06: a deployment tool's logo beside its name. */
.signal-chips__logo {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.signal-chips__logo img {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
}

/* 10: the enterprise pack - four review areas and the frameworks mapped. */
.signal-enterprise {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.signal-enterprise__points li {
  position: relative;
  padding-inline-start: 1.1rem;
  margin-bottom: 0.45rem;
  color: var(--text-soft);
  font-size: 0.9rem;
}

.signal-enterprise__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ok);
}

/* Hero: the engagements line above the logo, like the home hero's eyebrow. */
.signal-hero__engagements {
  display: flex;
  margin-bottom: 1rem;
}

/* Hero: what Signal is, in the warm accent, apart from the blue engagements line. */
.signal-hero__kind {
  color: var(--warning);
}

.eyebrow.signal-hero__kind::before {
  background: currentColor;
}

/* 02: a real run's -v screenshot, opened full size on click. */
/* 04: a screenshot is a button that opens it full size. */
.signal-shots__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.signal-zoom .modal-content {
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 10, 0.94);
}

.signal-zoom img {
  max-width: 100%;
  max-height: 100vh;
  object-fit: contain;
}

.signal-zoom__close {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  z-index: 1;
}

/* Hero: the overview video button's play icon. */
.signal-watch {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.signal-watch svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.signal-not li {
  margin-bottom: 0.75rem;
}

@media (max-width: 991.98px) {
  .signal-enterprise {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signal-race__lane {
    grid-template-columns: 8rem minmax(0, 1fr) 6.5rem;
  }
}

@media (max-width: 575.98px) {
  .signal-own-rules,
  .signal-reach__flow,
  .signal-enterprise {
    grid-template-columns: 1fr;
  }

  .signal-reach__col + .signal-reach__col::before {
    display: none;
  }

  .signal-race__lane {
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.5rem;
  }

  .signal-race__bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal-race__fill,
  .signal-showcase__lane i {
    transition: none;
  }

  .signal-race__seg--signal {
    animation: none;
  }
}

/* ---- Signal page: roadmap orbit map (after Get Started) ------------------- */
/* Today's run at the centre; each ring a step further out. Ring colours match
   their numbered track in the list beside it. */
.signal-roadmap {
  --rm-sources: var(--accent);
  --rm-linux: var(--ok);
  --rm-macos: var(--lang-ink);
  --rm-offline: var(--warning);
  --rm-memory: var(--violet);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
}

.signal-roadmap__map {
  margin: 0;
  max-width: 440px;
  width: 100%;
  justify-self: center;
}

.signal-roadmap__map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.signal-roadmap__beyond {
  fill: none;
  stroke: var(--text-soft);
  stroke-width: 1;
  stroke-dasharray: 2 7;
  opacity: 0.6;
}

.signal-roadmap__ring {
  transform-box: view-box;
  transform-origin: 220px 220px;
  animation: signal-roadmap-spin var(--spin, 40s) linear infinite;
}

.signal-roadmap__ring:nth-of-type(even) {
  animation-direction: reverse;
}

.signal-roadmap__ring > circle:first-child {
  fill: none;
  stroke: var(--rm-ring);
  stroke-opacity: 0.45;
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
}

.signal-roadmap__dot {
  fill: var(--rm-ring);
  filter: drop-shadow(0 0 5px var(--rm-ring));
}

.signal-roadmap__ring--sources, .signal-roadmap__tag--sources, .signal-roadmap__track--sources { --rm-ring: var(--rm-sources); }
.signal-roadmap__ring--linux, .signal-roadmap__tag--linux, .signal-roadmap__track--linux { --rm-ring: var(--rm-linux); }
.signal-roadmap__ring--macos, .signal-roadmap__tag--macos, .signal-roadmap__track--macos { --rm-ring: var(--rm-macos); }
.signal-roadmap__ring--offline, .signal-roadmap__tag--offline, .signal-roadmap__track--offline { --rm-ring: var(--rm-offline); }
.signal-roadmap__ring--memory, .signal-roadmap__tag--memory, .signal-roadmap__track--memory { --rm-ring: var(--rm-memory); }
.signal-roadmap__track--beyond { --rm-ring: var(--text-soft); }

.signal-roadmap__core {
  fill: var(--surface);
  stroke: var(--danger);
  stroke-width: 1.5;
  animation: signal-roadmap-pulse 3s var(--ease) infinite;
}

.signal-roadmap__core-name {
  fill: var(--text);
  font: 600 12px var(--mono);
}

.signal-roadmap__core-now {
  fill: var(--text-soft);
  font: 9px var(--mono);
}

.signal-roadmap__tag rect {
  fill: var(--bg);
  stroke: var(--rm-ring);
}

.signal-roadmap__tag text {
  fill: var(--rm-ring);
  font: 600 10px var(--mono);
}

.signal-roadmap__tracks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.signal-roadmap__track {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--rm-ring);
  background: var(--surface);
}

.signal-roadmap__track--beyond {
  border-style: dashed;
  border-inline-start-style: solid;
  background: transparent;
}

.signal-roadmap__num {
  color: var(--rm-ring);
  font: 600 1.1rem var(--mono);
  line-height: 1.4;
}

.signal-roadmap__track h3 {
  font-size: 1rem;
  margin: 0 0 0.15rem;
}

.signal-roadmap__track p {
  color: var(--text-soft);
  font-size: 0.875rem;
  margin: 0;
}

.signal-roadmap__chips {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.signal-roadmap__chips li {
  font: 0.75rem var(--mono);
  padding: 0.15rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--rm-ring) 45%, transparent);
  color: var(--text);
}

@keyframes signal-roadmap-spin {
  to { transform: rotate(360deg); }
}

@keyframes signal-roadmap-pulse {
  50% { stroke-width: 4; }
}

@media (max-width: 991.98px) {
  .signal-roadmap {
    grid-template-columns: minmax(0, 1fr);
  }

  .signal-roadmap__map {
    max-width: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal-roadmap__ring,
  .signal-roadmap__core {
    animation: none;
  }
}

/* ---- Signal page: section 2's animated shell ------------------------------ */
/* A terminal that stays dark in both themes, like a real console. Every line
   shows without JS; while site.js plays the run, lines wait until .is-shown. */
.signal-shell {
  --sh-bg: #07090c;
  --sh-text: #c9d1d9;
  --sh-dim: #6b7480;
  --sh-blue: #4aa8ff;
  --sh-ok: #4ade80;
  --sh-amber: #fbbf24;
  --sh-line: #1f252c;
  margin: 0;
  background: var(--sh-bg);
  border: 1px solid color-mix(in srgb, var(--sh-blue) 30%, #2a3038);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 50px -30px color-mix(in srgb, var(--sh-blue) 60%, transparent);
  font: 0.78rem/1.55 var(--mono);
  color: var(--sh-text);
}

.signal-shell__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  background: #11151a;
  border-bottom: 1px solid var(--sh-line);
}

.signal-shell__bar span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #f87171;
}

.signal-shell__bar span:nth-child(2) { background: #fbbf24; }
.signal-shell__bar span:nth-child(3) { background: #4ade80; }

.signal-shell__bar em {
  margin-inline-start: auto;
  font-style: normal;
  color: var(--sh-dim);
  font-size: 0.68rem;
}

.signal-shell__screen {
  height: 30rem;
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--sh-blue) 9%, transparent), transparent 60%);
}

.signal-shell__cmd {
  margin: 0 0 0.4rem;
  white-space: nowrap;
}

.signal-shell__ps { color: var(--sh-dim); }
.signal-shell__cmd [data-signal-shell-type] { color: #f0e68c; }

.signal-shell__caret {
  display: none;
  width: 0.5em;
  height: 1em;
  margin-inline-start: 2px;
  vertical-align: -0.15em;
  background: var(--sh-text);
  animation: signal-shell-blink 1s steps(1) infinite;
}

.signal-shell.is-typing .signal-shell__caret { display: inline-block; }

.signal-shell__banner {
  display: grid;
  gap: 0.15rem;
  margin-bottom: 0.45rem;
  color: var(--sh-dim);
}

.signal-shell__banner b { color: var(--sh-blue); font-weight: 600; }

.signal-shell__logo {
  font: 300 1.9rem/1.1 var(--sans);
  letter-spacing: 0.55em;
  color: transparent;
  background: linear-gradient(90deg, var(--sh-blue), #8fd0ff 60%, var(--sh-blue));
  -webkit-background-clip: text;
  background-clip: text;
}

.signal-shell__log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.signal-shell__line {
  display: grid;
  grid-template-columns: 3.4em 2.8em minmax(0, 1fr);
  gap: 0.55em;
  align-items: baseline;
  white-space: nowrap;
}

.signal-shell__line time { color: var(--sh-dim); text-align: right; }
.signal-shell__level { color: var(--sh-blue); font-weight: 600; }
.signal-shell__source { color: #e6edf3; }
.signal-shell__text { color: var(--sh-text); overflow: hidden; text-overflow: ellipsis; }
.signal-shell__link { color: var(--sh-blue); }
.signal-shell__line--note .signal-shell__level,
.signal-shell__line--note .signal-shell__text { color: var(--sh-dim); }
.signal-shell__line--note .signal-shell__source { color: var(--sh-dim); }
.signal-shell__line--ok .signal-shell__level { color: var(--sh-ok); }
.signal-shell__line--warn .signal-shell__level { color: var(--sh-amber); }
.signal-shell__line--warn .signal-shell__text { color: color-mix(in srgb, var(--sh-amber) 70%, var(--sh-text)); }
.signal-shell__line:last-child .signal-shell__text,
.signal-shell__line:nth-last-child(2) .signal-shell__text { color: var(--sh-ok); font-weight: 600; }

.signal-shell__redacted {
  display: inline-block;
  width: 6.5em;
  height: 0.85em;
  vertical-align: -0.1em;
  border-radius: 2px;
  background: linear-gradient(90deg, #2a3038, #3a424c, #2a3038);
  filter: blur(1.2px);
}

.signal-shell.is-typing [data-signal-shell-step],
.signal-shell.is-running [data-signal-shell-step]:not(.is-shown) { display: none; }
.signal-shell [data-signal-shell-step].is-shown { animation: signal-shell-line 0.35s var(--ease); }

.signal-shell__meter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.85rem;
  border-top: 1px solid var(--sh-line);
  background: #0b0e12;
  color: var(--sh-dim);
  font-size: 0.68rem;
}

.signal-shell__threads {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.9rem;
}

.signal-shell__threads i {
  width: 4px;
  height: 100%;
  background: var(--sh-ok);
}

.signal-shell.is-typing .signal-shell__threads i {
  height: 20%;
  background: var(--sh-blue);
  opacity: 0.5;
}

.signal-shell.is-running .signal-shell__threads i {
  background: var(--sh-blue);
  animation: signal-shell-thread 0.7s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.13s);
}

.signal-shell__clock {
  margin-inline-start: auto;
  color: var(--sh-ok);
  font-variant-numeric: tabular-nums;
}

.signal-shell.is-typing .signal-shell__clock,
.signal-shell.is-running .signal-shell__clock { color: var(--sh-amber); }

@keyframes signal-shell-blink { 50% { opacity: 0; } }
@keyframes signal-shell-line {
  from { opacity: 0; transform: translateY(6px); background: color-mix(in srgb, var(--sh-blue) 22%, transparent); }
  to { opacity: 1; transform: none; background: transparent; }
}
@keyframes signal-shell-thread {
  from { height: 15%; }
  to { height: 100%; }
}

@media (max-width: 575.98px) {
  .signal-shell { font-size: 0.62rem; }
  .signal-shell__screen { height: 22rem; }
  .signal-shell__logo { font-size: 1.4rem; }

}

/* Get Started's link on to the roadmap: a small orbit and a bobbing arrow. */
.signal-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 0.65rem 1rem;
  color: var(--text-soft);
  text-decoration: none;
  border-top: 1px dashed var(--border);
  transition: color var(--t) var(--ease);
}

.signal-next:hover,
.signal-next:focus-visible { color: var(--text); }
.signal-next strong { color: var(--text); font-weight: 600; }

.signal-next__orbit {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
}

.signal-next__orbit i {
  position: absolute;
  inset: calc(var(--n, 0) * 0.25rem);
  border: 1px dashed var(--accent);
  border-radius: 50%;
  animation: signal-roadmap-spin 6s linear infinite;
}

.signal-next__orbit i:nth-child(2) { --n: 1; border-color: var(--warning); animation-direction: reverse; }
.signal-next__orbit i:nth-child(3) { --n: 2; border: 0; background: var(--danger); inset: 0.55rem; }

.signal-next__arrow {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  animation: signal-next-bob 1.6s var(--ease) infinite;
}

@keyframes signal-next-bob { 50% { transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  .signal-next__orbit i,
  .signal-next__arrow { animation: none; }
}

/* Get Started: Pro is announced, not described: a dashed card with three dots. */
.signal-plan--soon {
  border-style: dashed;
  background: transparent;
}

.signal-plan--soon .signal-plan__price { color: var(--warning); }

.signal-plan__soon {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 6rem;
}

.signal-plan__soon i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--warning);
  animation: signal-plan-soon 1.4s var(--ease) infinite;
}

.signal-plan__soon i:nth-child(2) { animation-delay: 0.2s; }
.signal-plan__soon i:nth-child(3) { animation-delay: 0.4s; }

@keyframes signal-plan-soon {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .signal-plan__soon i { animation: none; opacity: 0.7; }
}

/* Get Started: an icon before each edition's name, in its tag's colour. */
.signal-plan__head h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.signal-plan__icon {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0.3rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.signal-plan--community .signal-plan__icon { color: var(--ok); }
.signal-plan--pro .signal-plan__icon { color: var(--warning); }
.signal-plan--enterprise .signal-plan__icon { color: var(--violet); }