/* ============================================================
   Traderade — stylesheet v1
   One accent (#56b6c2), cool-navy neutrals, DM Sans hierarchy,
   restrained motion. Rajdhani is the logo wordmark voice only.
   Design language adapted from the Markets & Mayhem system.
   ============================================================ */

:root {
  /* Surfaces — one cool-navy family */
  --color-bg-primary: #0b0d14;
  --color-bg-secondary: #10141f;
  --color-bg-card: #131826;
  --color-bg-elevated: #1a2132;
  --color-bg-deep: #070910;
  /* Accent — single, desaturated teal */
  --color-accent: #56b6c2;
  --color-accent-hover: #78c9d4;
  --color-accent-rgb: 86, 182, 194;
  --color-accent-soft: rgba(86, 182, 194, 0.1);
  /* Text */
  --color-text-primary: #e9ecf4;
  --color-text-secondary: #a7aec4;
  --color-text-muted: #7e86a0;
  /* Borders */
  --color-border: #202839;
  --color-border-hover: #2e3a52;
  --color-error: #e06c75;
  --color-error-rgb: 224, 108, 117;
  /* Type */
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --font-brand: 'Rajdhani', 'DM Sans', sans-serif;
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 6rem;
  /* Radii — interactive 8px, containers 12–16px */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  /* Shadows — tinted, no glows */
  --shadow-card: 0 12px 32px rgba(4, 6, 12, 0.45);
  --shadow-card-hover: 0 18px 44px rgba(4, 6, 12, 0.55);
  /* Motion */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --header-height: 72px;
}

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

html { scroll-behavior: smooth; font-size: 16px; color-scheme: dark; overflow-x: clip; }

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.65;
  min-height: 100vh;
  font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.05rem);
  background-image: radial-gradient(rgba(130, 148, 190, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

::selection { background: rgba(var(--color-accent-rgb), 0.28); color: var(--color-text-primary); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 5px; border: 2px solid var(--color-bg-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }
* { scrollbar-width: thin; scrollbar-color: var(--color-border) var(--color-bg-deep); }

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--color-accent);
  z-index: 1002;
  width: 0;
  transition: width 0.1s linear;
}

.skip-link {
  position: absolute;
  top: -50px;
  left: 0;
  background: var(--color-accent);
  color: #0d1017;
  padding: 12px 20px;
  z-index: 10000;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 0; outline: none; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--color-text-primary);
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.75rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 3vw + 0.75rem, 2.75rem); line-height: 1.12; }
h3 { font-size: clamp(1.35rem, 2vw + 0.5rem, 1.5rem); line-height: 1.2; }
h4 { font-size: clamp(1.1rem, 1.5vw + 0.25rem, 1.375rem); }

p { color: var(--color-text-secondary); margin-bottom: var(--spacing-sm); line-height: 1.7; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-hover); }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }
[id] { scroll-margin-top: calc(var(--header-height) + var(--spacing-sm)); }

/* ============ Header ============ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* No backdrop-filter: it sampled and re-blurred the full width of whatever was scrolling
     behind it on every frame - the hero's chart texture on the home page - to show through a
     background that is 88% opaque and 97% once scrolled, where a blur is not visible anyway.
     The background does the work instead. */
  background: rgba(11, 13, 20, 0.88);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-normal), box-shadow var(--transition-normal);
}
.header.scrolled {
  background: rgba(11, 13, 20, 0.97);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.95);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-md);
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: var(--font-brand);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
  text-transform: uppercase;
  white-space: nowrap;
}
.logo:hover { color: var(--color-text-primary); }
.logo-img { width: 32px; height: 32px; border-radius: var(--radius-md); object-fit: cover; }

.nav { display: flex; align-items: center; gap: var(--spacing-md); }
.nav-link { color: var(--color-text-secondary); font-size: 0.95rem; font-weight: 500; position: relative; padding: var(--spacing-xs) 0; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition-normal);
}
.nav-link:hover, .nav-link.active { color: var(--color-text-primary); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Nav dropdown (About > Privacy Policy, Terms of Use) */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}
.nav-caret { transition: transform var(--transition-normal); margin-top: 1px; flex: none; }
.nav-submenu {
  position: absolute;
  top: 100%;
  right: 0;
  transform: translateY(-0.3rem);
  min-width: 196px;
  padding: 0.45rem 0.45rem 0.5rem;
  display: grid;
  gap: 0.1rem;
  z-index: 60;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(4, 6, 12, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.nav-submenu::before { content: ''; position: absolute; inset: -0.55rem 0 auto 0; height: 0.6rem; }
.nav-sublink {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.92rem;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-sublink:hover, .nav-sublink:focus-visible { background: var(--color-bg-secondary); color: var(--color-text-primary); }
.nav-sublink.active { color: var(--color-accent); }
@media (min-width: 769px) {
  .nav-item:hover .nav-submenu,
  .nav-item:focus-within .nav-submenu,
  .nav-item.open .nav-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .nav-item:hover .nav-caret,
  .nav-item.open .nav-caret { transform: rotate(180deg); }
}

.mobile-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 1001; }
.mobile-nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-text-primary); margin: 5px 0; transition: all 0.3s ease; border-radius: 2px; }
.mobile-nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-nav-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 12, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}
.nav-overlay.active { opacity: 1; visibility: visible; }

/* ============ Hero ============ */

.hero {
  position: relative;
  /* svh, not dvh: dvh follows the browser chrome as it collapses, so the hero - and the chart
     painted into it - resizes mid-scroll. svh is the height with the chrome showing, so it holds
     still. The vh line is the fallback for browsers without svh. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-deep);
  background-image: url('images/site/chart-texture.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(11, 13, 20, 0.9) 0%,
    rgba(11, 13, 20, 0.58) 44%,
    rgba(11, 13, 20, 0.1) 78%,
    rgba(11, 13, 20, 0.32) 100%);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 13, 20, 0.35) 0%, transparent 40%, transparent 62%, var(--color-bg-primary) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--header-height) + var(--spacing-2xl)) var(--spacing-md) var(--spacing-2xl);
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--spacing-md);
  animation: fadeUp 0.55s ease both;
}
.hero-title {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin-bottom: var(--spacing-md);
  max-width: 16ch;
  animation: fadeUp 0.55s ease 0.08s both;
}
.hero-title span { color: var(--color-accent); }
.hero-subtitle {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--color-text-secondary);
  max-width: 54ch;
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
  animation: fadeUp 0.55s ease 0.16s both;
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  animation: fadeUp 0.55s ease 0.24s both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.link-arrow:hover { color: var(--color-accent); }

/* ============ Buttons ============ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), transform var(--transition-fast);
}
.btn span[aria-hidden] { transition: transform var(--transition-fast); }
.btn:hover span[aria-hidden] { transform: translateX(3px); }

.btn-primary {
  background: var(--color-accent);
  color: #0d1017;
  /* An inset highlight over a tinted cast shadow: the same raised treatment the cards use, so the
     primary action reads as a physical control rather than a flat rectangle. */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 8px 20px -10px rgba(var(--color-accent-rgb), 0.55);
  transition: background var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  color: #0d1017;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset, 0 12px 28px -12px rgba(var(--color-accent-rgb), 0.72);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 4px 12px -8px rgba(var(--color-accent-rgb), 0.6); }

.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-hover);
}
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); }

/* ============ Sections ============ */

.section-header { margin-bottom: var(--spacing-xl); }
.section-header.centered { text-align: center; }
.section-header.compact { margin-bottom: var(--spacing-lg); }
.section-header.compact .section-title { font-size: clamp(1.5rem, 3vw, 2rem); }
.section-header p { max-width: 62ch; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--spacing-sm);
}
/* A short rule ahead of the eyebrow. It gives the label a left edge to sit on, which is what stops
   a centred-free section header from reading as a floating fragment. */
.section-label::before {
  content: '';
  width: 1.9rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.section-title { margin-bottom: var(--spacing-sm); }

/* Facts strip — real numbers, mono, tabular */
.facts {
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.facts-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); }
.fact-item { display: flex; flex-direction: column; gap: 0.3rem; }
.fact-value {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fact-label { font-size: 0.85rem; color: var(--color-text-muted); }
.trust-row { grid-template-columns: 1.5fr 0.9fr 1fr 0.9fr; align-items: start; }
.fact-denom { font-size: 0.5em; color: var(--color-text-muted); }
.fact-link { color: var(--color-accent); text-decoration: underline; text-decoration-color: rgba(var(--color-accent-rgb), 0.4); text-underline-offset: 3px; }
.fact-link:hover { text-decoration-color: var(--color-accent); }
.fact-value-small { font-family: var(--font-heading); font-size: clamp(1.2rem, 1.8vw, 1.6rem); letter-spacing: -0.01em; }
.facts .press-row { margin: 0.15rem 0 0; gap: var(--spacing-md); }
.facts .press-row img { height: 26px; opacity: 0.85; }
/* The Asharq lock-up is dense and loses its Arabic and Bloomberg wordmarks
   when reduced to a grayscale 26px mark; keep it in colour and a little taller. */
.facts .press-row img.press-asharq { height: 32px; opacity: 0.95; filter: none; }
.press-name { font-size: 0.85rem; color: var(--color-text-muted); }

/* Capabilities — editorial list, no cards */
.features { padding: var(--spacing-2xl) 0; }
.capability-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--color-border); }
.capability {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
}
.capability-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-normal);
}
.capability:hover .capability-icon { background: rgba(var(--color-accent-rgb), 0.18); }
.capability-icon svg { display: block; }
.capability:hover .capability-body { transform: translateX(3px); }
.capability-title { font-size: 1.2rem; margin-bottom: 0.4rem; transition: color var(--transition-normal); }
.capability:hover .capability-title { color: var(--color-accent); }
.capability-desc { font-size: 0.95rem; color: var(--color-text-muted); margin: 0; line-height: 1.7; max-width: 62ch; }
/* The bot's commands read as commands, not as prose: the Gir section names them inline. */
.capability-desc code { font-family: var(--font-mono); font-size: 0.88em; background: var(--color-bg-deep); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.08em 0.35em; color: var(--color-text-primary); }
.gir-note { max-width: 820px; margin: var(--spacing-lg) auto 0; padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); font-size: 0.95rem; color: var(--color-text-muted); }

/* ============ CTA ============ */

.cta { padding: var(--spacing-xl) 0 var(--spacing-2xl); text-align: center; }
.cta-content { max-width: 620px; margin: 0 auto; position: relative; z-index: 1; }
.cta h2 { margin-bottom: var(--spacing-md); }
.cta p { font-size: 1.05rem; margin-bottom: var(--spacing-lg); }

/* ============ Footer ============ */

.footer {
  padding: var(--spacing-xl) 0 var(--spacing-lg);
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-border);
}
.footer-newsletter { text-align: center; padding: var(--spacing-md) 0 var(--spacing-lg); margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); }
.footer-newsletter p { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: var(--spacing-sm); }
.footer-newsletter-form { display: flex; gap: var(--spacing-xs); max-width: 400px; margin: 0 auto; }
.footer-newsletter-input {
  flex: 1;
  padding: 0.55rem 0.85rem;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  transition: border-color var(--transition-fast);
}
.footer-newsletter-input:focus { outline: none; border-color: var(--color-accent); }
.footer-newsletter-input::placeholder { color: var(--color-text-muted); opacity: 0.9; }
.footer-newsletter-btn { padding: 0.55rem 1.1rem; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) repeat(4, minmax(130px, 1fr));
  gap: var(--spacing-xl) var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}
/* The five tracks plus their gaps need ~1183px inside the container; below
   ~1240px the last column was clipped instead of wrapping. */
@media (max-width: 1240px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--spacing-lg) var(--spacing-md); }
  .footer-brand { grid-column: 1 / -1; }
}
.footer-brand { display: grid; align-content: start; gap: var(--spacing-sm); }
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-logo img { display: block; border-radius: 4px; }
.footer-brand p { color: var(--color-text-muted); font-size: 0.88rem; line-height: 1.6; max-width: 34ch; }
.footer-col { display: grid; align-content: start; gap: 0.6rem; }
.footer-col-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}
.footer-col .social-icons { margin-left: 0; }
.footer-copy { color: var(--color-text-secondary); font-size: 0.9rem; }
.footer-link { color: var(--color-text-secondary); font-size: 0.92rem; position: relative; width: fit-content; }
.footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width 0.2s ease;
}
.footer-link:hover::after { width: 100%; }
.footer-link:hover { color: var(--color-text-primary); }
.footer-link.active { color: var(--color-accent); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}
.footer-legal { display: flex; align-items: center; gap: 0.7rem; color: var(--color-text-muted); font-size: 0.85rem; }
.footer-legal a { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--color-text-primary); }
.social-icons { display: flex; gap: var(--spacing-sm); margin-left: auto; }
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.social-icon:hover { color: var(--color-accent); border-color: var(--color-accent); }
.social-icon svg { width: 22px; height: 22px; }

/* ============ Subpage header ============ */

.page-header {
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.page-header-bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-deep);
  background-image:
    linear-gradient(180deg, rgba(11, 13, 20, 0.62) 0%, rgba(11, 13, 20, 0.30) 45%, var(--color-bg-primary) 100%),
    linear-gradient(90deg, rgba(11, 13, 20, 0.92) 0%, rgba(11, 13, 20, 0.52) 48%, rgba(11, 13, 20, 0.10) 100%),
    var(--header-art, url('images/site/chart-texture.svg'));
  background-repeat: no-repeat;
  background-position: center, center, right center;
  background-size: 100% 100%, 100% 100%, auto 100%;
}
/* The tool page whose subject is the gamma ladder wears that ladder instead of the chart. */
.page-header-bg.art-gamma { --header-art: url('images/tools/spx-gamma-texture.svg'); }
.page-header-bg.art-swing-trading { --header-art: url('images/swing/swing-trading-header.webp'); }
.page-header-bg.art-swing-stocks { --header-art: url('images/swing/swing-trading-stocks-header.webp'); }
.page-header-bg.art-swing-options { --header-art: url('images/swing/swing-trading-options-header.webp'); }
.page-header-bg.art-swing-futures { --header-art: url('images/swing/swing-trading-futures-header.webp'); }
.page-header-bg.art-swing-forex { --header-art: url('images/swing/swing-trading-forex-header.webp'); }
.page-header-bg.art-swing-indicators { --header-art: url('images/swing/swing-trading-indicators-header.webp'); }
.page-header-bg.art-swing-risk { --header-art: url('images/swing/swing-trading-risk-management-header.webp'); }
.page-header-bg.art-swing-community { --header-art: url('images/swing/swing-trading-community-header.webp'); }
.page-header-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--header-height) + var(--spacing-xl)) var(--spacing-md) var(--spacing-xl);
}
.page-title { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: var(--spacing-sm); }
.page-subtitle { font-size: 1.15rem; color: var(--color-text-secondary); max-width: 56ch; }

/* ============ Prose sections (about / local-ai) ============ */

.about-section { padding: var(--spacing-2xl) 0; }
/* The home About block needs more air above the heading than the section
   gutter gives it, and less below the closing link before the CTA. The ID
   outranks the global gutter reset, which zeroes padding-top on this pair. */
#main-content > .home-about { padding-top: 3rem; padding-bottom: 2rem; }
#main-content > .home-about + .cta { padding-top: 2rem; }
.about-section:nth-child(odd) { background: var(--color-bg-secondary); }
.about-section-inner { max-width: 760px; margin: 0 auto; padding: 0 var(--spacing-md); }
.about-section-inner.wide { max-width: 1200px; }
.about-section-inner.mid { max-width: 1100px; }

/* Tool pages */
.tool-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--spacing-lg); align-items: start; }
.tool-copy h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: var(--spacing-sm); }
.tool-copy p { color: var(--color-text-secondary); margin-bottom: var(--spacing-md); }
.tool-delivers { list-style: none; display: grid; gap: 0.65rem; margin: 0 0 var(--spacing-md); }
.tool-delivers li { position: relative; padding-left: 1.6rem; color: var(--color-text-secondary); }
.tool-delivers li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 0.6rem; height: 0.6rem;
  border-radius: 2px; background: var(--color-accent); opacity: 0.9;
}
.tool-audience { color: var(--color-text-secondary); }
.tool-audience strong { color: var(--color-text); }
.tool-media { margin: 0 0 var(--spacing-lg); display: flex; align-items: center; justify-content: center; }
.tool-media img { display: block; width: 100%; height: auto; }
/* The drawn gamma profile on the Visualizer page. Inline SVG, so it reads its colours from
   these rules; a two-sided bar chart needs a second series colour, which is the logo's
   magenta desaturated to sit on the navy. */
.tool-figure { margin: 0; width: 100%; }
.tool-figure figcaption { margin-top: 0.7rem; font-size: 0.85rem; color: var(--color-text-muted); }
/* The lead video, under the tool intro: the same measure as the body figures. */
figure.tool-tour { max-width: 1052px; margin: var(--spacing-xl) auto 0; }
.gamma-profile { display: block; width: 100%; height: auto; }
.gamma-profile text { font-family: var(--font-body); font-size: 10px; fill: var(--color-text-muted); }
.gamma-profile .strike { font-size: 10.5px; fill: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.gamma-profile .note { font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.gamma-profile .note-call { font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; fill: var(--color-accent); font-weight: 600; }
.gamma-profile .note-put { font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; fill: #c2607a; font-weight: 600; }
.gamma-profile .note-spot { font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; fill: var(--color-text-primary); font-weight: 600; }
.gamma-profile .legend { font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; }
.gamma-profile .grid { stroke: var(--color-border); stroke-width: 1; opacity: 0.55; }
.gamma-profile .axis { stroke: var(--color-border-hover); stroke-width: 1; }
.gamma-profile .call { fill: var(--color-accent); }
.gamma-profile .put { fill: #c2607a; }
.gamma-profile .spot { stroke: var(--color-text-primary); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.45; }
.gamma-profile .level { stroke: var(--color-accent); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.5; }
/* Tool marks: inline SVG tiles for the in-house tools (the source articles used
   lifestyle photography as hero art, which reads off-brand on a product card). */
.tool-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(86, 182, 194, 0.09);
  border: 1px solid rgba(86, 182, 194, 0.22);
  color: var(--color-accent);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.tool-card { padding-top: var(--spacing-md); }
.tool-card > .tool-mark { margin: 0 var(--spacing-md); }
.tool-card:hover > .tool-mark { background: rgba(86, 182, 194, 0.16); border-color: rgba(86, 182, 194, 0.34); }
.tool-media .tool-mark { width: 132px; height: 132px; border-radius: var(--radius-lg); }
.tool-media .tool-mark svg { width: 68px; height: 68px; }
.tool-intro .tool-copy { min-width: 0; }
.tool-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-md); align-items: start; }
.capability-list.two-col {
  max-width: 1100px; margin: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--spacing-lg); border-top: none;
}
.capability-list.two-col .capability { border-top: 1px solid var(--color-border); border-bottom: none; }
@media (max-width: 900px) { .capability-list.two-col { grid-template-columns: 1fr; } }
.tool-shot { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-secondary); }
.tool-shot img { display: block; width: 100%; height: auto; }
.faq-list { display: grid; gap: 0.75rem; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.9rem 1.1rem; background: var(--color-bg-secondary); }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--color-text); }
.faq-item summary::marker { color: var(--color-accent); }
.faq-item p { margin-top: 0.6rem; color: var(--color-text-secondary); }
/* Chapter list: the walkthrough cut at its own chapter cards, one player per chapter. The
   duration sits with the title rather than across from it, because flexing the summary drops
   the disclosure marker every browser draws for it. */
.faq-item .chapter-time { margin-left: 0.5rem; font-weight: 400; font-size: 0.85rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.faq-item .chapter-time::before { content: "· "; }
.faq-item .video-embed { margin: var(--spacing-sm) 0 0; }
.tool-shot figcaption { padding: 0.6rem 0.85rem; font-size: 0.85rem; color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.step-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-md); }
/* auto-fit fits four columns at the container width and leaves the last row short; the
   six signal cards on a tool page read as three rows of two instead. */
@media (min-width: 901px) { .step-list.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { padding: 1.1rem 1.2rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-card); }
a.step { display: block; color: inherit; text-decoration: none; transition: border-color 180ms ease, transform 180ms ease; }
a.step:hover { border-color: var(--color-accent); transform: translateY(-2px); }
a.step .step-title { color: var(--color-text-primary); }
.step-number {
  display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem;
  border-radius: 999px; border: 1px solid var(--color-accent); color: var(--color-accent);
  font-weight: 600; font-size: 0.9rem; margin-bottom: 0.7rem;
}
.step-title { font-size: 1.05rem; margin-bottom: 0.35rem; }
.step-desc { color: var(--color-text-secondary); font-size: 0.95rem; }
.community-proof { margin-top: var(--spacing-lg); display: flex; align-items: center; gap: 0.6rem; color: var(--color-text-secondary); }
.community-proof p { margin: 0; font-size: 0.95rem; }

/* ============ Discord page ============ */

/* Split hero: the copy and the action on the left, the promo on the right. The page's job is a join,
   and the previous page-header put the only button below a full-width video block. */
.discord-hero { position: relative; overflow: hidden; padding: calc(var(--header-height) + var(--spacing-xl)) 0 var(--spacing-xl); }
.discord-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 78% 30%, rgba(var(--color-accent-rgb), 0.10), transparent 62%),
    linear-gradient(180deg, var(--color-bg-deep), var(--color-bg-primary));
  pointer-events: none;
}
.discord-hero-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--spacing-xl);
  align-items: center;
}
.discord-hero-title { font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.04; letter-spacing: -0.035em; margin-bottom: var(--spacing-md); }
.discord-hero-sub { max-width: 46ch; font-size: 1.08rem; line-height: 1.7; color: var(--color-text-secondary); margin-bottom: var(--spacing-lg); }
.discord-hero-proof { display: flex; align-items: center; gap: 0.6rem; margin-top: var(--spacing-md); font-size: 0.88rem; color: var(--color-text-muted); }
.discord-proof-stars { display: inline-flex; gap: 0.22rem; color: var(--color-accent); }
.discord-hero-media { margin: 0; }
.discord-hero-media .video-embed { width: 100%; max-width: none; margin: 0; }
.discord-hero-media .video-embed img { border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: 0 30px 70px -44px rgba(0, 0, 0, 0.95); }

/* One vertical rhythm on the community page: every section carries 48px above
   and below, so the gap between content blocks is 96px and a tinted band sits
   halfway between them. The global gutter reset uses a longer selector; the ID
   here is deliberate so this wins on the Discord page only. */
#main-content.discord-page > section:not(.discord-hero) {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
#main-content.discord-page > .discord-hero {
  padding-bottom: 3rem;
}

/* Section split: a heading that stays put on the left, the content on the right. */
.discord-split { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: var(--spacing-xl); align-items: start; }
.discord-split-head { position: sticky; top: calc(var(--header-height) + var(--spacing-lg)); }
.discord-split-head .section-title { margin-bottom: 0; }
.discord-groups { display: grid; gap: var(--spacing-lg); }
.discord-group-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-sm);
}
.discord-group-list { list-style: none; display: grid; gap: var(--spacing-md); }
.discord-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--spacing-sm); align-items: start; }
.discord-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.discord-item-title { font-size: 1rem; margin-bottom: 0.2rem; }
.discord-item-desc { font-size: 0.92rem; line-height: 1.65; color: var(--color-text-secondary); }

/* Two prose blocks side by side instead of two stacked full-width sections. */
.discord-about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: start; }
.discord-about h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: var(--spacing-sm); }
.discord-about p { color: var(--color-text-secondary); }
.discord-about-mark { display: block; width: 48px; height: 48px; border-radius: var(--radius-md); margin-bottom: var(--spacing-sm); }

/* Masonry: the stream screenshots have different aspect ratios, so a grid row left ragged gaps. */
.tool-gallery.masonry { display: block; columns: 2; column-gap: var(--spacing-md); }
.tool-gallery.masonry .tool-shot { break-inside: avoid; margin: 0 0 var(--spacing-md); }

/* FAQ beside the ask, so the section does not leave half the viewport empty. */
.discord-faq-split { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: var(--spacing-xl); align-items: start; }
.discord-faq-head { position: sticky; top: calc(var(--header-height) + var(--spacing-lg)); }
.discord-faq-head .section-title { margin-bottom: var(--spacing-sm); }
.discord-faq-head p { color: var(--color-text-secondary); margin-bottom: var(--spacing-md); }

/* Every heading on this page is left-aligned; a centred pull quote under one reads as a different
   page. Widened at the same time so the longest testimonial fits in about three lines. */
.discord-page .testimonial-slider { max-width: none; margin-left: 0; }
.discord-page .testimonial-stars { justify-content: flex-start; }
.discord-page .testimonial-slide blockquote { text-align: left; padding: var(--spacing-lg) var(--spacing-xl); }
.discord-page .testimonial-slide figcaption { align-items: flex-start; text-align: left; }
.discord-page .testimonial-nav { justify-content: flex-start; }

@media (max-width: 900px) {
  .discord-hero-inner,
  .discord-split,
  .discord-about,
  .discord-faq-split { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .discord-split-head,
  .discord-faq-head { position: static; }
  .discord-hero { padding-top: calc(var(--header-height) + var(--spacing-lg)); }
  .tool-gallery.masonry { columns: 1; }
}
.legal-toc { margin: 0 0 var(--spacing-lg); padding: 1rem 1.2rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-secondary); }
.legal-toc-label { display: block; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.6rem; }
.legal-toc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.35rem 1.2rem; }
.legal-toc a { color: var(--color-text-secondary); text-decoration: none; font-size: 0.92rem; }
.legal-toc a:hover { color: var(--color-accent); }
.legal-updated { color: var(--color-text-muted); font-size: 0.9rem; }
.footer-disclaimer {
  margin: var(--spacing-lg) 0 0; padding-top: var(--spacing-md); border-top: 1px solid var(--color-border);
  max-width: 82ch; font-size: 0.8rem; line-height: 1.65; color: var(--color-text-muted); text-align: left;
}
.footer-disclaimer a { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) {
  .tool-intro { grid-template-columns: 1fr; }
}
.section-alt { background: var(--color-bg-secondary); }
/* Sections stack their vertical padding, so two on the same surface leave 96px + 96px of nothing; on
   a 393px-tall window that is half the screen, which is what the closing CTA looked like. A section
   that follows another starts flush and the previous section's bottom padding is the gutter. It does
   not apply after the page header, the hero or the Discord hero (none of them carry a bottom padding,
   so the next section's own inset is the only gutter there), nor to a band (.section-alt, or an odd
   .about-section, which is tinted), whose background starts a new block. */
main > section:not(.page-header):not(.hero):not(.discord-hero) + section:not(.section-alt):not(.about-section:nth-child(odd)):not(.cta) {
  padding-top: 0;
}
/* Left-aligned like the h2 above it. It was centred with an auto margin, so a section header read as
   a left-aligned title over a centred paragraph; it is used on one page, so this is safe. */
.section-subtitle { max-width: 62ch; margin: 0.75rem 0 0; color: var(--color-text-secondary); }
.page-header-cta { margin-top: var(--spacing-md); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.about-section h2 { font-size: clamp(1.6rem, 2.5vw, 2rem); margin-bottom: var(--spacing-md); }
.about-section p { font-size: 1.05rem; line-height: 1.8; max-width: 65ch; }

.contact-inquiry-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: var(--spacing-md); }
.inquiry-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-decoration: none;
  min-height: 180px;
  transition: border-color var(--transition-normal), transform var(--transition-fast);
}
.inquiry-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
/* Same trap as .article-card: these are reveal targets, so the reveal rule pins translateY(0) at
   (0,3,1) and the hover rule above at (0,2,0) never applied. */
html.js .inquiry-card.visible:hover { transform: translateY(-2px); }
.inquiry-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  flex-shrink: 0;
}
.inquiry-icon svg { width: 26px; height: 26px; display: block; }
.inquiry-card h3 { font-size: 1.05rem; font-weight: 600; color: var(--color-text-primary); margin-bottom: var(--spacing-xs); transition: color var(--transition-fast); }
.inquiry-card:hover h3 { color: var(--color-accent); }
.inquiry-card p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.55; margin: 0; }
.inquiry-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: var(--spacing-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-accent);
}
.inquiry-action svg { transition: transform var(--transition-fast); flex-shrink: 0; }
.inquiry-card:hover .inquiry-action svg { transform: translateX(3px); }

.contact-form-wrapper {
  max-width: 640px;
  margin: var(--spacing-2xl) auto 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
}
.contact-form-heading { font-size: 1.4rem; margin-bottom: var(--spacing-sm); text-align: left; }
.contact-form { display: flex; flex-direction: column; gap: var(--spacing-md); }
.form-group { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.form-label { font-size: 0.85rem; font-weight: 500; color: var(--color-text-secondary); }
.form-req { color: var(--color-accent); }
.form-input, .form-textarea {
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.125rem;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  outline: none;
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-muted); opacity: 0.9; }
.form-input:focus, .form-textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.14); }
.form-status {
  display: none;
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-deep);
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  text-align: center;
}
.form-status.visible { display: block; }
.form-status.is-success {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.08);
  color: var(--color-text-primary);
}
.form-status.is-error {
  border-color: var(--color-error);
  background: rgba(var(--color-error-rgb), 0.08);
  color: var(--color-text-primary);
}
.form-status.is-info, .form-status.is-pending {
  border-color: var(--color-border-hover);
  color: var(--color-text-secondary);
}
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-submit { align-self: flex-start; padding: 0.8rem 1.75rem; }
.form-note { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.6; margin: 0 0 var(--spacing-md); }
.form-note a { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.form-note a:hover { color: var(--color-text-primary); }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238b95a8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
/* Form and scope share the card grid's columns so every block lines up on the left */
.contact-lower { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); margin-top: var(--spacing-md); align-items: stretch; }
.contact-lower .contact-form-wrapper { max-width: none; margin: 0; }
.contact-scope {
  margin: 0;
  padding: var(--spacing-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-scope h2 { font-size: 1.4rem; margin-bottom: var(--spacing-sm); }
.contact-scope-sub { margin-top: var(--spacing-lg); font-size: 1.15rem !important; }
.contact-scope ul { list-style: none; padding: 0; margin: 0 0 var(--spacing-md); display: grid; gap: 0.55rem; }
.contact-scope li { position: relative; padding-left: 1.5rem; color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.6; }
.contact-scope li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-accent);
}
.contact-scope > p { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.65; }

/* ============ Scroll reveal — one motion language ============ */

/* Hidden state only applies when JavaScript is available, so the page still
   reads without JS (and for crawlers that do not run scripts). */
html.js .scroll-animate,
html.js .scroll-animate-pop,
html.js .scroll-animate-fade,
html.js .scroll-animate-blur,
html.js .scroll-animate-slide-left,
html.js .scroll-animate-slide-right,
html.js .scroll-animate-slide-up,
html.js .scroll-animate-scale {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.js .scroll-animate.visible,
html.js .scroll-animate-pop.visible,
html.js .scroll-animate-fade.visible,
html.js .scroll-animate-blur.visible,
html.js .scroll-animate-slide-left.visible,
html.js .scroll-animate-slide-right.visible,
html.js .scroll-animate-slide-up.visible,
html.js .scroll-animate-scale.visible { opacity: 1; transform: translateY(0); }

.stagger-1 { transition-delay: 0.06s; }
.stagger-2 { transition-delay: 0.12s; }
.stagger-3 { transition-delay: 0.18s; }
.stagger-4 { transition-delay: 0.24s; }
.stagger-5 { transition-delay: 0.30s; }
.stagger-6 { transition-delay: 0.36s; }
.stagger-7 { transition-delay: 0.42s; }
.stagger-8 { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  [class*="scroll-animate"] { opacity: 1 !important; transform: none !important; }
  .hero-eyebrow, .hero-title, .hero-subtitle, .hero-cta { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============ Responsive ============ */

@media (max-width: 768px) {
  .mobile-nav-toggle { display: block; }
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(280px, 80vw);
    height: 100vh;
    height: 100dvh;
    background: var(--color-bg-secondary);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-xl);
    transform: translateX(calc(100% + 20px));
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    border-left: 1px solid var(--color-border);
    box-shadow: -10px 0 40px rgba(4, 6, 12, 0.5);
  }
  .nav.active { transform: translateX(0); visibility: visible; }
  .nav-link { font-size: 1.1rem; padding: 0.5rem 0; }
  .nav-item { width: 100%; flex-direction: column; align-items: flex-start; }
  .nav-toggle { font-size: 1.1rem; padding: 0.5rem 0; }
  .nav-submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 0.9rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }
  .nav-submenu::before { display: none; }
  .nav-item.open .nav-submenu { max-height: 220px; }
  .nav-sublink { padding: 0.4rem 0; font-size: 1rem; }

  .hero { min-height: auto; }
  .hero-bg::before {
    background: linear-gradient(180deg, rgba(11, 13, 20, 0.5) 0%, rgba(11, 13, 20, 0.82) 62%, rgba(11, 13, 20, 0.95) 100%);
  }
  .hero-content { padding-top: calc(var(--header-height) + var(--spacing-lg)); padding-bottom: var(--spacing-xl); }
  .hero-title { font-size: clamp(2.05rem, 8.4vw, 3rem); }
  .hero-cta { gap: var(--spacing-sm); }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .page-header-cta .btn { width: 100%; justify-content: center; }
  .mobile-nav-toggle { padding: 0.6rem; }

  .facts-row { grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
  .capability-list { border-top: none; }
  .capability { grid-template-columns: 40px 1fr; gap: var(--spacing-sm); padding: var(--spacing-sm) 0; }
  .capability-icon { width: 40px; height: 40px; }

  .container { padding: 0 var(--spacing-sm); }
  .section-title { font-size: clamp(1.6rem, 5vw, 2.1rem); }
  .page-header { min-height: auto; }
  .page-header-content { padding-top: calc(var(--header-height) + var(--spacing-lg)); padding-bottom: var(--spacing-lg); }
  .page-title { font-size: clamp(1.8rem, 6.6vw, 2.35rem); }
  .page-subtitle { font-size: 1rem; }
  .about-section, .cta, .features { padding: var(--spacing-xl) 0; }
  .footer { padding: var(--spacing-lg) 0 var(--spacing-md); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--spacing-lg) var(--spacing-md); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .form-submit { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
  /* A page header is already its own band of breathing room; the section that
     follows does not need the full desktop top padding under it. */
  .page-header + .about-section,
  .page-header + .features { padding-top: var(--spacing-lg); }
  .contact-inquiry-grid, .contact-lower { grid-template-columns: 1fr; }
  .footer-newsletter-form { flex-direction: column; }
  .footer-newsletter-btn { width: 100%; justify-content: center; }
  .contact-form-wrapper { padding: var(--spacing-md); }
}

@media (max-width: 480px) {
  /* The wordmark stays. At 320px the logo ends at x=180 and the toggle starts at 253, so hiding it
     below 480px left the most common viewport with a lone icon and an empty middle for no gain. */
  .facts-row { grid-template-columns: 1fr 1fr; gap: var(--spacing-md) var(--spacing-md); }
  .fact-value { font-size: 1.6rem; }
  .social-icon { width: 40px; height: 40px; }
}

/* ============ Print ============ */

/* ============ Traderade additions: article lists, article pages, categories ============ */

/* Toolbar (search + filter) */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; margin: var(--spacing-lg) 0; }
.toolbar-search { flex: 1 1 260px; }
.toolbar-search input,
.toolbar-select {
  width: 100%;
  padding: 0.7rem 1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.toolbar-select { width: auto; min-width: 210px; cursor: pointer; }
.toolbar-search input::placeholder { color: var(--color-text-muted); }
.toolbar-search input:focus,
.toolbar-select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.14); }
.toolbar-count { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-text-muted); margin-left: auto; }
.toolbar-empty { color: var(--color-text-muted); padding: var(--spacing-lg) 0; }

/* Article list + cards */
.article-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing-md); margin: var(--spacing-lg) 0 var(--spacing-xl); }
.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* A 1px inset highlight plus a soft cast shadow is what makes a dark card read as raised rather
     than painted on. The gradient is the "lit from above" half of the same trick. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 42%),
    var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.045) inset, 0 12px 28px -18px rgba(4, 6, 12, 0.85);
  transition: border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}
/* A hairline that lights up across the top edge on hover. */
.article-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--color-accent-rgb), 0.55), transparent);
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
  z-index: 2;
}
.article-card:hover {
  border-color: rgba(var(--color-accent-rgb), 0.34);
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, var(--shadow-card-hover);
}
/* Cards are reveal targets, so they carry .scroll-animate-fade and the reveal rule
   (html.js .scroll-animate-fade.visible, specificity 0,3,1) pins them at translateY(0). At
   (0,2,0) the hover rule above could never win, so the lift silently did nothing. */
html.js .article-card.visible:hover,
html.js .article-card.visible:focus-within { transform: translateY(-4px); }
.article-card:hover::before { opacity: 1; }
.article-card:focus-within { border-color: rgba(var(--color-accent-rgb), 0.34); }
.article-card-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-bg-secondary); }
.article-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter var(--transition-normal); filter: brightness(0.86) saturate(0.94); }
.article-card:hover .article-card-image img { transform: scale(1.03); filter: brightness(1) saturate(1); }
/* Posts with no hero image at the source get a drawn mark, so every card keeps
   the same 16:9 header and the grid stays square. */
.card-media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  /* A chart grid rather than an empty box. At 0.6 opacity on the whole element the mark was barely
     visible and the card read as a broken image; the grid makes it read as a deliberate treatment. */
  background:
    linear-gradient(rgba(130, 148, 190, 0.055) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, rgba(130, 148, 190, 0.055) 1px, transparent 1px) 0 0 / 26px 100%,
    radial-gradient(circle at 26% 24%, rgba(var(--color-accent-rgb), 0.14), transparent 62%),
    linear-gradient(140deg, var(--color-bg-secondary), var(--color-bg-card));
}
.card-media-empty svg { opacity: 0.8; }
.article-card-body { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--spacing-md); flex: 1; }
.article-card-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.article-card-meta .meta-cat { color: var(--color-accent); }
.article-card-meta .meta-sep { color: var(--color-border-hover); }
.article-card-title {
  font-size: 1.12rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
  /* Three lines, not two: at two, titles like "Why Rolling Trading Profits into Investments is Key"
     clipped to "…into…" in the middle of a phrase. Cards stretch to the tallest in their row, so the
     extra line costs nothing structurally. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-card-title a { color: var(--color-text-primary); }
.article-card-title a:hover { color: var(--color-accent); }
.article-card-excerpt {
  color: var(--color-text-secondary); font-size: 0.92rem; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-card-footer { margin-top: auto; padding-top: 0.6rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.read-link { font-size: 0.85rem; font-weight: 500; color: var(--color-accent); }

/* Row variant (related articles, category pages) */
.article-list.rows { grid-template-columns: 1fr; }
.article-list.rows .article-card { flex-direction: row; align-items: stretch; }
.article-list.rows .article-card-image { width: 240px; flex: 0 0 240px; aspect-ratio: auto; }
.article-list.rows .article-card-body { padding: var(--spacing-md) var(--spacing-lg); }
@media (max-width: 700px) { .article-list.rows .article-card-image { display: none; } }
/* Pagination. pagination() in build.py is still called from build_articles and the category
   builder; it renders nothing only because PER_PAGE and CAT_PER_PAGE are 200 and there are 85
   articles. Removing the parent rules while keeping the generator would have left a live path with
   no layout, so the whole block stays. */
.pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; align-items: center; margin: var(--spacing-xl) 0; }
.pagination a, .pagination span.page-gap, .pagination span.disabled {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 0.7rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-text-secondary);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .current { background: var(--color-accent); border-color: var(--color-accent); color: #0d1017; }
.pagination .disabled { opacity: 0.35; pointer-events: none; }

/* Category grid */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--spacing-sm); margin: var(--spacing-lg) 0; }
.category-tile {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-sm);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--spacing-sm) var(--spacing-md);
  transition: border-color var(--transition-fast);
}
.category-tile:hover { border-color: var(--color-accent); }
.category-tile .cat-name { font-weight: 500; color: var(--color-text-primary); }
.category-tile:hover .cat-name { color: var(--color-accent); }
.category-tile .cat-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); }

/* Article page */
.article-header { position: relative; padding: calc(var(--header-height) + var(--spacing-xl)) 0 var(--spacing-lg); }
.article-header .container { max-width: 860px; }
.article-eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--spacing-sm); }
.article-title { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -0.03em; margin-bottom: var(--spacing-sm); }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.article-meta .meta-sep { color: var(--color-border-hover); }
.article-meta a { color: var(--color-accent); }
.article-hero-image { max-width: 860px; margin: 0 auto; padding: 0 var(--spacing-md); }
.article-hero-image img { display: block; margin: 0 auto; width: auto; max-width: 100%; height: auto; border-radius: var(--radius-xl); border: 1px solid var(--color-border); box-shadow: 0 28px 64px -44px rgba(0, 0, 0, 0.95); }
.article-body { padding: var(--spacing-xl) 0 var(--spacing-lg); }
.article-body .container { max-width: 860px; }
.article-footer { padding: 0 0 var(--spacing-xl); }
.article-footer .container { max-width: 860px; }

/* Prose (article + page body) */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 1.3rem; }
.prose p { color: var(--color-text-secondary); line-height: 1.8; font-size: 1.05rem; }
.prose h2 { font-size: clamp(1.4rem, 2.5vw, 1.7rem); letter-spacing: -0.02em; margin-top: var(--spacing-lg); }
.prose h3 { font-size: 1.3rem; letter-spacing: -0.015em; margin-top: var(--spacing-lg); }
.prose h4 { font-size: 1.12rem; margin-top: var(--spacing-md); }
.prose h5, .prose h6 { font-size: 1rem; margin-top: var(--spacing-md); }
.prose ul, .prose ol { padding-left: 1.5rem; color: var(--color-text-secondary); line-height: 1.8; }
.prose li + li { margin-top: 0.45rem; }
.prose blockquote {
  border: 1px solid var(--color-border); border-left: 2px solid var(--color-accent);
  background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg); color: var(--color-text-primary); font-style: italic;
}
.prose a { text-decoration: underline; text-decoration-color: rgba(var(--color-accent-rgb), 0.4); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--color-accent); }
.prose strong { color: var(--color-text-primary); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: 0 22px 52px -38px rgba(0, 0, 0, 0.9); }
/* A figure takes the section width, not the 760px text column: on a tool page the screenshots are
   the detail, and the wrapper around the column has the room. Both this and the centring below are
   scoped to the tool wrapper, because an article's 760px column is flush with its article header -
   centring it there would pull the body 26px in from the title. The figure is centred on the column
   with margin-left/translate, capped at the wrapper's content width and at the viewport, so it never
   overflows; an image narrower than the figure is centred in it. */
.about-section-inner.mid { --figure-width: 1052px; }
.about-section-inner.mid .prose { margin-inline: auto; }
.about-section-inner.mid .prose figure { width: min(100vw - 3rem, var(--figure-width, 760px)); margin-left: 50%; transform: translateX(-50%); }
.about-section-inner.mid .prose figure img { display: block; margin-inline: auto; }
.prose hr { border: none; border-top: 1px solid var(--color-border); margin: var(--spacing-lg) 0; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.08em 0.35em; }
/* A migrated article's figure caption, and the caption left behind when the figure's image
   was a source placeholder that the build stripped. Both are the same visual role. */
.prose figcaption, .prose .figure-caption { font-size: 0.92rem; color: var(--color-text-muted); font-style: italic; margin-top: 0.6rem; }
/* Link from an article back up to the topic hub it belongs under. */
.guide-link { margin-top: var(--spacing-sm); font-size: 0.95rem; }
.guide-link a { color: var(--color-accent); text-decoration: none; }
.guide-link a:hover { text-decoration: underline; }

/* Video embeds */
.video-embed { margin: var(--spacing-lg) 0; }
/* Every embedded video is 16:9 at the source and loads with preload="none", so without the
   aspect ratio the element falls back to the 300x150 default and a 16:9 recording renders as
   a squashed strip. */
.video-embed video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-bg-deep); display: block; }
/* Captions: the tracks the build attaches from captions/*.vtt (scripts/captions.py). ::cue is the
   only hook into the caption shadow DOM and takes a short list of properties - the font stack is
   written out because a custom property does not resolve inside it. White on a near-opaque plate,
   because these play over a dark chart with white lines on it. This is the no-JS rendering; with
   JS the overlay below draws them instead, because ::cue cannot be transitioned. */
.video-embed video::cue {
  background: rgba(11, 13, 20, 0.85);
  color: #ffffff;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.4;
}
/* The overlay wrapper: same box as the video, so the layer can sit inside the picture. */
.caption-wrap { position: relative; display: block; }
.caption-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  display: flex;
  justify-content: center;
  padding: 0 5%;
  pointer-events: none;
  z-index: 2;
}
.caption-layer span {
  display: inline-block;
  max-width: 94%;
  padding: 0.35em 0.75em;
  border-radius: var(--radius-sm);
  background: rgba(11, 13, 20, 0.85);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.caption-layer span.is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .caption-layer span { transition: none; transform: none; }
}
.video-embed.youtube a { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); }
/* height:auto is required, not tidiness: the width/height attributes are presentational hints, so
   without it the 360px attribute height wins over the intrinsic ratio and the thumbnail stretches
   to whatever width the column gives it. It only looked right while the column happened to be 480px. */
.video-embed.youtube img { width: 100%; height: auto; display: block; border: none; border-radius: 0; }
.video-embed.youtube .video-play {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem var(--spacing-md) 0.8rem;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 9, 16, 0.92) 100%);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-primary);
}
.video-embed.youtube a:hover .video-play { color: var(--color-accent); }

/* Testimonials slider */
.testimonial-slider { max-width: 760px; margin: var(--spacing-lg) auto 0; }
.testimonial-viewport { position: relative; transition: height 380ms cubic-bezier(0.16, 1, 0.3, 1); }
.testimonial-slide { display: none; margin: 0; }
.testimonial-slide.is-active { display: block; animation: testimonial-in 420ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes testimonial-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.testimonial-stars { display: flex; justify-content: center; gap: 0.3rem; margin-bottom: var(--spacing-sm); color: var(--color-accent); }
.testimonial-slide blockquote {
  position: relative; margin: 0;
  border: 1px solid var(--color-border); border-top: 2px solid var(--color-accent);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--color-accent-rgb), 0.08), transparent 62%),
    var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing-lg) + 0.75rem) var(--spacing-lg) var(--spacing-lg);
  color: var(--color-text-secondary);
  font-size: 1.08rem; line-height: 1.8; text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 22px 48px -30px rgba(4, 6, 12, 0.95);
}
.testimonial-slide figcaption {
  margin-top: var(--spacing-md);
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  text-align: center;
}
.testimonial-avatar {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; margin-bottom: 0.15rem;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(var(--color-accent-rgb), 0.24), rgba(var(--color-accent-rgb), 0.05));
  border: 1px solid rgba(var(--color-accent-rgb), 0.32);
  color: var(--color-accent);
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.05em;
}
.testimonial-name { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-primary); }
.testimonial-role { display: block; margin: 0; font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.02em; text-transform: none; color: var(--color-text-muted); }
.testimonial-nav { display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); margin-top: var(--spacing-md); }
/* Without JS the carousel controls do nothing, so they stay hidden. */
html:not(.js) .testimonial-nav { display: none; }
.testimonial-arrow {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text-secondary); cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.testimonial-arrow:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-bg-card); }
.testimonial-arrow:focus-visible, .testimonial-dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.testimonial-dots { display: flex; align-items: center; gap: 0.5rem; }
.testimonial-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid var(--color-text-muted); background: transparent; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.testimonial-dot:hover { border-color: var(--color-accent); transform: scale(1.15); }
.testimonial-dot.is-active { background: var(--color-accent); border-color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) {
  .testimonial-slide.is-active { animation: none; }
  .testimonial-dot:hover { transform: none; }
  .testimonial-viewport { transition: none; }
}

/* Press logos */
.press-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-lg);
  margin: var(--spacing-md) 0 0;
}
/* Logos arrive at wildly different aspect ratios; a uniform height, one tone and
   an even gap make the row read as one strip rather than three unrelated marks. */
.press-row img {
  height: 30px;
  width: auto;
  opacity: 0.72;
  filter: grayscale(1) brightness(1.15);
  transition: opacity var(--transition-fast);
}
.press-row img:hover { opacity: 1; }

/* Source note */
.source-note { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--color-text-muted); margin-top: var(--spacing-sm); }
.source-note a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.source-note a:hover { color: var(--color-accent); }

/* Sub-tabs (Articles / Topics) */
.subtabs { display: flex; gap: var(--spacing-md); border-bottom: 1px solid var(--color-border); margin: 0 0 var(--spacing-md); }
.subtab {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted); padding: 0 0 0.7rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.subtab:hover { color: var(--color-text-primary); }
.subtab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.video-embed figcaption { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.5rem; text-align: center; }
.video-embed figcaption a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.video-embed figcaption a:hover { color: var(--color-accent); }

/* Utility */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; }
.cta-content .link-arrow { margin-left: var(--spacing-sm); }

@media print {
  .header, .mobile-nav-toggle, .nav-overlay, .footer, .scroll-progress, .hero-bg, .page-header-bg { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
  a::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
  [class*="scroll-animate"] { opacity: 1 !important; transform: none !important; }
}