@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Base variables ────────────────────────────────────────────────── */

:root {
  --md-text-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --md-code-font: "JetBrains Mono", SFMono-Regular, monospace;
  --md-primary-fg-color: #3d7ea6;
  --md-primary-bg-color: #fff;
  --md-accent-fg-color: #5a9ec2;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #6cb4d9;
  --md-primary-bg-color: #1a1a2e;
  --md-accent-fg-color: #5a8abf;
}

/* ── Global typography ─────────────────────────────────────────────── */

.md-typeset {
  font-size: 0.82rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  letter-spacing: -0.02em;
  font-weight: 700;
}

.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ── Homepage: full-width layout (no overflow hacks) ───────────────── */

.md-main .md-main__inner:has(.tx-hero) {
  margin: 0;
  max-width: none;
  padding: 0;
}

article.md-content__inner:has(> .tx-hero:first-child) {
  padding: 0;
  margin: 0;
}

article.md-content__inner:has(> .tx-hero:first-child)::before {
  display: none;
}

/* Constrain non-hero, non-grid content to readable width */
article.md-content__inner:has(> .tx-hero:first-child) > *:not(.tx-hero):not(.feature-grid) {
  max-width: 61rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* ── Hero section ──────────────────────────────────────────────────── */

.tx-hero {
  box-sizing: border-box;
  padding: 2.5rem max(2rem, calc(50% - 22rem)) 1.5rem;
  color: var(--md-primary-bg-color);
  background: linear-gradient(135deg, #1a3a4a 0%, #2a6585 40%, #3d5a8a 100%);
}

[data-md-color-scheme="slate"] .tx-hero {
  background: linear-gradient(135deg, #0f2530 0%, #1a3f55 40%, #2a3860 100%);
}

.tx-hero h1 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
}

.tx-hero p {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 36rem;
  color: rgba(255, 255, 255, 0.82);
}

.tx-hero .md-button {
  margin-top: 1rem;
  margin-right: 0.5rem;
  padding: 0.5rem 1.4rem;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0;
  transition: all 0.2s ease;
}

.tx-hero .md-button--primary {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

.tx-hero .md-button--primary:hover {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
}

.tx-hero .md-button:hover {
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

/* ── Feature grid ──────────────────────────────────────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 61rem;
  margin: 1.2rem auto 2rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

.feature-grid .feature {
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.015);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[data-md-color-scheme="slate"] .feature-grid .feature {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

.feature-grid .feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-md-color-scheme="slate"] .feature-grid .feature:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.feature-grid .feature h3 {
  margin-top: 0;
  font-size: 1rem;
  font-weight: 600;
}

.feature-grid .feature p {
  margin-bottom: 0;
  font-size: 0.85rem;
  opacity: 0.75;
  line-height: 1.6;
}

/* ── Callout box ───────────────────────────────────────────────────── */

.callout {
  margin: 2.5rem 0;
  padding: 1.5rem 1.8rem;
  border-left: 3px solid var(--md-accent-fg-color);
  background: var(--md-code-bg-color);
  border-radius: 0 10px 10px 0;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ── Homepage bottom spacing ───────────────────────────────────────── */

article.md-content__inner:has(> .tx-hero:first-child) {
  padding-bottom: 3rem;
}

/* ── Responsive: tablet ────────────────────────────────────────────── */

@media screen and (max-width: 76.25em) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tx-hero {
    padding: 2rem max(1.5rem, calc(50% - 18rem)) 1.2rem;
  }
  .tx-hero h1 {
    font-size: 1.9rem;
  }
}

/* ── Responsive: phone ─────────────────────────────────────────────── */

@media screen and (max-width: 44.99em) {
  .tx-hero {
    padding: 1.5rem 1.2rem 1rem;
  }
  .tx-hero h1 {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  .tx-hero p {
    font-size: 0.9rem;
  }
  .tx-hero .md-button {
    display: block;
    margin-right: 0;
    margin-bottom: 0.5rem;
    text-align: center;
  }
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}

/* ── RTL support (Farsi) ───────────────────────────────────────────── */

[dir="rtl"] .feature-grid {
  direction: rtl;
}

[dir="rtl"] .tx-hero .md-button {
  margin-right: 0;
  margin-left: 0.6rem;
}

/* ── Comparison table ─────────────────────────────────────────────── */

/* Override Material's inline-block + overflow:auto on the table.
   Material uses .md-typeset table:not([class]) (0-2-1 specificity)
   and wraps tables in .md-typeset__scrollwrap (overflow:auto).
   Both create scroll containers that break position:sticky. */
.comparison-table .md-typeset__scrollwrap {
  overflow: visible;
}

.md-typeset .comparison-table table {
  display: table;
  width: 100%;
  overflow: visible;
  margin: 0 auto;
}

/* Teleproxy column highlight (column 3 = index 2, 0-based) */
.comparison-table th:nth-child(3),
.comparison-table td:nth-child(3) {
  background: rgba(61, 126, 166, 0.07);
}

[data-md-color-scheme="slate"] .comparison-table th:nth-child(3),
[data-md-color-scheme="slate"] .comparison-table td:nth-child(3) {
  background: rgba(108, 180, 217, 0.10);
}

/* Unique Teleproxy win — stronger green highlight */
.comparison-table td[data-tp-win="true"] {
  background: rgba(26, 127, 55, 0.12);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .comparison-table td[data-tp-win="true"] {
  background: rgba(63, 185, 80, 0.14);
}

/* Cell type colors */
.comparison-table td[data-cell-type="yes"] {
  color: #1a7f37;
}

.comparison-table td[data-cell-type="no"] {
  color: #8b949e;
  opacity: 0.7;
}

.comparison-table td[data-cell-type="partial"],
.comparison-table td[data-cell-type="weak"] {
  color: #9a6700;
}

[data-md-color-scheme="slate"] .comparison-table td[data-cell-type="yes"] {
  color: #3fb950;
}

[data-md-color-scheme="slate"] .comparison-table td[data-cell-type="no"] {
  color: #6e7681;
}

[data-md-color-scheme="slate"] .comparison-table td[data-cell-type="partial"],
[data-md-color-scheme="slate"] .comparison-table td[data-cell-type="weak"] {
  color: #d29922;
}

/* Sticky header — desktop only (Material wraps tables on mobile) */
@media (min-width: 60em) {
  .comparison-table table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .comparison-table thead th {
    position: sticky;
    top: var(--comparison-sticky-top, 2.4rem);
    z-index: 2;
    background: var(--md-default-bg-color);
    box-shadow: 0 1px 0 var(--md-default-fg-color--lightest);
  }

  /* Keep Teleproxy column tint on sticky header */
  .comparison-table thead th:nth-child(3) {
    background: color-mix(in srgb, var(--md-default-bg-color) 92%, #3d7ea6);
  }

  [data-md-color-scheme="slate"] .comparison-table thead th:nth-child(3) {
    background: color-mix(in srgb, var(--md-default-bg-color) 90%, #6cb4d9);
  }
}

@media print {
  .comparison-table thead th {
    position: static;
  }
}