    /* Comment Pill Callouts */
    .comment-pills-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 24px 0 36px;
      justify-content: center;
    }

    .comment-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      background: #ffffff;
      border: 1px solid var(--color-border);
      border-radius: 100px;
      font-size: 0.94rem;
      font-weight: 600;
      color: var(--color-text);
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
      cursor: default;
    }

    .comment-pill:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(200, 55, 171, 0.12);
      border-color: rgba(200, 55, 171, 0.35);
    }

    .comment-pill svg {
      width: 14px;
      height: 14px;
      fill: #C837AB;
    }


       /* ==========================================================================


       RESPONSIVE BREAKPOINTS & MOBILE PERFECTION (UI/UX PRO MAX)
       ========================================================================== */
    .overview-4-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 36px;
      text-align: left;
    }

    .equation-strip {
      max-width: 860px;
      margin: 0 auto 48px;
      background: #ffffff;
      border: 1px solid var(--color-border);
      border-radius: 18px;
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
    }

    .eq-step {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      color: var(--color-text);
      font-size: 0.94rem;
    }

    .eq-step.highlight-accent { 
      color: var(--color-accent); 
      font-weight: 800; 
    }

    .eq-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      color: var(--color-accent);
      font-size: 0.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
    }

    .eq-arrow {
      color: var(--color-accent);
      font-weight: 800;
      font-size: 1rem;
    }

    .section-trans-lead {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--color-text);
      text-align: center;
      margin: 32px auto 16px;
    }

    .link-types-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .link-type-card {
      background: #ffffff;
      border: 1px solid var(--color-border);
      border-radius: 14px;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      text-align: left;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
    }

    .link-type-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(37, 99, 235, 0.07);
      border-color: rgba(37, 99, 235, 0.3);
    }

    .link-type-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: rgba(37, 99, 235, 0.08);
      color: var(--color-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .link-type-title {
      font-size: 0.98rem;
      font-weight: 700;
      color: var(--color-text);
      margin: 0;
    }

    /* Hero Quick Flow Context */
    .hero-quick-flow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: #F8FAFC;
      border: 1px solid var(--color-border);
      border-radius: 14px;
      padding: 10px 18px;
      margin-bottom: 24px;
      font-size: 0.86rem;
      font-weight: 600;
      color: var(--color-text);
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    }

    .hero-quick-flow .qf-step {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .hero-quick-flow .qf-arrow {
      color: var(--color-accent);
      font-weight: 800;
      font-size: 0.95rem;
    }