/* ============================================================
   PAGES — CLAY DESIGN v1.1.0
   Covers: /me/, /updates, /terms, /privacy
   Matches index.html landing-clay.css aesthetic:
   B&W dominant, violet-spark accent, dashed/solid borders,
   mono uppercase labels, pill CTAs with hard-offset shadows.
   Loaded AFTER styles.css — overrides legacy pill/blur styling.
   ============================================================ */

:root {
  --clay-canvas: #060608;
  --clay-canvas-2: #0a0a0c;
  --clay-surface: #0f0f12;
  --clay-surface-hi: #15151a;
  --clay-oat: rgba(255, 255, 255, 0.09);
  --clay-oat-light: rgba(255, 255, 255, 0.16);
  --clay-text: #ffffff;
  --clay-text-muted: rgba(255, 255, 255, 0.62);
  --clay-text-dim: rgba(255, 255, 255, 0.38);
  --violet-300: #c1b0ff;
  --violet-400: #a78bff;
  --violet-500: #8b6bf7;
  --violet-700: #5a2fd1;
  --violet-soft: rgba(139, 107, 247, 0.08);
  --clay-shadow-hard: -6px 6px 0 rgba(255, 255, 255, 0.06);
  --clay-shadow-hard-accent: -6px 6px 0 var(--violet-500);
  --clay-r-pill: 9999px;
  --clay-r-card: 4px;
  --clay-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --clay-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--clay-canvas) !important;
  color: var(--clay-text);
  font-family: var(--clay-font);
  -webkit-font-smoothing: antialiased;
}
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: var(--clay-font);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
body p, body li, body span, body a, body td, body th {
  font-family: var(--clay-font);
}
.grid-background { opacity: 0.3 !important; }

/* Kill legacy page::before / ::after glow blobs */
body .page::before,
body .page::after { display: none !important; }

/* ============================================================
   NAVBAR — editorial flat, mono uppercase, underline indicator
   ============================================================ */
body .navbar {
  background: rgba(6,6,8,0.85) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border-bottom: 1px dashed rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
}
body .navbar.scrolled {
  background: rgba(6,6,8,0.95) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
body .nav-container {
  max-width: 1360px !important;
  padding: 16px 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}
body .nav-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 10px 6px 6px !important;
  border: 1px dashed rgba(255,255,255,0.18) !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  transition: border-color 0.22s ease, background 0.22s ease;
}
body .nav-logo:hover {
  border-color: var(--violet-400) !important;
  background: rgba(139,107,247,0.06) !important;
}
body .nav-logo .logo-icon {
  width: 26px !important; height: 26px !important;
  border-radius: 3px !important;
  object-fit: cover !important;
}
body .nav-logo span {
  font-family: var(--clay-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}
body .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-left: auto !important;
}
body .nav-link {
  position: relative !important;
  font-family: var(--clay-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 14px !important;
  transition: color 0.22s ease !important;
}
body .nav-link::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px;
  bottom: 8px;
  height: 2px;
  background: var(--violet-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
body .nav-link:hover {
  color: #fff !important;
  background: transparent !important;
}
body .nav-link:hover::after,
body .nav-link[aria-current="page"]::after,
body .nav-link.is-active::after {
  transform: scaleX(1);
}
body .nav-link[aria-current="page"],
body .nav-link.is-active {
  color: #fff !important;
  background: transparent !important;
}
body .nav-link[aria-current="page"]::before,
body .nav-link.is-active::before {
  content: '›';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--violet-400);
  font-family: var(--clay-mono);
  font-size: 13px;
  font-weight: 700;
}
body .nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  background: #fff !important;
  color: #0a0a0f !important;
  border: 2px solid #0a0a0f !important;
  border-radius: 999px !important;
  padding: 9px 20px !important;
  font-family: var(--clay-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  box-shadow: -4px 4px 0 var(--violet-500) !important;
  margin-left: 10px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
  text-decoration: none !important;
}
body .nav-cta:hover {
  background: var(--violet-300) !important;
  color: #0a0a0f !important;
  transform: translateY(-2px) !important;
  box-shadow: -6px 6px 0 var(--violet-500) !important;
}
body .nav-tools {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body .lang-toggle {
  background: transparent !important;
  color: rgba(255,255,255,0.72) !important;
  border: 1px dashed rgba(255,255,255,0.22) !important;
  border-radius: 3px !important;
  padding: 8px 10px !important;
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  gap: 6px !important;
  transition: all 0.22s ease !important;
}
body .lang-toggle:hover {
  border-color: var(--violet-400) !important;
  border-style: solid !important;
  color: var(--violet-300) !important;
  background: rgba(139,107,247,0.06) !important;
}

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
body .page {
  max-width: 1320px !important;
  margin: 0 auto;
  padding: 132px 28px 96px !important;
  position: relative;
}
body .content-page {
  max-width: 880px !important;
  margin: 0 auto;
  padding: 132px 28px 96px !important;
}
body .content-page__back {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 14px !important;
  border: 1px dashed rgba(255,255,255,0.22) !important;
  border-radius: 4px !important;
  font-family: var(--clay-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.72) !important;
  background: transparent !important;
  margin-bottom: 40px !important;
  transition: all 0.22s ease;
  text-decoration: none;
  width: fit-content;
}
body .content-page__back:hover {
  color: #fff !important;
  border-color: var(--violet-400) !important;
  border-style: solid !important;
  transform: translateY(-1px);
  box-shadow: -3px 3px 0 var(--violet-500);
}

/* ============================================================
   CONTENT CARD — terms / privacy
   ============================================================ */
body .content-card {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
body .content-card h1 {
  font-size: clamp(2.6rem, 6vw, 4.8rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 16px 0 !important;
}
body .content-card .updated {
  display: inline-block;
  font-family: var(--clay-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
  padding: 4px 10px;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 3px;
  margin: 0 0 48px 0 !important;
}
body .content-card h2 {
  position: relative;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem) !important;
  margin: 56px 0 16px 0 !important;
  padding-left: 24px !important;
  font-weight: 700 !important;
}
body .content-card h2::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 14px; height: 2px;
  background: var(--violet-500);
  transform: translateY(-50%);
}
body .content-card h3 {
  font-size: 1.2rem !important;
  margin: 32px 0 12px 0 !important;
  font-weight: 600 !important;
}
body .content-card p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.72) !important;
  margin: 0 0 14px 0 !important;
}
body .content-card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
}
body .content-card ul li {
  position: relative;
  padding: 6px 0 6px 24px !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.72) !important;
}
body .content-card ul li::before {
  content: '→';
  position: absolute;
  left: 0; top: 6px;
  font-family: var(--clay-mono);
  color: var(--violet-400);
  font-weight: 700;
}
body .content-card a {
  color: var(--violet-300) !important;
  border-bottom: 1px dashed var(--violet-400);
  transition: all 0.18s ease;
  text-decoration: none;
}
body .content-card a:hover {
  color: #fff !important;
  border-bottom-style: solid;
}
body .content-card table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px 0;
  font-size: 14px;
}
body .content-card table th,
body .content-card table td {
  padding: 12px 14px !important;
  border: 1px dashed rgba(255,255,255,0.12) !important;
  text-align: left;
  vertical-align: top;
}
body .content-card table th {
  background: rgba(255,255,255,0.03) !important;
  font-family: var(--clay-mono);
  font-size: 11px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  font-weight: 700;
  border-style: solid !important;
}
body .content-card table td {
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
}
body .content-card strong { color: #fff !important; font-weight: 700; }

/* ============================================================
   /me/ ABOUT PAGE — break grid, editorial layout
   ============================================================ */
body .about-hero {
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: 0 !important;
  margin-bottom: 64px !important;
  padding: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  align-items: stretch !important;
}
body .about-hero-copy {
  background: transparent !important;
  border: none !important;
  border-right: 1px dashed rgba(255,255,255,0.12) !important;
  border-radius: 0 !important;
  padding: 48px 48px 48px 0 !important;
  box-shadow: none !important;
}
body .about-hero-panel {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 48px 0 48px 48px !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 20px !important;
  align-content: start !important;
}
body .about-kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 5px 12px !important;
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,0.22) !important;
  border-radius: 3px !important;
  color: rgba(255,255,255,0.72) !important;
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 0 !important;
  width: fit-content;
  transform: rotate(-1deg);
}
body .about-kicker::before {
  content: '';
  width: 6px !important; height: 6px !important;
  background: var(--violet-400) !important;
  box-shadow: none !important;
  border-radius: 50%;
}
body .about-hero-copy h1 {
  font-size: clamp(2.6rem, 8vw, 5.5rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.045em !important;
  font-weight: 800 !important;
  margin: 24px 0 20px 0 !important;
  color: #fff !important;
}
body .about-hero-copy h1 span,
body .about-hero-copy .gradient-text {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--violet-300) !important;
  color: var(--violet-300) !important;
  font-style: italic;
  font-family: 'Space Mono', monospace !important;
  font-weight: 400;
  letter-spacing: -0.02em;
}
body .about-hero-copy p {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.62) !important;
  max-width: 58ch;
  margin: 0 0 28px 0 !important;
}
body .about-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
body .about-actions .btn,
body .about-actions a.btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px !important;
  font-family: var(--clay-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
  text-decoration: none !important;
}
body .about-actions .btn-primary {
  background: #fff !important;
  color: #0a0a0f !important;
  border: 2px solid #0a0a0f !important;
  box-shadow: -4px 4px 0 var(--violet-500) !important;
}
body .about-actions .btn-primary:hover {
  background: var(--violet-300) !important;
  transform: translateY(-2px);
  box-shadow: -6px 6px 0 var(--violet-500) !important;
}
body .about-actions .btn-outline {
  background: transparent !important;
  color: #fff !important;
  border: 1px dashed rgba(255,255,255,0.3) !important;
  box-shadow: none !important;
}
body .about-actions .btn-outline:hover {
  border-color: var(--violet-400) !important;
  border-style: solid !important;
  color: var(--violet-300) !important;
  transform: translateY(-2px);
}

/* About hero right panel — signals */
body .about-signal {
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,0.14) !important;
  border-radius: 4px !important;
  padding: 20px !important;
  transition: border-color 0.22s ease, transform 0.22s ease;
}
body .about-signal:hover {
  border-color: var(--violet-400) !important;
  transform: translateY(-2px);
  box-shadow: -4px 4px 0 var(--violet-500);
}
body .about-signal-label {
  display: block !important;
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--violet-300) !important;
  margin-bottom: 12px !important;
}
body .about-signal-value {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em;
}
body .about-signal p {
  color: rgba(255,255,255,0.65) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* About stats — mono strip */
body .about-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  margin: 0 0 64px 0 !important;
  border-top: 1px dashed rgba(255,255,255,0.15);
  border-bottom: 1px dashed rgba(255,255,255,0.15);
  padding: 20px 0;
}
body .about-stat {
  padding: 8px 20px !important;
  background: transparent !important;
  border: none !important;
  border-right: 1px dashed rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
}
body .about-stat:last-child { border-right: none !important; }
body .about-stat-value {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #fff !important;
  margin-bottom: 6px !important;
  line-height: 1.1;
}
body .about-stat-value.gradient-text {
  background: none !important;
  -webkit-text-fill-color: var(--violet-300) !important;
  color: var(--violet-300) !important;
}
body .about-stat-label {
  color: rgba(255,255,255,0.4) !important;
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* About sections */
body .about-section {
  margin-top: 72px;
}
body .about-section .section-header {
  text-align: left !important;
  margin-bottom: 28px !important;
  max-width: 820px;
}
body .about-section .section-header .section-tag {
  display: inline-block !important;
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--violet-300) !important;
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,0.22) !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
  margin-bottom: 16px !important;
}
body .about-section .section-title {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 14px 0 !important;
}
body .about-section .section-title .gradient-text,
body .about-section .section-title span {
  background: none !important;
  -webkit-text-fill-color: var(--violet-300) !important;
  color: var(--violet-300) !important;
  font-style: italic;
  font-family: 'Space Mono', monospace !important;
  font-weight: 400;
}
body .about-section .section-desc {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.62) !important;
  max-width: 58ch;
}

/* About grid — 3-col blocks */
body .about-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
body .about-block {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 4px !important;
  padding: 28px !important;
  box-shadow: none !important;
  transition: border-color 0.22s ease, transform 0.22s ease;
}
body .about-block:nth-child(2) { border-style: dashed !important; }
body .about-block:hover {
  border-color: var(--violet-400) !important;
  transform: translateY(-3px);
  box-shadow: -5px 5px 0 var(--violet-500);
}
body .about-block h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: -0.01em;
}
body .about-block p {
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.65 !important;
  font-size: 14px !important;
  margin: 0 !important;
}

/* About projects */
body .about-project-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
body .about-project-card {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 4px !important;
  padding: 28px !important;
  box-shadow: none !important;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
}
body .about-project-card:nth-child(1) {
  background: #fff !important;
  color: #000 !important;
  border: none !important;
}
body .about-project-card:nth-child(1) h3,
body .about-project-card:nth-child(1) p { color: #000 !important; }
body .about-project-card:nth-child(1) p { color: rgba(0,0,0,0.7) !important; }
body .about-project-card:nth-child(1) .about-project-link { color: #000 !important; }
body .about-project-card:nth-child(2) { border-style: dashed !important; }
body .about-project-card:hover {
  transform: translateY(-3px);
  border-color: var(--violet-400) !important;
  box-shadow: -5px 5px 0 var(--violet-500);
}
body .about-project-card:nth-child(1):hover {
  box-shadow: -5px 5px 0 var(--violet-500);
}
body .about-project-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 10px !important;
  height: auto !important;
  border-radius: 3px !important;
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  width: fit-content;
  background: transparent !important;
  border: 1px solid currentColor !important;
}
body .about-project-badge.is-live { color: #51cf66 !important; }
body .about-project-badge.is-build { color: #ffd43b !important; }
body .about-project-card:nth-child(1) .about-project-badge { border-color: rgba(0,0,0,0.4) !important; color: #000 !important; background: rgba(0,0,0,0.04) !important; }
body .about-project-card h3 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: -0.02em;
}
body .about-project-card p {
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.65 !important;
  font-size: 14px !important;
  margin: 0 0 24px 0 !important;
  flex: 1;
}
body .about-project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--clay-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-decoration: none;
  border-bottom: 1px dashed var(--violet-400);
  padding-bottom: 2px;
  width: fit-content;
  transition: border-color 0.22s ease, color 0.22s ease;
}
body .about-project-link:hover {
  border-bottom-style: solid;
  color: var(--violet-300) !important;
}
body .about-project-link::after {
  content: '→';
  font-family: var(--clay-mono);
}

/* About stack layout */
body .about-stack-layout {
  display: grid !important;
  grid-template-columns: 0.9fr 1.1fr !important;
  gap: 16px !important;
  margin-top: 72px !important;
}
body .about-stack-card {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 4px !important;
  padding: 28px !important;
  box-shadow: none !important;
}
body .about-stack-card:nth-child(2) { border-style: dashed !important; background: rgba(139,107,247,0.04) !important; }
body .about-stack-card p {
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.65 !important;
  font-size: 14px !important;
  margin: 0 0 18px 0 !important;
}
body .about-stack-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
body .about-stack-pill {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 6px 12px !important;
  border-radius: 3px !important;
  border: 1px dashed rgba(255,255,255,0.18) !important;
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  font-family: var(--clay-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  transition: border-color 0.22s ease, color 0.22s ease;
}
body .about-stack-pill:hover {
  border-color: var(--violet-400) !important;
  border-style: solid !important;
  color: var(--violet-300) !important;
}

/* About CTA strip */
body .about-cta {
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  border-radius: 4px !important;
  margin-top: 48px !important;
  padding: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  box-shadow: -6px 6px 0 var(--violet-500) !important;
}
body .about-cta-copy h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  color: #000 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.02em;
}
body .about-cta-copy p {
  max-width: 580px !important;
  color: rgba(0,0,0,0.7) !important;
  line-height: 1.65 !important;
  font-size: 15px !important;
  margin: 0 !important;
}
body .about-cta .about-actions .btn-primary {
  background: #0a0a0f !important;
  color: #fff !important;
  border-color: #0a0a0f !important;
  box-shadow: -4px 4px 0 var(--violet-500) !important;
}
body .about-cta .about-actions .btn-primary:hover {
  background: var(--violet-500) !important;
  color: #fff !important;
  box-shadow: -6px 6px 0 #000 !important;
}
body .about-cta .about-actions .btn-outline {
  color: #000 !important;
  border-color: rgba(0,0,0,0.3) !important;
}
body .about-cta .about-actions .btn-outline:hover {
  color: #000 !important;
  border-color: #000 !important;
  background: rgba(0,0,0,0.04) !important;
}

/* ============================================================
   /updates/ PAGE — release feed, editorial timeline
   ============================================================ */

/* Updates hero — flat 2-col */
body .updates-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: 48px !important;
  padding: 0 0 48px 0 !important;
  margin-bottom: 48px !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body .updates-hero::before,
body .updates-hero::after { display: none !important; }
body .page-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  margin: 0 !important;
  z-index: 1;
}
body .updates-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 12px !important;
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,0.22) !important;
  border-radius: 3px !important;
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.72) !important;
  width: fit-content !important;
  transform: rotate(-1deg);
}
body .updates-kicker::before {
  content: '';
  width: 6px !important;
  height: 6px !important;
  border-radius: 50%;
  background: var(--violet-400) !important;
  box-shadow: none !important;
}
body .page-header h1 {
  font-size: clamp(3rem, 10vw, 7rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.05em !important;
  font-weight: 800 !important;
  margin: 0 !important;
  max-width: 14ch;
  color: #fff !important;
}
body .page-header h1 span,
body .page-header h1 .gradient-text {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--violet-300) !important;
  color: var(--violet-300) !important;
  font-style: italic;
  font-family: 'Space Mono', monospace !important;
  font-weight: 400;
  letter-spacing: -0.02em;
}
body .page-header p {
  max-width: 58ch !important;
  font-size: 16px !important;
  color: rgba(255,255,255,0.62) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}
body .updates-hero-actions {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  margin-top: 24px !important;
  max-width: 100% !important;
  border-top: 1px dashed rgba(255,255,255,0.15);
  border-bottom: 1px dashed rgba(255,255,255,0.15);
}
body .updates-chip {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-height: auto !important;
  padding: 16px 18px !important;
  background: transparent !important;
  border: none !important;
  border-right: 1px dashed rgba(255,255,255,0.12) !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.78) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: background 0.22s ease;
}
body .updates-chip:last-child { border-right: none !important; }
body .updates-chip strong {
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--violet-300) !important;
}
body .updates-chip:hover {
  background: rgba(139,107,247,0.06) !important;
  color: #fff !important;
  transform: none !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* Updates meta (right column of hero) */
body .updates-meta {
  display: grid !important;
  gap: 12px !important;
  align-content: start !important;
  z-index: 1;
}
body .updates-meta-card {
  padding: 20px !important;
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,0.14) !important;
  border-radius: 4px !important;
  min-height: auto !important;
  box-shadow: none !important;
  transition: border-color 0.22s ease;
}
body .updates-meta-card:hover {
  transform: none !important;
  border-color: var(--violet-400) !important;
  box-shadow: -4px 4px 0 var(--violet-500) !important;
}
body .updates-meta-card--accent {
  border-style: solid !important;
  border-color: var(--violet-500) !important;
  background: rgba(139,107,247,0.06) !important;
}
body .updates-meta-label {
  display: block !important;
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--violet-300) !important;
  margin-bottom: 10px !important;
}
body .updates-meta-value {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em;
}
body .updates-meta-copy {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.6) !important;
}

/* Updates summary row */
body .updates-summary {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  margin-bottom: 56px !important;
  border-top: 1px dashed rgba(255,255,255,0.15);
  border-bottom: 1px dashed rgba(255,255,255,0.15);
}
body .updates-summary-card {
  padding: 24px 20px !important;
  background: transparent !important;
  border: none !important;
  border-right: 1px dashed rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
}
body .updates-summary-card:last-child { border-right: none !important; }
body .updates-summary-label {
  display: block !important;
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  margin-bottom: 12px !important;
}
body .updates-summary-value {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em;
}
body .updates-summary-copy {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.6) !important;
  margin: 0 !important;
}

/* Timeline shell */
body .timeline-shell {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 40px !important;
  align-items: start !important;
}
body .updates-rail {
  position: sticky !important;
  top: 110px !important;
  display: grid !important;
  gap: 14px !important;
}

/* Timeline rail (aside) */
body .timeline-rail {
  padding: 24px !important;
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
}
body .timeline-rail h2 {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.01em;
}
body .timeline-rail p {
  font-size: 13px !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.65 !important;
  margin: 0 0 16px 0 !important;
}
body .timeline-rail-list {
  display: grid !important;
  gap: 10px !important;
}
body .timeline-rail-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.5 !important;
}
body .timeline-rail-item::before {
  content: '' !important;
  flex-shrink: 0;
  width: 6px !important;
  height: 6px !important;
  margin-top: 5px !important;
  border-radius: 50%;
  background: var(--violet-400) !important;
  opacity: 1 !important;
}

/* Timeline spotlight */
body .timeline-spotlight {
  padding: 24px !important;
  background: rgba(139,107,247,0.06) !important;
  border: 1px solid var(--violet-500) !important;
  border-radius: 4px !important;
}
body .timeline-spotlight-label {
  display: block !important;
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--violet-300) !important;
  margin-bottom: 10px !important;
}
body .timeline-spotlight-value {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}
body .timeline-spotlight p {
  margin: 0 0 14px 0 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.7) !important;
}

/* Timeline (main feed) */
body .timeline {
  position: relative !important;
  padding-left: 0 !important;
  counter-reset: updateIndex;
}
body .timeline::before {
  display: none !important;
}
body .update-entry {
  position: relative !important;
  counter-increment: updateIndex;
  padding: 32px 64px 32px 56px !important;
  margin-bottom: 20px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-left: 3px solid var(--violet-500) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
}
body .update-entry::before {
  content: '' !important;
  position: absolute !important;
  left: 24px !important;
  top: 38px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 0 !important;
  background: var(--violet-500) !important;
  border: none !important;
  box-shadow: none !important;
  transform: rotate(45deg);
}
body .update-entry::after {
  content: counter(updateIndex, decimal-leading-zero) !important;
  position: absolute !important;
  top: 28px !important;
  right: 24px !important;
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: rgba(255,255,255,0.3) !important;
}
body .update-entry:hover {
  border-color: var(--violet-400) !important;
  transform: translateY(-3px) !important;
  box-shadow: -5px 5px 0 var(--violet-500) !important;
}
body .update-entry--featured {
  background: #fff !important;
  border: none !important;
  border-left: 3px solid var(--violet-500) !important;
  box-shadow: -6px 6px 0 var(--violet-500) !important;
}
body .update-entry--featured::after { color: rgba(0,0,0,0.3) !important; }
body .update-entry--featured .update-title,
body .update-entry--featured .update-title * { color: #000 !important; }
body .update-entry--featured::before { background: #000 !important; }

body .update-date {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,0.2) !important;
  border-radius: 3px !important;
  font-family: var(--clay-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.7) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}
body .update-entry--featured .update-date {
  border-color: rgba(0,0,0,0.3) !important;
  color: rgba(0,0,0,0.7) !important;
}
body .update-title {
  max-width: calc(100% - 60px) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 18px 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25;
}
body .update-entry--featured .update-title {
  font-size: 1.7rem !important;
}
body .update-body {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
body .update-body ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 !important;
}
body .update-body li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px dashed rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.72) !important;
}
body .update-entry--featured .update-body li {
  color: rgba(0,0,0,0.72) !important;
  border-top-color: rgba(0,0,0,0.08) !important;
}
body .update-body li::before {
  content: '' !important;
  flex-shrink: 0;
  margin-top: 8px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 0 !important;
  background: var(--violet-400) !important;
  opacity: 1 !important;
  transform: rotate(45deg);
}

/* Tags */
body .tag {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  margin-right: 8px !important;
  font-family: var(--clay-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  border: 1px solid currentColor !important;
  background: transparent !important;
}
body .tag.feat { color: #51cf66 !important; }
body .tag.fix { color: #ff8787 !important; }
body .tag.perf { color: var(--violet-300) !important; }
body .tag.deploy { color: #ffd43b !important; }
body .tag.docs { color: #c5c5d6 !important; }
body .update-entry--featured .tag { border-color: currentColor !important; background: transparent !important; }

/* Platform badges */
body .platform-badges {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}
body .platform {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 3px 8px !important;
  border-radius: 3px !important;
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.7) !important;
  font-family: var(--clay-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
body .update-entry--featured .platform {
  border-color: rgba(0,0,0,0.22) !important;
  color: rgba(0,0,0,0.7) !important;
}

/* Page footer */
body .page-footer {
  margin-top: 64px !important;
  padding: 24px 0 0 0 !important;
  border-top: 1px dashed rgba(255,255,255,0.12) !important;
  text-align: center !important;
}
body .page-footer p {
  font-family: var(--clay-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
}
body .page-footer a {
  color: var(--violet-300) !important;
  border-bottom: 1px dashed var(--violet-400);
  text-decoration: none;
}
body .page-footer a:hover {
  color: #fff !important;
  border-bottom-style: solid;
}

/* Keep generic .section-header text-align: center that's on landing but page usage is left */
body .about-section .section-header,
body .updates-hero .section-header { text-align: left !important; }

/* ============================================================
   RESPONSIVE — tablet / phone
   ============================================================ */
@media (max-width: 1024px) {
  body .about-hero,
  body .updates-hero,
  body .timeline-shell,
  body .about-stack-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  body .about-hero-copy,
  body .about-hero-panel {
    padding: 32px 0 !important;
    border-right: none !important;
    border-bottom: 1px dashed rgba(255,255,255,0.12) !important;
  }
  body .about-hero-panel:last-child { border-bottom: none !important; }
  body .updates-rail { position: static !important; }
  body .page-header h1 { max-width: none !important; }
  body .update-body ul { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  body .page,
  body .content-page {
    padding: 110px 18px 72px !important;
    padding-left: max(18px, env(safe-area-inset-left)) !important;
    padding-right: max(18px, env(safe-area-inset-right)) !important;
  }
  body .about-stats,
  body .updates-summary,
  body .updates-hero-actions {
    grid-template-columns: 1fr !important;
    border-bottom: none !important;
  }
  body .about-stat,
  body .updates-summary-card,
  body .updates-chip {
    border-right: none !important;
    border-bottom: 1px dashed rgba(255,255,255,0.12) !important;
  }
  body .about-stat:last-child,
  body .updates-summary-card:last-child,
  body .updates-chip:last-child { border-bottom: none !important; }
  body .about-grid,
  body .about-project-grid {
    grid-template-columns: 1fr !important;
  }
  body .page-header h1 {
    font-size: clamp(2.2rem, 12vw, 3.2rem) !important;
    max-width: none !important;
  }
  body .about-hero-copy h1 {
    font-size: clamp(2.2rem, 12vw, 3.4rem) !important;
  }
  body .update-entry {
    padding: 24px 20px 20px 48px !important;
  }
  body .update-entry::before { left: 18px !important; top: 30px !important; }
  body .update-entry::after { top: 22px !important; right: 18px !important; }
  body .update-title { max-width: 100% !important; font-size: 1.15rem !important; }
  body .update-entry--featured .update-title { font-size: 1.3rem !important; }
  body .about-cta {
    padding: 28px !important;
    gap: 20px !important;
  }
  body .content-card h1 { font-size: clamp(2.2rem, 10vw, 3.4rem) !important; }
  body .content-card table { display: block; overflow-x: auto; }
  body .nav-container { padding: 12px 16px !important; gap: 10px !important; }
  body .nav-links { display: none !important; }
  body .nav-cta { display: none !important; }
  body .nav-burger {
    display: inline-flex !important;
    background: transparent !important;
    border: 1px dashed rgba(255,255,255,0.22) !important;
    border-radius: 3px !important;
    padding: 8px !important;
  }
  body .nav-logo span { font-size: 10px !important; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body * { transition: none !important; animation: none !important; }
  body .nav-cta:hover,
  body .content-page__back:hover,
  body .about-signal:hover,
  body .about-project-card:hover,
  body .update-entry:hover,
  body .updates-chip:hover { transform: none !important; }
}

/* §41 — FAQ PAGE (clay) ----------------------------------------------------- */
body .faq-page {
  display: block;
  max-width: 1260px;
  padding: 132px 28px 96px;
}
body .faq-hero-clay {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 28px;
  padding: 48px 0 60px;
  border-bottom: 1px dashed rgba(255,255,255,0.12);
  margin-bottom: 56px;
}
body .faq-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
body .faq-kicker-clay {
  display: inline-block;
  width: fit-content;
  padding: 8px 14px;
  border: 1px dashed var(--violet-500);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet-300);
  background: transparent;
}
body .faq-hero-copy h1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6.5vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
  font-weight: 800;
  color: #fff;
  -webkit-text-fill-color: currentColor;
  margin: 0;
}
body .faq-hero-copy h1 .gradient-text {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--violet-300);
  color: var(--violet-300);
  font-style: italic;
  font-weight: 400;
}
body .faq-hero-copy p {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.62);
  max-width: 560px;
  margin: 0;
}
body .faq-hero-actions-clay {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
body .btn-clay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid #0a0a0f;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
body .btn-clay--solid {
  background: #fff;
  color: #0a0a0f;
  box-shadow: -6px 6px 0 var(--violet-500);
}
body .btn-clay--solid:hover {
  transform: translate(2px, -2px);
  box-shadow: -8px 8px 0 var(--violet-500);
}
body .btn-clay--ghost {
  background: transparent;
  color: #fff;
  border: 1px dashed rgba(255,255,255,0.42);
}
body .btn-clay--ghost:hover {
  border-color: var(--violet-300);
  color: var(--violet-300);
  transform: translate(2px, -2px);
}
body .faq-hero-side {
  display: grid;
  gap: 14px;
  align-content: start;
}
body .faq-side-clay {
  padding: 22px 22px 20px;
  border: 1px dashed rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
body .faq-side-clay:hover {
  border-color: var(--violet-300);
  transform: translate(2px, -2px);
  box-shadow: -4px 4px 0 var(--violet-500);
}
body .faq-side-clay--accent {
  border-style: solid;
  border-color: var(--violet-500);
  background: #0f0f12;
}
body .faq-side-label-clay {
  display: block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet-300);
  margin-bottom: 10px;
}
body .faq-side-title-clay {
  font-family: 'Inter', sans-serif;
  font-size: 1.12rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
body .faq-side-clay p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
}

body .faq-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  align-items: start;
}
body .faq-list-clay {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px dashed rgba(255,255,255,0.14);
}
body .faq-row-clay {
  border-bottom: 1px dashed rgba(255,255,255,0.14);
  padding: 0;
  background: transparent;
  border-radius: 0;
  transition: background .2s ease;
}
body .faq-row-clay[open] {
  background: rgba(139,107,247,0.04);
  border-bottom: 1px solid var(--violet-500);
}
body .faq-row-clay summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 20px 24px 64px;
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: 1.08rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #fff;
  transition: color .2s ease;
}
body .faq-row-clay summary::-webkit-details-marker { display: none; }
body .faq-row-clay summary::before {
  content: counter(faqIndex, decimal-leading-zero);
  counter-increment: faqIndex;
  position: absolute;
  left: 20px;
  top: 24px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--violet-300);
}
body .faq-row-clay summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 22px;
  font-weight: 400;
  color: var(--violet-300);
  transition: transform .2s ease;
}
body .faq-row-clay[open] summary::after {
  content: '−';
  transform: translateY(-50%) rotate(0);
}
body .faq-row-clay summary:hover { color: var(--violet-300); }
body .faq-list-clay { counter-reset: faqIndex; }
body .faq-row-body {
  padding: 0 20px 26px 64px;
}
body .faq-row-body p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.68);
  max-width: 640px;
}

body .faq-rail-clay {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 22px;
  border: 1px dashed rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
}
body .faq-rail-label {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet-300);
}
body .faq-rail-clay h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
body .faq-rail-clay p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
}
body .faq-rail-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.14);
  padding-top: 14px;
}
body .faq-rail-link {
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}
body .faq-rail-link:last-child { border-bottom: none; }
body .faq-rail-link:hover {
  color: var(--violet-300);
  padding-left: 6px;
}

@media (max-width: 1024px) {
  body .faq-hero-clay,
  body .faq-shell { grid-template-columns: 1fr; }
  body .faq-rail-clay { position: static; }
}
@media (max-width: 720px) {
  body .faq-page { padding: 110px 18px 72px; }
  body .faq-hero-clay { padding: 28px 0 40px; margin-bottom: 40px; gap: 20px; }
  body .faq-row-clay summary { padding: 20px 44px 20px 52px; font-size: 1rem; }
  body .faq-row-clay summary::before { left: 14px; top: 22px; }
  body .faq-row-clay summary::after { right: 14px; }
  body .faq-row-body { padding: 0 14px 22px 52px; }
  body .btn-clay { flex: 1; min-width: 140px; }
}