/* =====================================================
   Tashi — Full Site CSS (tsh.css)
   Brand prefix: tsh
   Covers ALL 28 pages in design-spec
   ===================================================== */

/* ---- Fonts ---- */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&family=JetBrains+Mono:wght@400&display=swap');

/* ---- CSS Custom Properties ---- */
:root {
  --tsh-nav-h: 68px;

  --tsh-bg-deep:      #0A0D12;
  --tsh-bg-alt:       #111520;
  --tsh-bg-light:     #F2F4F6;
  --tsh-bg-light-alt: #E8ECF0;
  --tsh-bg-white:     #FFFFFF;

  --tsh-border-dark:  #1E2535;
  --tsh-border-light: #D1D5DB;

  --tsh-text-dark:    #E8EDF5;
  --tsh-muted-dark:   #8896AB;
  --tsh-text-light:   #0A0D12;
  --tsh-muted-light:  #4A5568;

  --tsh-acid:         #C8FF00;
  --tsh-acid-label:   #0A0D12;
  --tsh-acid-text-on-light: #3B6E00;

  --tsh-radius: 8px;
  --tsh-radius-lg: 12px;
  --tsh-container: 1200px;
  --tsh-section-pad: clamp(4rem, 8vw, 7rem);
  --tsh-gutter: 1.5rem;
}

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

/* Anchor offset for fixed nav */
:target {
  scroll-margin-top: calc(var(--tsh-nav-h) + 16px);
}
[id] {
  scroll-margin-top: calc(var(--tsh-nav-h) + 16px);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  background: var(--tsh-bg-deep);
  color: var(--tsh-text-dark);
  -webkit-font-smoothing: antialiased;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Clash Display', 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.15;
  font-weight: 700;
}

h1 { font-size: clamp(2.8rem, 5vw, 4.8rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 600; }

p { line-height: 1.7; }

code, pre {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* ---- Container ---- */
.tsh-container {
  width: 100%;
  max-width: var(--tsh-container);
  margin: 0 auto;
  padding: 0 var(--tsh-gutter);
}

/* ---- Page theme classes (body-level modifiers used by nav/logo selectors) ---- */
/* JS state hook, no direct styling — theme applied via descendant rules below */
.tsh-page--dark-top  { background: var(--tsh-bg-deep); }
.tsh-page--light-top { background: var(--tsh-bg-white); }

/* ---- Section backgrounds ---- */
.tsh-bg--dark     { background: var(--tsh-bg-deep); }
.tsh-bg--dark-alt { background: var(--tsh-bg-alt); }
.tsh-bg--light    { background: var(--tsh-bg-light); }
.tsh-bg--light-alt{ background: var(--tsh-bg-light-alt); }
.tsh-bg--white    { background: var(--tsh-bg-white); }

/* ---- Section wrapper ---- */
.tsh-section {
  padding: var(--tsh-section-pad) 0;
}

.tsh-section--dark {
  background: var(--tsh-bg-deep);
  color: var(--tsh-text-dark);
}

.tsh-section--dark-alt {
  background: var(--tsh-bg-alt);
  color: var(--tsh-text-dark);
}

.tsh-section--light {
  background: var(--tsh-bg-light);
  color: var(--tsh-text-light);
}

.tsh-section--light-alt {
  background: var(--tsh-bg-light-alt);
  color: var(--tsh-text-light);
}

.tsh-section--white {
  background: var(--tsh-bg-white);
  color: var(--tsh-text-light);
}

/* ---- Eyebrow / Label ---- */
.tsh-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tsh-acid);
  margin-bottom: 1rem;
  display: block;
}

.tsh-eyebrow--light {
  color: var(--tsh-acid-text-on-light);
}

/* ---- Fade-in Animation ---- */
.tsh-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.tsh-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   NAVIGATION
   ===================================================== */

.tsh-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--tsh-nav-h);
  background: var(--tsh-bg-deep);
  border-bottom: 1px solid var(--tsh-border-dark);
  display: flex;
  align-items: center;
}

.tsh-nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: var(--tsh-container);
  margin: 0 auto;
  padding: 0 var(--tsh-gutter);
}

.tsh-nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.tsh-nav__logo img {
  height: 32px;
  width: auto;
}

.tsh-logo-light { display: block; }
.tsh-logo-dark  { display: none; }

.tsh-page--light-top .tsh-nav {
  background: var(--tsh-bg-white);
  border-bottom-color: var(--tsh-border-light);
}

.tsh-page--light-top .tsh-logo-light { display: none; }
.tsh-page--light-top .tsh-logo-dark  { display: block; }

.tsh-nav__links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.tsh-nav__link {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--tsh-muted-dark);
  padding: 0.4rem 0.75rem;
  border-radius: var(--tsh-radius);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

.tsh-nav__link:hover,
.tsh-nav__link.is-active {
  color: var(--tsh-text-dark);
  background: rgba(255,255,255,0.06);
}

.tsh-page--light-top .tsh-nav__link {
  color: var(--tsh-muted-light);
}

.tsh-page--light-top .tsh-nav__link:hover,
.tsh-page--light-top .tsh-nav__link.is-active {
  color: var(--tsh-text-light);
  background: rgba(0,0,0,0.06);
}

.tsh-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 1.5rem;
  flex-shrink: 0;
}

.tsh-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}

.tsh-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--tsh-text-dark);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.tsh-page--light-top .tsh-nav__hamburger span {
  background: var(--tsh-text-light);
}

.tsh-nav__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.tsh-nav__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.tsh-nav__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.tsh-nav__mobile {
  display: none;
  position: fixed;
  top: var(--tsh-nav-h);
  left: 0;
  right: 0;
  background: var(--tsh-bg-deep);
  border-bottom: 1px solid var(--tsh-border-dark);
  padding: 1.5rem;
  z-index: 999;
  flex-direction: column;
  gap: 0.5rem;
}

.tsh-nav__mobile.is-open {
  display: flex;
}

.tsh-page--light-top .tsh-nav__mobile {
  background: var(--tsh-bg-white);
  border-bottom-color: var(--tsh-border-light);
}

.tsh-nav__mobile-link {
  font-size: 1rem;
  font-weight: 400;
  color: var(--tsh-text-dark);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--tsh-border-dark);
  display: block;
}

.tsh-nav__mobile-link:last-of-type {
  border-bottom: none;
}

.tsh-page--light-top .tsh-nav__mobile-link {
  color: var(--tsh-text-light);
  border-bottom-color: var(--tsh-border-light);
}

.tsh-nav__mobile-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* =====================================================
   BUTTONS
   ===================================================== */

.tsh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  border-radius: var(--tsh-radius);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  white-space: nowrap;
  text-decoration: none;
}

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

.tsh-btn--primary {
  background: var(--tsh-acid);
  color: var(--tsh-acid-label);
  border-color: var(--tsh-acid);
}

.tsh-btn--primary:hover {
  background: #d4ff33;
  border-color: #d4ff33;
}

.tsh-section--white .tsh-btn--primary,
.tsh-page--light-top .tsh-nav__actions .tsh-btn--primary,
.tsh-page--light-top .tsh-nav__mobile-actions .tsh-btn--primary {
  background: var(--tsh-bg-deep);
  color: var(--tsh-acid);
  border-color: var(--tsh-bg-deep);
}

.tsh-section--white .tsh-btn--primary:hover,
.tsh-page--light-top .tsh-nav__actions .tsh-btn--primary:hover,
.tsh-page--light-top .tsh-nav__mobile-actions .tsh-btn--primary:hover {
  background: #1a1f28;
  border-color: #1a1f28;
  color: var(--tsh-acid);
}

.tsh-btn--outline-dark {
  background: transparent;
  color: var(--tsh-text-dark);
  border-color: var(--tsh-border-dark);
}

.tsh-btn--outline-dark:hover {
  border-color: var(--tsh-text-dark);
}

.tsh-btn--outline-light {
  background: transparent;
  color: var(--tsh-text-light);
  border-color: var(--tsh-border-light);
}

.tsh-btn--outline-light:hover {
  border-color: var(--tsh-text-light);
}

.tsh-btn--ghost-on-dark {
  background: transparent;
  color: var(--tsh-muted-dark);
  border-color: transparent;
}

.tsh-btn--ghost-on-dark:hover {
  color: var(--tsh-text-dark);
}

.tsh-btn--ghost-on-light {
  background: transparent;
  color: var(--tsh-muted-light);
  border-color: transparent;
}

.tsh-btn--ghost-on-light:hover {
  color: var(--tsh-text-light);
}

.tsh-btn--lg {
  padding: 0.85rem 2rem;
  font-size: 1rem;
}

/* =====================================================
   HERO — INDEX.HTML (two-column)
   ===================================================== */

.tsh-hero {
  position: relative;
  background-image: linear-gradient(105deg, rgba(10,13,18,0.88) 0%, rgba(10,13,18,0.72) 50%, rgba(10,13,18,0.55) 100%), url('../images/hero-scene-dark.webp');
  background-size: cover;
  background-position: center;
  background-color: var(--tsh-bg-deep);
  padding-top: calc(var(--tsh-nav-h) + clamp(4rem, 8vw, 7rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.tsh-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
  max-width: var(--tsh-container);
  margin: 0 auto;
  padding: 0 var(--tsh-gutter);
  min-width: 0;
}

.tsh-hero__visual {
  min-width: 0;
  overflow: hidden;
}

.tsh-hero__text h1 {
  color: var(--tsh-text-dark);
  margin-bottom: 1.5rem;
}

.tsh-hero__text h1 span {
  color: var(--tsh-acid);
}

.tsh-hero__sub {
  font-size: 1.125rem;
  color: var(--tsh-muted-dark);
  margin-bottom: 2.5rem;
  max-width: 480px;
  line-height: 1.7;
}

.tsh-hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Subhero (centered stack, sub-pages) ---- */
.tsh-subhero {
  background: var(--tsh-bg-deep);
  padding-top: calc(var(--tsh-nav-h) + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  text-align: center;
  color: var(--tsh-text-dark);
}

.tsh-subhero__inner {
  max-width: var(--tsh-container);
  margin: 0 auto;
  padding: 0 var(--tsh-gutter);
}

.tsh-subhero h1 {
  color: var(--tsh-text-dark);
  margin-bottom: 1.25rem;
}

.tsh-subhero__sub {
  font-size: 1.125rem;
  color: var(--tsh-muted-dark);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---- Dark subhero gradient depth (about, contact, product, docs pages) ---- */
.tsh-subhero.tsh-section--dark {
  background:
    radial-gradient(ellipse 78% 68% at 12% 18%, rgba(24,58,122,0.85) 0%, rgba(14,32,72,0.35) 45%, transparent 72%),
    linear-gradient(135deg, #0B0F17 0%, #1E3E72 45%, #08090E 100%);
}

/* ---- Light-top subhero (pricing, devlog/index) ---- */
.tsh-subhero--light {
  background: var(--tsh-bg-light);
  padding-top: calc(var(--tsh-nav-h) + clamp(3rem, 6vw, 5rem));
  color: var(--tsh-text-light);
}

.tsh-subhero--light h1 {
  color: var(--tsh-text-light);
}

.tsh-subhero--light .tsh-subhero__sub {
  color: var(--tsh-muted-light);
}

.tsh-subhero--light .tsh-eyebrow {
  color: var(--tsh-acid-text-on-light);
}

/* ---- Feature hero with raster bg image ---- */
.tsh-feature-hero {
  position: relative;
  background: var(--tsh-bg-deep);
  padding-top: calc(var(--tsh-nav-h) + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  text-align: center;
  color: var(--tsh-text-dark);
  overflow: hidden;
}

.tsh-feature-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  z-index: 0;
}

.tsh-feature-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--tsh-container);
  margin: 0 auto;
  padding: 0 var(--tsh-gutter);
}

.tsh-feature-hero h1 {
  color: var(--tsh-text-dark);
  margin-bottom: 1.25rem;
}

.tsh-feature-hero__sub {
  font-size: 1.125rem;
  color: var(--tsh-muted-dark);
  max-width: 600px;
  margin: 0 auto;
}

/* =====================================================
   INLINE CODE MOCK (SDK snippet)
   ===================================================== */

.tsh-code-card {
  background: var(--tsh-bg-alt);
  border: 1px solid var(--tsh-border-dark);
  border-radius: var(--tsh-radius-lg);
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.tsh-code-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--tsh-border-dark);
  background: rgba(255,255,255,0.03);
}

.tsh-code-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tsh-border-dark);
}

.tsh-code-card__dot:nth-child(1) { background: #FF5F57; }
.tsh-code-card__dot:nth-child(2) { background: #FEBC2E; }
.tsh-code-card__dot:nth-child(3) { background: #28C840; }

.tsh-code-card__filename {
  font-size: 0.75rem;
  color: var(--tsh-muted-dark);
  margin-left: 0.5rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.tsh-code-card__body {
  padding: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
}

.tsh-code-card pre {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--tsh-text-dark);
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
}

.tsh-code-card .c-kw  { color: #C792EA; }
.tsh-code-card .c-fn  { color: #82AAFF; }
.tsh-code-card .c-str { color: #C3E88D; }
.tsh-code-card .c-acc { color: var(--tsh-acid); }
.tsh-code-card .c-cm  { color: var(--tsh-muted-dark); font-style: italic; }
.tsh-code-card .c-num { color: #F78C6C; }
.tsh-code-card .c-obj { color: #FFCB6B; }

/* =====================================================
   PROOF STRIP
   ===================================================== */

.tsh-proof-strip {
  background: var(--tsh-bg-alt);
  padding: clamp(2rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--tsh-border-dark);
  border-bottom: 1px solid var(--tsh-border-dark);
}

.tsh-proof-strip__inner {
  display: flex;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  max-width: var(--tsh-container);
  margin: 0 auto;
  padding: 0 var(--tsh-gutter);
}

.tsh-proof-item {
  text-align: center;
}

.tsh-proof-item__value {
  font-family: 'Clash Display', system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--tsh-acid);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.tsh-proof-item__label {
  font-size: 0.85rem;
  color: var(--tsh-muted-dark);
  letter-spacing: 0.02em;
}

/* =====================================================
   HOW IT WORKS (3-step)
   ===================================================== */

.tsh-steps {
  counter-reset: step-counter;
}

.tsh-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.tsh-step {
  position: relative;
  padding-left: 3.5rem;
}

.tsh-step::before {
  counter-increment: step-counter;
  content: counter(step-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--tsh-acid);
  letter-spacing: 0.05em;
}

.tsh-step__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tsh-text-dark);
  margin-bottom: 0.75rem;
}

.tsh-step__body {
  font-size: 0.95rem;
  color: var(--tsh-muted-dark);
  line-height: 1.7;
}

/* =====================================================
   FEATURE SECTIONS (netcode / anti-cheat on index)
   ===================================================== */

.tsh-feature-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.tsh-feature-block__inner--flip {
  direction: rtl;
}

.tsh-feature-block__inner--flip > * {
  direction: ltr;
}

.tsh-feature-block__text h2 {
  color: var(--tsh-text-light);
  margin-bottom: 1rem;
}

.tsh-feature-block__text p {
  color: var(--tsh-muted-light);
  margin-bottom: 1.5rem;
}

.tsh-feature-block__text ul {
  margin-bottom: 1.5rem;
}

.tsh-feature-block__text ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--tsh-muted-light);
  margin-bottom: 0.75rem;
}

.tsh-feature-block__text ul li i {
  color: var(--tsh-acid-text-on-light);
  flex-shrink: 0;
  margin-top: 0.2rem;
  font-size: 0.9rem;
}

/* ---- On dark feature section ---- */
.tsh-section--dark-alt .tsh-feature-block__text h2,
.tsh-section--dark .tsh-feature-block__text h2 {
  color: var(--tsh-text-dark);
}

.tsh-section--dark-alt .tsh-feature-block__text p,
.tsh-section--dark .tsh-feature-block__text p {
  color: var(--tsh-muted-dark);
}

.tsh-section--dark-alt .tsh-feature-block__text ul li,
.tsh-section--dark .tsh-feature-block__text ul li {
  color: var(--tsh-muted-dark);
}

.tsh-section--dark-alt .tsh-feature-block__text ul li i,
.tsh-section--dark .tsh-feature-block__text ul li i {
  color: var(--tsh-acid);
}

/* ---- Inline SVG latency chart container ---- */
.tsh-latency-chart {
  background: var(--tsh-bg-alt);
  border: 1px solid var(--tsh-border-dark);
  border-radius: var(--tsh-radius-lg);
  padding: 1.5rem;
}

.tsh-latency-chart__labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', monospace;
}

.tsh-latency-chart__label--muted {
  color: var(--tsh-muted-dark);
}

.tsh-latency-chart__label--acid {
  color: var(--tsh-acid);
}

.tsh-latency-chart svg {
  width: 100%;
  height: auto;
}

/* =====================================================
   TESTIMONIALS
   ===================================================== */

.tsh-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.tsh-testimonial {
  background: var(--tsh-bg-alt);
  border: 1px solid var(--tsh-border-dark);
  border-radius: var(--tsh-radius-lg);
  padding: 2rem;
}

.tsh-testimonial__quote {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tsh-text-dark);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.tsh-testimonial__quote::before {
  content: '\201C';
  font-size: 2rem;
  color: var(--tsh-acid);
  line-height: 0;
  vertical-align: -0.4em;
  margin-right: 0.25rem;
}

.tsh-testimonial__author-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tsh-text-dark);
}

.tsh-testimonial__author-role {
  font-size: 0.8rem;
  color: var(--tsh-muted-dark);
  margin-top: 0.2rem;
}

/* =====================================================
   PRICING CARDS (index preview + pricing.html full)
   ===================================================== */

.tsh-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.tsh-pricing-card {
  background: var(--tsh-bg-white);
  border: 2px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius-lg);
  padding: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tsh-pricing-card--highlighted {
  border-color: var(--tsh-acid);
  box-shadow: 0 0 0 1px var(--tsh-acid);
}

.tsh-pricing-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tsh-bg-deep);
  color: var(--tsh-acid);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  white-space: nowrap;
}

.tsh-pricing-card__tier {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tsh-muted-light);
  margin-bottom: 0.75rem;
}

.tsh-pricing-card__price {
  font-family: 'Clash Display', system-ui, sans-serif;
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--tsh-text-light);
  line-height: 1;
}

.tsh-pricing-card__billing {
  font-size: 0.85rem;
  color: var(--tsh-muted-light);
  margin-bottom: 0.5rem;
}

.tsh-pricing-card__ccu {
  font-size: 0.85rem;
  color: var(--tsh-muted-light);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--tsh-border-light);
}

.tsh-pricing-card__features {
  flex: 1;
  margin-bottom: 2rem;
}

.tsh-pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--tsh-muted-light);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.tsh-pricing-card__features li::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23C8FF00' d='M13.5 3.5L6 11 2.5 7.5l-1 1L6 13l8.5-8.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
  margin-top: 1px;
}

/* =====================================================
   FAQ ACCORDION (pricing.html)
   ===================================================== */

.tsh-faq__list {
  max-width: 720px;
  margin: 0 auto;
}

.tsh-faq-item {
  border-bottom: 1px solid var(--tsh-border-light);
}

.tsh-section--dark .tsh-faq-item,
.tsh-section--dark-alt .tsh-faq-item {
  border-bottom-color: var(--tsh-border-dark);
}

.tsh-faq-item__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tsh-text-light);
  transition: color 0.2s;
}

.tsh-section--dark .tsh-faq-item__trigger,
.tsh-section--dark-alt .tsh-faq-item__trigger {
  color: var(--tsh-text-dark);
}

.tsh-faq-item__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tsh-acid-text-on-light);
  transition: transform 0.3s;
  font-size: 0.85rem;
}

.tsh-section--dark .tsh-faq-item__icon,
.tsh-section--dark-alt .tsh-faq-item__icon {
  color: var(--tsh-acid);
}

.tsh-faq-item.is-open .tsh-faq-item__icon {
  transform: rotate(45deg);
}

.tsh-faq-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.tsh-faq-item.is-open .tsh-faq-item__body {
  max-height: 400px;
}

.tsh-faq-item__content {
  padding: 0 0 1.25rem;
  font-size: 0.95rem;
  color: var(--tsh-muted-light);
  line-height: 1.7;
}

.tsh-section--dark .tsh-faq-item__content,
.tsh-section--dark-alt .tsh-faq-item__content {
  color: var(--tsh-muted-dark);
}

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

.tsh-cta-band {
  background: var(--tsh-bg-deep);
  text-align: center;
  padding: clamp(4rem, 8vw, 6rem) 0;
  border-top: 1px solid var(--tsh-border-dark);
}

.tsh-cta-band h2 {
  color: var(--tsh-text-dark);
  margin-bottom: 1rem;
}

.tsh-cta-band p {
  color: var(--tsh-muted-dark);
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.tsh-cta-band__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* =====================================================
   SECTION HEADER (shared heading block)
   ===================================================== */

.tsh-section-head {
  text-align: center;
  margin-bottom: clamp(3rem, 5vw, 4rem);
}

.tsh-section-head h2 {
  color: var(--tsh-text-dark);
  margin-bottom: 0.75rem;
}

.tsh-section-head p {
  color: var(--tsh-muted-dark);
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto;
}

.tsh-section--light .tsh-section-head h2,
.tsh-section--light-alt .tsh-section-head h2,
.tsh-section--white .tsh-section-head h2 {
  color: var(--tsh-text-light);
}

.tsh-section--light .tsh-section-head p,
.tsh-section--light-alt .tsh-section-head p,
.tsh-section--white .tsh-section-head p {
  color: var(--tsh-muted-light);
}

/* =====================================================
   FOOTER
   ===================================================== */

.tsh-footer {
  background: var(--tsh-bg-deep);
  border-top: 1px solid var(--tsh-border-dark);
  padding: clamp(3rem, 6vw, 5rem) 0 0;
}

.tsh-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 3rem;
  max-width: var(--tsh-container);
  margin: 0 auto;
  padding: 0 var(--tsh-gutter);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--tsh-border-dark);
}

.tsh-footer__brand {
  display: flex;
  flex-direction: column;
}

.tsh-footer__col {
  display: flex;
  flex-direction: column;
}

.tsh-footer__brand-logo img {
  height: 28px;
  width: auto;
  margin-bottom: 1rem;
}

.tsh-footer__tagline {
  font-size: 0.875rem;
  color: var(--tsh-muted-dark);
  line-height: 1.6;
  max-width: 240px;
}

.tsh-footer__col-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tsh-text-dark);
  margin-bottom: 1.25rem;
}

.tsh-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tsh-footer__link {
  font-size: 0.875rem;
  color: var(--tsh-muted-dark);
  transition: color 0.2s;
  text-decoration: none;
}

.tsh-footer__link:hover {
  color: var(--tsh-text-dark);
}

.tsh-footer__bottom {
  max-width: var(--tsh-container);
  margin: 0 auto;
  padding: 1.5rem var(--tsh-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.tsh-footer__copyright {
  font-size: 0.8rem;
  color: var(--tsh-muted-dark);
}

.tsh-footer__bottom-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.tsh-footer__bottom-link {
  font-size: 0.8rem;
  color: var(--tsh-muted-dark);
  transition: color 0.2s;
  text-decoration: none;
}

.tsh-footer__bottom-link:hover {
  color: var(--tsh-text-dark);
}

/* =====================================================
   ABOUT PAGE — TEAM GRID
   ===================================================== */

.tsh-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}

.tsh-team-card {
  background: var(--tsh-bg-white);
  border: 1px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tsh-team-card__portrait {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tsh-bg-light-alt);
  position: relative;
}

.tsh-team-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.tsh-team-card__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Clash Display', system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--tsh-muted-light);
  background: var(--tsh-bg-light-alt);
}

.tsh-team-card__body {
  padding: 1.5rem;
  flex: 1;
}

.tsh-team-card__name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tsh-text-light);
  margin-bottom: 0.25rem;
}

.tsh-team-card__role {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tsh-acid-text-on-light);
  margin-bottom: 1rem;
}

.tsh-team-card__bio {
  font-size: 0.9rem;
  color: var(--tsh-muted-light);
  line-height: 1.65;
}

/* =====================================================
   CONTACT PAGE — FORM + INFO
   ===================================================== */

.tsh-contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: start;
}

.tsh-contact-info h3 {
  color: var(--tsh-text-light);
  margin-bottom: 1.5rem;
}

.tsh-contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tsh-contact-info__item i {
  color: var(--tsh-acid-text-on-light);
  font-size: 1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.tsh-contact-info__item span {
  font-size: 0.95rem;
  color: var(--tsh-muted-light);
  line-height: 1.5;
}

.tsh-contact-info__item a {
  color: var(--tsh-acid-text-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Form ---- */
.tsh-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tsh-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.tsh-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tsh-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tsh-text-light);
}

.tsh-section--dark .tsh-field label,
.tsh-section--dark-alt .tsh-field label {
  color: var(--tsh-text-dark);
}

.tsh-field input,
.tsh-field textarea,
.tsh-field select {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
  background: var(--tsh-bg-white);
  color: var(--tsh-text-light);
  border: 1.5px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

.tsh-field input:focus,
.tsh-field textarea:focus,
.tsh-field select:focus {
  border-color: var(--tsh-acid-text-on-light);
}

.tsh-field textarea {
  min-height: 140px;
  resize: vertical;
}

.tsh-form__success {
  display: none;
  padding: 1rem 1.25rem;
  background: rgba(200,255,0,0.08);
  border: 1px solid var(--tsh-acid-text-on-light);
  border-radius: var(--tsh-radius);
  color: var(--tsh-acid-text-on-light);
  font-size: 0.9rem;
}

.tsh-form__success.is-visible {
  display: block;
}

/* =====================================================
   DOCS PAGES (docs/index, quickstart, api-reference)
   ===================================================== */

.tsh-docs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  align-items: start;
}

.tsh-docs-sidebar {
  position: sticky;
  top: calc(var(--tsh-nav-h) + 2rem);
  background: var(--tsh-bg-white);
  border: 1px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius-lg);
  padding: 1.5rem;
}

.tsh-docs-sidebar__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tsh-muted-light);
  margin-bottom: 1rem;
}

.tsh-docs-sidebar__links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tsh-docs-sidebar__link {
  font-size: 0.875rem;
  color: var(--tsh-muted-light);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
  text-decoration: none;
  display: block;
}

.tsh-docs-sidebar__link:hover,
.tsh-docs-sidebar__link.is-active {
  color: var(--tsh-text-light);
  background: var(--tsh-bg-light);
}

.tsh-docs-sidebar__link.is-active {
  color: var(--tsh-acid-text-on-light);
  font-weight: 600;
}

.tsh-docs-content {
  background: var(--tsh-bg-white);
  border: 1px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius-lg);
  padding: 2.5rem;
  color: var(--tsh-text-light);
  max-width: 720px;
}

.tsh-docs-content h1,
.tsh-docs-content h2,
.tsh-docs-content h3,
.tsh-docs-content h4 {
  color: var(--tsh-text-light);
  margin-bottom: 0.75rem;
  margin-top: 2rem;
}

.tsh-docs-content h1:first-child,
.tsh-docs-content h2:first-child {
  margin-top: 0;
}

.tsh-docs-content p {
  color: var(--tsh-muted-light);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.tsh-docs-content ul,
.tsh-docs-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  list-style: disc;
}

.tsh-docs-content ol {
  list-style: decimal;
}

.tsh-docs-content li {
  color: var(--tsh-muted-light);
  margin-bottom: 0.4rem;
  line-height: 1.6;
}

.tsh-docs-content code {
  font-size: 0.85em;
  background: var(--tsh-bg-light-alt);
  color: var(--tsh-acid-text-on-light);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.tsh-docs-content pre {
  background: var(--tsh-bg-alt);
  border: 1px solid var(--tsh-border-dark);
  border-radius: var(--tsh-radius);
  padding: 1.25rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.tsh-docs-content pre code {
  background: none;
  color: var(--tsh-text-dark);
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.7;
}

.tsh-docs-content a {
  color: var(--tsh-acid-text-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tsh-docs-content hr {
  border: none;
  border-top: 1px solid var(--tsh-border-light);
  margin: 2rem 0;
}

.tsh-docs-content .tsh-code-card {
  margin-bottom: 1.5rem;
}

/* Docs index quick-links grid */
.tsh-docs-quicklinks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.tsh-docs-quicklink-card {
  background: var(--tsh-bg-white);
  border: 1px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius-lg);
  padding: 1.75rem;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tsh-docs-quicklink-card:hover {
  border-color: var(--tsh-acid-text-on-light);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.tsh-docs-quicklink-card__icon {
  width: 40px;
  height: 40px;
  background: var(--tsh-bg-light-alt);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tsh-acid-text-on-light);
  font-size: 1.1rem;
}

.tsh-docs-quicklink-card h3 {
  font-size: 1.1rem;
  color: var(--tsh-text-light);
}

.tsh-docs-quicklink-card p {
  font-size: 0.875rem;
  color: var(--tsh-muted-light);
  line-height: 1.6;
}

/* =====================================================
   DEVLOG (blog) PAGES
   ===================================================== */

/* ---- devlog/index.html ---- */
.tsh-devlog-featured {
  background: var(--tsh-bg-white);
  border: 1px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: stretch;
  text-decoration: none;
  transition: box-shadow 0.2s;
  max-width: 900px;
  margin: 0 auto;
}

.tsh-devlog-featured:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.tsh-devlog-featured__cover {
  overflow: hidden;
  min-height: 280px;
}

.tsh-devlog-featured__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsh-devlog-featured__body {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tsh-devlog-featured__tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tsh-acid-text-on-light);
  margin-bottom: 1rem;
}

.tsh-devlog-featured__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tsh-text-light);
  margin-bottom: 0.75rem;
  font-family: 'Clash Display', system-ui, sans-serif;
  line-height: 1.25;
}

.tsh-devlog-featured__excerpt {
  font-size: 0.9rem;
  color: var(--tsh-muted-light);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.tsh-devlog-featured__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--tsh-muted-light);
}

/* ---- Article card grid ---- */
.tsh-article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.tsh-article-card {
  background: var(--tsh-bg-white);
  border: 1px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.tsh-article-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-color: var(--tsh-border-light);
}

.tsh-article-card__cover {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--tsh-bg-light-alt);
}

.tsh-article-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsh-article-card__body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tsh-article-card__tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.tsh-article-card__tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tsh-acid-text-on-light);
  background: rgba(59,110,0,0.08);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.tsh-article-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tsh-text-light);
  margin-bottom: 0.6rem;
  line-height: 1.35;
  font-family: 'Clash Display', system-ui, sans-serif;
}

.tsh-article-card__excerpt {
  font-size: 0.85rem;
  color: var(--tsh-muted-light);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1rem;
}

.tsh-article-card__meta {
  font-size: 0.78rem;
  color: var(--tsh-muted-light);
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: auto;
}

/* ---- Article page (devlog/slug.html) ---- */

.tsh-article-hero {
  background: var(--tsh-bg-deep);
  padding-top: var(--tsh-nav-h);
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}

.tsh-article-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  z-index: 0;
}

.tsh-article-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--tsh-container);
  margin: 0 auto;
  padding: 3rem var(--tsh-gutter);
  width: 100%;
}

.tsh-article-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--tsh-muted-dark);
  margin-bottom: 1.5rem;
  text-decoration: none;
  transition: color 0.2s;
}

.tsh-article-hero__back:hover {
  color: var(--tsh-acid);
}

.tsh-article-hero h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  color: var(--tsh-text-dark);
  margin-bottom: 1rem;
  max-width: 720px;
}

.tsh-article-hero__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.85rem;
  color: var(--tsh-muted-dark);
  flex-wrap: wrap;
}

.tsh-article-body {
  background: var(--tsh-bg-white);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.tsh-article-body__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--tsh-gutter);
}

.tsh-article-body__inner h2 {
  font-size: 1.5rem;
  color: var(--tsh-text-light);
  margin: 2rem 0 0.75rem;
}

.tsh-article-body__inner h3 {
  font-size: 1.2rem;
  color: var(--tsh-text-light);
  margin: 1.5rem 0 0.6rem;
}

.tsh-article-body__inner p {
  color: var(--tsh-muted-light);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.tsh-article-body__inner ul,
.tsh-article-body__inner ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  list-style: disc;
}

.tsh-article-body__inner ol {
  list-style: decimal;
}

.tsh-article-body__inner li {
  color: var(--tsh-muted-light);
  margin-bottom: 0.4rem;
  line-height: 1.65;
}

.tsh-article-body__inner pre {
  background: var(--tsh-bg-alt);
  border: 1px solid var(--tsh-border-dark);
  border-radius: var(--tsh-radius);
  padding: 1.25rem;
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.tsh-article-body__inner pre code {
  font-size: 0.85rem;
  color: var(--tsh-text-dark);
  line-height: 1.7;
  background: none;
  padding: 0;
}

.tsh-article-body__inner code {
  font-size: 0.85em;
  background: var(--tsh-bg-light-alt);
  color: var(--tsh-acid-text-on-light);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.tsh-article-body__inner a {
  color: var(--tsh-acid-text-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tsh-article-body__inner blockquote {
  border-left: 3px solid var(--tsh-acid-text-on-light);
  padding-left: 1.25rem;
  color: var(--tsh-muted-light);
  font-style: italic;
  margin: 1.5rem 0;
}

.tsh-article-lead {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--tsh-text-light);
  margin-bottom: 2rem;
}

.tsh-article-cta {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--tsh-bg-light);
  border: 1px solid var(--tsh-border-light);
  border-left: 4px solid var(--tsh-acid-text-on-light);
  border-radius: var(--tsh-radius);
}

.tsh-article-cta p {
  color: var(--tsh-muted-light);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.tsh-article-cta a {
  color: var(--tsh-acid-text-on-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================
   AUTH PAGES (login/index.html, login/register.html)
   ===================================================== */

.tsh-auth-page {
  min-height: 100vh;
  background: var(--tsh-bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem var(--tsh-gutter);
}

.tsh-auth-card {
  background: var(--tsh-bg-alt);
  border: 1px solid var(--tsh-border-dark);
  border-radius: var(--tsh-radius-lg);
  padding: clamp(2rem, 5vw, 3rem);
  width: 100%;
  max-width: 440px;
}

.tsh-auth-card__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.tsh-auth-card__logo img {
  height: 32px;
  width: auto;
}

.tsh-auth-card h1 {
  font-size: 1.75rem;
  color: var(--tsh-text-dark);
  text-align: center;
  margin-bottom: 0.5rem;
}

.tsh-auth-card__sub {
  text-align: center;
  font-size: 0.9rem;
  color: var(--tsh-muted-dark);
  margin-bottom: 2rem;
}

.tsh-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.tsh-auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tsh-auth-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tsh-text-dark);
}

.tsh-auth-field input {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
  background: var(--tsh-bg-deep);
  color: var(--tsh-text-dark);
  border: 1.5px solid var(--tsh-border-dark);
  border-radius: var(--tsh-radius);
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}

.tsh-auth-field input:focus {
  border-color: var(--tsh-acid);
}

.tsh-auth-field input::placeholder {
  color: var(--tsh-muted-dark);
}

.tsh-auth-form__submit {
  margin-top: 0.5rem;
}

.tsh-auth-form__submit .tsh-btn {
  width: 100%;
  justify-content: center;
  padding: 0.85rem;
}

.tsh-auth-form__error {
  display: none;
  padding: 0.75rem 1rem;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--tsh-radius);
  color: #FCA5A5;
  font-size: 0.875rem;
  text-align: center;
}

.tsh-auth-form__error.is-visible {
  display: block;
}

.tsh-auth-form__confirm {
  display: none;
  padding: 1rem;
  background: rgba(200,255,0,0.07);
  border: 1px solid rgba(200,255,0,0.25);
  border-radius: var(--tsh-radius);
  color: var(--tsh-acid);
  font-size: 0.875rem;
  text-align: center;
  line-height: 1.6;
}

.tsh-auth-form__confirm.is-visible {
  display: block;
}

.tsh-auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--tsh-muted-dark);
}

.tsh-auth-links a {
  color: var(--tsh-acid);
  text-decoration: none;
  transition: opacity 0.2s;
}

.tsh-auth-links a:hover {
  opacity: 0.8;
}

.tsh-auth-links__divider {
  width: 100%;
  border-top: 1px solid var(--tsh-border-dark);
  padding-top: 0.75rem;
  text-align: center;
}

.tsh-auth-legal {
  text-align: center;
  font-size: 0.78rem;
  color: var(--tsh-muted-dark);
  margin-top: 1.5rem;
  line-height: 1.5;
}

.tsh-auth-legal a {
  color: var(--tsh-muted-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =====================================================
   LEGAL PAGES (owned by abw-legal — CSS readiness)
   ===================================================== */

.tsh-legal-page {
  background: var(--tsh-bg-white);
  color: var(--tsh-text-light);
  padding: var(--tsh-section-pad) 0;
}

.tsh-legal-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--tsh-gutter);
  background: var(--tsh-bg-white);
  color: var(--tsh-text-light);
}

.tsh-legal-content h1 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  color: var(--tsh-text-light);
  margin-bottom: 0.5rem;
}

.tsh-legal-content h2 {
  font-size: 1.4rem;
  color: var(--tsh-text-light);
  margin: 2.5rem 0 0.75rem;
}

.tsh-legal-content h3 {
  font-size: 1.1rem;
  color: var(--tsh-text-light);
  margin: 1.75rem 0 0.6rem;
}

.tsh-legal-content p {
  color: var(--tsh-muted-light);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.tsh-legal-content ul,
.tsh-legal-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  list-style: disc;
}

.tsh-legal-content ol {
  list-style: decimal;
}

.tsh-legal-content li {
  color: var(--tsh-muted-light);
  margin-bottom: 0.4rem;
  line-height: 1.6;
}

.tsh-legal-content a {
  color: var(--tsh-acid-text-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tsh-legal-content .tsh-legal-updated {
  font-size: 0.85rem;
  color: var(--tsh-muted-light);
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--tsh-border-light);
}

/* =====================================================
   PRODUCT PAGE — Studio profiles
   ===================================================== */

.tsh-studio-profiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.tsh-studio-card {
  background: var(--tsh-bg-white);
  border: 1px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius-lg);
  padding: 2rem;
}

.tsh-studio-card__icon {
  width: 48px;
  height: 48px;
  background: var(--tsh-bg-light-alt);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tsh-acid-text-on-light);
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

.tsh-studio-card h3 {
  font-size: 1.15rem;
  color: var(--tsh-text-light);
  margin-bottom: 0.6rem;
}

.tsh-studio-card p {
  font-size: 0.9rem;
  color: var(--tsh-muted-light);
  line-height: 1.65;
}

/* =====================================================
   ARCHITECTURE SVG DIAGRAM container
   ===================================================== */

.tsh-arch-diagram {
  background: var(--tsh-bg-white);
  border: 1px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius-lg);
  padding: 2.5rem;
  overflow: auto;
}

.tsh-arch-diagram svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* =====================================================
   DETECTION PIPELINE SVG container
   ===================================================== */

.tsh-detection-diagram {
  background: var(--tsh-bg-white);
  border: 1px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius-lg);
  padding: 2rem;
  display: flex;
  justify-content: center;
  overflow: auto;
}

.tsh-detection-diagram svg {
  max-width: 100%;
  height: auto;
}

/* =====================================================
   SIGNAL LIST (features/anti-cheat signals)
   ===================================================== */

.tsh-signal-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.tsh-signal-item {
  background: var(--tsh-bg-white);
  border: 1px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius-lg);
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.tsh-signal-item--on-dark {
  background: var(--tsh-bg-alt);
  border-color: var(--tsh-border-dark);
}

.tsh-signal-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(200,255,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tsh-acid);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.tsh-signal-item__icon--on-light {
  background: rgba(59,110,0,0.1);
  color: var(--tsh-acid-text-on-light);
}

.tsh-signal-item h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tsh-text-light);
  margin-bottom: 0.4rem;
}

.tsh-signal-item--on-dark h4 {
  color: var(--tsh-text-dark);
}

.tsh-signal-item p {
  font-size: 0.875rem;
  color: var(--tsh-muted-light);
  line-height: 1.6;
}

.tsh-signal-item--on-dark p {
  color: var(--tsh-muted-dark);
}

/* =====================================================
   INFO PANEL / PROSE BLOCK (general reusable)
   ===================================================== */

.tsh-prose-block {
  max-width: 720px;
  margin: 0 auto;
}

.tsh-prose-block h2 {
  color: var(--tsh-text-light);
  margin-bottom: 1rem;
}

.tsh-prose-block p {
  color: var(--tsh-muted-light);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.tsh-section--dark .tsh-prose-block h2,
.tsh-section--dark-alt .tsh-prose-block h2 {
  color: var(--tsh-text-dark);
}

.tsh-section--dark .tsh-prose-block p,
.tsh-section--dark-alt .tsh-prose-block p {
  color: var(--tsh-muted-dark);
}

/* =====================================================
   GENERAL CARD GRID (2-col / 3-col flexible)
   ===================================================== */

.tsh-card-grid--2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.tsh-card-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.tsh-card {
  background: var(--tsh-bg-alt);
  border: 1px solid var(--tsh-border-dark);
  border-radius: var(--tsh-radius-lg);
  padding: 1.75rem;
}

.tsh-card--light {
  background: var(--tsh-bg-white);
  border-color: var(--tsh-border-light);
}

.tsh-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(200,255,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tsh-acid);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.tsh-card--light .tsh-card__icon {
  background: rgba(59,110,0,0.1);
  color: var(--tsh-acid-text-on-light);
}

.tsh-card h3 {
  font-size: 1.1rem;
  color: var(--tsh-text-dark);
  margin-bottom: 0.6rem;
}

.tsh-card--light h3 {
  color: var(--tsh-text-light);
}

.tsh-card p {
  font-size: 0.875rem;
  color: var(--tsh-muted-dark);
  line-height: 1.6;
}

.tsh-card--light p {
  color: var(--tsh-muted-light);
}

/* =====================================================
   COOKIE BANNER (abw-legal injects; CSS readiness here)
   ===================================================== */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--tsh-bg-alt);
  border-top: 1px solid var(--tsh-border-dark);
  padding: 1.25rem 0;
}

.cookie-banner__inner {
  max-width: var(--tsh-container);
  margin: 0 auto;
  padding: 0 var(--tsh-gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookie-banner__text {
  flex: 1;
  font-size: 0.875rem;
  color: var(--tsh-muted-dark);
  line-height: 1.55;
  min-width: 200px;
}

.cookie-banner__text a {
  color: var(--tsh-acid);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cookie-banner__btn {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1.25rem;
  border-radius: var(--tsh-radius);
  cursor: pointer;
  border: 1.5px solid var(--tsh-border-dark);
  background: transparent;
  color: var(--tsh-muted-dark);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.cookie-banner__btn--primary {
  background: var(--tsh-acid);
  color: var(--tsh-acid-label);
  border-color: var(--tsh-acid);
}

.cookie-banner__btn--primary:hover {
  background: #d4ff33;
  border-color: #d4ff33;
}

.cookie-banner__btn--secondary {
  background: transparent;
  color: var(--tsh-muted-dark);
  border-color: var(--tsh-border-dark);
}

.cookie-banner__btn--secondary:hover {
  color: var(--tsh-text-dark);
  border-color: var(--tsh-text-dark);
}

/* =====================================================
   UTILITY
   ===================================================== */

.tsh-text-center { text-align: center; }
.tsh-mt-1  { margin-top: 1rem; }
.tsh-mt-2  { margin-top: 2rem; }
.tsh-mb-1  { margin-bottom: 1rem; }
.tsh-mb-2  { margin-bottom: 2rem; }
.tsh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================
   RESPONSIVE — Tablet (768px)
   ===================================================== */

@media (max-width: 900px) {
  .tsh-hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .tsh-steps__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .tsh-feature-block__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .tsh-feature-block__inner--flip {
    direction: ltr;
  }

  .tsh-testimonials__grid {
    grid-template-columns: 1fr;
  }

  .tsh-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin: 0 auto;
  }

  .tsh-footer__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .tsh-team-grid {
    grid-template-columns: 1fr;
  }

  .tsh-contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .tsh-docs-layout {
    grid-template-columns: 1fr;
  }

  .tsh-docs-sidebar {
    position: static;
  }

  .tsh-devlog-featured {
    grid-template-columns: 1fr;
  }

  .tsh-devlog-featured__cover {
    min-height: 200px;
  }

  .tsh-article-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tsh-signal-list {
    grid-template-columns: 1fr;
  }

  .tsh-docs-quicklinks {
    grid-template-columns: 1fr;
  }

  .tsh-studio-profiles {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   RESPONSIVE — Mobile (480px)
   ===================================================== */

@media (max-width: 680px) {
  .tsh-nav__links,
  .tsh-nav__actions {
    display: none;
  }

  .tsh-nav__hamburger {
    display: flex;
  }

  .tsh-footer__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .tsh-footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .tsh-article-grid {
    grid-template-columns: 1fr;
  }

  .tsh-card-grid--2,
  .tsh-card-grid--3 {
    grid-template-columns: 1fr;
  }

  .tsh-form-row {
    grid-template-columns: 1fr;
  }

  .tsh-hero__ctas {
    flex-direction: column;
    align-items: flex-start;
  }

  .tsh-cta-band__actions {
    flex-direction: column;
    align-items: center;
  }

  .tsh-proof-strip__inner {
    flex-direction: column;
    gap: 2rem;
  }

  .tsh-docs-quicklinks {
    grid-template-columns: 1fr;
  }

  .tsh-devlog-featured {
    grid-template-columns: 1fr;
  }

  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.8rem; }

  .tsh-auth-card {
    padding: 2rem 1.5rem;
  }

  .tsh-pricing-grid {
    grid-template-columns: 1fr;
  }

  pre {
    font-size: 0.78rem;
  }
}

@media (max-width: 420px) {
  :root {
    --tsh-gutter: 1rem;
  }

  .tsh-hero {
    padding-top: calc(var(--tsh-nav-h) + 2.5rem);
    padding-bottom: 2.5rem;
  }

  .tsh-auth-card {
    padding: 1.5rem 1.25rem;
  }
}

/* =====================================================
   SUPPLEMENTAL STYLES (agent-2 additions)
   Aliases + responsive helpers for all pages
   ===================================================== */

/* ---- Docs grid overflow fix ---- */
.tsh-docs-sidebar,
.tsh-docs-content {
  min-width: 0;
}

/* ---- Responsive layout helpers (used in features/* and product) ---- */

/* Two-column comparison grid (light bg sections) */
.tsh-two-col-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Signal/card grid (2-col on anti-cheat signals) */
.tsh-signal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Stats row (3-col stat band) */
.tsh-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .tsh-two-col-compare {
    grid-template-columns: 1fr;
  }

  .tsh-signal-grid {
    grid-template-columns: 1fr;
  }

  .tsh-stats-row {
    grid-template-columns: 1fr;
  }
}

/* ---- Feature block alias (anti-cheat / feature pages use .tsh-feature-block) ---- */
/* .tsh-feature-block wraps the two-column layout from __inner */
.tsh-feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.tsh-feature-block--flip {
  direction: rtl;
}

.tsh-feature-block--flip > * {
  direction: ltr;
}

.tsh-feature-block__visual {
  min-width: 0;
}

@media (max-width: 768px) {
  .tsh-feature-block {
    grid-template-columns: 1fr;
    gap: 2rem;
    direction: ltr;
  }

  .tsh-feature-block--flip {
    direction: ltr;
  }
}

/* ---- Feature hero actions ---- */
.tsh-feature-hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ---- Auth card BEM aliases ---- */
/* Agent-1 styled via element selectors; these aliases resolve orphan BEM classes */
.tsh-auth-card__header {
  text-align: center;
  margin-bottom: 2rem;
}

.tsh-auth-card__heading {
  font-size: 1.75rem;
  color: var(--tsh-text-dark);
  text-align: center;
  margin-bottom: 0.5rem;
}

.tsh-auth-card__alt {
  text-align: center;
  font-size: 0.875rem;
  color: var(--tsh-muted-dark);
  margin-top: 1.5rem;
}

.tsh-auth-card__alt-link {
  color: var(--tsh-acid);
  text-decoration: none;
}

.tsh-auth-card__alt-link:hover {
  opacity: 0.8;
}

.tsh-auth-card__legal {
  text-align: center;
  font-size: 0.78rem;
  color: var(--tsh-muted-dark);
  margin-top: 1.25rem;
  line-height: 1.5;
}

.tsh-auth-card__legal-link {
  color: var(--tsh-muted-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Auth field BEM aliases */
.tsh-auth-field__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tsh-text-dark);
}

.tsh-auth-field__input {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
  background: var(--tsh-bg-deep);
  color: var(--tsh-text-dark);
  border: 1.5px solid var(--tsh-border-dark);
  border-radius: var(--tsh-radius);
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}

.tsh-auth-field__input:focus {
  border-color: var(--tsh-acid);
}

.tsh-auth-field__input::placeholder {
  color: var(--tsh-muted-dark);
}

/* ---- Contact page BEM aliases ---- */
/* Agent-1 used .tsh-contact-info h3, __item i/span/a as element selectors */

.tsh-contact-info__heading {
  color: var(--tsh-text-light);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.tsh-contact-info__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.tsh-contact-info__icon {
  color: var(--tsh-acid-text-on-light);
  font-size: 1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tsh-contact-info__label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tsh-muted-light);
  margin-bottom: 0.2rem;
}

.tsh-contact-info__value {
  font-size: 0.95rem;
  color: var(--tsh-muted-light);
  line-height: 1.5;
  text-decoration: none;
}

a.tsh-contact-info__value {
  color: var(--tsh-acid-text-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tsh-contact-info__note {
  font-size: 0.875rem;
  color: var(--tsh-muted-light);
  line-height: 1.6;
  border-top: 1px solid var(--tsh-border-light);
  padding-top: 1.25rem;
  margin-top: 0.25rem;
}

.tsh-contact-form-wrap {
  /* grid child — no extra width constraint needed */
}

.tsh-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ---- Contact/form BEM aliases (mirrors .tsh-field element selectors) ---- */
.tsh-form__group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tsh-form__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tsh-text-light);
}

.tsh-form__input {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
  background: var(--tsh-bg-white);
  color: var(--tsh-text-light);
  border: 1.5px solid var(--tsh-border-light);
  border-radius: var(--tsh-radius);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

.tsh-form__input:focus {
  border-color: var(--tsh-acid-text-on-light);
}

.tsh-form__textarea {
  min-height: 140px;
  resize: vertical;
}

.tsh-form__submit {
  align-self: flex-start;
}

/* ---- Section heading alias ---- */
.tsh-section-head__title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--tsh-text-light);
  margin-bottom: 2rem;
}

.tsh-section--dark .tsh-section-head__title,
.tsh-section--dark-alt .tsh-section-head__title {
  color: var(--tsh-text-dark);
}

/* ---- Subhero light variant ---- */
.tsh-subhero__sub--light {
  color: var(--tsh-muted-light);
}

/* ---- Devlog article card BEM aliases ---- */
/* Agent-1 styled .tsh-article-card__meta as container; these add child tokens */
.tsh-article-card__author {
  color: var(--tsh-muted-light);
}

.tsh-article-card__date {
  color: var(--tsh-muted-light);
}

/* Article card as a full-card link */
.tsh-article-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}

.tsh-article-card__link:hover {
  opacity: 0.85;
}

/* ---- Devlog featured BEM aliases ---- */
.tsh-devlog-featured__author {
  color: var(--tsh-muted-light);
  font-size: 0.85rem;
}

.tsh-devlog-featured__date {
  color: var(--tsh-muted-light);
  font-size: 0.85rem;
}

/* .tsh-devlog-featured__label alias (agent-1 already has __tag; __label = same style) */
.tsh-devlog-featured__label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tsh-acid);
  background: rgba(200,255,0,0.1);
  border: 1px solid rgba(200,255,0,0.25);
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  margin-bottom: 0.75rem;
}

/* ---- Article hero author ---- */
.tsh-article-hero__author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tsh-muted-dark);
  font-size: 0.85rem;
}

/* ---- Docs quicklink card link ---- */
.tsh-docs-quicklink-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tsh-acid-text-on-light);
  text-decoration: none;
  margin-top: 0.75rem;
}

.tsh-docs-quicklink-card__link::after {
  content: '\2192';
  font-size: 0.9em;
}

/* ---- Pricing page aliases ---- */
/* Agent-1 uses tsh-pricing-card--highlighted; HTML uses --highlight */
.tsh-pricing-card--highlight {
  border-color: var(--tsh-acid);
  box-shadow: 0 0 0 1px var(--tsh-acid);
}

.tsh-pricing-card__header {
  margin-bottom: 1.5rem;
}

.tsh-pricing-card__amount {
  font-family: 'Clash Display', system-ui, sans-serif;
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--tsh-text-light);
  line-height: 1;
}

.tsh-pricing-card__period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--tsh-muted-light);
  margin-left: 0.25rem;
}

.tsh-pricing-card__cta {
  margin-top: auto;
  display: block;
  text-align: center;
}

.tsh-pricing-note {
  max-width: 720px;
  margin: 2rem auto 0;
  font-size: 0.875rem;
  color: var(--tsh-muted-light);
  text-align: center;
  line-height: 1.6;
}

.tsh-link--accent-light {
  color: var(--tsh-acid);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* .tsh-faq is a JS hook container for FAQ accordion; item styling on .tsh-faq-item */
/* JS state hook, no styling */

/* ---- Product page feature-block list aliases ---- */
.tsh-feature-block__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tsh-feature-block__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--tsh-muted-light);
  line-height: 1.5;
}

.tsh-feature-block__list li i {
  color: var(--tsh-acid-text-on-light);
  flex-shrink: 0;
  margin-top: 0.2rem;
  font-size: 0.9rem;
}

/* On dark sections */
.tsh-section--dark-alt .tsh-feature-block__list li,
.tsh-section--dark .tsh-feature-block__list li {
  color: var(--tsh-muted-dark);
}

.tsh-section--dark-alt .tsh-feature-block__list li i,
.tsh-section--dark .tsh-feature-block__list li i {
  color: var(--tsh-acid);
}

/* --light modifier: forced light-theme list (in dark section but uses light colors) */
.tsh-feature-block__list--light li {
  color: var(--tsh-muted-light);
}

.tsh-feature-block__list--light li i {
  color: var(--tsh-acid-text-on-light);
}

/* ---- Featured devlog card contrast fixes ---- */
/* On white bg: acid #C8FF00 = 1.07:1; muted #889BAB = 3.0:1. Both fail. */
.tsh-devlog-featured__label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 0 0 0.75rem;
  color: var(--tsh-acid-text-on-light);
}

/* Section-aware label override (redundant with base rule, kept as specificity guard) */
.tsh-section--white .tsh-devlog-featured__label,
.tsh-section--light .tsh-devlog-featured__label,
.tsh-section--light-alt .tsh-devlog-featured__label {
  color: var(--tsh-acid-text-on-light);
  background: transparent;
  border: none;
}

/* ---- Overflow guard: code cards must not force viewport-width expansion ---- */
.tsh-code-card {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.tsh-code-card__body {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.tsh-code-card pre {
  min-width: 0;
  display: block;
}

/* docs-content constrains child code-card widths to content column width */
.tsh-docs-content {
  min-width: 0;
  max-width: min(720px, 100%);
  overflow-x: hidden;
}

/* Accent link on light bg uses darker acid text, not raw acid */
.tsh-link--accent-light {
  color: var(--tsh-acid-text-on-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* .tsh-faq - JS accordion container; items use .tsh-faq-item */
.tsh-faq {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* On light-top pages the nav bg is white; ghost-on-dark becomes unreadable.
   Override to use dark-readable muted text. */
.tsh-page--light-top .tsh-nav .tsh-btn--ghost-on-dark {
  color: var(--tsh-muted-light);
}

.tsh-page--light-top .tsh-nav .tsh-btn--ghost-on-dark:hover {
  color: var(--tsh-text-light);
}