body {
  font-family: var(--font-main);
}

* {
  font-family: var(--font-main);
}

:root {
  --content-width: 1310px;
  --main-padding: 30px;
  --color-main: #26E3DD;
  --color-main-hover: #07BDB8;
  --color-main-disabled: #CDF2F1;
  --color-black-1: #0E1424;
  --color-black-1-hover: #0E14240F;
  --color-white: #FFFFFF;
  --color-text-muted: #666666;
  --color-text-secondary: #999999;
  --color-icon-secondary: #8C8C8C;
  --color-border-default: #DDDDDD;
  --color-link: #094F9C;
  --color-error: #F54B46;
  --color-input-background: #FEFEFF;
  --color-input-background-hover: #FAFAFA;
  --color-surface-muted: #F8F9FC;
  --color-overlay-black-6: rgba(0, 0, 0, 0.06);
  --valki-control-height: 44px;
  --valki-control-radius: 12px;
  --valki-control-transition: 200ms ease;
  --valki-blog-media-aspect-ratio: 16 / 9;
  --valki-blog-card-radius: 12px;
  --valki-blog-control-radius: 12px;
  --valki-blog-divider-color: #ECEEF2;
  --valki-blog-media-hover-scale: 1.1;
  --valki-blog-media-transition: 300ms ease;
  --valki-blog-detail-surface: #F9FAFB;
  --valki-blog-detail-divider: #EAEAEA;
  --valki-blog-detail-active-bg: rgba(38, 227, 221, 0.08);
  --valki-blog-detail-card-hover: rgba(14, 20, 36, 0.06);
  --valki-blog-detail-sticky-shadow: 0 4px 12px rgba(7, 31, 30, 0.08);

  /* Trademark superscript — ~50–60% cap height, top-right of preceding text */
  --valki-tm-font-size: 0.55em;
  --valki-tm-shift: 0.02em;
}

/* Markup: …AI<span class="valki-tm">™</span> — inherits color/weight; scales with parent font-size */
.valki-tm,
sup.valki-tm {
  font-size: var(--valki-tm-font-size);
  font-weight: inherit;
  font-style: normal;
  line-height: 0;
  vertical-align: super;
  position: relative;
  top: var(--valki-tm-shift);
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}

sup.valki-tm {
  bottom: auto;
}

.valki-main-container {
  display: grid;
  grid-template-columns: minmax(var(--main-padding), 1fr) min(var(--content-width), calc(100% - 2*var(--main-padding))) minmax(var(--main-padding), 1fr);
}

.valki-main-container>* {
  grid-column: 2;
}

@media (max-width: 991px) {
  :root {
    --main-padding: 16px;
  }
}

.valki-font-regular {
  font-weight: 400;
}

.valki-font-medium {
  font-weight: 500;
}

.valki-font-semibold {
  font-weight: 600;
}

.valki-font-bold {
  font-weight: 700;
}

.valki-font-18 {
  font-size: 18px;
}

.valki-font-16 {
  font-size: 16px;
}

.valki-font-14 {
  font-size: 14px;
}

.valki-font-12 {
  font-size: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
