/* Article-specific styles scoped under .article-page and .article-inner */

    .article-page {
      --article-background: #030A0F;
      --article-surface: #081821;
      --article-surface-high: #102A34;
      --article-accent: #18AFA3;
      --article-accent-muted: #164E49;
      --article-error: #EF4444;
      --article-text-primary: #FFFFFF;
      --article-text-secondary: #E2E8F0;
      --article-text-muted: #C0CBD8;
      --article-border: #2E6070;
      background: var(--background, var(--article-background));
      color: var(--text-primary, var(--article-text-primary));
    }

    .article-section {
      padding-top: 0;
    }

    .article-inner {
      max-width: 820px;
      margin: 0 auto;
      padding: 64px 32px 96px;
    }

    .article-inner .category {
      display: inline-block;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 11px;
      font-weight: 700;
      color: var(--accent, var(--article-accent));
      margin-bottom: 18px;
    }

    .article-inner h1 {
      max-width: 760px;
      font-family: inherit;
      font-size: clamp(34px, 6vw, 56px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.04em;
      margin-bottom: 30px;
      color: var(--text-primary, var(--article-text-primary));
    }

    .article-img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 24px;
      margin: 40px 0;
      border: 1px solid var(--border, var(--article-border));
      background: var(--surface, var(--article-surface));
    }

    .article-img--header {
      margin-top: 4px;
      margin-bottom: 56px;
    }

    .article-figure {
      margin: 40px 0;
    }

    .article-figure .article-img {
      margin: 0;
    }

    .article-caption {
      margin-top: 12px;
      font-size: 16px;
      line-height: 1.5;
      text-align: left;
      color: var(--text-muted, var(--article-text-muted));
    }

    .article-inner h2 {
      font-family: inherit;
      font-size: clamp(24px, 3.5vw, 34px);
      font-weight: 750;
      line-height: 1.18;
      letter-spacing: -0.03em;
      margin-top: 72px;
      margin-bottom: 22px;
      padding-left: 0;
      border-left: 0;
      color: var(--text-primary, var(--article-text-primary));
    }

    .article-inner h3 {
      font-size: 13px;
      font-weight: 750;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-top: 38px;
      margin-bottom: 12px;
      line-height: 1.4;
      color: var(--text-primary, var(--article-text-primary));
    }

    .article-inner p {
      line-height: 1.78;
      margin-bottom: 20px;
      font-size: 17px;
      color: var(--text-secondary, var(--article-text-secondary));
    }

	    .article-inner strong {
	  color: var(--text-primary, var(--article-text-primary));
	  font-weight: 700;
	}
	
	.article-inner a {
	  color: var(--accent, var(--article-accent));
	  font-weight: 700;
	  text-decoration: underline;
	  text-decoration-color: rgba(24, 175, 163, 0.45);
	  text-underline-offset: 3px;
	}
	
	.article-inner a:hover {
	  color: #22CFC1;
	  text-decoration-color: var(--accent, var(--article-accent));
	}

    .table-wrap {
      overflow-x: auto;
      margin: 32px 0;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--border, var(--article-border));
      border-radius: 20px;
      background: var(--surface, var(--article-surface));
    }

    .table-wrap table {
      width: 100%;
      border-collapse: collapse;
      font-size: 15px;
      min-width: 520px;
    }

    .table-wrap thead {
      background: var(--surface-high, var(--article-surface-high));
      color: var(--text-primary, var(--article-text-primary));
    }

    .table-wrap thead th {
      padding: 14px 16px;
      text-align: left;
      font-size: 12px;
      font-weight: 750;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      white-space: nowrap;
      border-bottom: 1px solid var(--border, var(--article-border));
    }

    .table-wrap tbody tr:nth-child(even) {
      background: rgba(24, 175, 163, 0.08);
    }

    .table-wrap tbody td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border, var(--article-border));
      vertical-align: top;
      line-height: 1.55;
      color: var(--text-secondary, var(--article-text-secondary));
    }

    .table-wrap tbody tr:last-child td {
      border-bottom: 0;
    }

    .session-list {
      list-style: none;
      padding: 0;
      margin: 28px 0 20px;
      counter-reset: session;
    }

    .session-list li {
      counter-increment: session;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 12px;
      padding: 18px 20px;
      line-height: 1.65;
      font-size: 17px;
      color: var(--text-secondary, var(--article-text-secondary));
      background: var(--surface, var(--article-surface));
      border: 1px solid var(--border, var(--article-border));
      border-radius: 18px;
    }

    .session-list li::before {
      content: counter(session);
      background: var(--accent, var(--article-accent));
      color: #030A0F;
      font-size: 12px;
      font-weight: 800;
      border-radius: 999px;
      min-width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .session-list li > div {
      min-width: 0;
    }

    .session-list li strong {
      display: block;
      margin-bottom: 4px;
      line-height: 1.35;
    }

    .mistakes-list {
      list-style: none;
      padding: 0;
      margin: 28px 0 20px;
    }

    .mistakes-list li {
      position: relative;
      padding: 16px 18px 16px 48px;
      margin-bottom: 10px;
      background: var(--surface, var(--article-surface));
      border: 1px solid var(--border, var(--article-border));
      border-radius: 18px;
      font-size: 16px;
      line-height: 1.65;
      color: var(--text-secondary, var(--article-text-secondary));
    }

    .mistakes-list li::before {
      content: "\2715";
      position: absolute;
      left: 18px;
      top: 18px;
      color: var(--error, var(--article-error));
      font-weight: 800;
      font-size: 13px;
    }

    .faq {
      margin-top: 16px;
      border: 1px solid var(--border, var(--article-border));
      border-radius: 22px;
      background: var(--surface, var(--article-surface));
      overflow: hidden;
    }

    .faq-item {
      padding: 24px 26px;
      border-bottom: 1px solid var(--border, var(--article-border));
    }

    .faq-item:last-child {
      border-bottom: 0;
    }

    .faq-item:first-child {
      border-top: 0;
    }

    .faq-q {
      font-family: inherit;
      font-size: 18px;
      font-weight: 750;
      margin-bottom: 10px;
      line-height: 1.4;
      color: var(--text-primary, var(--article-text-primary)) !important;
    }

    .faq-a {
      margin-bottom: 0 !important;
    }

    .conclusion {
      margin-top: 64px;
      padding: 34px 34px 30px;
      background: var(--surface, var(--article-surface));
      border: 1px solid var(--accent, var(--article-accent));
      border-radius: 24px;
    }

    .conclusion h2 {
      margin-top: 0 !important;
      border-left: none !important;
      padding-left: 0 !important;
    }

    .conclusion p:last-child {
      margin-bottom: 0;
    }

    .author-bio {
      margin-top: 28px;
      padding: 24px 26px;
      border: 1px solid var(--border, var(--article-border));
      border-radius: 20px;
      background: var(--surface, var(--article-surface));
    }

    .author-bio p {
      font-size: 14px !important;
      font-style: normal;
      opacity: 1;
      color: var(--text-muted, var(--article-text-muted));
      margin-bottom: 0 !important;
    }

    @media (max-width: 600px) {
      .article-inner {
        padding: 42px 20px 72px;
      }

      .article-inner h1 {
        font-size: clamp(32px, 12vw, 42px);
      }

      .article-inner h2 {
        margin-top: 56px;
      }

      .article-img {
        border-radius: 18px;
        margin: 32px 0;
      }

      .article-img--header {
        margin-bottom: 42px;
      }

      .article-figure {
        margin: 32px 0;
      }

      .article-caption {
        font-size: 15px;
      }

      .session-list li,
      .mistakes-list li,
      .faq-item,
      .conclusion,
      .author-bio {
        padding-left: 18px;
        padding-right: 18px;
      }

      .mistakes-list li {
        padding-left: 46px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }